Mark/Kimi_Agent_Brother_10_Digitizing_App
1
0
Fork 0
Code Issues 14 Pull requests Projects Releases Packages Wiki Activity Actions

Editor path list shows generic 'Path 1, Path 2, ...' names and the user can't tell them apart at a glance — Help page documents 'stitch types: satin, fill, running, cross-stitch' but the path list doesn't surface the stitch type visually #244

New issue
Closed
opened 2026-10-04 02:36:50 +00:00 by Mark · 1 comment
Mark commented 2026-10-04 02:36:50 +00:00
Owner
Copy link

Finding

src/components/editor/EditorRightPanel.tsx's path list (line 142-180) renders each path as a row with:

  • Color swatch
  • Visibility toggle (eye)
  • Fit-to-View button
  • Path name (default "Path N")
  • Path operations (duplicate, delete)

There's NO visual indicator of the path's stitch type (satin / fill / running / cross-stitch). The user has to click a path, then read the "Stitch Type" dropdown in the right panel's Path Properties section.

A user with 5 paths:

  • "Path 1" (satin, red)
  • "Path 2" (fill, blue)
  • "Path 3" (satin, red)
  • "Path 4" (fill, green)
  • "Path 5" (cross-stitch, black)

They see 5 generic rows. To find "Path 3" (the second satin path), they have to click each one and read the dropdown.

The Help page documents the stitch types and their visual differences. The path list doesn't surface that.

Where

  • Path list: src/components/editor/EditorRightPanel.tsx:142-180
  • Path row content: p.threadColor (color swatch) — that's it
  • Stitch type is in p.stitchType (per the type definition) but not shown in the row
  • The right panel's Path Properties section shows the stitch type dropdown (per the search)

Suggested fix shape

Add a small icon or text label per path row showing the stitch type:

<span className="text-[10px]" style={{ color: '#6B6560' }}>
  {stitchTypeIcon(p.stitchType)}
  {p.stitchType}
</span>

Where stitchTypeIcon is:

const stitchTypeIcon = (type: StitchType) => {
  switch (type) {
    case 'satin': return '━';      // horizontal lines
    case 'fill': return '▦';        // grid
    case 'running': return '╱╲';    // zigzag
    case 'cross-stitch': return '✕'; // X
    default: return '·';
  }
};

Or, more visually, render a small swatch with a 2-3px pattern preview:

  • Satin: 2 parallel horizontal lines
  • Fill: 3x3 grid
  • Running: zigzag line
  • Cross-stitch: X pattern

The user can now visually scan the path list and find the satin paths by their icon.

Optionally: also color-code the row's left border by stitch type (satin = gold, fill = blue, etc.). Visual differentiation in addition to the icon.

Severity

Low. The user can click each path to read the type. Power users with many paths notice.

Discovered by

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

Related

  • #210 (open) — Editor path naming. Same path list; the icon is in addition to the name.
  • #219 (open) — Node visual differentiation. Same family of "make X visible at a glance."
  • The Help page's stitch types section (with visual examples) is the reference for the icons.
## Finding `src/components/editor/EditorRightPanel.tsx`'s path list (line 142-180) renders each path as a row with: - Color swatch - Visibility toggle (eye) - Fit-to-View button - Path name (default "Path N") - Path operations (duplicate, delete) There's NO visual indicator of the path's stitch type (satin / fill / running / cross-stitch). The user has to click a path, then read the "Stitch Type" dropdown in the right panel's Path Properties section. A user with 5 paths: - "Path 1" (satin, red) - "Path 2" (fill, blue) - "Path 3" (satin, red) - "Path 4" (fill, green) - "Path 5" (cross-stitch, black) They see 5 generic rows. To find "Path 3" (the second satin path), they have to click each one and read the dropdown. The Help page documents the stitch types and their visual differences. The path list doesn't surface that. ## Where - Path list: `src/components/editor/EditorRightPanel.tsx:142-180` - Path row content: `p.threadColor` (color swatch) — that's it - Stitch type is in `p.stitchType` (per the type definition) but not shown in the row - The right panel's Path Properties section shows the stitch type dropdown (per the search) ## Suggested fix shape Add a small icon or text label per path row showing the stitch type: ```tsx <span className="text-[10px]" style={{ color: '#6B6560' }}> {stitchTypeIcon(p.stitchType)} {p.stitchType} </span> ``` Where `stitchTypeIcon` is: ```ts const stitchTypeIcon = (type: StitchType) => { switch (type) { case 'satin': return '━'; // horizontal lines case 'fill': return '▦'; // grid case 'running': return '╱╲'; // zigzag case 'cross-stitch': return '✕'; // X default: return '·'; } }; ``` Or, more visually, render a small swatch with a 2-3px pattern preview: - Satin: 2 parallel horizontal lines - Fill: 3x3 grid - Running: zigzag line - Cross-stitch: X pattern The user can now visually scan the path list and find the satin paths by their icon. Optionally: also color-code the row's left border by stitch type (satin = gold, fill = blue, etc.). Visual differentiation in addition to the icon. ## Severity Low. The user can click each path to read the type. Power users with many paths notice. ## Discovered by Gap analysis (2026-10-02) of editor path identification. ## Related - #210 (open) — Editor path naming. Same path list; the icon is in addition to the name. - #219 (open) — Node visual differentiation. Same family of "make X visible at a glance." - The Help page's stitch types section (with visual examples) is the reference for the icons.
Mark commented 2026-10-04 09:09:40 +00:00
Author
Owner
Copy link

Shipped fix(#244) in commit cd708d5 on main.

  • Path list now shows a monospace glyph (═ satin, ▦ fill, ╱ running, ✕ cross-stitch, ◉ motif, ⌇ zigzag) before the type label plus a 1.5px colored leading strip on the row, so users with 5+ paths can spot the second satin path without clicking each row.
  • Existing "N nodes · " text label kept (screen readers + Help page match).
  • 1 new test in EditorRightPanel.test.tsx asserting glyph + strip differ between types; full editor suite 339/339 green.
  • Closes #244.
Shipped fix(#244) in commit cd708d5 on main. - Path list now shows a monospace glyph (═ satin, ▦ fill, ╱ running, ✕ cross-stitch, ◉ motif, ⌇ zigzag) before the type label plus a 1.5px colored leading strip on the row, so users with 5+ paths can spot the second satin path without clicking each row. - Existing "N nodes · <type>" text label kept (screen readers + Help page match). - 1 new test in EditorRightPanel.test.tsx asserting glyph + strip differ between types; full editor suite 339/339 green. - Closes #244.
Mark closed this issue 2026-10-04 09:09:42 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
blocked:commit-ready-failed

   
blocked:gate-fetch

   
blocked:gate-lint

   
blocked:gate-plan

   
blocked:gate-research

   
blocked:needs-attention

Worker halted; needs human/janitor inspection

  
blocked:needs-decision

   
blocked:needs-human

   
blocked:no-changes

   
blocked:verify-failed

   
bug

   
deferred

   
feature-request

   
in-progress

   
needs-decompose

   
needs-triage

   
quickfix

   
security/medium

   
triage-approved
No labels
blocked:commit-ready-failed
blocked:gate-fetch
blocked:gate-lint
blocked:gate-plan
blocked:gate-research
blocked:needs-attention
blocked:needs-decision
blocked:needs-human
blocked:no-changes
blocked:verify-failed
bug
deferred
feature-request
in-progress
needs-decompose
needs-triage
quickfix
security/medium
triage-approved
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Mark/Kimi_Agent_Brother_10_Digitizing_App#244
No description provided.