refactor: update dashboard components to integrate QuickActionGrid and enhance settings

Removed the deprecated DashboardQuickLinkCard and replaced it with QuickActionGrid in the DashboardQuickLinks component for improved organization and user experience. Updated the AppearanceSettingsTab to include a toggle for displaying quick actions on the dashboard, enhancing user customization options. Adjusted the SystemMonitorPopover layout for better alignment and spacing. Updated documentation to reflect the new UI preferences for quick actions.

apps/web/src/components/dashboard/dashboard-quick-link-card.tsx

@@ -1,69 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import { ChevronRight } from 'lucide-react'
-import type { ReactNode } from 'react'
-
-import { CardDotField } from '@/components/dashboard/card-dot-field'
-import { Card, CardContent } from '@evobgp/ui/components/card'
-import { cn } from '@evobgp/ui/lib/utils'
-import { Item, ItemMedia } from '@evobgp/ui/components/item'
-
-export type QuickLinkCardProps = {
-  icon: ReactNode
-  label: string
-  description: string
-  to: string
-  search?: Record<string, string>
-  iconClass: string
-}
-
-export function DashboardQuickLinkCard({
-  icon,
-  label,
-  description,
-  to,
-  search,
-  iconClass,
-}: QuickLinkCardProps) {
-  return (
-    <Link
-      to={to}
-      search={search}
-      className="group block h-full rounded-[inherit] focus-visible:outline-none"
-      aria-label={`${label}: ${description}`}
-    >
-      <Card
-        size="sm"
-        className={cn(
-          'relative isolate h-full overflow-hidden transition-colors',
-          'hover:border-foreground/20',
-          'group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background',
-        )}
-      >
-        <CardDotField className="text-muted-foreground [mask-image:linear-gradient(to_bottom_left,black,transparent_60%)]" />
-        <CardContent className="relative z-10 flex h-full flex-col gap-7.5 p-5">
-          <Item
-            className={cn(
-              'border-background flex size-11 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-5',
-              iconClass,
-            )}
-          >
-            <ItemMedia variant="icon" className="size-auto">
-              {icon}
-            </ItemMedia>
-          </Item>
-          <div className="mt-auto flex flex-col gap-3">
-            <span className="text-foreground block text-sm leading-tight font-medium">{label}</span>
-            <p className="text-muted-foreground text-xs leading-relaxed">{description}</p>
-            <span className="text-primary inline-flex items-center gap-1 text-xs font-medium underline-offset-2 group-hover:underline">
-              Перейти
-              <ChevronRight
-                aria-hidden
-                className="size-2.5 shrink-0 transition-transform group-hover:translate-x-0.5"
-              />
-            </span>
-          </div>
-        </CardContent>
-      </Card>
-    </Link>
-  )
-}

apps/web/src/components/dashboard/dashboard-quick-links.tsx

@@ -1,78 +1,67 @@
 import { Gauge, Network, Play, Plus, Share2, Tags } from 'lucide-react'
-import type { ReactNode } from 'react'
 
-import { DashboardQuickLinkCard } from '@/components/dashboard/dashboard-quick-link-card'
-import { PanelCard } from '@/components/panel-card'
+import { QuickActionGrid, type QuickActionItem } from '@/components/reui-kit'
 
-type QuickLink = {
-  icon: ReactNode
-  label: string
-  description: string
-  to: string
-  search?: Record<string, string>
-  iconClass: string
-}
-
-const LINKS: QuickLink[] = [
+const ACTIONS: QuickActionItem[] = [
   {
-    icon: <Plus aria-hidden />,
-    label: 'Создать модуль',
+    id: 'new-module',
+    title: 'Создать модуль',
     description: 'Новый модуль маршрутизации и источники префиксов.',
     to: '/modules/new',
-    iconClass: 'bg-primary text-primary-foreground [&_svg]:text-primary-foreground',
+    icon: <Plus aria-hidden />,
+    iconClassName: 'bg-primary text-primary-foreground [&_svg]:text-primary-foreground',
   },
   {
-    icon: <Tags aria-hidden />,
-    label: 'BGP-сообщества',
+    id: 'communities',
+    title: 'BGP-сообщества',
     description: 'Справочник communities для политик экспорта.',
     to: '/directories',
-    iconClass: 'bg-info text-info-foreground [&_svg]:text-info-foreground',
+    icon: <Tags aria-hidden />,
+    iconClassName: 'bg-info text-info-foreground [&_svg]:text-info-foreground',
   },
   {
-    icon: <Network aria-hidden />,
-    label: 'Сеть',
+    id: 'network',
+    title: 'Сеть',
     description: 'Обзор пиров, спикеров и live-сессий BGP.',
     to: '/network',
     search: { tab: 'overview' },
-    iconClass: 'bg-success text-success-foreground [&_svg]:text-success-foreground',
+    icon: <Network aria-hidden />,
+    iconClassName: 'bg-success text-success-foreground [&_svg]:text-success-foreground',
   },
   {
-    icon: <Share2 aria-hidden />,
-    label: 'Добавить пира',
+    id: 'add-peer',
+    title: 'Добавить пира',
     description: 'Настройка BGP-соседа и шаблонов сессии.',
     to: '/network',
     search: { tab: 'peers' },
-    iconClass: 'bg-warning text-warning-foreground [&_svg]:text-warning-foreground',
+    icon: <Share2 aria-hidden />,
+    iconClassName: 'bg-warning text-warning-foreground [&_svg]:text-warning-foreground',
   },
   {
-    icon: <Play aria-hidden />,
-    label: 'Деплой',
+    id: 'deploy',
+    title: 'Деплой',
     description: 'Ревизии конфигурации и применение на нодах.',
     to: '/operations',
     search: { tab: 'revisions' },
-    iconClass: 'bg-focus text-focus-foreground [&_svg]:text-focus-foreground',
+    icon: <Play aria-hidden />,
+    iconClassName: 'bg-focus text-focus-foreground [&_svg]:text-focus-foreground',
   },
   {
-    icon: <Gauge aria-hidden />,
-    label: 'Мониторинг',
+    id: 'monitoring',
+    title: 'Мониторинг',
     description: 'Состояние системы, BIRD и PostgreSQL.',
     to: '/monitoring',
     search: { tab: 'system' },
-    iconClass: 'bg-destructive text-destructive-foreground [&_svg]:text-destructive-foreground',
+    icon: <Gauge aria-hidden />,
+    iconClassName: 'bg-destructive text-destructive-foreground [&_svg]:text-destructive-foreground',
   },
 ]
 
 export function DashboardQuickLinks() {
   return (
-    <PanelCard
-      title="Быстрые действия"
+    <QuickActionGrid
+      actions={ACTIONS}
       description="Частые переходы к настройке и деплою"
-      className="@container w-full"
-      contentClassName="grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3"
-    >
-      {LINKS.map((link) => (
-        <DashboardQuickLinkCard key={link.label} {...link} />
-      ))}
-    </PanelCard>
+    />
   )
 }

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

@@ -181,7 +181,7 @@ export function SystemMonitorPopover() {
         </Badge>
       </PopoverTrigger>
 
-      <PopoverContent align="end" sideOffset={8} className="w-80 gap-0! space-y-0! p-0!">
+      <PopoverContent align="end" sideOffset={8} className="flex w-80 flex-col gap-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">Монитор EvoBGP</span>
           <span className="text-muted-foreground text-[11px] tabular-nums">

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

@@ -20,6 +20,7 @@ export {
   type KpiStatVariant,
   type OpsKpiCard,
 } from './kpi-stat-grid'
+export { QuickActionGrid, type QuickActionItem } from './quick-action-grid'
 export { OpsDashboard } from './ops-dashboard'
 export { DetailPanel, type DetailMetricCard } from './detail-panel'
 export { SettingsShell, type SettingsTabConfig } from './settings-shell'

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 '@evobgp/ui/components/item'
+import { cn } from '@evobgp/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/settings/appearance-settings-tab.tsx

@@ -1,5 +1,7 @@
 import { Moon, Sun, SunMoon } from 'lucide-react'
 import { useTheme } from 'next-themes'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
 
 import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
 import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
@@ -9,6 +11,9 @@ import {
   ToggleGroup,
   ToggleGroupItem,
 } from '@evobgp/ui/components/toggle-group'
+import { Switch } from '@evobgp/ui/components/switch'
+import { apiMutate } from '@/lib/api-client'
+import { settingsKeys, settingsQueryOptions } from '@/queries/settings'
 
 const THEME_OPTIONS = [
   { value: 'light', label: 'Светлая', icon: Sun },
@@ -16,8 +21,27 @@ const THEME_OPTIONS = [
   { value: 'system', label: 'Система', icon: SunMoon },
 ] as const
 
+function parseShowQuickActions(value: unknown): boolean {
+  if (value === false || value === 0 || value === 'false' || value === '0') return false
+  return true
+}
+
 export function AppearanceSettingsTab() {
   const { theme, setTheme } = useTheme()
+  const qc = useQueryClient()
+  const settingsQ = useQuery(settingsQueryOptions())
+  const showQuickActions = parseShowQuickActions(settingsQ.data?.ui_show_quick_actions)
+
+  const patchMut = useMutation({
+    mutationFn: (payload: Record<string, boolean>) =>
+      apiMutate('/v1/settings', 'PATCH', payload),
+    onSuccess: () => {
+      toast.success('Настройки интерфейса сохранены')
+      void qc.invalidateQueries({ queryKey: settingsKeys.all })
+    },
+    onError: (e) =>
+      toast.error(e instanceof Error ? e.message : 'Не удалось сохранить'),
+  })
 
   return (
     <div className="space-y-6">
@@ -63,6 +87,31 @@ export function AppearanceSettingsTab() {
           </SettingRow>
         </SettingsFieldGroup>
       </SettingsCard>
+
+      <SettingsCard
+        title="Дашборд"
+        description="Блоки на экране «Обзор»"
+      >
+        <SettingsFieldGroup
+          legend="Быстрые действия"
+          description="Показывать KPI-like плитки быстрых переходов под метриками."
+        >
+          <SettingRow
+            title="Быстрые действия"
+            description="Блок с частыми переходами (модули, сеть, деплой) на дашборде."
+            last
+          >
+            <Switch
+              checked={showQuickActions}
+              disabled={settingsQ.isLoading || patchMut.isPending}
+              onCheckedChange={(checked) =>
+                patchMut.mutate({ ui_show_quick_actions: checked })
+              }
+              aria-label="Показывать быстрые действия"
+            />
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
     </div>
   )
 }

apps/web/src/routes/_auth/dashboard.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { useQueries } from '@tanstack/react-query'
+import { useQueries, useQuery } from '@tanstack/react-query'
 import { RefreshCw } from 'lucide-react'
 import { useState } from 'react'
 
@@ -27,13 +27,21 @@ import {
   overviewRevisionsQueryOptions,
   overviewSpeakersQueryOptions,
 } from '@/queries/overview'
+import { settingsQueryOptions } from '@/queries/settings'
 
 export const Route = createFileRoute('/_auth/dashboard')({
   component: DashboardComponent,
 })
 
+function parseShowQuickActions(value: unknown): boolean {
+  if (value === false || value === 0 || value === 'false' || value === '0') return false
+  return true
+}
+
 function DashboardComponent() {
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
+  const settingsQ = useQuery(settingsQueryOptions())
+  const showQuickActions = parseShowQuickActions(settingsQ.data?.ui_show_quick_actions)
 
   const results = useQueries({
     queries: [
@@ -86,8 +94,6 @@ function DashboardComponent() {
         }
       />
 
-      <DashboardQuickLinks />
-
       {initialLoading ? (
         <AnalyticsDashboardSkeleton />
       ) : (
@@ -99,6 +105,8 @@ function DashboardComponent() {
             jobs={jobs}
           />
 
+          {showQuickActions ? <DashboardQuickLinks /> : null}
+
           <div className={dashboardMainSidebarClassName}>
             <div className="xl:col-span-8">
               <DashboardModulesGrid modules={modules} isLoading={refreshing} />

docs/openapi.yaml

@@ -1455,6 +1455,10 @@ components:
           description: UTC cron для автоочистки (по умолчанию `0 */6 * * *`).
         runtime_logs_auto_mode:
           $ref: "#/components/schemas/RuntimeLogCleanupMode"
+        ui_show_quick_actions:
+          type: boolean
+          description: Показывать блок «Быстрые действия» на дашборде (UI preference).
+          default: true
       additionalProperties: true
 
     RevisionDiff:

docs/ui-design-contract.md

@@ -32,11 +32,25 @@ Ops / list / dashboard / detail / settings — только **Frame**, не shad
 |-----------|------|
 | `ResourcePage` | Frame + line tabs + Filters + DataGrid |
 | `KpiStatGrid` | horizontal compact hybrid KPI tiles (`variant`, Badge) |
+| `QuickActionGrid` | KPI-like quick action tiles under KPI (gated by `ui_show_quick_actions`) |
 | `OpsDashboard` | KPI + charts + attention queue |
 | `SettingsShell` | settings nav + Outlet |
 | `DetailPanel` | detail Frame sections |
 | `filter-utils` | apply/clear ReUI Filters |
 
+## Dashboard layout
+
+| App | Section order |
+|-----|---------------|
+| EvoBGP / CFDM | KPI → **QuickActionGrid** → charts / rest |
+| vps-tracker | banner → KPI → charts → attention → **QuickActionGrid** → CSV |
+
+Gating: KV `ui_show_quick_actions` in `global_settings` via `PATCH /v1/settings` (default `true`).
+
+## System monitor
+
+`SystemMonitorPopover` in app-shell header next to `ModeToggle`. Preview: https://reui.io/preview/base/app-shell-12 · https://reui.io/preview/base/app-shell-7
+
 ## MCP workflow
 
 1. MCP `user-reui` — `search` / `get_block` / `get_component` with `surface: "frame"`