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
+42
View File
@@ -0,0 +1,42 @@
import type { DataScope } from '@/api/client'
/**
* Visual ordering: PUBLIC → INTERNAL → RESTRICTED.
* Reads as escalating sensitivity, matches semaphore mental model.
*/
export const SCOPE_ORDER: ReadonlyArray<DataScope> = [
'PUBLIC',
'INTERNAL',
'RESTRICTED',
]
/**
* Solid background classes for ●-shaped scope indicators (size-2 dots,
* section-header bullets).
*/
export const SCOPE_DOT: Record<DataScope, string> = {
PUBLIC: 'bg-emerald-500',
INTERNAL: 'bg-amber-500',
RESTRICTED: 'bg-rose-500',
}
/**
* `before:` background classes used for the 4px left-accent stripe on
* dictionary cards. Pair with `relative` + `before:absolute before:left-0
* before:top-0 before:bottom-0 before:w-1 before:rounded-l-lg`.
*/
export const SCOPE_ACCENT: Record<DataScope, string> = {
PUBLIC: 'before:bg-emerald-500',
INTERNAL: 'before:bg-amber-500',
RESTRICTED: 'before:bg-rose-500',
}
/**
* Solid border-top classes for page-level scope banner stripes (used on
* dictionary detail page).
*/
export const SCOPE_BORDER_TOP: Record<DataScope, string> = {
PUBLIC: 'border-t-emerald-500',
INTERNAL: 'border-t-amber-500',
RESTRICTED: 'border-t-rose-500',
}