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]>

apps/web/src/components/reui-kit/detail-panel.tsx

@@ -41,13 +41,17 @@ function DetailPanelHeader({
   return (
     <Frame dense spacing="sm" className="w-full">
       <FrameHeader className="flex-row items-start justify-between gap-3">
-        <div className="min-w-0 flex-1 flex-col gap-px">
+        <div className="flex min-w-0 flex-1 flex-col gap-px">
           <FrameTitle>{title}</FrameTitle>
           {description ? (
             <FrameDescription>{description}</FrameDescription>
           ) : null}
         </div>
-        {actions ? <div className="shrink-0">{actions}</div> : null}
+        {actions ? (
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+            {actions}
+          </div>
+        ) : null}
       </FrameHeader>
       {children ? <FramePanel className="flex flex-col gap-4">{children}</FramePanel> : null}
     </Frame>

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

@@ -3,6 +3,6 @@ export { CertStatusChart, GroupDomainsChart } from './dashboard-analytics'
 export { ResourcePage, type ResourcePageProps, type ResourcePageTab } from './resource-page'
 export { KpiStatGrid, type KpiStatCard, type OpsKpiCard } from './kpi-stat-grid'
 export { OpsDashboard, OpsDashboardHintLink } from './ops-dashboard'
-export { KanbanBoard, type KanbanBoardProps, type KanbanColumnConfig } from './kanban-board'
+export { KanbanBoard, KanbanBoardSkeleton, type KanbanBoardProps, type KanbanColumnConfig } from './kanban-board'
 export { DetailPanel, type DetailMetricCard } from './detail-panel'
 export { SettingsShell, type SettingsTabConfig } from './settings-shell'

apps/web/src/components/reui-kit/kanban-board.tsx

@@ -19,6 +19,7 @@ import { GripVerticalIcon, PlusIcon } from 'lucide-react'
 
 import { cn } from '@cfdm/ui/lib/utils'
 import { Button } from '@cfdm/ui/components/button'
+import { Skeleton } from '@cfdm/ui/components/skeleton'
 
 export interface KanbanColumnConfig {
   id: string
@@ -207,20 +208,22 @@ export function KanbanBoard<T extends { id: string | number }>({
   )
 
   return (
-    <section className="mx-auto flex w-full flex-col gap-4">
-      <header className="px-1 py-1" aria-label={title}>
-        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-          <div className="min-w-0">
-            <h2 className="truncate text-lg leading-7 font-semibold">{title}</h2>
+    <section className="mx-auto flex w-full flex-col gap-4 md:gap-6">
+      <header className="px-1" aria-label={title}>
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div className="flex min-w-0 flex-col gap-px">
+            <h2 className="truncate text-lg leading-7 font-semibold tracking-tight">
+              {title}
+            </h2>
             {description ? (
-              <p className="text-muted-foreground mt-0.5 line-clamp-2 max-w-[52ch] text-sm leading-5">
+              <p className="text-muted-foreground line-clamp-2 max-w-[52ch] text-sm leading-5">
                 {description}
               </p>
             ) : null}
           </div>
           {toolbarActions ? (
             <div
-              className="flex w-full flex-wrap items-center gap-2 lg:w-auto lg:justify-end"
+              className="flex w-full shrink-0 flex-wrap items-center gap-2 lg:w-auto lg:justify-end"
               role="group"
             >
               {toolbarActions}
@@ -275,3 +278,35 @@ export function KanbanBoard<T extends { id: string | number }>({
     </section>
   )
 }
+
+export function KanbanBoardSkeleton({ columns = 3 }: { columns?: number }) {
+  return (
+    <section className="mx-auto flex w-full flex-col gap-4 md:gap-6" aria-busy="true">
+      <header className="px-1">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div className="flex min-w-0 flex-col gap-2">
+            <Skeleton className="h-7 w-48" />
+            <Skeleton className="h-4 w-72 max-w-full" />
+          </div>
+          <Skeleton className="h-9 w-36" />
+        </div>
+      </header>
+      <div className="flex gap-3 overflow-hidden p-1">
+        {Array.from({ length: columns }).map((_, i) => (
+          <Frame key={i} spacing="sm" className="w-[19rem] shrink-0">
+            <FrameHeader className="flex min-h-10 flex-row items-center gap-2 px-2 py-1.5">
+              <Skeleton className="size-2.5 rounded-full" />
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="ms-auto h-4 w-6" />
+            </FrameHeader>
+            <div className="flex flex-col gap-2 p-0.5">
+              <Skeleton className="h-20 w-full rounded-lg" />
+              <Skeleton className="h-20 w-full rounded-lg" />
+              <Skeleton className="h-20 w-full rounded-lg" />
+            </div>
+          </Frame>
+        ))}
+      </div>
+    </section>
+  )
+}

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

@@ -50,10 +50,12 @@ export function OpsDashboard({
       className="text-foreground @container mx-auto flex w-full max-w-7xl flex-col gap-4 md:gap-6"
     >
       <header className="px-1">
-        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
-        <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
-          {description}
-        </p>
+        <div className="flex flex-col gap-px">
+          <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+          <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
+            {description}
+          </p>
+        </div>
       </header>
 
       <section aria-label="Ключевые метрики">

apps/web/src/components/reui-kit/resource-page.tsx

@@ -279,7 +279,9 @@ export function ResourcePage<T extends object>({
               ) : null}
             </div>
             {primaryAction ? (
-              <div className="shrink-0">{primaryAction}</div>
+              <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+                {primaryAction}
+              </div>
             ) : null}
           </FrameHeader>
         ) : null}
@@ -287,14 +289,17 @@ export function ResourcePage<T extends object>({
         <FramePanel className="p-0 shadow-none!">
           {tabs && tabs.length > 0 ? (
             <>
-              <div className="px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
+              <div className="overflow-visible px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
                 <Tabs value={activeTab} onValueChange={handleTabChange}>
-                  <TabsList variant="line" className="gap-5">
+                  <TabsList
+                    variant="line"
+                    className="h-auto! gap-5 overflow-visible"
+                  >
                     {tabs.map((tab) => (
                       <TabsTrigger
                         key={tab.id}
                         value={tab.id}
-                        className="gap-2 px-0 pb-3 text-sm"
+                        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>{tab.label}</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">

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

@@ -58,10 +58,12 @@ export function SettingsShell({
     <PageShell>
       <div ref={rootRef} className="mx-auto flex w-full max-w-4xl flex-col gap-6">
         <header className="px-1">
-          <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
-          <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
-            {description}
-          </p>
+          <div className="flex flex-col gap-px">
+            <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+            <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
+              {description}
+            </p>
+          </div>
         </header>
 
         <div
@@ -86,12 +88,13 @@ export function SettingsShell({
                   <Link
                     key={tab.id}
                     to={tab.to}
+                    aria-current={isActive ? 'page' : undefined}
                     className={cn(
                       'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
                       isMobile && 'shrink-0',
                       !isMobile && 'w-full',
                       isActive
-                        ? 'bg-muted text-foreground font-medium'
+                        ? 'bg-muted text-foreground font-medium shadow-sm ring-1 ring-border/60'
                         : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
                     )}
                   >