refactor(web): unify settings navigation and update tab structure

Refactored the settings components to unify navigation between UI and BIRD settings. Updated tab structures to streamline access and improve user experience. Adjusted routing and search parameters to reflect the new tab organization, ensuring a cohesive interface. Removed legacy tenant settings references and enhanced the settings page layout for clarity and usability.
2026-08-18 16:30:10 +07:00
parent dfc33dcb99
commit e0d695f2a4
17 changed files with 547 additions and 570 deletions
@@ -1,113 +1,17 @@
-import type { ReactNode } from 'react'
-import { Link, Outlet, useRouterState } from '@tanstack/react-router'
-import { ServerCogIcon, SettingsIcon } from 'lucide-react'
+import { Outlet } from '@tanstack/react-router'

-import { cn } from '@evobgp/ui/lib/utils'
 import { PageShell } from '@/components/page-shell'
-import { PageHeader } from '@/components/page-header'
-
-export interface SettingsTabConfig {
-  id: string
-  to: '/settings' | '/tenant-settings'
-  label: string
-  icon?: ReactNode
-}
-
-/** Default nav for EvoBGP settings routes (`/settings`, `/tenant-settings`). */
-const DEFAULT_TABS: SettingsTabConfig[] = [
-  {
-    id: 'ui',
-    to: '/settings',
-    label: 'Настройки UI',
-    icon: <SettingsIcon className="size-4" aria-hidden="true" />,
-  },
-  {
-    id: 'tenant',
-    to: '/tenant-settings',
-    label: 'Настройки BIRD',
-    icon: <ServerCogIcon className="size-4" aria-hidden="true" />,
-  },
-]
-
-interface SettingsShellProps {
-  title?: string
-  description?: string
-  tabs?: SettingsTabConfig[]
-}

 /**
- * Settings shell — Frame surface, settings-16 left rail.
- * Rail stacks above content until the page container is wide enough (no viewport-only squeeze).
- * @see https://reui.io/preview/base/settings-16
- * @see https://reui.io/preview/base/settings-3
+ * Settings layout — page chrome only.
+ * Side-tab rail lives in `SettingsPageShell` (settings-7 AccountSettings).
+ * @see https://reui.io/preview/base/settings-7
+ * @see https://reui.io/blocks
 */
-export function SettingsShell({
-  title = 'Настройки',
-  description,
-  tabs = DEFAULT_TABS,
-}: SettingsShellProps) {
-  const pathname = useRouterState({ select: (s) => s.location.pathname })
-  const headerDescription =
-    description ??
-    (pathname.startsWith('/tenant-settings')
-      ? 'Глобальные параметры BIRD и плоскости управления'
-      : 'Подключение UI и параметры плоскости управления')
-
+export function SettingsShell() {
  return (
    <PageShell>
-      <div className="@container mx-auto flex w-full min-w-0 max-w-5xl flex-col gap-5">
-        <PageHeader title={title} description={headerDescription} />
-
-        <div className="flex min-w-0 flex-col gap-5 @3xl:flex-row @3xl:items-start">
-          {tabs.length > 1 ? (
-            <nav
-              aria-label="Разделы настроек"
-              className="scrollbar-none flex min-w-0 gap-1 overflow-x-auto @3xl:w-44 @3xl:shrink-0 @3xl:flex-col @3xl:overflow-visible"
-            >
-              {tabs.map((tab) => {
-                const isActive = pathname.startsWith(tab.to)
-                const className = cn(
-                  'flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
-                  '@3xl:w-full',
-                  isActive
-                    ? 'bg-muted text-foreground font-medium shadow-sm ring-1 ring-border/60'
-                    : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
-                )
-                if (tab.to === '/tenant-settings') {
-                  return (
-                    <Link
-                      key={tab.id}
-                      to="/tenant-settings"
-                      search={{ tab: 'bird' }}
-                      aria-current={isActive ? 'page' : undefined}
-                      className={className}
-                    >
-                      {tab.icon}
-                      {tab.label}
-                    </Link>
-                  )
-                }
-                return (
-                  <Link
-                    key={tab.id}
-                    to="/settings"
-                    search={{ tab: 'connection' }}
-                    aria-current={isActive ? 'page' : undefined}
-                    className={className}
-                  >
-                    {tab.icon}
-                    {tab.label}
-                  </Link>
-                )
-              })}
-            </nav>
-          ) : null}
-
-          <div className="min-w-0 flex-1">
-            <Outlet />
-          </div>
-        </div>
-      </div>
+      <Outlet />
    </PageShell>
  )
 }