From 5afc233a4b2076c7934fe41c763c8d80553d61ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=20?=
 =?UTF-8?q?=D0=97=D0=B8=D0=BC=D0=B8=D0=BD?= <zimin.an@nstart.space>
Date: Sun, 10 May 2026 18:30:49 +0000
Subject: [PATCH] fix(admin-ui): compact catalog toolbar (single row)

---
 ordinis-admin-ui/src/i18n.ts                  |   8 ++
 .../src/routes/dictionaries.index.tsx         | 115 ++++++++++--------
 2 files changed, 72 insertions(+), 51 deletions(-)

diff --git a/ordinis-admin-ui/src/i18n.ts b/ordinis-admin-ui/src/i18n.ts
index 3727ee2..324e6d5 100644
--- a/ordinis-admin-ui/src/i18n.ts
+++ b/ordinis-admin-ui/src/i18n.ts
@@ -225,6 +225,10 @@ i18n
           'dict.list.section.PUBLIC': 'Публичные',
           'dict.list.section.INTERNAL': 'Внутренние',
           'dict.list.section.RESTRICTED': 'Ограниченные',
+          'dict.list.section.PUBLIC.short': 'PUB',
+          'dict.list.section.INTERNAL.short': 'INT',
+          'dict.list.section.RESTRICTED.short': 'RES',
+          'dict.list.deps.short': 'СО СВЯЗЯМИ',
           // Catalog v2 (URL-driven filters + sort + density)
           'dict.list.heading': 'Каталог справочников',
           'dict.list.filter.scope': 'Фильтр по области',
@@ -695,6 +699,10 @@ i18n
           'dict.list.section.PUBLIC': 'Public',
           'dict.list.section.INTERNAL': 'Internal',
           'dict.list.section.RESTRICTED': 'Restricted',
+          'dict.list.section.PUBLIC.short': 'PUB',
+          'dict.list.section.INTERNAL.short': 'INT',
+          'dict.list.section.RESTRICTED.short': 'RES',
+          'dict.list.deps.short': 'WITH LINKS',
           // Catalog v2
           'dict.list.heading': 'Dictionary catalog',
           'dict.list.filter.scope': 'Scope filter',
diff --git a/ordinis-admin-ui/src/routes/dictionaries.index.tsx b/ordinis-admin-ui/src/routes/dictionaries.index.tsx
index 660e79e..7e4de2a 100644
--- a/ordinis-admin-ui/src/routes/dictionaries.index.tsx
+++ b/ordinis-admin-ui/src/routes/dictionaries.index.tsx
@@ -213,9 +213,11 @@ function DictionariesPage() {
         actions={createButton}
       />
 
-      {/* Toolbar: search + count + scope chips + "deps only" */}
-      <div className="flex flex-wrap items-center gap-3">
-        <div className="flex-1 min-w-[300px] max-w-md">
+      {/* Compact toolbar: всё в одной строке (wraps на narrow viewport).
+          Tradeoff: scope/bundle chips меньше padding'а + краткие labels.
+          UPPERCASE labels оставлены для consistency с brand voice (Tektur-like). */}
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+        <div className="flex-1 min-w-[240px] max-w-sm">
           <SearchInput
             value={search.q ?? ''}
             onChange={(e) => setSearch({ q: e.target.value })}
@@ -224,14 +226,15 @@ function DictionariesPage() {
           />
         </div>
 
-        <span className="text-2xs uppercase tracking-label text-carbon/70 whitespace-nowrap">
-          {t('dict.list.found', { shown: filtered.length, total: data.length })}
+        <span className="text-2xs uppercase tracking-label text-carbon/60 whitespace-nowrap font-mono">
+          {filtered.length}/{data.length}
         </span>
 
+        {/* Scope chips: компактные, dot + count, full label по hover'у через title */}
         <div
           role="group"
           aria-label={t('dict.list.filter.scope')}
-          className="flex items-center gap-1.5 flex-wrap"
+          className="flex items-center gap-1"
         >
           {SCOPE_ORDER.map((scope) => {
             const selected = scopeFilter.has(scope)
@@ -242,76 +245,86 @@ function DictionariesPage() {
                 type="button"
                 onClick={() => toggleScope(scope)}
                 aria-pressed={selected}
-                className={`px-3 py-1.5 rounded-full text-2xs uppercase tracking-label flex items-center gap-1.5 border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 ${
+                title={t(`dict.list.section.${scope}`)}
+                className={`px-2 py-1 rounded-full text-2xs uppercase tracking-label flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 font-mono ${
                   selected
                     ? 'border-ultramarain bg-orbit/40 text-ultramarain'
                     : 'border-regolith hover:border-ultramarain/60 text-carbon'
                 }`}
               >
                 <span
-                  className={`inline-block size-2 rounded-full ${SCOPE_DOT[scope]}`}
+                  className={`inline-block size-1.5 rounded-full ${SCOPE_DOT[scope]}`}
                   aria-hidden="true"
                 />
-                {t(`dict.list.section.${scope}`)} · {count}
+                {t(`dict.list.section.${scope}.short`)}
+                <span className="text-carbon/60 ml-0.5">{count}</span>
               </button>
             )
           })}
         </div>
 
+        {/* Vertical divider */}
+        <span className="h-5 w-px bg-regolith" aria-hidden="true" />
+
+        {/* Bundle filter — chips inline */}
+        <div
+          role="group"
+          aria-label="Bundle"
+          className="flex items-center gap-1"
+        >
+          <button
+            type="button"
+            onClick={() => setBundle(undefined)}
+            aria-pressed={!bundleFilter}
+            className={`px-2 py-1 rounded-sm text-2xs uppercase tracking-label border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 ${
+              !bundleFilter
+                ? 'border-ultramarain bg-orbit/40 text-ultramarain'
+                : 'border-regolith hover:border-ultramarain/60 text-carbon'
+            }`}
+          >
+            {t('dict.list.bundle.all')}
+          </button>
+          {Array.from(bundleCounts.entries())
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([bundle, count]) => {
+              const selected = bundleFilter === bundle
+              return (
+                <button
+                  key={bundle}
+                  type="button"
+                  onClick={() => setBundle(selected ? undefined : bundle)}
+                  aria-pressed={selected}
+                  className={`px-2 py-1 rounded-sm text-2xs uppercase tracking-label flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 font-mono ${
+                    selected
+                      ? 'border-ultramarain bg-orbit/40 text-ultramarain'
+                      : 'border-regolith hover:border-ultramarain/60 text-carbon'
+                  }`}
+                >
+                  {bundle}
+                  <span className="text-carbon/60">{count}</span>
+                </button>
+              )
+            })}
+        </div>
+
+        {/* Vertical divider + deps toggle */}
+        <span className="h-5 w-px bg-regolith" aria-hidden="true" />
+
         <button
           type="button"
           onClick={() => setSearch({ deps: withDepsOnly ? undefined : '1' })}
           aria-pressed={withDepsOnly}
-          className={`px-3 py-1.5 rounded-sm text-2xs uppercase tracking-label border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 ${
+          title={t('dict.list.deps.only')}
+          className={`px-2 py-1 rounded-sm text-2xs uppercase tracking-label border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 ${
             withDepsOnly
               ? 'border-ultramarain bg-orbit/40 text-ultramarain'
               : 'border-regolith hover:border-ultramarain/60 text-carbon'
           }`}
         >
-          {t('dict.list.deps.only')}
+          {t('dict.list.deps.short')}
         </button>
       </div>
 
-      {/* Bundle filter row */}
-      <div className="flex flex-wrap items-center gap-2">
-        <span className="text-2xs uppercase tracking-label text-carbon/70 mr-1 font-mono">
-          BUNDLE
-        </span>
-        <button
-          type="button"
-          onClick={() => setBundle(undefined)}
-          aria-pressed={!bundleFilter}
-          className={`px-3 py-1 rounded-sm text-2xs uppercase tracking-label border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 ${
-            !bundleFilter
-              ? 'border-ultramarain bg-orbit/40 text-ultramarain'
-              : 'border-regolith hover:border-ultramarain/60 text-carbon'
-          }`}
-        >
-          {t('dict.list.bundle.all')}
-        </button>
-        {Array.from(bundleCounts.entries())
-          .sort(([a], [b]) => a.localeCompare(b))
-          .map(([bundle, count]) => {
-            const selected = bundleFilter === bundle
-            return (
-              <button
-                key={bundle}
-                type="button"
-                onClick={() => setBundle(selected ? undefined : bundle)}
-                aria-pressed={selected}
-                className={`px-3 py-1 rounded-sm text-2xs uppercase tracking-label border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 font-mono ${
-                  selected
-                    ? 'border-ultramarain bg-orbit/40 text-ultramarain'
-                    : 'border-regolith hover:border-ultramarain/60 text-carbon'
-                }`}
-              >
-                {bundle}
-                <span className="ml-1.5 text-carbon/60">{count}</span>
-              </button>
-            )
-          })}
-      </div>
-
       {/* Empty state */}
       {filtered.length === 0 ? (
         <div className="border border-regolith rounded-lg p-12 text-center bg-orbit/10">