feat: update dependencies and enhance UI components

- Added new dependencies for drag-and-drop functionality with @dnd-kit packages. - Updated package versions for @tanstack/react-virtual and date-fns. - Refactored AppShell component to utilize AppSidebar and SiteHeader for improved layout. - Enhanced Frame component with new theming capabilities and improved structure. - Introduced filtering capabilities in Agents and Lists pages with new UI elements. - Added new utility functions for authentication claims management. Co-authored-by: Cursor <[email protected]>
2026-07-20 21:04:02 +07:00
parent c5132056b3
commit 9ff1af849e
67 changed files with 11873 additions and 998 deletions
@@ -0,0 +1,109 @@
+import { Link, useMatches, useRouterState } from '@tanstack/react-router'
+import { useMemo } from 'react'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@evofw/ui/components/breadcrumb'
+import { Separator } from '@evofw/ui/components/separator'
+import { SystemMonitorPopover } from '@/components/layout/system-monitor-popover'
+import { AppsMenu } from '@/components/layout/apps-menu'
+import { ModeToggle } from '@/components/mode-toggle'
+import { SidebarTrigger } from '@evofw/ui/components/sidebar'
+
+export interface RouteBreadcrumbLoaderData {
+  breadcrumb?: string
+}
+
+const routeTitles: Record<string, string> = {
+  '/': 'Дашборд',
+  '/agents': 'Агенты',
+  '/lists': 'Списки IP',
+  '/rules': 'Правила',
+  '/stats': 'Статистика',
+  '/settings': 'Настройки',
+}
+
+function getBreadcrumbs(
+  pathname: string,
+  dynamicLabels: Record<string, string>,
+) {
+  if (pathname === '/') {
+    return [{ label: 'Дашборд', href: '/' }]
+  }
+
+  if (pathname.match(/^\/agents\/[^/]+$/)) {
+    return [
+      { label: 'Агенты', href: '/agents' },
+      { label: dynamicLabels[pathname] ?? 'Агент', href: pathname },
+    ]
+  }
+
+  const title = routeTitles[pathname]
+  if (title) {
+    return [{ label: title, href: pathname }]
+  }
+
+  return [{ label: 'Дашборд', href: '/' }]
+}
+
+function useDynamicBreadcrumbLabels() {
+  const matches = useMatches()
+  return useMemo(() => {
+    const labels: Record<string, string> = {}
+    for (const match of matches) {
+      const data = match.loaderData as RouteBreadcrumbLoaderData | undefined
+      if (data?.breadcrumb && match.pathname) {
+        labels[match.pathname] = data.breadcrumb
+      }
+    }
+    return labels
+  }, [matches])
+}
+
+/** Header chrome — AppsMenu + SystemMonitor + ModeToggle (EvoBGP etalon). */
+export function SiteHeader() {
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const dynamicLabels = useDynamicBreadcrumbLabels()
+  const crumbs = getBreadcrumbs(pathname, dynamicLabels)
+
+  return (
+    <header className="bg-background sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b px-4 md:px-6">
+      <SidebarTrigger className="-ml-1" />
+      <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+      <Breadcrumb>
+        <BreadcrumbList>
+          {crumbs.map((crumb, index) => {
+            const isLast = index === crumbs.length - 1
+            return (
+              <span key={crumb.href} className="contents">
+                {index > 0 && (
+                  <BreadcrumbSeparator className="hidden md:block" />
+                )}
+                <BreadcrumbItem
+                  className={index === 0 && !isLast ? 'hidden md:block' : undefined}
+                >
+                  {isLast ? (
+                    <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink render={<Link to={crumb.href} />}>
+                      {crumb.label}
+                    </BreadcrumbLink>
+                  )}
+                </BreadcrumbItem>
+              </span>
+            )
+          })}
+        </BreadcrumbList>
+      </Breadcrumb>
+      <div className="ml-auto flex items-center gap-2">
+        <AppsMenu />
+        <SystemMonitorPopover />
+        <ModeToggle />
+      </div>
+    </header>
+  )
+}