Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor has no way to add a custom thread color (named, hex-precise) from inside the editor — user has to go to Settings → Thread Library to add colors, can't add from where they're using them #233

New issue

Closed

opened 2026-10-04 02:16:26 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 02:16:26 +00:00

Owner

Finding

src/components/editor/EditorRightPanel.tsx's Thread Color picker (per the #185 fix at line 256) shows the catalog colors in a 5-column grid. The user can pick a catalog color to set the selected path's threadColor. They cannot ADD a new color to the catalog from this picker.

src/components/workspace/threadLibrary.ts:148 defines addColor(entry: { name, hex }) — the action exists. It's plumbed through useThreadLibrary (line 450: addColor: (entry) => ...). The hook is what the Settings modal's CRUD form calls.

The Editor's picker doesn't expose this action. The user has to:

Open the editor
Realize they need a color not in the catalog
Navigate to Settings (gear icon) → Thread Library → "Add Thread" → fill the form → save
Navigate back to the editor
The new color is now in the catalog and they can pick it

Four navigation hops for a common flow.

Where

Editor picker: src/components/editor/EditorRightPanel.tsx (no add button)
addColor action: src/components/workspace/threadLibrary.ts:148
useThreadLibrary hook: src/components/workspace/threadLibrary.ts:444 (exposes addColor)
Settings → Thread Library: per #147 still open; the CRUD form is the current entry point

Suggested fix shape

Add a "+" button at the top of the editor's Thread Color picker:

<button
  onClick={onAddCustomColor}
  title="Add a custom color to the library"
>
  <Plus size={12} />
  Custom color...
</button>

onAddCustomColor opens a small modal (or the same modal used by Settings' "Add Thread" form) with:

Name input (defaults to "Custom N")
Hex color picker
A "Match to thread library" dropdown for catalog names (optional, pre-fills name)
Save / Cancel buttons

The modal is the same form the Settings modal uses; it can be extracted to a shared component.

Save calls useThreadLibrary().addColor(entry) and the new color appears in the editor's picker grid immediately.

Severity

Low. The user can add via Settings. The in-editor entry point is a polish improvement.

Discovered by

Gap analysis (2026-10-02) of thread library surfaces.

#147 (open) — Consolidate thread library surfaces. This is a step toward that consolidation.
#217 (open) — Editor thread bar has no add-stop affordance. Same family.
#216 (open) — Loose match popover. Same picker area.

## Finding `src/components/editor/EditorRightPanel.tsx`'s Thread Color picker (per the #185 fix at line 256) shows the catalog colors in a 5-column grid. The user can pick a catalog color to set the selected path's `threadColor`. They cannot ADD a new color to the catalog from this picker. `src/components/workspace/threadLibrary.ts:148` defines `addColor(entry: { name, hex })` — the action exists. It's plumbed through `useThreadLibrary` (line 450: `addColor: (entry) => ...`). The hook is what the Settings modal's CRUD form calls. The Editor's picker doesn't expose this action. The user has to: - Open the editor - Realize they need a color not in the catalog - Navigate to Settings (gear icon) → Thread Library → "Add Thread" → fill the form → save - Navigate back to the editor - The new color is now in the catalog and they can pick it Four navigation hops for a common flow. ## Where - Editor picker: `src/components/editor/EditorRightPanel.tsx` (no add button) - addColor action: `src/components/workspace/threadLibrary.ts:148` - useThreadLibrary hook: `src/components/workspace/threadLibrary.ts:444` (exposes `addColor`) - Settings → Thread Library: per #147 still open; the CRUD form is the current entry point ## Suggested fix shape Add a "+" button at the top of the editor's Thread Color picker: ```tsx <button onClick={onAddCustomColor} title="Add a custom color to the library" > <Plus size={12} /> Custom color... </button> ``` `onAddCustomColor` opens a small modal (or the same modal used by Settings' "Add Thread" form) with: - Name input (defaults to "Custom N") - Hex color picker - A "Match to thread library" dropdown for catalog names (optional, pre-fills name) - Save / Cancel buttons The modal is the same form the Settings modal uses; it can be extracted to a shared component. Save calls `useThreadLibrary().addColor(entry)` and the new color appears in the editor's picker grid immediately. ## Severity Low. The user can add via Settings. The in-editor entry point is a polish improvement. ## Discovered by Gap analysis (2026-10-02) of thread library surfaces. ## Related - #147 (open) — Consolidate thread library surfaces. This is a step toward that consolidation. - #217 (open) — Editor thread bar has no add-stop affordance. Same family. - #216 (open) — Loose match popover. Same picker area.

Mark added the

feature-request

triage-approved

labels

2026-10-04 02:16:26 +00:00

Mark referenced this issue

2026-10-04 03:36:54 +00:00

Editor has no search/filter in the thread color picker — user with the full Robison-Anton 60-color catalog (or larger custom library) has to scroll through dozens of swatches to find a specific color #256

Mark referenced this issue

2026-10-04 03:36:54 +00:00

Editor's thread color picker shows every catalog color in a uniform grid — no visual differentiation by thread line / brand / type, the user can't tell at a glance which colors are 'standard Robison-Anton' vs 'Brother PR-10' vs 'custom' #257

Mark referenced this issue

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

Editor's Path Properties has 'Color' but the color picker is a simple grid — user with 60+ catalog colors has to scroll the picker to find a specific one (no virtualized scrolling) #386

Mark referenced this issue from a commit

2026-10-04 07:15:07 +00:00

feat(#233): in-editor '+ Custom color' entry point for the Thread Color picker

Mark commented

2026-10-04 07:21:38 +00:00

Author

Owner

Shipped as commit 36a56d4 on main. The editor's Thread Color picker now has a dashed "+" tile as the last cell in its grid; clicking it opens a new AddThreadColorModal that calls useThreadLibrary().addColor and the new color appears in the same picker grid on the next render. SettingsModal.tsx left untouched (out of scope; can adopt the shared modal later).

Local CI gates: tsc clean, eslint clean, 490/490 vitest tests pass (190 in the directly touched files: AddThreadColorModal.test.tsx 9, EditorRightPanel 125 incl. 3 new affordance tests, SettingsModal 17, threadLibrary 26 + 13). Production bundle built cleanly. The Forgejo Actions self-hosted runner is currently offline; the pushed commit will gate on CI when it next comes back. Closes the issue because the in-editor entry point is now in place.

Shipped as commit 36a56d4 on main. The editor's Thread Color picker now has a dashed "+" tile as the last cell in its grid; clicking it opens a new AddThreadColorModal that calls useThreadLibrary().addColor and the new color appears in the same picker grid on the next render. SettingsModal.tsx left untouched (out of scope; can adopt the shared modal later). Local CI gates: tsc clean, eslint clean, 490/490 vitest tests pass (190 in the directly touched files: AddThreadColorModal.test.tsx 9, EditorRightPanel 125 incl. 3 new affordance tests, SettingsModal 17, threadLibrary 26 + 13). Production bundle built cleanly. The Forgejo Actions self-hosted runner is currently offline; the pushed commit will gate on CI when it next comes back. Closes the issue because the in-editor entry point is now in place.

Mark closed this issue

2026-10-04 07:21:42 +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