feat(ui): добавить новый маршрут и интерфейс для настроек внешнего вида

Добавлен новый маршрут для страницы настроек внешнего вида в интерфейсе. Обновлены компоненты навигации и заголовка для поддержки нового маршрута. Включены изменения в документацию и интерфейсы для отображения новых элементов управления. Также добавлена поддержка отображения быстрого доступа к разделам в панели управления.

apps/web/src/components/app-sidebar.tsx

@@ -31,7 +31,7 @@ const infrastructureNav = [
 const operationsNav = [
   { to: '/services', label: 'Сервисы', icon: ServerIcon, exact: false },
   { to: '/certificates', label: 'Сертификаты', icon: ShieldCheckIcon, exact: false },
-  { to: '/settings/integrations', label: 'Настройки', icon: SettingsIcon, exact: false, matchPrefix: '/settings' },
+  { to: '/settings/appearance', label: 'Настройки', icon: SettingsIcon, exact: false, matchPrefix: '/settings' },
 ] as const
 
 function isNavActive(

apps/web/src/components/layout/site-header.tsx

@@ -9,6 +9,7 @@ import {
   BreadcrumbSeparator,
 } from '@cfdm/ui/components/breadcrumb'
 import { ModeToggle } from '@/components/mode-toggle'
+import { SystemMonitorPopover } from '@/components/layout/system-monitor-popover'
 import { AppsMenu } from '@/components/layout/apps-menu'
 import { SearchMenu } from '@/components/layout/search-menu'
 import { SidebarTrigger } from '@cfdm/ui/components/sidebar'
@@ -23,6 +24,7 @@ const routeTitles: Record<string, string> = {
   '/groups': 'Группы доменов',
   '/services': 'Сервисы',
   '/certificates': 'Сертификаты',
+  '/settings/appearance': 'Внешний вид',
   '/settings/integrations': 'Интеграции',
 }
 
@@ -60,10 +62,12 @@ function getBreadcrumbs(
 
   if (pathname.startsWith('/settings')) {
     return [
-      { label: 'Настройки', href: '/settings/integrations' },
+      { label: 'Настройки', href: '/settings/appearance' },
       ...(pathname === '/settings/integrations'
         ? [{ label: 'Интеграции', href: pathname }]
-        : []),
+        : pathname === '/settings/appearance'
+          ? [{ label: 'Внешний вид', href: pathname }]
+          : []),
     ]
   }
 
@@ -127,6 +131,7 @@ export function SiteHeader() {
       <div className="text-muted-foreground [&_button_svg]:text-muted-foreground [&_button:active_svg]:text-foreground! [&_button:hover>span>svg]:text-foreground! [&_button:hover>svg]:text-foreground! [&_button[aria-expanded=true]_svg]:text-foreground! [&_button[data-popup-open]_svg]:text-foreground! ml-auto flex items-center gap-2">
         <SearchMenu />
         <AppsMenu />
+        <SystemMonitorPopover />
         <ModeToggle />
       </div>
     </header>

apps/web/src/components/layout/system-monitor-popover.tsx

@@ -0,0 +1,255 @@
+import { useMemo, type CSSProperties, type ReactNode } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import {
+  Activity,
+  HeartPulse,
+  ListChecks,
+  Server,
+  ShieldCheck,
+} from 'lucide-react'
+
+import { Badge } from '@/components/reui/badge'
+import { cn } from '@cfdm/ui/lib/utils'
+import { Item, ItemMedia } from '@cfdm/ui/components/item'
+import { Popover, PopoverContent, PopoverTrigger } from '@cfdm/ui/components/popover'
+import { Progress } from '@cfdm/ui/components/progress'
+
+import {
+  certSummaryQueryOptions,
+  domainsListQueryOptions,
+  notificationLogQueryOptions,
+  serviceGroupsQueryOptions,
+} from '@/queries'
+
+type MonitorMetric = {
+  id: string
+  label: string
+  value: string
+  unit: string
+  percent: number
+  icon: ReactNode
+  tone: 'success' | 'warning' | 'destructive' | 'info'
+  alert: boolean
+}
+
+type ReadyResponse = {
+  status: string
+  database?: boolean
+  cloudflare?: boolean
+}
+
+function toneColor(tone: MonitorMetric['tone']) {
+  switch (tone) {
+    case 'success':
+      return 'var(--color-success)'
+    case 'warning':
+      return 'var(--color-warning)'
+    case 'destructive':
+      return 'var(--color-destructive)'
+    default:
+      return 'var(--color-info)'
+  }
+}
+
+function MetricCell({ metric }: { metric: MonitorMetric }) {
+  const color = toneColor(metric.tone)
+  return (
+    <div className="flex flex-col gap-2 p-3">
+      <div className="flex items-center justify-between gap-1">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <Item
+            className="flex size-5 shrink-0 items-center justify-center p-0"
+            style={{ backgroundColor: `${color}18` }}
+          >
+            <ItemMedia variant="icon" className="size-auto" style={{ color }}>
+              {metric.icon}
+            </ItemMedia>
+          </Item>
+          <span className="text-muted-foreground truncate text-[11px]">{metric.label}</span>
+        </div>
+        <span className="shrink-0 text-xs font-semibold tabular-nums" style={{ color }}>
+          {metric.value}
+          <span className="text-muted-foreground ml-0.5 text-[10px] font-normal">{metric.unit}</span>
+        </span>
+      </div>
+      <Progress
+        value={metric.percent}
+        className="**:data-[slot=progress-indicator]:bg-(--bar-color) **:data-[slot=progress-track]:h-1"
+        style={{ '--bar-color': color } as CSSProperties}
+      />
+    </div>
+  )
+}
+
+function countByStatus(summary: [string, number][] | undefined, statuses: string[]) {
+  if (!summary) return 0
+  return summary
+    .filter(([status]) => statuses.includes(status))
+    .reduce((sum, [, count]) => sum + count, 0)
+}
+
+/** Live system monitor popover (app-shell pattern, CFDM API data). */
+export function SystemMonitorPopover() {
+  const readyQ = useQuery({
+    queryKey: ['ready'],
+    queryFn: async (): Promise<ReadyResponse> => {
+      const res = await fetch('/ready')
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      return res.json() as Promise<ReadyResponse>
+    },
+    refetchInterval: 30_000,
+  })
+  const servicesQ = useQuery({ ...serviceGroupsQueryOptions(), refetchInterval: 30_000 })
+  const certsQ = useQuery({ ...certSummaryQueryOptions(), refetchInterval: 30_000 })
+  const domainsQ = useQuery({ ...domainsListQueryOptions(), refetchInterval: 30_000 })
+  const notifyQ = useQuery({ ...notificationLogQueryOptions(20), refetchInterval: 30_000 })
+
+  const readyOk = readyQ.data?.status === 'ready' && readyQ.isSuccess
+  const readyDegraded = readyQ.data?.status === 'degraded' || readyQ.isError
+
+  let healthDown = 0
+  let healthDegraded = 0
+  for (const group of servicesQ.data?.groups ?? []) {
+    for (const service of group.services) {
+      if (service.health_status === 'down') healthDown += 1
+      if (service.health_status === 'degraded') healthDegraded += 1
+    }
+  }
+  for (const service of servicesQ.data?.ungrouped ?? []) {
+    if (service.health_status === 'down') healthDown += 1
+    if (service.health_status === 'degraded') healthDegraded += 1
+  }
+  const healthAlert = healthDown > 0
+  const healthWarn = healthDegraded > 0
+
+  const certWarnings = countByStatus(certsQ.data, ['warning', 'expired', 'error'])
+  const failedJobs = (notifyQ.data ?? []).filter((n) =>
+    /fail|error/i.test(`${n.kind} ${n.title} ${n.message}`),
+  ).length
+  const ungroupedCount = (domainsQ.data ?? []).filter((d) => d.group_id == null).length
+  const attentionCount = healthDown + healthDegraded
+
+  const metrics = useMemo<MonitorMetric[]>(
+    () => [
+      {
+        id: 'ready',
+        label: 'Ready',
+        value: readyOk ? 'OK' : readyDegraded ? '!' : '—',
+        unit: '',
+        percent: readyOk ? 100 : readyDegraded ? 40 : 0,
+        icon: <HeartPulse aria-hidden />,
+        tone: readyOk ? 'success' : 'destructive',
+        alert: !readyOk,
+      },
+      {
+        id: 'health',
+        label: 'Health-check',
+        value: String(healthDown + healthDegraded),
+        unit: 'шт.',
+        percent: Math.min(100, (healthDown + healthDegraded) * 20),
+        icon: <Server aria-hidden />,
+        tone: healthAlert ? 'destructive' : healthWarn ? 'warning' : 'success',
+        alert: healthAlert || healthWarn,
+      },
+      {
+        id: 'certs',
+        label: 'Сертификаты',
+        value: String(certWarnings),
+        unit: 'шт.',
+        percent: Math.min(100, certWarnings * 20),
+        icon: <ShieldCheck aria-hidden />,
+        tone: certWarnings > 0 ? 'warning' : 'success',
+        alert: certWarnings > 0,
+      },
+      {
+        id: 'jobs',
+        label: 'Ошибки',
+        value: String(failedJobs),
+        unit: 'шт.',
+        percent: Math.min(100, failedJobs * 15),
+        icon: <ListChecks aria-hidden />,
+        tone: failedJobs > 0 ? 'warning' : 'success',
+        alert: failedJobs > 0,
+      },
+    ],
+    [
+      certWarnings,
+      failedJobs,
+      healthAlert,
+      healthDegraded,
+      healthDown,
+      healthWarn,
+      readyDegraded,
+      readyOk,
+    ],
+  )
+
+  const spiking = metrics.some((m) => m.alert)
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <button
+            type="button"
+            aria-label="Монитор системы"
+            className={cn(
+              'relative inline-flex h-8 items-center gap-1.5 rounded-md border px-2 transition-colors outline-none',
+              'border-border hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring',
+            )}
+          />
+        }
+      >
+        <span className="relative flex size-3.5 items-center justify-center">
+          <Activity
+            aria-hidden
+            className={cn(
+              'size-3.5 transition-colors',
+              spiking ? 'text-destructive' : 'text-muted-foreground',
+            )}
+          />
+          {spiking ? (
+            <span className="bg-destructive/25 absolute inset-0 animate-ping rounded-full" aria-hidden />
+          ) : null}
+        </span>
+        <span className="text-foreground hidden text-xs font-medium sm:inline">Система</span>
+        <Badge
+          variant={spiking ? 'destructive-light' : 'success-light'}
+          size="xs"
+          className="h-4 px-1.5 text-[10px]"
+        >
+          {spiking ? 'Внимание' : 'Норма'}
+        </Badge>
+      </PopoverTrigger>
+
+      <PopoverContent align="end" sideOffset={8} className="w-80 gap-0! space-y-0! p-0!">
+        <div className="border-border flex items-center justify-between border-b px-3 py-2.5">
+          <span className="text-foreground text-xs font-medium">Монитор CFDM</span>
+          <span className="text-muted-foreground text-[11px] tabular-nums">
+            {new Date().toLocaleTimeString('ru-RU')}
+          </span>
+        </div>
+        <div className="grid grid-cols-2">
+          {metrics.map((metric, i) => (
+            <div
+              key={metric.id}
+              className={cn(
+                i % 2 === 1 && 'border-border border-l',
+                i >= 2 && 'border-border border-t',
+              )}
+            >
+              <MetricCell metric={metric} />
+            </div>
+          ))}
+        </div>
+        <div className="border-border text-muted-foreground border-t px-3 py-2 text-[11px]">
+          Без группы:{' '}
+          <span className="text-foreground font-medium tabular-nums">{ungroupedCount}</span>
+          {' · '}
+          Внимание:{' '}
+          <span className="text-foreground font-medium tabular-nums">{attentionCount}</span>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

apps/web/src/components/reui-kit/index.ts

@@ -2,6 +2,7 @@ export { applyFiltersToData, getActiveFilters, renderSingleSelectedLabel } from
 export { CertStatusChart, GroupDomainsChart } from './dashboard-analytics'
 export { ResourcePage, type ResourcePageProps, type ResourcePageTab } from './resource-page'
 export { KpiStatGrid, type KpiStatCard, type KpiStatVariant, type OpsKpiCard } from './kpi-stat-grid'
+export { QuickActionGrid, type QuickActionItem } from './quick-action-grid'
 export { OpsDashboard } from './ops-dashboard'
 export { KanbanBoard, KanbanBoardSkeleton, type KanbanBoardProps, type KanbanColumnConfig } from './kanban-board'
 export { DetailPanel, type DetailMetricCard } from './detail-panel'

apps/web/src/components/reui-kit/ops-dashboard.tsx

@@ -16,6 +16,8 @@ interface OpsDashboardProps {
   title?: string
   description?: string
   kpiCards: OpsKpiCard[]
+  /** Optional slot under KPI (e.g. QuickActionGrid) */
+  afterKpi?: ReactNode
   charts: ReactNode
   queue: ReactNode
   isLoading?: boolean
@@ -45,6 +47,7 @@ export function OpsDashboard({
   title = 'Панель управления',
   description = 'Обзор доменов, групп, сервисов и сертификатов Cloudflare',
   kpiCards,
+  afterKpi,
   charts,
   queue,
   isLoading = false,
@@ -61,6 +64,8 @@ export function OpsDashboard({
         <KpiStatGrid cards={kpiCards} skeletonCount={4} />
       </section>
 
+      {afterKpi}
+
       <section
         aria-label="Аналитика"
         className="grid min-w-0 items-start gap-2 @3xl:grid-cols-2"

apps/web/src/components/reui-kit/quick-action-grid.tsx

@@ -0,0 +1,113 @@
+import type { ReactNode } from 'react'
+import { Link } from '@tanstack/react-router'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { Badge } from '@/components/reui/badge'
+import { Item, ItemMedia } from '@cfdm/ui/components/item'
+import { cn } from '@cfdm/ui/lib/utils'
+
+export interface QuickActionItem {
+  id: string
+  title: string
+  description: string
+  to: string
+  search?: Record<string, unknown>
+  icon?: ReactNode
+  iconClassName?: string
+}
+
+interface QuickActionGridProps {
+  actions: QuickActionItem[]
+  title?: string
+  description?: string
+  className?: string
+}
+
+const DEFAULT_ICON_CLASS = 'text-muted-foreground [&_svg]:text-current'
+
+function kpiCols(count: number): string {
+  if (count <= 1) return 'grid-cols-1'
+  if (count === 2) return 'grid-cols-1 @xl:grid-cols-2'
+  if (count === 3) return 'grid-cols-1 @3xl:grid-cols-3'
+  if (count === 4) return 'grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4'
+  if (count === 5) return 'grid-cols-2 @3xl:grid-cols-3 xl:grid-cols-5'
+  if (count === 6) return 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6'
+  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+}
+
+function QuickActionBody({ action }: { action: QuickActionItem }) {
+  return (
+    <div className="relative z-10 flex h-full items-start gap-3">
+      {action.icon ? (
+        <Item
+          className={cn(
+            'border-background bg-muted flex size-10.5 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
+            action.iconClassName ?? DEFAULT_ICON_CLASS,
+          )}
+        >
+          <ItemMedia variant="icon" className="size-auto">
+            {action.icon}
+          </ItemMedia>
+        </Item>
+      ) : null}
+
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex items-start justify-between gap-2">
+          <span className="text-foreground text-sm font-medium">{action.title}</span>
+          <Badge variant="outline" size="sm" className="shrink-0">
+            Перейти
+          </Badge>
+        </div>
+        <p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
+          {action.description}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * KPI-like quick actions strip (horizontal Frame tiles).
+ * Preview: https://reui.io/preview/base/stats-12
+ */
+export function QuickActionGrid({
+  actions,
+  title = 'Быстрые действия',
+  description,
+  className,
+}: QuickActionGridProps) {
+  if (actions.length === 0) return null
+
+  return (
+    <Frame dense spacing="sm" className={cn('@container w-full', className)}>
+      {(title || description) && (
+        <FrameHeader>
+          {title ? <FrameTitle>{title}</FrameTitle> : null}
+          {description ? <FrameDescription>{description}</FrameDescription> : null}
+        </FrameHeader>
+      )}
+      <div className={cn('grid gap-2', kpiCols(actions.length))}>
+        {actions.map((action) => (
+          <FramePanel
+            key={action.id}
+            className="relative isolate flex h-full flex-col hover:bg-muted/40 focus-within:ring-ring cursor-pointer transition-colors focus-within:ring-2"
+          >
+            <Link
+              to={action.to}
+              search={action.search}
+              className="focus-visible:outline-none"
+              aria-label={`${action.title}: ${action.description}`}
+            >
+              <QuickActionBody action={action} />
+            </Link>
+          </FramePanel>
+        ))}
+      </div>
+    </Frame>
+  )
+}

apps/web/src/components/reui-kit/settings-shell.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { Link, Outlet, useRouterState } from '@tanstack/react-router'
-import { SettingsIcon } from 'lucide-react'
+import { PaletteIcon, SettingsIcon } from 'lucide-react'
 
 import { useIsMobile } from '@cfdm/ui/hooks/use-mobile'
 import { cn } from '@cfdm/ui/lib/utils'
@@ -16,6 +16,12 @@ export interface SettingsTabConfig {
 }
 
 const DEFAULT_TABS: SettingsTabConfig[] = [
+  {
+    id: 'appearance',
+    to: '/settings/appearance',
+    label: 'Внешний вид',
+    icon: <PaletteIcon className="size-4" aria-hidden="true" />,
+  },
   {
     id: 'integrations',
     to: '/settings/integrations',