fix(ui): выровнять health-check плитки и тип TCP/HTTP под ReUI

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/health-check-config-fields.tsx

@@ -18,7 +18,9 @@ import {
 } from '@cfdm/ui/components/select'
 import { Switch } from '@cfdm/ui/components/switch'
 import { FieldGroup } from '@cfdm/ui/components/field'
-import { ToggleGroup, ToggleGroupItem } from '@cfdm/ui/components/toggle-group'
+import { Button } from '@cfdm/ui/components/button'
+import { ButtonGroup } from '@cfdm/ui/components/button-group'
+import { CableIcon, GlobeIcon } from 'lucide-react'
 import { cn } from '@cfdm/ui/lib/utils'
 import {
   HealthAggregateTiles,
@@ -215,28 +217,30 @@ export function HealthCheckConfigFields({
         <div className="flex flex-col gap-3 pt-1 pb-1">
           <div className="grid grid-cols-2 gap-3">
             <FormFieldSimple label="Тип" htmlFor={`${idPrefix}-type`}>
-              <ToggleGroup
+              <ButtonGroup id={`${idPrefix}-type`} className="w-full min-w-0">
-                id={`${idPrefix}-type`}
+                <Button
-                variant="outline"
+                  type="button"
-                size="sm"
+                  size="sm"
-                spacing={0}
+                  variant={value.type === 'tcp' ? 'secondary' : 'outline'}
-                multiple={false}
+                  className="flex-1"
-                className="w-full min-w-0"
+                  aria-pressed={value.type === 'tcp'}
-                value={[value.type]}
+                  onClick={() => patch({ type: 'tcp' })}
-                onValueChange={(next) => {
+                >
-                  const picked = next[0]
+                  <CableIcon data-icon="inline-start" />
-                  if (picked === 'tcp' || picked === 'http') {
-                    patch({ type: picked })
-                  }
-                }}
-              >
-                <ToggleGroupItem value="tcp" className="flex-1">
                   TCP
-                </ToggleGroupItem>
+                </Button>
-                <ToggleGroupItem value="http" className="flex-1">
+                <Button
+                  type="button"
+                  size="sm"
+                  variant={value.type === 'http' ? 'secondary' : 'outline'}
+                  className="flex-1"
+                  aria-pressed={value.type === 'http'}
+                  onClick={() => patch({ type: 'http' })}
+                >
+                  <GlobeIcon data-icon="inline-start" />
                   HTTP
-                </ToggleGroupItem>
+                </Button>
-              </ToggleGroup>
+              </ButtonGroup>
             </FormFieldSimple>
 
             <FormFieldSimple label="Порт" htmlFor={`${idPrefix}-port`}>

apps/web/src/components/reui-kit/health-source-tiles.tsx

@@ -1,11 +1,19 @@
 import type { KeyboardEvent, ReactNode } from 'react'
-import { CheckIcon, ServerIcon, LayersIcon, ShieldAlertIcon, ScaleIcon } from 'lucide-react'
+import { ServerIcon, LayersIcon, ShieldAlertIcon, ScaleIcon } from 'lucide-react'
 
 import { Frame, FramePanel } from '@/components/reui/frame'
 import { IconTile } from '@/components/reui/icon-tile'
+import { Badge } from '@/components/reui/badge'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from '@cfdm/ui/components/item'
 import { cn } from '@cfdm/ui/lib/utils'
 import type { HealthCheckAggregate, HealthCheckProvider } from '@cfdm/shared'
-import { kpiCols } from './kpi-cols'
 
 export type HealthProvider = HealthCheckProvider
 export type HealthAggregate = HealthCheckAggregate
@@ -103,7 +111,7 @@ function handleTileKeyDown(onActivate: () => void, event: KeyboardEvent<HTMLDivE
   }
 }
 
-function TilePanel({
+function ChoicePanel({
   selected,
   title,
   description,
@@ -122,53 +130,56 @@ function TilePanel({
 }) {
   return (
     <FramePanel
+      fit
       role={role}
       aria-checked={selected}
       aria-pressed={selected}
       tabIndex={0}
       className={cn(
-        'relative isolate flex min-w-0 cursor-pointer flex-col p-3 transition-colors',
+        'min-w-0 cursor-pointer transition-colors',
         'hover:bg-muted/40 focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',
-        selected && 'ring-ring ring-1',
+        selected && 'bg-muted/40',
       )}
       onClick={onActivate}
       onKeyDown={(event) => handleTileKeyDown(onActivate, event)}
     >
-      <div className="relative z-10 flex min-w-0 items-start gap-3">
+      <Item size="sm" className="w-full min-w-0 border-0 p-0">
-        <IconTile
+        <ItemMedia>
-          variant="elevated"
+          <IconTile
-          aria-hidden="true"
+            variant="elevated"
-          className={cn('size-10.5 shrink-0', iconClassName ?? DEFAULT_ICON_CLASS)}
+            aria-hidden="true"
-        >
+            className={cn('size-10.5', iconClassName ?? DEFAULT_ICON_CLASS)}
-          {icon}
+          >
-        </IconTile>
+            {icon}
-        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          </IconTile>
-          <div className="flex min-w-0 items-start justify-between gap-2">
+        </ItemMedia>
-            <span className="text-foreground truncate text-sm font-medium">{title}</span>
+        <ItemContent className="min-w-0 gap-0.5">
-            {selected ? (
+          <ItemTitle className="w-full min-w-0">{title}</ItemTitle>
-              <CheckIcon className="text-foreground size-4 shrink-0" aria-hidden />
+          <ItemDescription>{description}</ItemDescription>
-            ) : null}
+        </ItemContent>
-          </div>
+        {selected ? (
-          <p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
+          <ItemActions className="shrink-0">
-            {description}
+            <Badge variant="outline" size="sm">
-          </p>
+              Выбрано
-        </div>
+            </Badge>
-      </div>
+          </ItemActions>
+        ) : null}
+      </Item>
     </FramePanel>
   )
 }
 
-function TileGrid({ children, count }: { children: ReactNode; count: number }) {
+function ChoiceFrame({ children }: { children: ReactNode }) {
   return (
-    <Frame dense spacing="sm" className="@container w-full min-w-0 overflow-hidden">
+    <Frame stacked spacing="sm" className="w-full min-w-0">
-      <div className={cn('grid min-w-0 gap-2', kpiCols(count))}>{children}</div>
+      {children}
     </Frame>
   )
 }
 
 /**
  * Мультивыбор источников проб (Local / Cloudflare / Globalping).
- * Preview: https://reui.io/preview/base/card-12 · https://reui.io/preview/base/stats-12
+ * Preview: https://reui.io/preview/base/list-9 · https://reui.io/preview/base/stats-12
  * Docs: https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/icon-tile
  */
 export function HealthSourceTiles({
@@ -190,9 +201,9 @@ export function HealthSourceTiles({
   }
 
   return (
-    <TileGrid count={PROVIDER_ITEMS.length}>
+    <ChoiceFrame>
       {PROVIDER_ITEMS.map((item) => (
-        <TilePanel
+        <ChoicePanel
           key={item.id}
           selected={selected.includes(item.id)}
           title={item.title}
@@ -203,13 +214,13 @@ export function HealthSourceTiles({
           onActivate={() => toggle(item.id)}
         />
       ))}
-    </TileGrid>
+    </ChoiceFrame>
   )
 }
 
 /**
  * Правило агрегации (ровно одно): any / all / majority.
- * Preview: https://reui.io/preview/base/card-12 · https://reui.io/preview/base/settings-5
+ * Preview: https://reui.io/preview/base/list-9 · https://reui.io/preview/base/settings-5
  */
 export function HealthAggregateTiles({
   value,
@@ -220,9 +231,9 @@ export function HealthAggregateTiles({
 }) {
   const selected = value || 'majority'
   return (
-    <TileGrid count={AGGREGATE_ITEMS.length}>
+    <ChoiceFrame>
       {AGGREGATE_ITEMS.map((item) => (
-        <TilePanel
+        <ChoicePanel
           key={item.id}
           selected={selected === item.id}
           title={item.title}
@@ -232,6 +243,6 @@ export function HealthAggregateTiles({
           onActivate={() => onChange(item.id)}
         />
       ))}
-    </TileGrid>
+    </ChoiceFrame>
   )
 }