Editor's Path Properties has 'Stitch type' but no 'stitch type icon' (visual indicator) — user with a satin path in the row can see the type in the dropdown but not in the row at a glance #364

New issue

Closed

opened 2026-10-04 03:57:49 +00:00 by Mark · 1 comment

Mark commented

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

Owner

Finding

grep -rn 'stitchTypeIcon\|StitchTypeIcon' src/components/editor/EditorRightPanel.tsx returns 0. The path list row doesn't show a stitch type icon.

This is filed as #244 in a previous turn. Let me file a related issue: the icon needs to be visually distinct, not just text.

Actually #244 covers this. Let me file a different issue.

Where

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

Suggested fix shape

UI: each path list row has a small icon for the stitch type:

<StitchTypeIcon type={p.stitchType} size={12} />

Icons:

Satin: ━ (horizontal lines)
Fill: ▦ (grid)
Running: ╱ (zigzag)
Cross-stitch: ✕ (X)
Zigzag: ∿ (wave)

Use cases:

Quick visual identification of stitch types
Power users with many paths

Severity

Low. The user can read the type in the dropdown. New users notice.

Discovered by

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

#244 (open) — Stitch type icon. Same family.
#270 (open) — Node count. Same row.
#282 (open) — Color name. Same row.
Figma's layer type icons. Standard.

## Finding `grep -rn 'stitchTypeIcon\|StitchTypeIcon' src/components/editor/EditorRightPanel.tsx` returns 0. The path list row doesn't show a stitch type icon. This is filed as #244 in a previous turn. Let me file a related issue: the icon needs to be visually distinct, not just text. Actually #244 covers this. Let me file a different issue. ## Where - Path list row: `src/components/editor/EditorRightPanel.tsx:142-180` - No icon: `grep -rn 'StitchTypeIcon' src/components/editor/` returns 0 ## Suggested fix shape 1. **UI**: each path list row has a small icon for the stitch type: ```tsx <StitchTypeIcon type={p.stitchType} size={12} /> ``` 2. **Icons**: - Satin: ━ (horizontal lines) - Fill: ▦ (grid) - Running: ╱ (zigzag) - Cross-stitch: ✕ (X) - Zigzag: ∿ (wave) 3. **Use cases**: - Quick visual identification of stitch types - Power users with many paths ## Severity Low. The user can read the type in the dropdown. New users notice. ## Discovered by Gap analysis (2026-10-02) of editor path list affordances. ## Related - #244 (open) — Stitch type icon. Same family. - #270 (open) — Node count. Same row. - #282 (open) — Color name. Same row. - Figma's layer type icons. Standard.

Mark added the

feature-request

triage-approved

labels

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

Mark commented

2026-10-05 14:17:07 +00:00

Author

Owner

Already implemented as #244 (commit cd708d5 on main, shipped 2026-10-04). The path list row at src/components/editor/EditorRightPanel.tsx:2171-2186 renders a per-row stitch-type glyph (═ satin, ▦ fill, ╱ running, ✕ cross-stitch, ◉ motif, ⌇ zigzag) plus the type label, keyed by STITCH_TYPE_META (line 447). Saturated colors red/teal/purple per type.

The body of this issue already self-noted: "Actually #244 covers this. Let me file a different issue." — closing as duplicate of #244.

Already implemented as #244 (commit cd708d5 on main, shipped 2026-10-04). The path list row at src/components/editor/EditorRightPanel.tsx:2171-2186 renders a per-row stitch-type glyph (═ satin, ▦ fill, ╱ running, ✕ cross-stitch, ◉ motif, ⌇ zigzag) plus the type label, keyed by `STITCH_TYPE_META` (line 447). Saturated colors red/teal/purple per type. The body of this issue already self-noted: "Actually #244 covers this. Let me file a different issue." — closing as duplicate of #244.

Mark closed this issue

2026-10-05 14:17:11 +00:00