fix(ui): не дублировать крошку Настройки при смене раздела

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

apps/web/src/components/layout/site-header.tsx

@@ -1,5 +1,5 @@
+import { Fragment, useMemo } from 'react'
 import { Link, useMatches, useRouterState } from '@tanstack/react-router'
-import { useMemo } from 'react'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,82 +12,12 @@ import { Separator } from '@cfdm/ui/components/separator'
 import { SystemMonitorPopover } from '@/components/layout/system-monitor-popover'
 import { AppsMenu } from '@/components/layout/apps-menu'
 import { SidebarTrigger } from '@cfdm/ui/components/sidebar'
+import { getBreadcrumbs } from '@/lib/breadcrumbs'
 
 export interface RouteBreadcrumbLoaderData {
   breadcrumb?: string
 }
 
-const routeTitles: Record<string, string> = {
-  '/': 'Панель управления',
-  '/domains': 'Домены',
-  '/groups': 'Группы доменов',
-  '/services': 'Сервисы',
-  '/certificates': 'Сертификаты',
-  '/settings/appearance': 'Внешний вид',
-  '/settings/health': 'Health-check',
-  '/settings/integrations': 'Интеграции',
-}
-
-function getBreadcrumbs(
-  pathname: string,
-  dynamicLabels: Record<string, string>,
-) {
-  if (pathname === '/') {
-    return [{ label: 'Панель управления', href: '/' }]
-  }
-
-  if (pathname.match(/^\/services\/\d+$/)) {
-    return [
-      { label: 'Сервисы', href: '/services' },
-      { label: dynamicLabels[pathname] ?? 'Сервис', href: pathname },
-    ]
-  }
-
-  if (pathname.match(/^\/groups\/\d+$/)) {
-    return [
-      { label: 'Группы доменов', href: '/groups' },
-      { label: dynamicLabels[pathname] ?? 'Группа', href: pathname },
-    ]
-  }
-
-  if (pathname.match(/^\/domains\/\d+\/dns$/)) {
-    const domainId = pathname.split('/')[2]
-    const domainPath = `/domains/${domainId}`
-    return [
-      { label: 'Домены', href: '/domains' },
-      { label: dynamicLabels[domainPath] ?? 'Домен', href: domainPath },
-      { label: 'DNS', href: pathname },
-    ]
-  }
-
-  if (pathname.match(/^\/domains\/\d+$/)) {
-    return [
-      { label: 'Домены', href: '/domains' },
-      { label: dynamicLabels[pathname] ?? 'Обзор домена', href: pathname },
-    ]
-  }
-
-  if (pathname.startsWith('/settings')) {
-    return [
-      { label: 'Настройки', href: '/settings/appearance' },
-      ...(pathname === '/settings/integrations'
-        ? [{ label: 'Интеграции', href: pathname }]
-        : pathname === '/settings/health'
-          ? [{ label: 'Health-check', href: pathname }]
-        : pathname === '/settings/appearance'
-          ? [{ label: 'Внешний вид', href: pathname }]
-          : []),
-    ]
-  }
-
-  const title = routeTitles[pathname]
-  if (title) {
-    return [{ label: title, href: pathname }]
-  }
-
-  return [{ label: 'Панель управления', href: '/' }]
-}
-
 function useDynamicBreadcrumbLabels() {
   const matches = useMatches()
   return useMemo(() => {
@@ -106,7 +36,10 @@ function useDynamicBreadcrumbLabels() {
 export function SiteHeader() {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const dynamicLabels = useDynamicBreadcrumbLabels()
-  const crumbs = getBreadcrumbs(pathname, dynamicLabels)
+  const crumbs = useMemo(
+    () => getBreadcrumbs(pathname, dynamicLabels),
+    [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">
@@ -117,10 +50,10 @@ export function SiteHeader() {
           {crumbs.map((crumb, index) => {
             const isLast = index === crumbs.length - 1
             return (
-              <span key={crumb.href} className="contents">
-                {index > 0 && (
+              <Fragment key={`${index}-${crumb.href}`}>
+                {index > 0 ? (
                   <BreadcrumbSeparator className="hidden md:block" />
-                )}
+                ) : null}
                 <BreadcrumbItem
                   className={index === 0 && !isLast ? 'hidden md:block' : undefined}
                 >
@@ -132,7 +65,7 @@ export function SiteHeader() {
                     </BreadcrumbLink>
                   )}
                 </BreadcrumbItem>
-              </span>
+              </Fragment>
             )
           })}
         </BreadcrumbList>