feat(web): enhance ReUI components and sidebar navigation

- Updated frontend UI patterns documentation to include new ReUI components and improved navigation instructions.
- Enhanced AppSidebar to utilize active state management for better user experience.
- Refactored layout components in the ReUI kit for improved spacing and alignment.
- Introduced KanbanBoardSkeleton for loading states in Kanban boards.
- Improved OpsDashboard and ResourcePage with consistent header layouts and enhanced accessibility features.

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

.cursor/rules/frontend-ui-patterns.mdc

@@ -6,38 +6,44 @@ alwaysApply: false
 
 # Frontend UI Patterns
 
-См. также: [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [Components](https://ui.shadcn.com/docs/components), [Blocks](https://ui.shadcn.com/blocks).
+См. также: [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`reui-mcp.mdc`](reui-mcp.mdc), [Components](https://ui.shadcn.com/docs/components), [ReUI llms.txt](https://reui.io/llms.txt).
 
 ## Docs workflow (обязательно)
 
 0. Codegraph `codegraph_explore` — найти существующие shared/domain-компоненты
-1. Skill [`.agents/skills/shadcn/SKILL.md`](../.agents/skills/shadcn/SKILL.md) — component selection
-2. MCP `plugin-shadcn-shadcn` — search → examples → add command
-3. CLI: `cd apps/web && pnpm dlx shadcn@latest docs <component>` → сверить API с [Components](https://ui.shadcn.com/docs/components)
+1. Skill [`.agents/skills/shadcn/SKILL.md`](../.agents/skills/shadcn/SKILL.md) + ReUI skill — component selection
+2. MCP `plugin-shadcn-shadcn` / `user-reui` — search → examples → add command (`surface: "frame"`)
+3. CLI: `cd apps/web && pnpm dlx shadcn@latest docs <component>` / `add @reui/...` → сверить API
 4. Код по examples + docs API (только после совпадения MCP ↔ docs)
-5. Context7 — **только** TanStack Router/Query, Recharts (не shadcn primitives)
+5. Context7 — **только** TanStack Router/Query, Recharts (не shadcn/ReUI primitives)
 6. MCP `get_audit_checklist` — перед merge
 7. Codegraph `codegraph_status` — Pending sync пустой
 
+## Surface
+
+Проект использует **ReUI Frame** (`surface: frame`), не shadcn Card как оболочку list/ops-экранов. Эталон списка: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2).
+
 ## Иерархия компонентов
 
 ```
-@cfdm/ui/components/*     ← только CLI (packages/ui)
+@cfdm/ui/components/*     ← shadcn CLI (packages/ui)
+@/components/reui/*       ← ReUI CLI @reui/* (apps/web)
 apps/web/src/components/  ← shared + domain + layout
-  page-shell.tsx          ← обёртка страницы
-  page-header.tsx
+  page-shell.tsx
+  reui-kit/
+    resource-page.tsx     ← list: Frame + line Tabs + Filters + DataGrid
+    kanban-board.tsx      ← kanban + KanbanBoardSkeleton
+    detail-panel.tsx      ← detail: Frame header/metrics
+    settings-shell.tsx
+    ops-dashboard.tsx
   empty-state.tsx
   query-state.tsx
   confirm-dialog.tsx
-  data-grid-card.tsx
-  section-cards.tsx
   status-badge.tsx
-  form-sheet.tsx          ← Sheet + RHF FormProvider
-  form-field.tsx          ← Field + Controller + aria-invalid
-  table-card.tsx          ← Card + Table wrapper
-  loading-button.tsx      ← Button + Spinner + label swap
-  skeletons.tsx           ← SectionCardsSkeleton, TableSkeleton
-  layout/                 ← app-shell, site-header
+  form-sheet.tsx
+  form-field.tsx
+  loading-button.tsx
+  layout/                 ← app-shell, site-header, app-sidebar
   domain-*                ← бизнес-компоненты
 ```
 
@@ -46,22 +52,55 @@ apps/web/src/components/  ← shared + domain + layout
 | Элемент | Shared | Primitive |
 |---------|--------|-----------|
 | Page wrapper | `PageShell` | — |
-| Page title | `PageHeader` | — |
-| Stat metrics | `SectionCards` | `Card` |
-| Data list | `DataGridCard` | ReUI `data-grid` |
+| List page | `ResourcePage` | ReUI `Frame` + `data-grid` + `filters` + shadcn `Tabs` |
+| Kanban | `KanbanBoard` / `KanbanBoardSkeleton` | ReUI `kanban` + `Frame` |
+| Detail | `DetailPanel` | ReUI `Frame` |
+| Settings | `SettingsShell` | — |
+| Dashboard | `OpsDashboard` / `KpiStatGrid` | ReUI `Frame` |
 | Empty | `EmptyState` | `Empty` |
-| Loading / Error | `QueryState` | `Skeleton`, `Alert` |
-| Status | `StatusBadge` | `Badge` |
+| Loading / Error | `QueryState` / kit skeletons | `Skeleton`, `Alert` |
+| Status | `StatusBadge` | ReUI `Badge` (`success`/`info`/`warning`) |
 | Create/Edit | `FormSheet` + `*-edit-sheet.tsx` | `Sheet`, `Field` |
 | Form field | `FormField` | `Field`, `Input`, `Select` |
 | Submit button | `LoadingButton` | `Button`, `Spinner` |
-| Table wrapper | `TableCard` | `Table`, `Card` |
 | Delete confirm | `ConfirmDialog` | `AlertDialog` |
-| List row | — | `Item variant="outline" size="sm"` |
-| Nav | `AppSidebar` | `Sidebar` |
+| Nav | `AppSidebar` (`isActive` обязателен) | `Sidebar` |
 | Breadcrumbs | `SiteHeader` | `Breadcrumb` |
 | Dates | `lib/format.ts` | — |
 
+## Header actions
+
+Независимые CTA в header → `flex shrink-0 flex-wrap items-center justify-end gap-2`.
+
+**Не** оборачивать в `ButtonGroup` (он склеивает кнопки). `ButtonGroup` — только для связанных контролок (filter chips и т.п.).
+
+Max 1 primary (`default`) на экран; остальные `outline` / `ghost`.
+
+## Line tabs (ResourcePage)
+
+Эталон: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2).
+
+```tsx
+<TabsList variant="line" className="h-auto! gap-5 overflow-visible">
+  <TabsTrigger
+    value="…"
+    className="data-active:text-foreground gap-2 px-0 pb-3 text-sm font-medium [&[data-active]>span:last-child]:bg-foreground [&[data-active]>span:last-child]:text-background"
+  >
+    <span>Label</span>
+    <span className="bg-muted text-muted-foreground … tabular-nums">{count}</span>
+  </TabsTrigger>
+</TabsList>
+```
+
+- `h-auto!` снимает клип underline у `TabsList` (`h-8`)
+- Active count — контрастный chip (`bg-foreground` / `text-background`)
+- Active state — Base UI `data-active`, не Radix `data-[state=active]`
+
+## Sidebar
+
+- Каждый `SidebarMenuButton` получает `isActive` от pathname (`useRouterState`)
+- `--sidebar-accent` в `AppShell` — заметный mix primary (~14%), не 5%
+
 ## Overlay selection
 
 | Сценарий | Компонент |
@@ -72,35 +111,38 @@ apps/web/src/components/  ← shared + domain + layout
 
 ## Block registry
 
-| Зона | Block |
-|------|-------|
-| Shell | sidebar-07 |
-| Dashboard | dashboard-01 |
-| Login | login-03 |
+| Зона | Block / эталон |
+|------|----------------|
+| Shell | [app-shell-12](https://reui.io/preview/base/app-shell-12) |
+| List + tabs + filters | [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2) |
+| Login | auth-13 / login-03 |
 
 ## Spacing
 
 ```
-PageShell:     gap-4 md:gap-6, px-4 lg:px-6 py-4 md:py-6
-Card grid:     gap-4
+AppShell main: gap-4 md:gap-6, px-4 md:px-6, py-4 md:py-5
+PageShell:     gap-4 md:gap-6
+Title/desc:    gap-px
+Card/Frame grid: gap-4
 FieldGroup:    gap-4
 Item list:     gap-2
-Toolbar:       gap-2
+Toolbar / header actions: gap-2
+Tabs list (line): gap-5
 ```
 
-**Запрещено:** `space-y-*`, raw colors (`bg-emerald-*`), custom empty divs, page-level Spinner.
+**Запрещено:** `space-y-*`, raw colors (`bg-emerald-*`), custom empty divs, page-level Spinner / plain «Загрузка…» без Skeleton.
 
-## UX/UI 2026 (состояния данных)
+## UX/UI (состояния данных)
 
 Каждый блок: **default, hover, focus, disabled, empty, loading, error**.
 
-- **Loading** — `Skeleton` с размерами финального контента (`QueryState skeleton={…}`), не Spinner на странице
-- **Empty** — `EmptyState` с CTA (кнопка создания)
-- **Zero-results** — отдельный empty с «Сбросить фильтр» (не «Создать»)
-- **Error** — `QueryState` + `onRetry` + иконка + текст
+- **Loading** — `Skeleton` / `ResourcePage` skeleton / `KanbanBoardSkeleton`, не Spinner на странице
+- **Empty** — `EmptyState` с CTA
+- **Zero-results** — message внутри DataGrid (+ «Сбросить»)
+- **Error** — `QueryState` / `Alert` + `onRetry`
 - **Overflow** — `truncate`, `max-w-*`, `Tooltip`; `tabular-nums` для чисел
-- **Density** — таблицы `h-10 text-sm`; max 1 primary CTA на экран
-- **A11y** — `aria-invalid` на полях, `aria-label`/`sr-only` на icon-only кнопках, цвет не единственный сигнал статуса
+- **Density** — operational (`dense` Frame/DataGrid); max 1 primary CTA
+- **A11y** — `aria-invalid`, `aria-label`/`sr-only` на icon-only, `aria-current="page"` на active nav/settings
 
 ## Button hierarchy (max 1 primary per screen)