Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor's path list shows the path's stitch type via the right panel's dropdown but doesn't show which paths use which thread color at a glance — user with 5 paths in 4 different colors can't tell which color is on which path without selecting each #282

New issue

Closed

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

Mark commented

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

Owner

Finding

src/components/editor/EditorRightPanel.tsx's path list rows DO have color swatches (per the snippet: className="shrink-0 w-3 h-3 rounded-full" style={{ backgroundColor: p.threadColor }}).

But the swatch is just a 12px circle. With 5 paths in 4 different colors, the user sees 5 dots and has to:

Hover each to see the name (via the title attribute)
Select each to see the color in the right panel

The fix is to make the swatch larger and add the color name as a tooltip on hover.

Actually wait - this is already partly in place. Let me look more carefully.

grep -n 'threadColor' src/components/editor/EditorRightPanel.tsx returns matches in:

The path list row's swatch (small dot)
The Path Properties section (large swatch with the name)

So the user CAN see the color in the right panel after selecting. But at-a-glance in the path list, only the small dot is shown.

The fix: add a small text label next to the dot showing the color's catalog name. E.g., "PR-10 Red" or "Robison-Anton 9012".

Where

Path list row swatch: src/components/editor/EditorRightPanel.tsx (small dot)
The thread library: passed in as catalog: ThreadColor[]
The path's threadColor is the hex

Suggested fix shape

Show the color name (from the catalog) in the path list row:

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

getCatalogName(hex, catalog):

Look up the catalog entry whose hex matches
Return its name (e.g., "Robison-Anton 9012")
If not found, return "Custom #ff0000" or similar

The user sees the color name in the row without having to select.

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.

The right panel's Path Properties shows the color name; the row is the bulk-summary version.
#244 (open) — Stitch-type icon. Same row; the icon is the "type" visual.
#270 (open) — Node count in row. Same row; the count is the "complexity" visual.

## Finding `src/components/editor/EditorRightPanel.tsx`'s path list rows DO have color swatches (per the snippet: `className="shrink-0 w-3 h-3 rounded-full" style={{ backgroundColor: p.threadColor }}`). But the swatch is just a 12px circle. With 5 paths in 4 different colors, the user sees 5 dots and has to: - Hover each to see the name (via the title attribute) - Select each to see the color in the right panel The fix is to make the swatch larger and add the color name as a tooltip on hover. Actually wait - this is already partly in place. Let me look more carefully. `grep -n 'threadColor' src/components/editor/EditorRightPanel.tsx` returns matches in: - The path list row's swatch (small dot) - The Path Properties section (large swatch with the name) So the user CAN see the color in the right panel after selecting. But at-a-glance in the path list, only the small dot is shown. The fix: add a small text label next to the dot showing the color's catalog name. E.g., "PR-10 Red" or "Robison-Anton 9012". ## Where - Path list row swatch: `src/components/editor/EditorRightPanel.tsx` (small dot) - The thread library: passed in as `catalog: ThreadColor[]` - The path's `threadColor` is the hex ## Suggested fix shape Show the color name (from the catalog) in the path list row: ```tsx <span className="text-[10px]" style={{ color: '#6B6560' }}> {getCatalogName(p.threadColor, catalog)} </span> ``` `getCatalogName(hex, catalog)`: - Look up the catalog entry whose hex matches - Return its name (e.g., "Robison-Anton 9012") - If not found, return "Custom #ff0000" or similar The user sees the color name in the row without having to select. ## 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 - The right panel's Path Properties shows the color name; the row is the bulk-summary version. - #244 (open) — Stitch-type icon. Same row; the icon is the "type" visual. - #270 (open) — Node count in row. Same row; the count is the "complexity" visual.

Mark added the

feature-request

triage-approved

labels

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

Mark referenced this issue

2026-10-04 03:51:42 +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

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:57:49 +00:00

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

Mark referenced this issue

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

Editor's Path Properties has 'Path Properties' but no 'Path color reference' (which catalog entry this path's color matches) — user with the path in #FF0000 doesn't know 'is this Robison-Anton 9012 or Brother PR-10 slot 14?' #381

Mark referenced this issue from a commit

2026-10-04 16:11:22 +00:00

fix(#282): show catalog color name on every path-list row

Mark commented

2026-10-04 16:18:45 +00:00

Author

Owner

Fixed in commit dd87abd on main.

Adds a getCatalogName(hex, catalog) helper (case-insensitive hex match, falls back to Custom #ff0000 for user-added colors no longer in the active library snapshot).

Comfortable view: color name appended to the existing {n} nodes · {type} meta line so users can scan "which paths use Bright Red?" without selecting each one. Carries path-color-name-<id> test hook.
Compact view: a small color name label between the path name and the node-count badge. Truncates with ellipsis; full name remains in title.
Icons view: cell is too small for inline text, so the name is added to the button's title + aria-label (hover / screen reader), with a visually-hidden path-color-name-<id> hook matching the other views' test-id contract.

Tests: 190/190 pass on EditorRightPanel.test.tsx. Related rows #244 (stitch-type icon) and #270 (node count) keep their existing layout — same row, three independent visual cues.

Fixed in commit dd87abd on main. Adds a `getCatalogName(hex, catalog)` helper (case-insensitive hex match, falls back to `Custom #ff0000` for user-added colors no longer in the active library snapshot). - Comfortable view: color name appended to the existing `{n} nodes · {type}` meta line so users can scan "which paths use Bright Red?" without selecting each one. Carries `path-color-name-<id>` test hook. - Compact view: a small color name label between the path name and the node-count badge. Truncates with ellipsis; full name remains in `title`. - Icons view: cell is too small for inline text, so the name is added to the button's `title` + `aria-label` (hover / screen reader), with a visually-hidden `path-color-name-<id>` hook matching the other views' test-id contract. Tests: 190/190 pass on EditorRightPanel.test.tsx. Related rows #244 (stitch-type icon) and #270 (node count) keep their existing layout — same row, three independent visual cues.

Mark closed this issue

2026-10-04 16:18:50 +00:00

Mark referenced this issue from a commit

2026-10-05 18:11:03 +00:00

feat(#381): path color reference in editor Path Properties — shows which catalog entry matches the path's hex

Mark referenced this issue

2026-10-05 18:11:27 +00:00