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
@@ -28,6 +28,7 @@ import { SchemaDrivenForm } from '@/components/form/SchemaDrivenForm'
import { DictionaryEditorDialog } from '@/components/schema/DictionaryEditorDialog'
import { RecordHistoryDrawer } from '@/components/record/RecordHistoryDrawer'
import { nowIsoLocal } from '@/lib/dates'
import { SCOPE_BORDER_TOP, SCOPE_DOT } from '@/lib/scope-style'
export const Route = createFileRoute('/dictionaries/$name')({
component: DictionaryDetail,
@@ -87,14 +88,33 @@ function DictionaryDetail() {
const serverError = serverErrorMessage(activeMutation?.error)
const totalRecords = recordsResult.data?.length ?? 0
const scope = detailQuery.data?.scope
return (
<div className="space-y-6">
{scope && (
<div
className={`-mt-6 -mx-4 sm:-mx-6 lg:-mx-8 mb-2 h-1 border-t-4 ${SCOPE_BORDER_TOP[scope]}`}
aria-hidden="true"
/>
)}
<PageHeader
breadcrumb={
<Link to="/dictionaries" className="text-sm text-carbon/70 hover:text-ultramarain">
{t('nav.dictionaries')}
</Link>
<div className="flex items-center gap-3 text-sm">
<Link to="/dictionaries" className="text-carbon/70 hover:text-ultramarain">
{t('nav.dictionaries')}
</Link>
{scope && (
<span className="flex items-center gap-1.5 text-carbon/70">
<span className="text-carbon/40">·</span>
<span
className={`inline-block size-2 rounded-full ${SCOPE_DOT[scope]}`}
aria-hidden="true"
/>
<span className="font-medium">{t(`dict.list.section.${scope}`)}</span>
</span>
)}
</div>
}
title={detailQuery.data?.displayName ?? name}
description={