Editor's right panel has no collapsible sections toggle — every section is always expanded (Path List, Path Properties, Playback, etc.), user has to scroll past sections they don't need at the moment #268

New issue

Closed

opened 2026-10-04 03:40:15 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:40:15 +00:00

Owner

Finding

src/components/editor/EditorRightPanel.tsx has collapsible sections via SectionHeader (per the isOpen prop). But:

The path list section: needs check
The Path Properties section: needs check
The Playback section: needs check
The Stitch Type section: needs check

grep -n 'SectionHeader' src/components/editor/EditorRightPanel.tsx returns multiple uses, but the defaults may all be true.

A user editing a complex design:

Has 5 sections expanded at once
Scrolls past Stitch Type, Density, Path Properties to get to the bottom
The Playback section is rarely used
The Path Properties section is only relevant when a path is selected

A "Collapse all" / "Expand all" toggle at the top of the right panel would let the user manage their view.

Where

SectionHeader: src/components/editor/EditorRightPanel.tsx (per SectionHeader title="X" isOpen={...})
The openSections state: per the snippet earlier
No collapse-all: grep -n 'collapseAll' src/ returns 0

Suggested fix shape

Add a small toolbar at the top of the right panel:

<div className="flex items-center justify-between mb-2 text-[11px]" style={{ color: '#6B6560' }}>
  <span>Sections</span>
  <div className="flex items-center gap-1">
    <button onClick={collapseAll} title="Collapse all sections">
      <ChevronsDownUp size={12} />
    </button>
    <button onClick={expandAll} title="Expand all sections">
      <ChevronsUpDown size={12} />
    </button>
  </div>
</div>

collapseAll() sets all openSections.X to false. expandAll() sets them to true.

Additionally:

Each SectionHeader's button toggles its specific section (already in place).
The user's preferred expanded set is persisted to localStorage so it survives a refresh.

Severity

Low. The user can click each header. Power users with many sections notice.

Discovered by

Gap analysis (2026-10-02) of editor right panel.

The path list compact mode (per #267) is a related view-mode concern.
The Settings modal has collapsible sections (per SettingsModal.tsx); the right panel's pattern mirrors it.
Figma/Illustrator have similar collapse-all buttons in the Layers panel.

## Finding `src/components/editor/EditorRightPanel.tsx` has collapsible sections via `SectionHeader` (per the `isOpen` prop). But: - The path list section: needs check - The Path Properties section: needs check - The Playback section: needs check - The Stitch Type section: needs check `grep -n 'SectionHeader' src/components/editor/EditorRightPanel.tsx` returns multiple uses, but the defaults may all be `true`. A user editing a complex design: - Has 5 sections expanded at once - Scrolls past Stitch Type, Density, Path Properties to get to the bottom - The Playback section is rarely used - The Path Properties section is only relevant when a path is selected A "Collapse all" / "Expand all" toggle at the top of the right panel would let the user manage their view. ## Where - SectionHeader: `src/components/editor/EditorRightPanel.tsx` (per `SectionHeader title="X" isOpen={...}`) - The `openSections` state: per the snippet earlier - No collapse-all: `grep -n 'collapseAll' src/` returns 0 ## Suggested fix shape Add a small toolbar at the top of the right panel: ```tsx <div className="flex items-center justify-between mb-2 text-[11px]" style={{ color: '#6B6560' }}> <span>Sections</span> <div className="flex items-center gap-1"> <button onClick={collapseAll} title="Collapse all sections"> <ChevronsDownUp size={12} /> </button> <button onClick={expandAll} title="Expand all sections"> <ChevronsUpDown size={12} /> </button> </div> </div> ``` `collapseAll()` sets all `openSections.X` to `false`. `expandAll()` sets them to `true`. Additionally: - Each SectionHeader's button toggles its specific section (already in place). - The user's preferred expanded set is persisted to localStorage so it survives a refresh. ## Severity Low. The user can click each header. Power users with many sections notice. ## Discovered by Gap analysis (2026-10-02) of editor right panel. ## Related - The path list compact mode (per #267) is a related view-mode concern. - The Settings modal has collapsible sections (per `SettingsModal.tsx`); the right panel's pattern mirrors it. - Figma/Illustrator have similar collapse-all buttons in the Layers panel.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:40:15 +00:00

Mark referenced this issue from a commit

2026-10-04 12:47:17 +00:00

fix(#268): Editor right-panel Sections toolbar — Collapse-all / Expand-all with localStorage persistence

Mark commented

2026-10-04 12:47:34 +00:00

Author

Owner

Shipped in commit d0315cd on main (push 408f763..d0315cd).

What changed in src/components/editor/EditorRightPanel.tsx:

Extended openSections to register every section (paths, playback, reference_image, node_edit, path_draw, history) so the toolbar can flip them in unison
Wrapped the Paths and Playback bodies in isSectionOpen() guards (other sections were already wrapped)
Added a 'Sections' toolbar at the top of the right panel with ChevronsDownUp / ChevronsUpDown buttons — sits left of the existing panel-collapse chevron
Persisted the user's chosen section set to localStorage (key: tc_editor_panel_sections_v1) so the choice survives a refresh
Hydrate on mount with a type guard + JSON.parse fallback; malformed payload degrades gracefully to defaults rather than stranding the panel

Tests (8 new, all 1446 pass):

Toolbar renders with both buttons
Collapse-all hides Paths and Playback bodies; Expand-all restores them
Per-section toggle still works (clicking the Paths header hides only Paths)
localStorage write on click; payload shape verified
Persisted state restored on remount
Malformed JSON payload falls back to all-open
Unknown section key in payload is ignored while known keys still take effect

Verified: typecheck clean, lint clean, vite build succeeds (1.12 MB bundle unchanged in size class), full vitest suite green.

Shipped in commit d0315cd on main (push 408f763..d0315cd). What changed in src/components/editor/EditorRightPanel.tsx: - Extended openSections to register every section (paths, playback, reference_image, node_edit, path_draw, history) so the toolbar can flip them in unison - Wrapped the Paths and Playback bodies in isSectionOpen() guards (other sections were already wrapped) - Added a 'Sections' toolbar at the top of the right panel with ChevronsDownUp / ChevronsUpDown buttons — sits left of the existing panel-collapse chevron - Persisted the user's chosen section set to localStorage (key: tc_editor_panel_sections_v1) so the choice survives a refresh - Hydrate on mount with a type guard + JSON.parse fallback; malformed payload degrades gracefully to defaults rather than stranding the panel Tests (8 new, all 1446 pass): - Toolbar renders with both buttons - Collapse-all hides Paths and Playback bodies; Expand-all restores them - Per-section toggle still works (clicking the Paths header hides only Paths) - localStorage write on click; payload shape verified - Persisted state restored on remount - Malformed JSON payload falls back to all-open - Unknown section key in payload is ignored while known keys still take effect Verified: typecheck clean, lint clean, vite build succeeds (1.12 MB bundle unchanged in size class), full vitest suite green.

Mark closed this issue

2026-10-04 12:47:56 +00:00