refactor(ui): выровнять lists и domain detail под ResourcePage

Bulk toolbar на Frame/muted; availability на Field+Item; domain detail на CountedLineTabs; group detail с DetailPanel.

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

apps/web/src/components/domains/domain-availability-panel.tsx

@@ -18,20 +18,6 @@ import { LoadingButton } from '@/components/loading-button'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { QueryState } from '@/components/query-state'
 import { TableSkeleton } from '@/components/skeletons'
-import {
-  AppField,
-  AppFieldGroup,
-  AppFieldLabel,
-} from '@/components/app-field'
-import { AppInput } from '@/components/app-input'
-import {
-  AppItem,
-  AppItemActions,
-  AppItemContent,
-  AppItemGroup,
-  AppItemSeparator,
-  AppItemTitle,
-} from '@/components/app-item'
 import {
   Frame,
   FrameDescription,
@@ -40,6 +26,16 @@ import {
   FrameTitle,
 } from '@/components/reui/frame'
 import { Button } from '@cfdm/ui/components/button'
+import { Field, FieldGroup, FieldLabel } from '@cfdm/ui/components/field'
+import { Input } from '@cfdm/ui/components/input'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+} from '@cfdm/ui/components/item'
 import {
   Select,
   SelectContent,
@@ -178,21 +174,19 @@ export function DomainAvailabilityPanel({
               createMutation.mutate()
             }}
           >
-            <AppFieldGroup className="grid gap-4 sm:grid-cols-[1fr_10rem_auto] sm:items-end">
+            <FieldGroup className="grid gap-4 sm:grid-cols-[1fr_10rem_auto] sm:items-end">
-              <AppField>
+              <Field>
-                <AppFieldLabel htmlFor="monitor-hostname">
+                <FieldLabel htmlFor="monitor-hostname">Hostname</FieldLabel>
-                  Hostname
+                <Input
-                </AppFieldLabel>
-                <AppInput
                   id="monitor-hostname"
                   value={hostname}
                   placeholder="example.com"
                   onChange={(e) => setHostname(e.target.value)}
                   autoComplete="off"
                 />
-              </AppField>
+              </Field>
-              <AppField>
+              <Field>
-                <AppFieldLabel htmlFor="monitor-type">Тип</AppFieldLabel>
+                <FieldLabel htmlFor="monitor-type">Тип</FieldLabel>
                 <Select
                   items={MONITOR_TYPE_ITEMS}
                   value={monitorType}
@@ -213,7 +207,7 @@ export function DomainAvailabilityPanel({
                     ))}
                   </SelectContent>
                 </Select>
-              </AppField>
+              </Field>
               <LoadingButton
                 type="submit"
                 isLoading={createMutation.isPending}
@@ -223,7 +217,7 @@ export function DomainAvailabilityPanel({
                 <PlusIcon data-icon="inline-start" />
                 Добавить
               </LoadingButton>
-            </AppFieldGroup>
+            </FieldGroup>
           </form>
         </FramePanel>
       </Frame>
@@ -251,14 +245,14 @@ export function DomainAvailabilityPanel({
                 description="Добавьте hostname для проверки доступности"
               />
             ) : (
-              <AppItemGroup className="gap-0">
+              <ItemGroup className="gap-0">
                 {monitors.map((monitor, index) => (
                   <div key={monitor.id}>
-                    <AppItem size="sm" variant="muted" className="border-0 px-0">
+                    <Item size="sm" variant="muted" className="border-0 px-0">
-                      <AppItemContent className="gap-1">
+                      <ItemContent className="gap-1">
-                        <AppItemTitle className="font-mono">
+                        <ItemTitle className="font-mono">
                           {monitor.hostname}
-                        </AppItemTitle>
+                        </ItemTitle>
                         <div className="text-muted-foreground flex flex-wrap items-center gap-2 text-sm">
                           <span className="uppercase">
                             {monitorTypeLabel(monitor.type)}
@@ -271,8 +265,8 @@ export function DomainAvailabilityPanel({
                             <span>Ещё не проверялся</span>
                           )}
                         </div>
-                      </AppItemContent>
+                      </ItemContent>
-                      <AppItemActions className="gap-2">
+                      <ItemActions className="gap-2">
                         <HealthCheckBadge
                           status={monitor.last_status}
                           latencyMs={monitor.last_latency_ms}
@@ -299,14 +293,12 @@ export function DomainAvailabilityPanel({
                             </Button>
                           }
                         />
-                      </AppItemActions>
+                      </ItemActions>
-                    </AppItem>
+                    </Item>
-                    {index < monitors.length - 1 ? (
+                    {index < monitors.length - 1 ? <ItemSeparator /> : null}
-                      <AppItemSeparator />
-                    ) : null}
                   </div>
                 ))}
-              </AppItemGroup>
+              </ItemGroup>
             )}
           </QueryState>
         </FramePanel>

apps/web/src/components/domains/domains-bulk-toolbar.tsx

@@ -1,4 +1,6 @@
 import { useState } from 'react'
+import { Badge } from '@/components/reui/badge'
+import { Frame, FramePanel } from '@/components/reui/frame'
 import { Button } from '@cfdm/ui/components/button'
 import {
   Select,
@@ -42,10 +44,11 @@ export function DomainsBulkToolbar({
   ]
 
   return (
-    <div className="mb-3 flex flex-wrap items-center gap-2 rounded-lg border bg-muted/40 px-3 py-2">
+    <Frame dense spacing="sm" className="mb-3 w-full">
-      <span className="text-muted-foreground text-sm tabular-nums">
+      <FramePanel className="flex flex-wrap items-center gap-2 bg-muted/30">
-        Выбрано: {count}
+        <Badge size="sm" variant="secondary" className="tabular-nums">
-      </span>
+          {count} выбрано
+        </Badge>
         <Select
           items={groupItems}
           value={groupValue}
@@ -122,9 +125,16 @@ export function DomainsBulkToolbar({
         >
           + тег
         </Button>
-      <Button type="button" variant="ghost" size="sm" disabled={isPending} onClick={onClear}>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          disabled={isPending}
+          onClick={onClear}
+        >
           Снять выделение
         </Button>
-    </div>
+      </FramePanel>
+    </Frame>
   )
 }

apps/web/src/routes/_auth/domains/$domainId/index.tsx

@@ -24,6 +24,7 @@ import { useDomainPage } from '@/hooks/use-domain-page'
 import type { SubdomainTableRow } from '@/hooks/use-domain-page'
 import { PageShell } from '@/components/page-shell'
 import { QueryState } from '@/components/query-state'
+import { CountedLineTabs } from '@/components/counted-line-tabs'
 import { DetailPanel, ResourcePage } from '@/components/reui-kit'
 import {
   SUBDOMAIN_TABS,
@@ -53,12 +54,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@cfdm/ui/components/select'
-import {
+import { TabsContent } from '@cfdm/ui/components/tabs'
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@cfdm/ui/components/tabs'
 
 export const Route = createFileRoute('/_auth/domains/$domainId/')({
   loader: async ({ context: { queryClient }, params }) => {
@@ -327,50 +323,26 @@ function DomainOverviewPage() {
               actions={headerActions}
             />
 
-            <Tabs
+            <CountedLineTabs
+              tabs={[
+                { id: 'overview', label: 'Обзор' },
+                { id: 'dns', label: 'DNS' },
+                { id: 'availability', label: 'Доступность' },
+                {
+                  id: 'subdomains',
+                  label: 'Поддомены',
+                  count: subdomainRows.length,
+                },
+                {
+                  id: 'bindings',
+                  label: 'Привязки',
+                  count: bindings.length,
+                },
+              ]}
               value={activeTab}
               onValueChange={setActiveTab}
               className="flex w-full flex-col gap-4"
             >
-              <TabsList variant="line" className="gap-5">
-                <TabsTrigger
-                  value="overview"
-                  className="text-muted-foreground hover:text-foreground h-auto gap-2 px-0 pb-3 after:bottom-0"
-                >
-                  <span>Обзор</span>
-                </TabsTrigger>
-                <TabsTrigger
-                  value="dns"
-                  className="text-muted-foreground hover:text-foreground h-auto gap-2 px-0 pb-3 after:bottom-0"
-                >
-                  <span>DNS</span>
-                </TabsTrigger>
-                <TabsTrigger
-                  value="availability"
-                  className="text-muted-foreground hover:text-foreground h-auto gap-2 px-0 pb-3 after:bottom-0"
-                >
-                  <span>Доступность</span>
-                </TabsTrigger>
-                <TabsTrigger
-                  value="subdomains"
-                  className="text-muted-foreground hover:text-foreground h-auto gap-2 px-0 pb-3 after:bottom-0"
-                >
-                  <span>Поддомены</span>
-                  <span className="bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-md px-1.5 py-0.5 text-xs tabular-nums">
-                    {subdomainRows.length}
-                  </span>
-                </TabsTrigger>
-                <TabsTrigger
-                  value="bindings"
-                  className="text-muted-foreground hover:text-foreground h-auto gap-2 px-0 pb-3 after:bottom-0"
-                >
-                  <span>Привязки</span>
-                  <span className="bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-md px-1.5 py-0.5 text-xs tabular-nums">
-                    {bindings.length}
-                  </span>
-                </TabsTrigger>
-              </TabsList>
-
               <TabsContent value="overview" className="flex flex-col gap-4">
                 <DetailPanel.Metrics cards={metricCards} />
                 <DetailPanel.Section
@@ -438,7 +410,6 @@ function DomainOverviewPage() {
               </TabsContent>
 
               <TabsContent value="subdomains" className="flex flex-col gap-4">
-                <DetailPanel.Section title="Поддомены">
                 <ResourcePage
                   title="Поддомены"
                   description={`Записи в зоне ${domain.zone_name}`}
@@ -470,18 +441,12 @@ function DomainOverviewPage() {
                     ),
                   }}
                 />
-                </DetailPanel.Section>
               </TabsContent>
 
               <TabsContent value="bindings" className="flex flex-col gap-4">
-                <DetailPanel.Section
-                  title="Привязки сервисов"
-                  description="Сервисы, назначенные hostname в этой зоне"
-                >
                 <DomainBindingsCard bindings={bindings} />
-                </DetailPanel.Section>
               </TabsContent>
-            </Tabs>
+            </CountedLineTabs>
 
             <SubdomainEditSheet
               mode={sheetMode}

apps/web/src/routes/_auth/groups/$groupId.tsx

@@ -1,13 +1,14 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { FolderTreeIcon, GlobeIcon, HashIcon } from 'lucide-react'
 import type { Filter } from '@/components/reui/filters'
 import {
   domainsListQueryOptions,
   groupDetailQueryOptions,
 } from '@/queries'
 import { PageShell } from '@/components/page-shell'
-import { ResourcePage } from '@/components/reui-kit'
+import { DetailPanel, ResourcePage } from '@/components/reui-kit'
 import {
   createDefaultGroupDomainFilters,
   groupDomainFilterFieldValue,
@@ -52,21 +53,76 @@ function GroupDetailPage() {
   const filterFields = useGroupDomainFilterFields()
   const columns = useGroupDomainColumns()
 
-  const primaryAction = (
+  const headerActions = (
     <Button variant="outline" nativeButton={false} render={<Link to="/groups" />}>
       К группам
     </Button>
   )
 
+  const metricCards = useMemo(() => {
+    if (!group) return []
+    return [
+      {
+        id: 'domains',
+        icon: <GlobeIcon aria-hidden="true" />,
+        label: 'Домены',
+        description: 'Зоны в этой группе',
+        footer: (
+          <span className="text-foreground text-lg font-semibold tabular-nums">
+            {group.domain_count}
+          </span>
+        ),
+      },
+      {
+        id: 'slug',
+        icon: <HashIcon aria-hidden="true" />,
+        label: 'Slug',
+        description: 'Идентификатор группы',
+        footer: (
+          <span className="text-foreground font-mono text-sm">{group.slug}</span>
+        ),
+      },
+      {
+        id: 'group',
+        icon: <FolderTreeIcon aria-hidden="true" />,
+        label: 'Группа',
+        description: group.name,
+        footer: (
+          <Button
+            variant="link"
+            className="h-auto p-0"
+            nativeButton={false}
+            render={<Link to="/groups" search={{ view: 'board' }} />}
+          >
+            Открыть канбан
+          </Button>
+        ),
+      },
+    ]
+  }, [group])
+
   return (
     <PageShell>
-      <ResourcePage
+      <DetailPanel>
+        <DetailPanel.Header
           title={group?.name ?? 'Группа'}
           description={
             group
               ? `${group.domain_count} домен(ов) · slug: ${group.slug}`
               : 'Домены в группе'
           }
+          actions={headerActions}
+        />
+
+        {!isLoading && group ? (
+          <DetailPanel.Metrics cards={metricCards} />
+        ) : null}
+
+        <DetailPanel.Section>
+          <ResourcePage
+            title="Домены группы"
+            description="Зоны, назначенные в эту группу"
+            hideHeader
             filterFields={filterFields}
             filters={filters}
             onFiltersChange={setFilters}
@@ -82,18 +138,23 @@ function GroupDetailPage() {
               void refetchGroup()
               void refetchDomains()
             }}
-        primaryAction={primaryAction}
             emptyState={{
               title: 'В группе нет доменов',
               description:
                 'Перетащите домены на канбане групп или назначьте группу при импорте',
               action: (
-            <Button variant="outline" nativeButton={false} render={<Link to="/groups" />}>
+                <Button
+                  variant="outline"
+                  nativeButton={false}
+                  render={<Link to="/groups" />}
+                >
                   Открыть канбан групп
                 </Button>
               ),
             }}
           />
+        </DetailPanel.Section>
+      </DetailPanel>
     </PageShell>
   )
 }