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

Bulk toolbar на Frame/muted; availability на Field+Item; domain detail на CountedLineTabs; group detail с DetailPanel. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-17 13:52:20 +07:00
parent 57ee231417
commit 52edc3ba73
4 changed files with 270 additions and 242 deletions
@@ -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">
-              <AppField>
-                <AppFieldLabel htmlFor="monitor-hostname">
-                  Hostname
-                </AppFieldLabel>
-                <AppInput
+            <FieldGroup className="grid gap-4 sm:grid-cols-[1fr_10rem_auto] sm:items-end">
+              <Field>
+                <FieldLabel htmlFor="monitor-hostname">Hostname</FieldLabel>
+                <Input
                  id="monitor-hostname"
                  value={hostname}
                  placeholder="example.com"
                  onChange={(e) => setHostname(e.target.value)}
                  autoComplete="off"
                />
-              </AppField>
-              <AppField>
-                <AppFieldLabel htmlFor="monitor-type">Тип</AppFieldLabel>
+              </Field>
+              <Field>
+                <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">
-                      <AppItemContent className="gap-1">
-                        <AppItemTitle className="font-mono">
+                    <Item size="sm" variant="muted" className="border-0 px-0">
+                      <ItemContent className="gap-1">
+                        <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>
-                      <AppItemActions className="gap-2">
+                      </ItemContent>
+                      <ItemActions className="gap-2">
                        <HealthCheckBadge
                          status={monitor.last_status}
                          latencyMs={monitor.last_latency_ms}
@@ -299,14 +293,12 @@ export function DomainAvailabilityPanel({
                            </Button>
                          }
                        />
-                      </AppItemActions>
-                    </AppItem>
-                    {index < monitors.length - 1 ? (
-                      <AppItemSeparator />
-                    ) : null}
+                      </ItemActions>
+                    </Item>
+                    {index < monitors.length - 1 ? <ItemSeparator /> : null}
                  </div>
                ))}
-              </AppItemGroup>
+              </ItemGroup>
            )}
          </QueryState>
        </FramePanel>
@@ -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,89 +44,97 @@ 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">
-      <span className="text-muted-foreground text-sm tabular-nums">
-        Выбрано: {count}
-      </span>
-      <Select
-        items={groupItems}
-        value={groupValue}
-        onValueChange={(v) => setGroupValue(v ?? 'none')}
-      >
-        <SelectTrigger className="w-44" size="sm">
-          <SelectValue placeholder="Группа" />
-        </SelectTrigger>
-        <SelectContent>
-          {groupItems.map((item) => (
-            <SelectItem key={item.value} value={item.value}>
-              {item.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        disabled={isPending}
-        onClick={() =>
-          onAssignGroup(groupValue === 'none' ? null : Number(groupValue))
-        }
-      >
-        В группу
-      </Button>
-      <Select
-        items={envItems}
-        value={envValue}
-        onValueChange={(v) => setEnvValue(v ?? 'none')}
-      >
-        <SelectTrigger className="w-32" size="sm">
-          <SelectValue placeholder="Env" />
-        </SelectTrigger>
-        <SelectContent>
-          {envItems.map((item) => (
-            <SelectItem key={item.value} value={item.value}>
-              {item.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        disabled={isPending}
-        onClick={() =>
-          onSetEnvironment(
-            envValue === 'none'
-              ? null
-              : (envValue as 'prod' | 'staging' | 'dev'),
-          )
-        }
-      >
-        Env
-      </Button>
-      <Input
-        className="h-8 w-32"
-        placeholder="тег"
-        value={tag}
-        onChange={(e) => setTag(e.target.value)}
-      />
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        disabled={isPending || !tag.trim()}
-        onClick={() => {
-          onAddTag(tag.trim())
-          setTag('')
-        }}
-      >
-        + тег
-      </Button>
-      <Button type="button" variant="ghost" size="sm" disabled={isPending} onClick={onClear}>
-        Снять выделение
-      </Button>
-    </div>
+    <Frame dense spacing="sm" className="mb-3 w-full">
+      <FramePanel className="flex flex-wrap items-center gap-2 bg-muted/30">
+        <Badge size="sm" variant="secondary" className="tabular-nums">
+          {count} выбрано
+        </Badge>
+        <Select
+          items={groupItems}
+          value={groupValue}
+          onValueChange={(v) => setGroupValue(v ?? 'none')}
+        >
+          <SelectTrigger className="w-44" size="sm">
+            <SelectValue placeholder="Группа" />
+          </SelectTrigger>
+          <SelectContent>
+            {groupItems.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={isPending}
+          onClick={() =>
+            onAssignGroup(groupValue === 'none' ? null : Number(groupValue))
+          }
+        >
+          В группу
+        </Button>
+        <Select
+          items={envItems}
+          value={envValue}
+          onValueChange={(v) => setEnvValue(v ?? 'none')}
+        >
+          <SelectTrigger className="w-32" size="sm">
+            <SelectValue placeholder="Env" />
+          </SelectTrigger>
+          <SelectContent>
+            {envItems.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={isPending}
+          onClick={() =>
+            onSetEnvironment(
+              envValue === 'none'
+                ? null
+                : (envValue as 'prod' | 'staging' | 'dev'),
+            )
+          }
+        >
+          Env
+        </Button>
+        <Input
+          className="h-8 w-32"
+          placeholder="тег"
+          value={tag}
+          onChange={(e) => setTag(e.target.value)}
+        />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={isPending || !tag.trim()}
+          onClick={() => {
+            onAddTag(tag.trim())
+            setTag('')
+          }}
+        >
+          + тег
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          disabled={isPending}
+          onClick={onClear}
+        >
+          Снять выделение
+        </Button>
+      </FramePanel>
+    </Frame>
  )
 }
@@ -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 {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@cfdm/ui/components/tabs'
+import { TabsContent } 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,50 +410,43 @@ function DomainOverviewPage() {
              </TabsContent>

              <TabsContent value="subdomains" className="flex flex-col gap-4">
-                <DetailPanel.Section title="Поддомены">
-                  <ResourcePage
-                    title="Поддомены"
-                    description={`Записи в зоне ${domain.zone_name}`}
-                    hideHeader
-                    tabs={SUBDOMAIN_TABS.map((tab) => ({ ...tab }))}
-                    tabFilter={subdomainTabFilter}
-                    filterFields={filterFields}
-                    filters={filters}
-                    onFiltersChange={setFilters}
-                    onClearFilters={() =>
-                      setFilters(createDefaultSubdomainFilters())
-                    }
-                    getFilterFieldValue={subdomainFilterFieldValue}
-                    columns={columns}
-                    data={subdomainRows}
-                    getRowId={(row) => String(row.subdomain.id)}
-                    toolbarExtra={
+                <ResourcePage
+                  title="Поддомены"
+                  description={`Записи в зоне ${domain.zone_name}`}
+                  hideHeader
+                  tabs={SUBDOMAIN_TABS.map((tab) => ({ ...tab }))}
+                  tabFilter={subdomainTabFilter}
+                  filterFields={filterFields}
+                  filters={filters}
+                  onFiltersChange={setFilters}
+                  onClearFilters={() =>
+                    setFilters(createDefaultSubdomainFilters())
+                  }
+                  getFilterFieldValue={subdomainFilterFieldValue}
+                  columns={columns}
+                  data={subdomainRows}
+                  getRowId={(row) => String(row.subdomain.id)}
+                  toolbarExtra={
+                    <Button type="button" onClick={openCreateSheet}>
+                      Добавить поддомен
+                    </Button>
+                  }
+                  emptyState={{
+                    title: 'Поддомены не созданы',
+                    description: 'Добавьте поддомен для привязки сервисов',
+                    action: (
                      <Button type="button" onClick={openCreateSheet}>
                        Добавить поддомен
                      </Button>
-                    }
-                    emptyState={{
-                      title: 'Поддомены не созданы',
-                      description: 'Добавьте поддомен для привязки сервисов',
-                      action: (
-                        <Button type="button" onClick={openCreateSheet}>
-                          Добавить поддомен
-                        </Button>
-                      ),
-                    }}
-                  />
-                </DetailPanel.Section>
+                    ),
+                  }}
+                />
              </TabsContent>

              <TabsContent value="bindings" className="flex flex-col gap-4">
-                <DetailPanel.Section
-                  title="Привязки сервисов"
-                  description="Сервисы, назначенные hostname в этой зоне"
-                >
-                  <DomainBindingsCard bindings={bindings} />
-                </DetailPanel.Section>
+                <DomainBindingsCard bindings={bindings} />
              </TabsContent>
-            </Tabs>
+            </CountedLineTabs>

            <SubdomainEditSheet
              mode={sheetMode}
@@ -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,48 +53,108 @@ 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
-        title={group?.name ?? 'Группа'}
-        description={
-          group
-            ? `${group.domain_count} домен(ов) · slug: ${group.slug}`
-            : 'Домены в группе'
-        }
-        filterFields={filterFields}
-        filters={filters}
-        onFiltersChange={setFilters}
-        onClearFilters={() => setFilters(createDefaultGroupDomainFilters())}
-        getFilterFieldValue={groupDomainFilterFieldValue}
-        columns={columns}
-        data={domains ?? []}
-        getRowId={(row) => String(row.id)}
-        isLoading={isLoading}
-        isError={isError}
-        error={error}
-        onRetry={() => {
-          void refetchGroup()
-          void refetchDomains()
-        }}
-        primaryAction={primaryAction}
-        emptyState={{
-          title: 'В группе нет доменов',
-          description:
-            'Перетащите домены на канбане групп или назначьте группу при импорте',
-          action: (
-            <Button variant="outline" nativeButton={false} render={<Link to="/groups" />}>
-              Открыть канбан групп
-            </Button>
-          ),
-        }}
-      />
+      <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}
+            onClearFilters={() => setFilters(createDefaultGroupDomainFilters())}
+            getFilterFieldValue={groupDomainFilterFieldValue}
+            columns={columns}
+            data={domains ?? []}
+            getRowId={(row) => String(row.id)}
+            isLoading={isLoading}
+            isError={isError}
+            error={error}
+            onRetry={() => {
+              void refetchGroup()
+              void refetchDomains()
+            }}
+            emptyState={{
+              title: 'В группе нет доменов',
+              description:
+                'Перетащите домены на канбане групп или назначьте группу при импорте',
+              action: (
+                <Button
+                  variant="outline"
+                  nativeButton={false}
+                  render={<Link to="/groups" />}
+                >
+                  Открыть канбан групп
+                </Button>
+              ),
+            }}
+          />
+        </DetailPanel.Section>
+      </DetailPanel>
    </PageShell>
  )
 }