Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor has no 'compact path list' or 'icon-only path list' view — the right panel's path list takes ~250px of horizontal space at all times, can't be collapsed to just icons #267

New issue

Closed

opened 2026-10-04 03:39:44 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:39:44 +00:00

Owner

Finding

src/components/editor/EditorRightPanel.tsx renders the path list as a vertical list of rows (path name + buttons). There's no:

Compact mode (just the color swatch + name)
Icon-only mode (just the color swatch)
Collapsible / hideable path list

grep -n 'compact\|collaps' src/components/editor/EditorRightPanel.tsx returns 0.

A user with 20 paths and a 13" laptop:

Right panel takes 280px
Canvas is squeezed
The path list is showing lots of text and buttons the user has memorized

The right panel has collapsible sections (per SectionHeader), but the Path List section can't be collapsed to just icons.

Where

Path list: src/components/editor/EditorRightPanel.tsx:142-180
No compact mode: grep -n 'compact' src/components/editor/ returns 0 hits for view modes
The SectionHeader pattern: same file (collapsible sections like "Stitch Type", "Density")

Suggested fix shape

Add a view-mode toggle at the top of the Path List section:

<div className="flex items-center gap-1">
  <button onClick={() => setPathListView('comfortable')} className={view === 'comfortable' ? 'active' : ''}>
    <List size={12} /> Comfortable
  </button>
  <button onClick={() => setPathListView('compact')} className={view === 'compact' ? 'active' : ''}>
    <LayoutList size={12} /> Compact
  </button>
  <button onClick={() => setPathListView('icons')} className={view === 'icons' ? 'active' : ''}>
    <Grid3x3 size={12} /> Icons
  </button>
</div>

The three views:

Comfortable (default): color swatch + path name + buttons (current).
Compact: color swatch + path name + visibility + fit-to-view, no duplicate/delete buttons (use right-click menu).
Icons: 5-column grid of color swatches only; hover shows the name; click selects.

The compact and icons views reclaim significant horizontal space, useful on small screens.

Persist the view mode in localStorage so it survives a refresh.

Severity

Low. The user has horizontal space. Power users on small screens notice.

Discovered by

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

The right panel is the most-used surface in the editor. View modes are standard in design tools.
The path list is one of the editor's persistent state; the view mode is a separate concern.
Figma/Illustrator have similar view modes (Layers panel can be compact).

## Finding `src/components/editor/EditorRightPanel.tsx` renders the path list as a vertical list of rows (path name + buttons). There's no: - Compact mode (just the color swatch + name) - Icon-only mode (just the color swatch) - Collapsible / hideable path list `grep -n 'compact\|collaps' src/components/editor/EditorRightPanel.tsx` returns 0. A user with 20 paths and a 13" laptop: - Right panel takes 280px - Canvas is squeezed - The path list is showing lots of text and buttons the user has memorized The right panel has collapsible sections (per `SectionHeader`), but the Path List section can't be collapsed to just icons. ## Where - Path list: `src/components/editor/EditorRightPanel.tsx:142-180` - No compact mode: `grep -n 'compact' src/components/editor/` returns 0 hits for view modes - The SectionHeader pattern: same file (collapsible sections like "Stitch Type", "Density") ## Suggested fix shape Add a view-mode toggle at the top of the Path List section: ```tsx <div className="flex items-center gap-1"> <button onClick={() => setPathListView('comfortable')} className={view === 'comfortable' ? 'active' : ''}> <List size={12} /> Comfortable </button> <button onClick={() => setPathListView('compact')} className={view === 'compact' ? 'active' : ''}> <LayoutList size={12} /> Compact </button> <button onClick={() => setPathListView('icons')} className={view === 'icons' ? 'active' : ''}> <Grid3x3 size={12} /> Icons </button> </div> ``` The three views: - **Comfortable** (default): color swatch + path name + buttons (current). - **Compact**: color swatch + path name + visibility + fit-to-view, no duplicate/delete buttons (use right-click menu). - **Icons**: 5-column grid of color swatches only; hover shows the name; click selects. The compact and icons views reclaim significant horizontal space, useful on small screens. Persist the view mode in `localStorage` so it survives a refresh. ## Severity Low. The user has horizontal space. Power users on small screens notice. ## Discovered by Gap analysis (2026-10-02) of editor right panel. ## Related - The right panel is the most-used surface in the editor. View modes are standard in design tools. - The path list is one of the editor's persistent state; the view mode is a separate concern. - Figma/Illustrator have similar view modes (Layers panel can be compact).

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:39:44 +00:00

Mark referenced this issue

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

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

Mark referenced this issue

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

Editor's Path List doesn't show how many nodes are in each path — user with 10 paths has to click each one to see the node count, no at-a-glance summary #270

Mark referenced this issue

2026-10-04 03:55:35 +00:00

Editor's Path Properties has 'Stitch type' but the dropdown uses internal IDs ('satin', 'fill') instead of human-readable labels ('Satin Stitch (Tatami)', 'Fill Stitch (Tatami)') — user has to map IDs to display names in their head #348

Mark referenced this issue

2026-10-04 03:57:34 +00:00

Editor's Path Properties has 'Path Properties' but no 'Add to favorites' for the path — user wanting to mark certain paths as 'favorites' (e.g., for a multi-path design) has no such affordance #362

~~Mark referenced this issue 2026-10-04 03:59:53 +00:00~~

Editor's Path Properties has 'Path Properties' but no 'Path metadata' (created at, modified at, author) — user wanting to know when a path was created has no timestamp display #377

Mark referenced this issue

2026-10-04 04:01:01 +00:00

Editor's Path Properties has 'Path Properties' but no 'show in object list' toggle — user wanting to hide a path from the path list (but keep it in the design) has no UI, only the canvas visibility toggle #383

Mark referenced this issue from a commit

2026-10-04 12:27:20 +00:00

fix(#267): Editor right-panel path list — three view modes (comfortable / compact / icons) with localStorage persistence

Mark commented

2026-10-04 12:36:33 +00:00

Author

Owner

Shipped fix at commit 408f763 on main (push b0ff49a..408f763).

Adds three view modes for the right-panel Paths section via a List / LayoutList / Grid3x3 toggle:

Comfortable (default): full-row layout unchanged from before.
Compact: single-line row — stitch-type strip, color swatch, name, visibility, fit-to-view. Duplicate/delete live behind the existing right-click menu and selection-summary batch actions.
Icons: 5-column grid of color swatches with stitch-type tint rings; hover surfaces the path name; grouped/hidden paths get corner overlays so no info is lost.

Choice persists in localStorage (tc_editor_path_list_view_v1); malformed payloads fall back to default. Toggle hides when no paths are loaded.

12 new vitest cases (175 total in EditorRightPanel.test.tsx). All 1438 unit tests pass locally; tsc -b + vite build are clean.

Note: Forgejo Actions run for this commit (#7531) is stuck in waiting — the self-hosted runner has been cancelling every recent push-triggered run. Not a fix issue, infra-side.

Shipped fix at commit 408f763 on main (push b0ff49a..408f763). Adds three view modes for the right-panel Paths section via a List / LayoutList / Grid3x3 toggle: - **Comfortable** (default): full-row layout unchanged from before. - **Compact**: single-line row — stitch-type strip, color swatch, name, visibility, fit-to-view. Duplicate/delete live behind the existing right-click menu and selection-summary batch actions. - **Icons**: 5-column grid of color swatches with stitch-type tint rings; hover surfaces the path name; grouped/hidden paths get corner overlays so no info is lost. Choice persists in `localStorage` (`tc_editor_path_list_view_v1`); malformed payloads fall back to default. Toggle hides when no paths are loaded. 12 new vitest cases (175 total in EditorRightPanel.test.tsx). All 1438 unit tests pass locally; `tsc -b` + `vite build` are clean. Note: Forgejo Actions run for this commit (#7531) is stuck in `waiting` — the self-hosted runner has been cancelling every recent push-triggered run. Not a fix issue, infra-side.

Mark closed this issue

2026-10-04 12:36:36 +00:00

Mark referenced this issue from a commit

2026-10-04 13:22:24 +00:00

fix(#270): per-row node count in every path-list view mode

Mark referenced this issue from a commit

2026-10-04 23:50:51 +00:00

fix(#320): per-row path-shape thumbnail in editor right-panel path list

Mark referenced this issue

2026-10-04 23:56:56 +00:00

Editor's path list shows path name but no preview thumbnail — user with 30 paths can't tell what each path looks like without clicking it; the only visual is the canvas itself #320

Mark referenced this issue from a commit