Re-split library and preview when the editor is hidden; remember the editor's width

This commit is contained in:
2026-06-09 23:54:20 +03:00
parent 418bf23cd8
commit 3c053310ac
10 changed files with 452 additions and 14 deletions
+8 -1
View File
@@ -3,6 +3,7 @@ import { ConfirmDialog } from './components/ConfirmDialog';
import { LivePreview } from './components/LivePreview';
import { ModalShell } from './components/ModalShell';
import { Onboarding } from './components/Onboarding';
import { PaneSplitHandle } from './components/PaneSplitHandle';
import { PaneToggleStrip } from './components/PaneToggleStrip';
import { ResizeHandle } from './components/ResizeHandle';
import { SnippetLibrary } from './components/SnippetLibrary';
@@ -143,10 +144,16 @@ export function App() {
<SnippetLibrary />
</section>
)}
{/* A resize handle only sits between two visible panes that flank the editor. */}
{/* A resize handle sits between any two adjacent visible panes. With the
editor present it flanks the editor (it absorbs the drag); with the
editor hidden, the library and preview become adjacent and share a
single split handle between them (spec §01A). */}
{libraryVisible && editorVisible && (
<ResizeHandle side="library" label="Resize snippet library" />
)}
{libraryVisible && previewVisible && !editorVisible && (
<PaneSplitHandle label="Resize library and preview" />
)}
{editorVisible && (
<section id="pane-editor" className={styles.paneEditor} aria-label="Spec editor">
<SpecEditor />