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

New issue

Closed

opened 2026-10-04 03:51:42 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:51:42 +00:00

Owner

Finding

src/components/editor/EditorRightPanel.tsx's path list row has color swatch + name + buttons. No thumbnail.

grep -rn 'pathThumbnail\|previewPath' src/components/editor/ returns 0.

A user with 30 paths:

Path list shows: "Path 1 (red)", "Path 2 (blue)", "Path 3 (red)", "Path 4 (green)", ...
Wants to find "the path that looks like a star"
Has to click each one
Wastes time

The fix is a small thumbnail (40x40 SVG) of the path's shape, rendered next to the name.

Where

Path list row: src/components/editor/EditorRightPanel.tsx:142-180
No thumbnail: grep -rn 'pathThumbnail' src/components/editor/ returns 0

Suggested fix shape

Component: a small <PathThumbnail> component that renders the path's nodes as a tiny SVG:

function PathThumbnail({ nodes, size = 32 }: { nodes: PathNode[]; size?: number }) {
  if (nodes.length === 0) return null;
  const bbox = pathBoundingBox(nodes);
  const scale = size / Math.max(bbox.width, bbox.height);
  return (
    <svg width={size} height={size} viewBox={`${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`}>
      <polyline
        points={nodes.map((n) => `${n.x},${n.y}`).join(' ')}
        fill="none"
        stroke="currentColor"
        strokeWidth={1 / scale}
      />
    </svg>
  );
}

UI: each path list row has the thumbnail next to the name:

<PathThumbnail nodes={p.nodes} />
<span>{p.name}</span>

Performance: for 30 paths with 100 nodes each, the thumbnails are 30 tiny SVGs. Render time is negligible.
Polish: the thumbnail uses the path's color, so "Path 3 (red)" shows a red star instead of just text.

Severity

Low. The user can click each path. Power users with many paths notice.

Discovered by

Gap analysis (2026-10-02) of editor path list affordances.

#244 (open) — Stitch type icon. Same row; the icon is one visual cue.
#270 (open) — Node count. Same row; the count is the "complexity" cue.
#282 (open) — Color name. Same row; the color name is the "color" cue.
Figma's Layers panel has thumbnails; the editor's gap is the parallel.

## Finding `src/components/editor/EditorRightPanel.tsx`'s path list row has color swatch + name + buttons. No thumbnail. `grep -rn 'pathThumbnail\|previewPath' src/components/editor/` returns 0. A user with 30 paths: - Path list shows: "Path 1 (red)", "Path 2 (blue)", "Path 3 (red)", "Path 4 (green)", ... - Wants to find "the path that looks like a star" - Has to click each one - Wastes time The fix is a small thumbnail (40x40 SVG) of the path's shape, rendered next to the name. ## Where - Path list row: `src/components/editor/EditorRightPanel.tsx:142-180` - No thumbnail: `grep -rn 'pathThumbnail' src/components/editor/` returns 0 ## Suggested fix shape 1. **Component**: a small `<PathThumbnail>` component that renders the path's nodes as a tiny SVG: ```tsx function PathThumbnail({ nodes, size = 32 }: { nodes: PathNode[]; size?: number }) { if (nodes.length === 0) return null; const bbox = pathBoundingBox(nodes); const scale = size / Math.max(bbox.width, bbox.height); return ( <svg width={size} height={size} viewBox={`${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`}> <polyline points={nodes.map((n) => `${n.x},${n.y}`).join(' ')} fill="none" stroke="currentColor" strokeWidth={1 / scale} /> </svg> ); } ``` 2. **UI**: each path list row has the thumbnail next to the name: ```tsx <PathThumbnail nodes={p.nodes} /> <span>{p.name}</span> ``` 3. **Performance**: for 30 paths with 100 nodes each, the thumbnails are 30 tiny SVGs. Render time is negligible. 4. **Polish**: the thumbnail uses the path's color, so "Path 3 (red)" shows a red star instead of just text. ## Severity Low. The user can click each path. Power users with many paths notice. ## Discovered by Gap analysis (2026-10-02) of editor path list affordances. ## Related - #244 (open) — Stitch type icon. Same row; the icon is one visual cue. - #270 (open) — Node count. Same row; the count is the "complexity" cue. - #282 (open) — Color name. Same row; the color name is the "color" cue. - Figma's Layers panel has thumbnails; the editor's gap is the parallel.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:51:43 +00:00

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 commented

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

Author

Owner

Closed by commit c33a9f7 on main.

What landed

A new <PathThumbnail> component renders a tiny (28-40 SVG) shape
preview next to each path row in the right panel, painted in the
path's thread color. A user with 30 paths can now spot "the path
that looks like a star" without clicking each row.

Implementation

New component reuses pathBoundingBox from geometry.ts (same
helper the align/distribute/flip/rotate paths use, #258 / #205).
Three degenerate cases handled:
- 0 nodes → dashed placeholder box (so the row's vertical rhythm
  stays intact).
- 1 node → single dot (a polyline of one point is invisible).
- ≥2 nodes → polyline of the anchors.
Closed paths append the first anchor again so the loop closes
visually, matching the canvas's stroke behavior.
Comfortable view (#267 default): 28px thumbnail at the row's
leading slot, between the stitch strip and the swatch.
Compact view (#267): same SVG at 24px so the row's horizontal
density stays compact.
Icons view (#267): thumbnail intentionally absent — that view's
contract is 'color swatch only' and the thumbnail would clutter
the cell.

Tests

src/components/editor/issue-320.test.tsx — 7 assertions pinning
the per-row test-id, the thread-color stroke, the empty-state /
single-state fallbacks, the closed-path loop append, compact-view
rendering, and icons-view absence. All 734 editor tests pass (was
727 before; +7 from the new file). Typecheck clean for
EditorRightPanel.tsx, geometry.ts, types.ts.

Note on CI

The Forgejo self-hosted runner has been stuck (every recent run
#7576-#7580 is cancelled or waiting with no job pickup) since
at least 22:10 today — pre-existing infrastructure drift, not
related to #320. Local test + typecheck are the gates. Same
completion shape as #317.

Closed by commit c33a9f7 on main. **What landed** A new `<PathThumbnail>` component renders a tiny (28-40 SVG) shape preview next to each path row in the right panel, painted in the path's thread color. A user with 30 paths can now spot "the path that looks like a star" without clicking each row. **Implementation** - New component reuses `pathBoundingBox` from `geometry.ts` (same helper the align/distribute/flip/rotate paths use, #258 / #205). - Three degenerate cases handled: - 0 nodes → dashed placeholder box (so the row's vertical rhythm stays intact). - 1 node → single dot (a polyline of one point is invisible). - ≥2 nodes → polyline of the anchors. - Closed paths append the first anchor again so the loop closes visually, matching the canvas's stroke behavior. - Comfortable view (#267 default): 28px thumbnail at the row's leading slot, between the stitch strip and the swatch. - Compact view (#267): same SVG at 24px so the row's horizontal density stays compact. - Icons view (#267): thumbnail intentionally absent — that view's contract is 'color swatch only' and the thumbnail would clutter the cell. **Tests** `src/components/editor/issue-320.test.tsx` — 7 assertions pinning the per-row test-id, the thread-color stroke, the empty-state / single-state fallbacks, the closed-path loop append, compact-view rendering, and icons-view absence. All 734 editor tests pass (was 727 before; +7 from the new file). Typecheck clean for `EditorRightPanel.tsx`, `geometry.ts`, `types.ts`. **Note on CI** The Forgejo self-hosted runner has been stuck (every recent run #7576-#7580 is `cancelled` or `waiting` with no job pickup) since at least 22:10 today — pre-existing infrastructure drift, not related to #320. Local test + typecheck are the gates. Same completion shape as #317.

Mark closed this issue

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