From 3f2a6b5d53c7d1c5a2b7e956259121480fb83496 Mon Sep 17 00:00:00 2001
From: "Zimin A.N." <zimin.an@nstart.space>
Date: Wed, 6 May 2026 12:50:44 +0300
Subject: [PATCH] feat(admin-ui): scope accent on dictionary detail page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Перенесли scope-визуальные константы (SCOPE_ORDER, SCOPE_DOT,
SCOPE_ACCENT) в `lib/scope-style.ts` для переиспользования. На detail
странице (`dictionaries/$name`) добавили top accent strip 4px цветом
scope + цветной чип в breadcrumb рядом с back-link. Теперь при переходе
из списка в карточку scope сразу виден без чтения badge в таблице.
---
 ordinis-admin-ui/src/lib/scope-style.ts       | 42 +++++++++++++++++++
 .../src/routes/dictionaries.$name.tsx         | 26 ++++++++++--
 .../src/routes/dictionaries.index.tsx         | 15 +------
 3 files changed, 66 insertions(+), 17 deletions(-)
 create mode 100644 ordinis-admin-ui/src/lib/scope-style.ts

diff --git a/ordinis-admin-ui/src/lib/scope-style.ts b/ordinis-admin-ui/src/lib/scope-style.ts
new file mode 100644
index 0000000..b412fe4
--- /dev/null
+++ b/ordinis-admin-ui/src/lib/scope-style.ts
@@ -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',
+}
diff --git a/ordinis-admin-ui/src/routes/dictionaries.$name.tsx b/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
index 6c5abdb..8f41ed2 100644
--- a/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
+++ b/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
@@ -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={
diff --git a/ordinis-admin-ui/src/routes/dictionaries.index.tsx b/ordinis-admin-ui/src/routes/dictionaries.index.tsx
index 33bafa8..7e8ed8a 100644
--- a/ordinis-admin-ui/src/routes/dictionaries.index.tsx
+++ b/ordinis-admin-ui/src/routes/dictionaries.index.tsx
@@ -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()