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/app-sidebar.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@tanstack/react-router'
+import { Link, useRouterState } from '@tanstack/react-router'
 import {
   LayoutDashboardIcon,
   GlobeIcon,
@@ -31,12 +31,26 @@ 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 },
+  { to: '/settings/integrations', label: 'Настройки', icon: SettingsIcon, exact: false, matchPrefix: '/settings' },
 ] as const
 
+function isNavActive(
+  pathname: string,
+  to: string,
+  exact: boolean,
+  matchPrefix?: string,
+) {
+  if (matchPrefix) {
+    return pathname === matchPrefix || pathname.startsWith(`${matchPrefix}/`)
+  }
+  if (exact) return pathname === to
+  return pathname === to || pathname.startsWith(`${to}/`)
+}
+
 function NavSection({
   label,
   items,
+  pathname,
 }: {
   label: string
   items: readonly {
@@ -44,7 +58,9 @@ function NavSection({
     label: string
     icon: typeof GlobeIcon
     exact: boolean
+    matchPrefix?: string
   }[]
+  pathname: string
 }) {
   return (
     <SidebarGroup>
@@ -54,6 +70,12 @@ function NavSection({
           <SidebarMenuItem key={item.to}>
             <SidebarMenuButton
               tooltip={item.label}
+              isActive={isNavActive(
+                pathname,
+                item.to,
+                item.exact,
+                item.matchPrefix,
+              )}
               render={
                 <Link
                   to={item.to}
@@ -72,14 +94,16 @@ function NavSection({
 }
 
 export function AppSidebar() {
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader>
         <AppSwitcher />
       </SidebarHeader>
       <SidebarContent>
-        <NavSection label="Инфраструктура" items={infrastructureNav} />
-        <NavSection label="Операции" items={operationsNav} />
+        <NavSection label="Инфраструктура" items={infrastructureNav} pathname={pathname} />
+        <NavSection label="Операции" items={operationsNav} pathname={pathname} />
       </SidebarContent>
       <SidebarFooter>
         <NavUser />

apps/web/src/components/layout/app-shell.tsx

@@ -10,7 +10,7 @@ export function AppShell({ children }: { children: ReactNode }) {
       className={cn(
         '[--sidebar:color-mix(in_oklab,var(--color-sidebar)_60%,transparent)]',
         '[--sidebar-border:transparent]',
-        '[--sidebar-accent:color-mix(in_oklab,var(--color-primary)_5%,transparent)]',
+        '[--sidebar-accent:color-mix(in_oklab,var(--color-primary)_14%,transparent)]',
         '[--sidebar-accent-foreground:var(--color-primary)]',
       )}
       style={

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',
                     )}
                   >