fix(ui): visible History button + remove left rail + dark JSON viewer
This commit is contained in:
@@ -356,26 +356,11 @@ export const SchemaDrivenForm = ({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Wide-mode left rail: detection через ResizeObserver. Когда form container
|
// Wide-mode left rail УБРАН — user feedback: «в редакторе записей все
|
||||||
// ≥720px (drawer wide mode = 880px) — показываем 180px nav rail слева
|
// таки левая навигация лишняя». В sections layout остался только chip
|
||||||
// с section list + counts. Иначе chip strip на top sufficient. Container-
|
// strip сверху (sticky), он же выполняет функцию quick-jump.
|
||||||
// based вместо viewport-based чтобы narrow drawer на wide viewport не
|
|
||||||
// рендерил rail (drawer = 520px не fits).
|
|
||||||
const formContainerRef = useRef<HTMLFormElement>(null)
|
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 ? (
|
const sectionsChipStrip = showAllSections ? (
|
||||||
<div className="flex flex-wrap items-center gap-1.5 sticky top-0 bg-surface pb-2 -mt-1 z-10">
|
<div className="flex flex-wrap items-center gap-1.5 sticky top-0 bg-surface pb-2 -mt-1 z-10">
|
||||||
{visibleTabs.map((tab) => (
|
{visibleTabs.map((tab) => (
|
||||||
@@ -394,36 +379,12 @@ export const SchemaDrivenForm = ({
|
|||||||
</div>
|
</div>
|
||||||
) : null
|
) : 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 (
|
return (
|
||||||
<form
|
<form
|
||||||
id={formId}
|
id={formId}
|
||||||
onSubmit={handleSubmit(submit)}
|
onSubmit={handleSubmit(submit)}
|
||||||
ref={formContainerRef}
|
ref={formContainerRef}
|
||||||
className={showRail ? 'grid grid-cols-[180px_1fr] gap-6' : ''}
|
|
||||||
>
|
>
|
||||||
{leftRail}
|
|
||||||
<div className="space-y-4 min-w-0">
|
<div className="space-y-4 min-w-0">
|
||||||
{showAllSections ? sectionsChipStrip : (
|
{showAllSections ? sectionsChipStrip : (
|
||||||
<Tabs items={visibleTabs} value={activeTab} onValueChange={(id) => setActiveTab(id)} />
|
<Tabs items={visibleTabs} value={activeTab} onValueChange={(id) => setActiveTab(id)} />
|
||||||
|
|||||||
@@ -182,9 +182,12 @@ export function RecordDrawer({
|
|||||||
aria-label={t('history.title')}
|
aria-label={t('history.title')}
|
||||||
title={t('history.title')}
|
title={t('history.title')}
|
||||||
onClick={onHistory}
|
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>
|
</button>
|
||||||
)}
|
)}
|
||||||
<DialogPrimitive.Close
|
<DialogPrimitive.Close
|
||||||
|
|||||||
@@ -1823,11 +1823,17 @@ function JsonTabContent({ detail }: { detail: { schemaJson: import('@/api/client
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleCopy}
|
onClick={handleCopy}
|
||||||
className="absolute top-2 right-2 z-10 px-2.5 py-1 rounded-sm border border-line bg-surface text-cap hover:border-accent transition-colors"
|
// Copy button — dark-glass overlay поверх code block для contrast
|
||||||
|
// с тёмным фоном (см. pre).
|
||||||
|
className="absolute top-2 right-2 z-10 px-2.5 py-1 rounded-sm border border-[#3d3863] bg-[#1c1840]/85 backdrop-blur text-cap text-[#c5bff0] hover:text-[#f0eaff] hover:border-[#ff9a64] transition-colors"
|
||||||
>
|
>
|
||||||
{copied ? t('json.copied', { defaultValue: 'Скопировано' }) : t('json.copy', { defaultValue: 'Копировать' })}
|
{copied ? t('json.copied', { defaultValue: 'Скопировано' }) : t('json.copy', { defaultValue: 'Копировать' })}
|
||||||
</button>
|
</button>
|
||||||
<pre className="rounded-lg border border-line bg-surface-2 p-4 overflow-x-auto text-[12px] font-mono text-ink whitespace-pre">
|
{/* Code block — dark theme (space palette из graph), убираем cream
|
||||||
|
* bg-surface-2 который user feedback'нул как «желтый кремовый».
|
||||||
|
* Highlight token colors (text-accent/green/pink/warn) работают на
|
||||||
|
* тёмном фоне OK благодаря accessible contrast. */}
|
||||||
|
<pre className="rounded-lg border border-[#3d3863] bg-[#0c0a23] p-4 overflow-x-auto text-[12px] font-mono text-[#f0eaff] whitespace-pre">
|
||||||
<code dangerouslySetInnerHTML={{ __html: highlightJson(json) }} />
|
<code dangerouslySetInnerHTML={{ __html: highlightJson(json) }} />
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user