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

Co-authored-by: Cursor <[email protected]>
2026-08-19 20:04:09 +07:00
parent 6008cd763a
commit 9b9dcc3b12
2 changed files with 72 additions and 57 deletions
@@ -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`}>
@@ -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>
  )
 }