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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user