From 155c70e23cc0e38deb10953c176ff3835712f415 Mon Sep 17 00:00:00 2001
From: "Zimin A.N." <zimin.an@nstart.space>
Date: Mon, 11 May 2026 16:37:38 +0300
Subject: [PATCH] =?UTF-8?q?feat(drawer):=20all-sections=20layout=20=D1=81?=
 =?UTF-8?q?=20chips=20strip=20per=20handoff=20prototype?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Handoff Screen 3 RecordDrawer показывает sections подряд с chips strip
для quick jump, не tabs (currently SchemaDrivenForm has 3 tabs).

SchemaDrivenForm:
  - New optional prop layout: 'tabs' (default, legacy) | 'sections'
  - В sections mode:
    * Section chips strip на верху (sticky top-0) вместо Tabs
    * Chip = bucket name + field count в Mono
    * Click chip → scrollIntoView к section
    * Все 3 buckets рендерятся подряд (visible одновременно)
    * Каждая section получает sticky h3 cap header + scroll-mt-12
    * z-indexed sticky: chips strip = 10, section headers = 5
  - В tabs mode: backward-compat без изменений

RecordDrawer callsite (dictionaries.$name.tsx):
  - Передаёт layout='sections' в SchemaDrivenForm (create + edit)
  - Существующий tabs API остаётся для test'ов которые используют default

Layout matches handoff Screen 3 prototype:
  [chips strip sticky]
  [section: Основное]
   field grid 2-col
  [section: Описание (i18n)]
   localized fields
  [section: Дополнительно]
   optional fields grid

Future Phase B refactor: backend x-section schema metadata (open question
#5) разблокирует per-property sections (вместо bucketing). Текущий
fallback bucketing (identity/description/extra) достаточен для MVP.

Tests: 116 pass (test использует default 'tabs' layout, не разломан).
---
 .../src/components/form/SchemaDrivenForm.tsx  | 70 +++++++++++++++++--
 .../src/routes/dictionaries.$name.tsx         |  2 +
 2 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx b/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
index d114e3d..214757d 100644
--- a/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
+++ b/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
@@ -54,6 +54,11 @@ type Props = {
   formId?: string
   /** Notifies parent of dirty-field count (for "N полей" footer caption). */
   onDirtyChange?: (dirtyCount: number) => void
+  /** Layout mode (default 'tabs' для backward compat):
+   *  - 'tabs': single bucket visible at once, tab bar для switch (legacy)
+   *  - 'sections': all buckets vertically scrollable + section chips strip
+   *    на верху для quick jump. Per handoff Screen 3 RecordDrawer design. */
+  layout?: 'tabs' | 'sections'
 }
 
 const ajv = new Ajv({ allErrors: true, strict: false })
@@ -98,6 +103,7 @@ export const SchemaDrivenForm = ({
   onCancel,
   formId,
   onDirtyChange,
+  layout = 'tabs',
 }: Props) => {
   const { t } = useTranslation()
   const [activeTab, setActiveTab] = useState<TabId>('identity')
@@ -188,15 +194,55 @@ export const SchemaDrivenForm = ({
     onDirtyChange?.(dirtyCount)
   }, [dirtyCount, onDirtyChange])
 
+  // Section visibility — в 'sections' layout все buckets рендерятся подряд,
+  // в 'tabs' — только active. Sections layout per handoff Screen 3 prototype.
+  const showAllSections = layout === 'sections'
+  const sectionVisible = (id: TabId) => showAllSections || activeTab === id
+
+  // Scroll-to-section для chip click (только в sections mode).
+  const scrollToSection = (id: TabId) => {
+    document.getElementById(`form-section-${formId ?? 'default'}-${id}`)?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    })
+  }
+
   return (
     <form
       id={formId}
       onSubmit={handleSubmit(submit)}
       className="space-y-4"
     >
-      <Tabs items={visibleTabs} value={activeTab} onValueChange={(id) => setActiveTab(id as TabId)} />
+      {/* Section chips strip per handoff (sections mode) OR tab bar (legacy). */}
+      {showAllSections ? (
+        <div className="flex flex-wrap items-center gap-1.5 sticky top-0 bg-surface pb-2 -mt-1 z-10">
+          {visibleTabs.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => scrollToSection(tab.id as TabId)}
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-sm bg-surface-2 border border-line hover:bg-accent-bg hover:border-accent text-cap text-ink-2 hover:text-accent transition-colors"
+            >
+              {tab.label}
+              <span className="text-mono text-mute">
+                {buckets[tab.id as TabId].length}
+              </span>
+            </button>
+          ))}
+        </div>
+      ) : (
+        <Tabs items={visibleTabs} value={activeTab} onValueChange={(id) => setActiveTab(id as TabId)} />
+      )}
 
-      <div className={activeTab === 'identity' ? 'block' : 'hidden'}>
+      <div
+        id={`form-section-${formId ?? 'default'}-identity`}
+        className={sectionVisible('identity') ? 'block scroll-mt-12' : 'hidden'}
+      >
+        {showAllSections && (
+          <h3 className="text-cap text-mute mb-2 sticky top-10 bg-surface py-1 z-[5]">
+            {t('form.tabs.identity')}
+          </h3>
+        )}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           {!idSource && (
             <div className="sm:col-span-2">
@@ -258,7 +304,15 @@ export const SchemaDrivenForm = ({
         </div>
       </div>
 
-      <div className={activeTab === 'description' ? 'block' : 'hidden'}>
+      <div
+        id={`form-section-${formId ?? 'default'}-description`}
+        className={sectionVisible('description') ? 'block scroll-mt-12' : 'hidden'}
+      >
+        {showAllSections && buckets.description.length > 0 && (
+          <h3 className="text-cap text-mute mb-2 sticky top-10 bg-surface py-1 z-[5]">
+            {t('form.tabs.description')}
+          </h3>
+        )}
         <div className="grid grid-cols-1 gap-3">
           {buckets.description.map((key) => (
             <FieldRenderer
@@ -276,7 +330,15 @@ export const SchemaDrivenForm = ({
         </div>
       </div>
 
-      <div className={activeTab === 'extra' ? 'block' : 'hidden'}>
+      <div
+        id={`form-section-${formId ?? 'default'}-extra`}
+        className={sectionVisible('extra') ? 'block scroll-mt-12' : 'hidden'}
+      >
+        {showAllSections && buckets.extra.length > 0 && (
+          <h3 className="text-cap text-mute mb-2 sticky top-10 bg-surface py-1 z-[5]">
+            {t('form.tabs.extra')}
+          </h3>
+        )}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           {buckets.extra.map((key) => (
             <FieldRenderer
diff --git a/ordinis-admin-ui/src/routes/dictionaries.$name.tsx b/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
index 7cdfda3..b385c9b 100644
--- a/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
+++ b/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
@@ -995,6 +995,7 @@ function DictionaryDetail() {
             onSubmit={handleSubmit}
             onCancel={() => setEdit({ kind: 'closed' })}
             formId="record-form"
+            layout="sections"
             onDirtyChange={setRecordDirtyCount}
           />
         )}
@@ -1031,6 +1032,7 @@ function DictionaryDetail() {
             onSubmit={handleSubmit}
             onCancel={() => setEdit({ kind: 'closed' })}
             formId="record-form"
+            layout="sections"
             onDirtyChange={setRecordDirtyCount}
           />
         )}