fix(catalog): title→TopBar + toolbar→tinted bar + table white + font fix
Per user feedback:
- "Справочники 37 шт. эта надпись в топбаре" — title с inline count
переехал в TopBar breadcrumb (новый Crumb.caption field, text-cap mute).
Catalog page больше не имеет h1 — start straight from toolbar.
- "фильтры и кнопки в баре таблицы. бар цветом" — toolbar (scope/bundle
pills + counter + Граф + + Создать) обёрнут в tinted `bg-surface-2`
rounded bar с border. Визуально отделяет controls от table chrome.
- "заголовки таблицы белый фон" — table thead was `bg-surface-2` (cream),
сливалось с toolbar bar. Стало `bg-surface` (white) — clean visual
separation toolbar (tinted) → table (white).
- "→ ссылается шрифт не тот" — InfoPanel section subhead "→ ссылается"
/ "← используют" был `text-cap` (Tektur uppercase 10.5px bold).
Прототип использует regular body Inter lowercase mute. Заменил на
`text-body text-mute`.
TopBar useBreadcrumb extended: для catalog route добавляет inline `caption`
field из useDictionaries() count. Editor route остаётся с mono `subtitle`
("name · v1.0.0"). Different fields rendered с different styles.
This commit is contained in:
@@ -99,7 +99,9 @@ export function EditorInfoPanel({ detail, recordCount, actions }: EditorInfoPane
|
||||
>
|
||||
{outgoingNames.length > 0 && (
|
||||
<div className="space-y-1.5 mb-3">
|
||||
<div className="text-cap text-mute">
|
||||
{/* Per prototype: section subhead "→ ссылается" — plain body
|
||||
* font Inter mute, lowercase (НЕ Tektur uppercase cap). */}
|
||||
<div className="text-body text-mute">
|
||||
→ {t('editor.info.outgoing', { defaultValue: 'ссылается' })}
|
||||
</div>
|
||||
<ul className="space-y-0.5">
|
||||
@@ -119,7 +121,7 @@ export function EditorInfoPanel({ detail, recordCount, actions }: EditorInfoPane
|
||||
)}
|
||||
{incomingDeps.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<div className="text-cap text-mute">
|
||||
<div className="text-body text-mute">
|
||||
← {t('editor.info.incoming', { defaultValue: 'используют' })}
|
||||
</div>
|
||||
<ul className="space-y-2">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Link, useLocation, useNavigate } from '@tanstack/react-router'
|
||||
import { useDictionaryDetail } from '@/api/queries'
|
||||
import { useDictionaries, useDictionaryDetail } from '@/api/queries'
|
||||
import { LanguageSwitch } from '@/ui'
|
||||
import { AuthBadge } from '@/auth/AuthBadge'
|
||||
import { ThemeSwitch } from '@/components/layout/ThemeSwitch'
|
||||
@@ -105,6 +105,10 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
|
||||
{isLast && crumb.subtitle && (
|
||||
<span className="text-mono text-cell text-mute shrink-0 ml-1">{crumb.subtitle}</span>
|
||||
)}
|
||||
{/* Catalog route: inline cap "N шт." count badge after title */}
|
||||
{isLast && crumb.caption && (
|
||||
<span className="text-cap text-mute shrink-0 ml-1">{crumb.caption}</span>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
@@ -150,7 +154,14 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
|
||||
)
|
||||
}
|
||||
|
||||
type Crumb = { label: string; to?: string; subtitle?: string }
|
||||
type Crumb = {
|
||||
label: string
|
||||
to?: string
|
||||
/** Mono-styled secondary text (editor route: "name · v1.0.0"). */
|
||||
subtitle?: string
|
||||
/** Cap-styled count badge (catalog route: "40 шт."). */
|
||||
caption?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Breadcrumb из current route. Для editor route ('/dictionaries/$name')
|
||||
@@ -166,6 +177,12 @@ function useBreadcrumb(): Crumb[] {
|
||||
const editorName = editorMatch ? decodeURIComponent(editorMatch[1]) : undefined
|
||||
const editorDict = useDictionaryDetail(editorName)
|
||||
|
||||
// Catalog route: total dict count для inline "N шт." subtitle на breadcrumb.
|
||||
// Запрос cached глобально (useDictionaries) — не вызывает extra fetch.
|
||||
const isCatalog = path === '/dictionaries'
|
||||
const dictsQuery = useDictionaries()
|
||||
const dictsCount = dictsQuery.data?.length
|
||||
|
||||
if (path === '/' || path === '') {
|
||||
return [{ label: t('nav.home') }]
|
||||
}
|
||||
@@ -185,6 +202,23 @@ function useBreadcrumb(): Crumb[] {
|
||||
}
|
||||
|
||||
const rootLabel = ROOT_LABELS[first] ?? first
|
||||
|
||||
// Catalog: title "Справочники" + inline caption "N шт." per user feedback.
|
||||
if (isCatalog) {
|
||||
return [
|
||||
{
|
||||
label: rootLabel,
|
||||
caption:
|
||||
typeof dictsCount === 'number'
|
||||
? t('dict.list.countShort', {
|
||||
count: dictsCount,
|
||||
defaultValue: `${dictsCount} шт.`,
|
||||
})
|
||||
: undefined,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
const crumbs: Crumb[] = [
|
||||
{ label: rootLabel, to: segments.length === 1 ? undefined : `/${first}` },
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user