fix(ui): restore TopBar search + add notifications bell + theme to sidebar

Follow-up к MR !90 per user feedback iterations:

1) "в поиске по справочникам два крестика" — fixed в SearchInput:
   `type="search"` (native browser X) → `type="text"`. Custom onClear X
   остаётся единственным. Catalog input тоже type="text".

2) "блин два крестика было на топбар поиске а тут норм все. верни" —
   restore TopBar search input. Context-aware behavior сохранён:
   - На /dictionaries → live filter каталога через URL ?q=
   - На остальных routes → submit (Enter) → /search records search
   Single X confirmed by visual test.

3) "свитч темы можно тоже в профиль перенести" — ThemeSwitch переехал в
   Sidebar footer (рядом с RU/EN button). Right row в footer: lang button
   слева, theme switch (3 icons sun/moon/monitor) справа через ml-auto.

4) "руководство и версию оставить в топбар чтобы подсвечивать новинки" —
   Docs + VersionBadge stays in TopBar. Туда же добавлена
   NotificationsBell (placeholder Bell icon) — broadcast slot для
   webhook errors / draft reviews / system notices когда backend
   notifications stream появится.
This commit is contained in:
Zimin A.N.
2026-05-11 22:03:12 +03:00
parent d9df2fc359
commit 7e44df3493
4 changed files with 51 additions and 27 deletions
@@ -1,10 +1,9 @@
import { useTranslation } from 'react-i18next'
import { Link, useLocation, useNavigate } from '@tanstack/react-router'
import { useDictionaries, useDictionaryDetail } from '@/api/queries'
import { ThemeSwitch } from '@/components/layout/ThemeSwitch'
import { VersionBadge } from '@/components/version/VersionBadge'
import { SearchInput } from '@/ui/components/search-input'
import { Menu } from 'lucide-react'
import { Bell, Menu } from 'lucide-react'
import { useEffect, useRef, useState } from 'react'
/**
@@ -21,28 +20,24 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
const navigate = useNavigate()
const location = useLocation()
const isCatalog = location.pathname === '/dictionaries'
// Catalog mode: bind input to URL ?q= (live filter). Else: local state submitting к /search.
const catalogQ = isCatalog
? ((location.search as Record<string, unknown>)?.q as string | undefined) ?? ''
: ''
const [searchValue, setSearchValue] = useState(catalogQ)
const inputRef = useRef<HTMLInputElement>(null)
const breadcrumb = useBreadcrumb()
// Sync local state с URL когда navigate на /dictionaries (catalog).
// Sync local input value c URL `?q=` when navigating between routes.
useEffect(() => {
setSearchValue(catalogQ)
}, [catalogQ])
const breadcrumb = useBreadcrumb()
// ⌘K / Ctrl+K shortcut — focus search input from anywhere. Skip когда
// активен другой input/textarea (юзер печатает в record edit form).
// ⌘K / Ctrl+K focus shortcut.
useEffect(() => {
const handler = (e: KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
const target = e.target as HTMLElement
if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {
// Уже в input — пусть default browser shortcut работает.
if (target === inputRef.current) return
}
e.preventDefault()
@@ -55,10 +50,8 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
}, [])
// Context-aware search:
// - На /dictionaries (catalog) каждый keystroke обновляет URL `?q=` чтобы
// filter работал live. Submit (Enter) — no-op (фильтр уже applied).
// - На остальных routes input — local state, submit redirect'ит на /search
// с records search.
// - На /dictionaries — live filter каталога через URL `?q=`
// - На остальных routes — local state, submit redirect'ит на /search
const handleSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {
const v = e.target.value
setSearchValue(v)
@@ -78,7 +71,7 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
e.preventDefault()
const q = searchValue.trim()
if (q.length === 0) return
if (isCatalog) return // На catalog уже live filter, submit не нужен.
if (isCatalog) return
void navigate({ to: '/search', search: { q } })
}
@@ -151,7 +144,9 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
})}
</nav>
{/* Search center, max-width per handoff */}
{/* Search center — context-aware (catalog mode = live filter, else =
* records search submit). Двойной X fixed в SearchInput component
* (type="text" вместо "search" — убрал native browser X). */}
<form onSubmit={handleSearchSubmit} className="hidden md:block ml-auto w-full max-w-[280px]">
<SearchInput
ref={inputRef}
@@ -168,9 +163,10 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
/>
</form>
{/* Right cluster — Docs + VersionBadge + ThemeSwitch only.
* AuthBadge + LanguageSwitch переехали в Sidebar footer per user
* feedback ("вход в сайдбар перенесем", "ru/en в сайдбаре"). */}
{/* Right cluster — broadcast slot per user: "руководство и версию
* оставить в топбар чтобы подсвечивать новинки. туда же и сообщения".
* Docs + VersionBadge + Notifications. ThemeSwitch / Lang / Auth
* переехали в Sidebar footer. */}
<div className="md:ml-0 ml-auto flex items-center gap-2 shrink-0">
<a
href="/docs/"
@@ -183,12 +179,32 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
<span className="hidden md:inline-flex">
<VersionBadge />
</span>
<ThemeSwitch />
<NotificationsBell />
</div>
</header>
)
}
/**
* Placeholder notifications bell — будет показывать N unread сообщений
* (webhook errors, draft reviews, system notices). Click → drawer/popup.
* Сейчас static bell без counter — wire'ится когда backend notifications
* stream появится.
*/
function NotificationsBell() {
const { t } = useTranslation()
return (
<button
type="button"
title={t('topbar.notifications', { defaultValue: 'Уведомления' })}
aria-label={t('topbar.notifications', { defaultValue: 'Уведомления' })}
className="size-7 rounded-md text-ink-2 hover:text-ink hover:bg-surface-2 inline-flex items-center justify-center transition-colors"
>
<Bell size={14} strokeWidth={1.75} />
</button>
)
}
type Crumb = {
label: string
to?: string