From 9b9dcc3b1230d1fba47b215d58b7644a46c89188 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Wed, 19 Aug 2026 20:04:09 +0700
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=D0=B2=D1=8B=D1=80=D0=BE=D0=B2=D0=BD?=
 =?UTF-8?q?=D1=8F=D1=82=D1=8C=20health-check=20=D0=BF=D0=BB=D0=B8=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=B8=20=D1=82=D0=B8=D0=BF=20TCP/HTTP=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B4=20ReUI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/health-check-config-fields.tsx | 46 +++++-----
 .../reui-kit/health-source-tiles.tsx          | 83 +++++++++++--------
 2 files changed, 72 insertions(+), 57 deletions(-)

diff --git a/apps/web/src/components/health-check-config-fields.tsx b/apps/web/src/components/health-check-config-fields.tsx
index cbe63aa..806d473 100644
--- a/apps/web/src/components/health-check-config-fields.tsx
+++ b/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
-                id={`${idPrefix}-type`}
-                variant="outline"
-                size="sm"
-                spacing={0}
-                multiple={false}
-                className="w-full min-w-0"
-                value={[value.type]}
-                onValueChange={(next) => {
-                  const picked = next[0]
-                  if (picked === 'tcp' || picked === 'http') {
-                    patch({ type: picked })
-                  }
-                }}
-              >
-                <ToggleGroupItem value="tcp" className="flex-1">
+              <ButtonGroup id={`${idPrefix}-type`} className="w-full min-w-0">
+                <Button
+                  type="button"
+                  size="sm"
+                  variant={value.type === 'tcp' ? 'secondary' : 'outline'}
+                  className="flex-1"
+                  aria-pressed={value.type === 'tcp'}
+                  onClick={() => patch({ type: 'tcp' })}
+                >
+                  <CableIcon data-icon="inline-start" />
                   TCP
-                </ToggleGroupItem>
-                <ToggleGroupItem value="http" className="flex-1">
+                </Button>
+                <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>
-              </ToggleGroup>
+                </Button>
+              </ButtonGroup>
             </FormFieldSimple>
 
             <FormFieldSimple label="Порт" htmlFor={`${idPrefix}-port`}>
diff --git a/apps/web/src/components/reui-kit/health-source-tiles.tsx b/apps/web/src/components/reui-kit/health-source-tiles.tsx
index 47e22d1..90a3e1a 100644
--- a/apps/web/src/components/reui-kit/health-source-tiles.tsx
+++ b/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">
-        <IconTile
-          variant="elevated"
-          aria-hidden="true"
-          className={cn('size-10.5 shrink-0', iconClassName ?? DEFAULT_ICON_CLASS)}
-        >
-          {icon}
-        </IconTile>
-        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-          <div className="flex min-w-0 items-start justify-between gap-2">
-            <span className="text-foreground truncate text-sm font-medium">{title}</span>
-            {selected ? (
-              <CheckIcon className="text-foreground size-4 shrink-0" aria-hidden />
-            ) : null}
-          </div>
-          <p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
-            {description}
-          </p>
-        </div>
-      </div>
+      <Item size="sm" className="w-full min-w-0 border-0 p-0">
+        <ItemMedia>
+          <IconTile
+            variant="elevated"
+            aria-hidden="true"
+            className={cn('size-10.5', iconClassName ?? DEFAULT_ICON_CLASS)}
+          >
+            {icon}
+          </IconTile>
+        </ItemMedia>
+        <ItemContent className="min-w-0 gap-0.5">
+          <ItemTitle className="w-full min-w-0">{title}</ItemTitle>
+          <ItemDescription>{description}</ItemDescription>
+        </ItemContent>
+        {selected ? (
+          <ItemActions className="shrink-0">
+            <Badge variant="outline" size="sm">
+              Выбрано
+            </Badge>
+          </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">
-      <div className={cn('grid min-w-0 gap-2', kpiCols(count))}>{children}</div>
+    <Frame stacked spacing="sm" className="w-full min-w-0">
+      {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>
   )
 }