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
@@ -16,6 +16,7 @@ import { useAuth } from 'react-oidc-context'
import { useCanMutate } from '@/auth/useCanMutate'
import { useDictionaries, useMyDrafts } from '@/api/queries'
import { Sheet, SheetContent } from '@/ui'
import { ThemeSwitch } from '@/components/layout/ThemeSwitch'
import { cn } from '@/lib/utils'
/**
@@ -238,20 +239,22 @@ function SidebarFooter({
return (
<>
{/* Language toggle row (только когда expanded). */}
{/* Language toggle + Theme switch row (только когда expanded).
* ThemeSwitch и LanguageSwitch переехали из TopBar per user
* ("свитч темы можно тоже в профиль перенести"). */}
{!collapsed && (
<div className="border-t border-line px-3 py-2 flex items-center gap-2 shrink-0">
<span className="text-cap text-mute">
{t('sidebar.lang', { defaultValue: 'Язык' })}
</span>
<button
type="button"
onClick={() => i18n.changeLanguage(next)}
className="ml-auto h-7 px-2.5 rounded-md border border-line bg-surface text-cap text-ink-2 hover:bg-surface-2 hover:text-ink transition-colors"
className="h-7 px-2.5 rounded-md border border-line bg-surface text-cap text-ink-2 hover:bg-surface-2 hover:text-ink transition-colors"
aria-label={`Language: ${cur.toUpperCase()}, click to switch`}
>
{cur.toUpperCase()}
</button>
<div className="ml-auto">
<ThemeSwitch />
</div>
</div>
)}
@@ -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
@@ -231,10 +231,12 @@ function DictionariesPage() {
{/* Toolbar top section of the panel, tinted bg + bottom border.
* Узкая: px-3 py-1.5 (~6px vertical) per user feedback ("бар поужать"). */}
<div className="flex flex-wrap items-center gap-2 bg-surface-2 border-b border-line px-3 py-1.5">
{/* Catalog search — filter dicts by name/displayName/description. */}
{/* Catalog search filter dicts by name/displayName/description.
* type="text" (не "search") чтобы избежать native X мы рендерим
* свой clear button если нужно. */}
<div className="flex-1 min-w-[200px] max-w-xs">
<input
type="search"
type="text"
value={search.q ?? ''}
onChange={(e) =>
setSearch({ q: e.target.value || undefined })
@@ -23,7 +23,10 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
/>
<Input
ref={ref}
type="search"
// type="text" вместо "search" — native browser X (Chrome/Safari)
// дублировал custom onClear X справа ("два крестика"). Custom X
// имеет правильный onClick handler и tracks state, native — нет.
type="text"
value={value}
className={cn('pl-8', hasValue && onClear && 'pr-8', className)}
{...props}