Editor has no way to add a new thread stop from the thread bar — workspace has ADD_THREAD_STOP but the editor's EditorThreadBar is read-only (select only) #217

New issue

Closed

opened 2026-10-04 00:04:20 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 00:04:20 +00:00

Owner

Finding

src/components/editor/EditorThreadBar.tsx (the file we saw earlier) renders thread stops as clickable buttons. The onSelectThread callback fires on click and changes currentThreadIndex. There's no onAddStop prop, no "+" button, no way to add a new color to the palette from the editor.

src/components/workspace/BottomThreadBar.tsx (the workspace equivalent) has onAddStop and a + Add button (per the comment chain and the type definition at line 8-12).

A user editing a design in the editor:

Wants to use a new color (e.g., a custom orange they got from the catalog)
The current thread stops don't include that color
They have to navigate Settings → Manage Threads → add the color
Then navigate back to the editor
The color is now in useThreadLibrary but the new paths still use the old colors

The workspace's right panel has the same gap (per the workspace's own button being tied to the ADD_THREAD_STOP reducer action, which is only triggered from the right panel's color picker).

Where

Editor thread bar: src/components/editor/EditorThreadBar.tsx (no add button)
Workspace add: src/components/workspace/BottomThreadBar.tsx (has add button)
Workspace right panel add: src/components/workspace/RightPanel.tsx (per ADD_THREAD_STOP dispatch)
Settings → Thread Library: add via the modal CRUD form (per #147 still open)

Suggested fix shape

Add a "+" button to the editor's thread bar:

<button
  onClick={onAddStop}
  className="w-6 h-6 flex items-center justify-center rounded"
  title="Add a new thread stop"
>
  <Plus size={12} />
</button>

onAddStop opens the workspace's color picker (the same picker used in the right panel). Picking a color dispatches ADD_THREAD_STOP to the workspace reducer, which is shared with the editor (via useWorkspace or a similar hook).

The picker can be a small modal (reusing ColorPickerDialog from the workspace) or a popover. The popover approach matches the existing "Thread Color" picker UX in the editor's right panel.

Severity

Low. The user can add a stop via Settings → Thread Library; the in-bar picker is a polish improvement.

Discovered by

Gap analysis (2026-10-02) of editor thread bar affordances.

#185 (closed) — Editor color picker for selected path. Same color-picker pattern; sibling affordance.
#147 (open) — Consolidate thread library surfaces. The thread library's CRUD form is one surface; the in-bar picker would be a second.
#216 (open) — Loose match popover. Same bar, sibling affordance.

## Finding `src/components/editor/EditorThreadBar.tsx` (the file we saw earlier) renders thread stops as clickable buttons. The `onSelectThread` callback fires on click and changes `currentThreadIndex`. There's no `onAddStop` prop, no "+" button, no way to add a new color to the palette from the editor. `src/components/workspace/BottomThreadBar.tsx` (the workspace equivalent) has `onAddStop` and a `+ Add` button (per the comment chain and the type definition at line 8-12). A user editing a design in the editor: - Wants to use a new color (e.g., a custom orange they got from the catalog) - The current thread stops don't include that color - They have to navigate Settings → Manage Threads → add the color - Then navigate back to the editor - The color is now in `useThreadLibrary` but the new paths still use the old colors The workspace's right panel has the same gap (per the workspace's own button being tied to the `ADD_THREAD_STOP` reducer action, which is only triggered from the right panel's color picker). ## Where - Editor thread bar: `src/components/editor/EditorThreadBar.tsx` (no add button) - Workspace add: `src/components/workspace/BottomThreadBar.tsx` (has add button) - Workspace right panel add: `src/components/workspace/RightPanel.tsx` (per `ADD_THREAD_STOP` dispatch) - Settings → Thread Library: add via the modal CRUD form (per #147 still open) ## Suggested fix shape Add a "+" button to the editor's thread bar: ```tsx <button onClick={onAddStop} className="w-6 h-6 flex items-center justify-center rounded" title="Add a new thread stop" > <Plus size={12} /> </button> ``` `onAddStop` opens the workspace's color picker (the same picker used in the right panel). Picking a color dispatches `ADD_THREAD_STOP` to the workspace reducer, which is shared with the editor (via `useWorkspace` or a similar hook). The picker can be a small modal (reusing `ColorPickerDialog` from the workspace) or a popover. The popover approach matches the existing "Thread Color" picker UX in the editor's right panel. ## Severity Low. The user can add a stop via Settings → Thread Library; the in-bar picker is a polish improvement. ## Discovered by Gap analysis (2026-10-02) of editor thread bar affordances. ## Related - #185 (closed) — Editor color picker for selected path. Same color-picker pattern; sibling affordance. - #147 (open) — Consolidate thread library surfaces. The thread library's CRUD form is one surface; the in-bar picker would be a second. - #216 (open) — Loose match popover. Same bar, sibling affordance.

Mark added the

feature-request

triage-approved

labels

2026-10-04 00:04:20 +00:00

Mark referenced this issue

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

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

Mark referenced this issue from a commit

2026-10-04 04:20:14 +00:00

fix(#217): Editor thread bar gets a '+ Add' affordance with a catalog popover

Mark commented

2026-10-04 04:20:32 +00:00

Author

Owner

Closed via e77ef12 on origin/main. Editor thread bar now exposes a + Add button matching BottomThreadBar — click opens a 5-column catalog popover, picking a swatch sets currentThreadIndex to that palette index so the next path uses that color (the editor equivalent of the workspace ADD_THREAD_STOP). All 1063 tests pass; tsc, vite build, and eslint clean.

Closed via `e77ef12` on `origin/main`. Editor thread bar now exposes a `+ Add` button matching `BottomThreadBar` — click opens a 5-column catalog popover, picking a swatch sets `currentThreadIndex` to that palette index so the next path uses that color (the editor equivalent of the workspace `ADD_THREAD_STOP`). All 1063 tests pass; tsc, vite build, and eslint clean.

Mark closed this issue

2026-10-04 04:20:36 +00:00