fix(ui): visible History button + remove left rail + dark JSON viewer

This commit is contained in:
Александр Зимин
2026-05-12 00:18:03 +00:00
parent aefd6a8428
commit 2a76b9382e
3 changed files with 16 additions and 46 deletions
@@ -356,26 +356,11 @@ export const SchemaDrivenForm = ({
})
}
// Wide-mode left rail: detection через ResizeObserver. Когда form container
// ≥720px (drawer wide mode = 880px) — показываем 180px nav rail слева
// с section list + counts. Иначе chip strip на top sufficient. Container-
// based вместо viewport-based чтобы narrow drawer на wide viewport не
// рендерил rail (drawer = 520px не fits).
// Wide-mode left rail УБРАН — user feedback: «в редакторе записей все
// таки левая навигация лишняя». В sections layout остался только chip
// strip сверху (sticky), он же выполняет функцию quick-jump.
const formContainerRef = useRef<HTMLFormElement>(null)
const [showRail, setShowRail] = useState(false)
useEffect(() => {
if (!showAllSections || !formContainerRef.current) return
const node = formContainerRef.current
const ro = new ResizeObserver((entries) => {
const width = entries[0]?.contentRect.width ?? 0
setShowRail(width >= 720)
})
ro.observe(node)
return () => ro.disconnect()
}, [showAllSections])
// Body content (sections + form fields) — рендерится либо напрямую,
// либо в grid 180px+1fr когда showRail (wide mode).
const sectionsChipStrip = 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) => (
@@ -394,36 +379,12 @@ export const SchemaDrivenForm = ({
</div>
) : null
// Left rail для wide mode — sticky nav с section list + per-section
// field counts. Click → scrollToSection (smooth scroll к anchor).
const leftRail = showRail && showAllSections ? (
<aside className="self-start sticky top-0 pt-0.5">
<nav className="flex flex-col gap-0.5">
{visibleTabs.map((tab) => (
<button
key={tab.id}
type="button"
onClick={() => scrollToSection(tab.id)}
className="flex items-center justify-between gap-2 px-2.5 py-1.5 rounded-sm hover:bg-surface-2 text-body text-ink-2 hover:text-ink text-left transition-colors"
>
<span className="truncate">{tab.label}</span>
<span className="text-mono text-cell text-mute shrink-0">
{filteredBuckets[tab.id]?.length ?? 0}
</span>
</button>
))}
</nav>
</aside>
) : null
return (
<form
id={formId}
onSubmit={handleSubmit(submit)}
ref={formContainerRef}
className={showRail ? 'grid grid-cols-[180px_1fr] gap-6' : ''}
>
{leftRail}
<div className="space-y-4 min-w-0">
{showAllSections ? sectionsChipStrip : (
<Tabs items={visibleTabs} value={activeTab} onValueChange={(id) => setActiveTab(id)} />
@@ -182,9 +182,12 @@ export function RecordDrawer({
aria-label={t('history.title')}
title={t('history.title')}
onClick={onHistory}
className="p-1.5 rounded-sm text-mute hover:text-ink hover:bg-surface-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
// Icon-only вариант user'у было незаметно («кнопок не вижу»).
// Теперь icon + text label, более prominent в header'е.
className="inline-flex items-center gap-1.5 px-2 py-1 rounded-sm text-cap text-ink-2 hover:text-ink hover:bg-surface-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
<History size={16} />
<History size={14} />
<span>{t('history.title')}</span>
</button>
)}
<DialogPrimitive.Close