feat(admin-ui): Sidebar 220px + TopBar (Stage 3.1)

2026-05-11 08:51:37 +00:00
parent 6d506fed64
commit b2228c2a29
6 changed files with 444 additions and 104 deletions
@@ -0,0 +1,139 @@
+import { useTranslation } from 'react-i18next'
+import { Link, useLocation, useNavigate } from '@tanstack/react-router'
+import { LanguageSwitch } from '@/ui'
+import { AuthBadge } from '@/auth/AuthBadge'
+import { ThemeSwitch } from '@/components/layout/ThemeSwitch'
+import { VersionBadge } from '@/components/version/VersionBadge'
+import { SearchInput } from '@/ui/components/search-input'
+import { useState } from 'react'
+
+/**
+ * TopBar — sticky header (h=56) per handoff design.
+ *
+ * Structure:
+ *  - Left: dynamic breadcrumb based on current route
+ *  - Center: global SearchInput → submits → navigates to /search?q=
+ *  - Right: VersionBadge · ThemeSwitch · LanguageSwitch · Docs · AuthBadge
+ *
+ * Mobile (lg:): на узких экранах sidebar скрывается, breadcrumb sustaiable.
+ */
+const LANG_OPTIONS = [
+  { id: 'ru-RU', label: 'RU' },
+  { id: 'en-US', label: 'EN' },
+]
+
+export function TopBar() {
+  const { t, i18n } = useTranslation()
+  const navigate = useNavigate()
+  const [searchValue, setSearchValue] = useState('')
+
+  const breadcrumb = useBreadcrumb()
+
+  const handleSearchSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    const q = searchValue.trim()
+    if (q.length >= 3) {
+      navigate({ to: '/search', search: { q } })
+    }
+  }
+
+  return (
+    <header className="h-14 shrink-0 border-b border-line bg-surface flex items-center px-4 sm:px-6 gap-3">
+      {/* Breadcrumb — left */}
+      <nav className="flex items-center gap-1.5 text-sm min-w-0">
+        {breadcrumb.map((crumb, i) => {
+          const isLast = i === breadcrumb.length - 1
+          return (
+            <span key={i} className="flex items-center gap-1.5 min-w-0">
+              {i > 0 && <span className="text-mute text-xs">/</span>}
+              {crumb.to && !isLast ? (
+                <Link
+                  to={crumb.to}
+                  className="text-ink-2 hover:text-ink truncate transition-colors"
+                >
+                  {crumb.label}
+                </Link>
+              ) : (
+                <span className={isLast ? 'text-ink font-medium truncate' : 'text-ink-2 truncate'}>
+                  {crumb.label}
+                </span>
+              )}
+            </span>
+          )
+        })}
+      </nav>
+
+      {/* Search — center, max-width per handoff */}
+      <form onSubmit={handleSearchSubmit} className="hidden md:block ml-auto w-full max-w-[280px]">
+        <SearchInput
+          placeholder={t('topbar.search.placeholder')}
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          onClear={() => setSearchValue('')}
+          aria-label={t('topbar.search.label')}
+        />
+      </form>
+
+      {/* Right cluster */}
+      <div className="md:ml-0 ml-auto flex items-center gap-2 shrink-0">
+        <a
+          href="/docs/"
+          target="_blank"
+          rel="noreferrer noopener"
+          className="hidden sm:inline text-xs text-ink-2 hover:text-ink transition-colors"
+        >
+          {t('nav.docs')}
+        </a>
+        <VersionBadge />
+        <ThemeSwitch />
+        <LanguageSwitch
+          value={i18n.language}
+          options={LANG_OPTIONS}
+          onChange={(id) => i18n.changeLanguage(id)}
+        />
+        <AuthBadge />
+      </div>
+    </header>
+  )
+}
+
+/**
+ * Breadcrumb из current route — простой mapping для типичных страниц.
+ * Сложные breadcrumbs (dict name, record bk) — фактически TopBar shows
+ * generic, а более детальный crumb рендерит сам route через PageHeader.
+ */
+function useBreadcrumb(): { label: string; to?: string }[] {
+  const { t } = useTranslation()
+  const location = useLocation()
+  const path = location.pathname
+
+  if (path === '/' || path === '') {
+    return [{ label: t('nav.home') }]
+  }
+
+  const segments = path.split('/').filter(Boolean)
+  const first = segments[0]
+
+  const ROOT_LABELS: Record<string, string> = {
+    dictionaries: t('nav.dictionaries'),
+    search: t('nav.search'),
+    graph: t('nav.graph'),
+    'my-drafts': t('nav.myDrafts'),
+    reviews: t('nav.reviews'),
+    audit: t('nav.audit'),
+    outbox: t('nav.outbox'),
+    webhooks: t('nav.webhooks'),
+  }
+
+  const rootLabel = ROOT_LABELS[first] ?? first
+  const crumbs: { label: string; to?: string }[] = [
+    { label: rootLabel, to: segments.length === 1 ? undefined : `/${first}` },
+  ]
+
+  if (segments.length >= 2) {
+    // Второй сегмент — id / name. Не маппим, оставляем raw.
+    crumbs.push({ label: decodeURIComponent(segments[1]) })
+  }
+
+  return crumbs
+}