feat(admin-ui): scope accent on dictionary detail page

Перенесли scope-визуальные константы (SCOPE_ORDER, SCOPE_DOT,
SCOPE_ACCENT) в `lib/scope-style.ts` для переиспользования. На detail
странице (`dictionaries/$name`) добавили top accent strip 4px цветом
scope + цветной чип в breadcrumb рядом с back-link. Теперь при переходе
из списка в карточку scope сразу виден без чтения badge в таблице.
This commit is contained in:
Zimin A.N.
2026-05-06 12:50:44 +03:00
parent 353130c529
commit 3f2a6b5d53
3 changed files with 66 additions and 17 deletions
@@ -14,6 +14,7 @@ import { PlusIcon } from '@phosphor-icons/react'
import { useDictionaries } from '@/api/queries'
import type { DataScope, DictionaryDefinition } from '@/api/client'
import { DictionaryEditorDialog } from '@/components/schema/DictionaryEditorDialog'
import { SCOPE_ACCENT, SCOPE_DOT, SCOPE_ORDER } from '@/lib/scope-style'
export const Route = createFileRoute('/dictionaries/')({
component: DictionariesPage,
@@ -27,20 +28,6 @@ const matchesQuery = (d: DictionaryDefinition, q: string): boolean => {
return haystack.includes(q)
}
const SCOPE_ORDER: ReadonlyArray<DataScope> = ['PUBLIC', 'INTERNAL', 'RESTRICTED']
const SCOPE_DOT: Record<DataScope, string> = {
PUBLIC: 'bg-emerald-500',
INTERNAL: 'bg-amber-500',
RESTRICTED: 'bg-rose-500',
}
const SCOPE_ACCENT: Record<DataScope, string> = {
PUBLIC: 'before:bg-emerald-500',
INTERNAL: 'before:bg-amber-500',
RESTRICTED: 'before:bg-rose-500',
}
function DictionariesPage() {
const { t } = useTranslation()
const navigate = useNavigate()