From bc737820d6a74755494987bf7c45cc2674ab2365 Mon Sep 17 00:00:00 2001
From: "Zimin A.N." <zimin.an@nstart.space>
Date: Mon, 11 May 2026 19:35:43 +0300
Subject: [PATCH] feat(catalog): scope-colored row stripes + filter pills +
 chips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per redesign prototype screenshot: каждая row имеет 3px цветной strip слева
по scope + filter chips заполняются scope-color когда active.

- DictRow: добавлен absolute-positioned `<span>` шириной 3px на левом краю
  первой td (relative wrapper), background = SCOPE_DOT (PUBLIC=accent,
  INTERNAL=warn, RESTRICTED=pink). pl-1 на контенте чтобы не наезжал.
- Row bg tint: для INTERNAL/RESTRICTED rows — subtle SCOPE_BG_TINT/30,
  PUBLIC = plain white (default).
- SCOPE col chip: использует SCOPE_BG_TINT + SCOPE_TEXT вместо generic
  Badge info — теперь PUBLIC chip orange, INTERNAL amber, RESTRICTED pink.
- Toolbar scope filter pills: active state = SCOPE_BG_TINT + SCOPE_TEXT +
  border-transparent (filled in scope color). Inactive = outline.
---
 .../src/routes/dictionaries.index.tsx         | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/ordinis-admin-ui/src/routes/dictionaries.index.tsx b/ordinis-admin-ui/src/routes/dictionaries.index.tsx
index b121eb9..68de1dd 100644
--- a/ordinis-admin-ui/src/routes/dictionaries.index.tsx
+++ b/ordinis-admin-ui/src/routes/dictionaries.index.tsx
@@ -23,7 +23,7 @@ import { dictionaryDependentsQuery, useDictionaries, useDictionaryDependents } f
 import type { DataScope, DictionaryDefinition, SchemaDependent } from '@/api/client'
 import { DictionaryEditorDialog } from '@/components/schema/DictionaryEditorDialog'
 import { useCanMutate } from '@/auth/useCanMutate'
-import { SCOPE_DOT, SCOPE_ORDER } from '@/lib/scope-style'
+import { SCOPE_BG_TINT, SCOPE_DOT, SCOPE_ORDER, SCOPE_TEXT } from '@/lib/scope-style'
 
 // ===== Search params =====
 
@@ -248,7 +248,7 @@ function DictionariesPage() {
                 title={t(`dict.list.section.${scope}`)}
                 className={`text-cap tracking-[0.14em] uppercase font-semibold px-3 py-1.5 rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-accent/40 ${
                   selected
-                    ? 'border-ink bg-surface text-ink ring-1 ring-ink'
+                    ? `${SCOPE_BG_TINT[scope]} ${SCOPE_TEXT[scope]} border-transparent`
                     : 'border-line bg-surface text-ink-2 hover:border-ink-2 hover:bg-surface-2'
                 }`}
               >
@@ -473,18 +473,28 @@ function DictRow({ d, t }: { d: DictionaryDefinition; t: TFunc }) {
     }
   }
 
+  // Per redesign prototype: row левый край имеет 4px stripe в scope color +
+  // INTERNAL/RESTRICTED rows получают subtle bg tint для visual scope grouping.
+  // PUBLIC = plain white (default — самый common scope не нужно подкрашивать).
+  const rowTint = d.scope === 'PUBLIC' ? '' : `${SCOPE_BG_TINT[d.scope]}/30`
+
   return (
     <tr
       role="link"
       tabIndex={0}
       onClick={handleClick}
       onKeyDown={handleKey}
-      className="border-b border-line-2 last:border-b-0 cursor-pointer hover:bg-surface-2/40 focus-visible:outline-none focus-visible:bg-accent-bg/30 transition-colors"
+      className={`relative border-b border-line-2 last:border-b-0 cursor-pointer hover:bg-surface-2/40 focus-visible:outline-none focus-visible:bg-accent-bg/30 transition-colors ${rowTint}`}
     >
-      {/* name + subtitle (description short) */}
-      <td className="px-3 py-2 align-top min-w-0">
-        <div className="flex items-center gap-2">
-          <span className={`inline-block size-1.5 rounded-full shrink-0 ${SCOPE_DOT[d.scope]}`} aria-hidden />
+      {/* name + subtitle (description short) + scope-color left stripe */}
+      <td className="relative px-3 py-2 align-top min-w-0">
+        {/* 3px scope stripe — absolutely positioned на левом краю row.
+          * td имеет relative чтобы before работало в table context. */}
+        <span
+          aria-hidden
+          className={`absolute left-0 top-0 bottom-0 w-[3px] ${SCOPE_DOT[d.scope]}`}
+        />
+        <div className="flex items-center gap-2 pl-1">
           <span className="text-body font-medium text-ink truncate">
             {d.displayName ?? d.name}
           </span>
@@ -493,7 +503,7 @@ function DictRow({ d, t }: { d: DictionaryDefinition; t: TFunc }) {
           )}
         </div>
         {d.description && (
-          <p className="text-cell text-mute mt-0.5 truncate max-w-md">
+          <p className="text-cell text-mute mt-0.5 truncate max-w-md pl-1">
             {d.description}
           </p>
         )}
@@ -506,9 +516,13 @@ function DictRow({ d, t }: { d: DictionaryDefinition; t: TFunc }) {
       <td className="px-3 py-2 hidden lg:table-cell">
         <span className="text-cap text-mute">{d.bundle}</span>
       </td>
-      {/* scope badge */}
+      {/* scope badge — colored по scope (PUBLIC accent / INTERNAL warn / RESTRICTED pink) */}
       <td className="px-3 py-2 hidden sm:table-cell">
-        <Badge variant="info">{d.scope}</Badge>
+        <span
+          className={`inline-flex items-center px-2 py-0.5 rounded-sm text-cap tracking-wider font-semibold uppercase ${SCOPE_BG_TINT[d.scope]} ${SCOPE_TEXT[d.scope]}`}
+        >
+          {d.scope}
+        </span>
       </td>
       {/* records count */}
       <td className="px-3 py-2 text-right tabular-nums text-mono text-ink-2 hidden md:table-cell">