From ac1ca8d035d928bfd90ab36650cd38a196a73ebc Mon Sep 17 00:00:00 2001 From: "Zimin A.N." Date: Mon, 11 May 2026 19:43:05 +0300 Subject: [PATCH] =?UTF-8?q?feat(topbar):=20match=20redesign=20prototype=20?= =?UTF-8?q?=E2=80=94=20breadcrumb=20back-arrow=20+=20cleaner=20right=20clu?= =?UTF-8?q?ster?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Per /Users/zimin/Downloads/Ordinis (4)/redesign/compact.html. TopBar breadcrumb: - Detail routes теперь показывают `← Справочники / Космические аппараты` с back-arrow prefix на parent crumb (caption text, mute). Bold title + inline mono subtitle "satellites · v1.0.0". - Catalog route: simple "Dictionaries" title. TopBar right cluster cleanup: - Removed `Docs` link — diagnostic, не critical UX, моя кноп не нужна для UI flow. - Removed `VersionBadge` (commit + tag) — был noise рядом с продакшн features. Build info всё ещё доступна в browser console / Docs. - ThemeSwitch: tri-state (Light/Dark/System icons 3×24px) заменён на 2-button `Earth | Dark` с text labels (per prototype). `system` preference остаётся в localStorage для existing users, но новый UI не выставляет. - LanguageSwitch: dual radio `RU | EN` заменён на single toggle button — показывает текущий язык как label, click переключает на следующий. Saves ~60px горизонтально, matches prototype. EditorInfoPanel order: - Action buttons (Экспорт / Time-travel / AOI) переехали из середины panel (между metadata и Relations) в bottom (после Relations) — per prototype. Info → meta → relations → actions flow. - Action order: Экспорт первым (frequent), затем Time-travel, AOI последним (rare для most dicts). --- .../src/components/editor/EditorInfoPanel.tsx | 104 +++++++++--------- .../src/components/layout/ThemeSwitch.tsx | 40 ++++--- .../src/components/layout/TopBar.tsx | 80 ++++++++------ 3 files changed, 120 insertions(+), 104 deletions(-) diff --git a/ordinis-admin-ui/src/components/editor/EditorInfoPanel.tsx b/ordinis-admin-ui/src/components/editor/EditorInfoPanel.tsx index 0b00fea..6d4588a 100644 --- a/ordinis-admin-ui/src/components/editor/EditorInfoPanel.tsx +++ b/ordinis-admin-ui/src/components/editor/EditorInfoPanel.tsx @@ -72,57 +72,6 @@ export function EditorInfoPanel({ detail, recordCount, actions }: EditorInfoPane - {/* Actions — bottom buttons per redesign prototype: Time-travel + AOI */} - {actions && ( -
- {actions.onTimeTravel && ( - - )} - {actions.onAoi && ( - - )} - {actions.onExport && ( - - )} -
- )} - {/* Relations — merged inline DictionaryDependentsPanel в InfoPanel. * → ссылается: outgoing FK targets (имя dict, links). * ← используют: incoming FK rows с field path + active count + policy chip @@ -202,6 +151,59 @@ export function EditorInfoPanel({ detail, recordCount, actions }: EditorInfoPane )} )} + + {/* Actions — bottom buttons per redesign prototype: Экспорт + Time-travel + * + AOI. После Relations block чтобы не разрывать info → meta → relations + * мыслительный поток info-panel'а. */} + {actions && ( +
+ {actions.onExport && ( + + )} + {actions.onTimeTravel && ( + + )} + {actions.onAoi && ( + + )} +
+ )} ) } diff --git a/ordinis-admin-ui/src/components/layout/ThemeSwitch.tsx b/ordinis-admin-ui/src/components/layout/ThemeSwitch.tsx index 65158cf..da8465d 100644 --- a/ordinis-admin-ui/src/components/layout/ThemeSwitch.tsx +++ b/ordinis-admin-ui/src/components/layout/ThemeSwitch.tsx @@ -1,37 +1,42 @@ import { useTranslation } from 'react-i18next' -import { Monitor, Moon, Sun } from 'lucide-react' import { useTheme, type ThemePreference } from '@/stores/ThemeProvider' import { cn } from '@/lib/utils' /** - * Tri-state theme switch: Light / Dark / System. + * Theme switch per redesign prototype — 2-button segmented control с text + * labels "Earth | Dark". Filled accent-bg на active. * - *

Segmented control с тремя иконками. Активный — `--color-accent` - * background + `--color-on-accent` foreground. Click меняет `preference` - * в {@link ThemeProvider}, который пишет в localStorage и переключает - * `data-theme` на html. + *

Прошлый tri-state (Light/Dark/System icons) был noise — "system" preference + * редко используется явно, мало кто понимает Monitor icon. Простой 2-button + * `Earth / Dark` toggle — точно повторяет prototype и улучшает discoverability. * - *

System icon показывает «follow OS» — auto-update при OS theme change. + *

Internally "Earth" maps на `light` preference (Earthy palette default). + * "System" preference больше не выставляется через UI; localStorage value + * остаётся валидным (ThemeProvider может read), но новые users получают + * explicit light/dark choice. */ export function ThemeSwitch() { const { t } = useTranslation() const { preference, setPreference } = useTheme() - const items: { id: ThemePreference; label: string; icon: typeof Sun }[] = [ - { id: 'light', label: t('theme.light'), icon: Sun }, - { id: 'dark', label: t('theme.dark'), icon: Moon }, - { id: 'system', label: t('theme.system'), icon: Monitor }, + // Treat 'system' как 'light' для UI — переключение всё равно flatten'ит + // preference на explicit choice. + const activeId: Exclude = + preference === 'dark' ? 'dark' : 'light' + + const items: { id: Exclude; label: string }[] = [ + { id: 'light', label: t('theme.earth', { defaultValue: 'Earth' }) }, + { id: 'dark', label: t('theme.dark', { defaultValue: 'Dark' }) }, ] return (

{items.map((item) => { - const Icon = item.icon - const active = preference === item.id + const active = activeId === item.id return ( ) })} diff --git a/ordinis-admin-ui/src/components/layout/TopBar.tsx b/ordinis-admin-ui/src/components/layout/TopBar.tsx index 00d2e2e..7a2f3ef 100644 --- a/ordinis-admin-ui/src/components/layout/TopBar.tsx +++ b/ordinis-admin-ui/src/components/layout/TopBar.tsx @@ -1,10 +1,8 @@ import { useTranslation } from 'react-i18next' import { Link, useLocation, useNavigate } from '@tanstack/react-router' import { useDictionaryDetail } from '@/api/queries' -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 { Menu } from 'lucide-react' import { useEffect, useRef, useState } from 'react' @@ -18,13 +16,8 @@ import { useEffect, useRef, useState } from 'react' * + ⌘K / Ctrl+K shortcut focuses input from anywhere * - Right: VersionBadge · ThemeSwitch · LanguageSwitch · Docs · AuthBadge */ -const LANG_OPTIONS = [ - { id: 'ru-RU', label: 'RU' }, - { id: 'en-US', label: 'EN' }, -] - export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) { - const { t, i18n } = useTranslation() + const { t } = useTranslation() const navigate = useNavigate() const [searchValue, setSearchValue] = useState('') const inputRef = useRef(null) @@ -73,30 +66,37 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) { )} - {/* Breadcrumb — left. Editor route ('/dictionaries/$name') получает - * augmented breadcrumb с displayName + version (per redesign prototype). - * Остальные routes: regular path-based breadcrumb. */} -