Thread color library is a hardcoded const — no UI to manage custom colors #120

New issue

Closed

opened 2026-10-02 23:40:02 +00:00 by Mark · 0 comments

Mark commented

2026-10-02 23:40:02 +00:00

Owner

Finding

The Brother PR-10 thread color library is a hardcoded const array. There is no UI to view, add, edit, rename, reorder, or remove library entries. There is no persistence — the library is whatever the constant declares at module load.

Where

src/components/workspace/types.ts:233-254 — the BROTHER_PR10_COLORS array of 20 hardcoded thread colors.

export const BROTHER_PR10_COLORS: ThreadColor[] = [
  { id: 'PR-001', name: 'White', hex: '#FFFFFF' },
  // ...19 more...
];

The same BROTHER_PR10_COLORS is referenced by:

src/lib/stitch-adapters.ts:2 — toServiceStitchObjects falls back to library index for palette lookup
src/components/workspace/BottomThreadBar.tsx:7 — bottom thread bar uses it to render swatches
src/components/workspace/ExportDialog.tsx:9 — export dialog uses it for PR-10 swatch validation

Why now

The Help page FAQ (item "Can I use my own thread colors?") tells users to manage custom colors via Settings → Thread Palettes. The Settings modal exists but is a placeholder (see related issue). The library is the data behind a feature the UI already promises.

Prior closed #94 ("EditorThreadBar.tsx renders a static 10-color picker with random lengths disconnected from the Workspace's actual threadStops") fixed the Editor's thread bar to consume the real threadStops — but the underlying library is still a const.

Suggested fix shape

Convert BROTHER_PR10_COLORS from a const to a localStorage-backed runtime list:

Storage key: tc_thread_library_v1 (existing STORAGE_KEYS pattern in src/components/gallery/data.ts is a good model).
Default content: the current 20 colors as the initial value when storage is empty/malformed.
Read API: a hook or getter (e.g. useThreadLibrary()) that reads from localStorage, merges with the in-code defaults, and returns a stable list.
Write API: addColor, updateColor, removeColor, reorderColors — all write to localStorage.
UI surface: a "Thread Library" section in the Settings modal (see related issue) with:
- List of all entries: color swatch, id, name, hex
- "Add color" button → opens a small inline editor (name, hex picker)
- Per-row: edit, delete, drag-to-reorder
- Reset to defaults button
Migration safety: if localStorage JSON is malformed, fall back to the in-code defaults and don't crash. Same pattern as loadDesigns in src/components/gallery/data.ts.

Severity

Low (no current user-facing bug — the app works fine with the hardcoded library). Becomes Medium once Settings page is built and exposes the CRUD UI, because the data layer needs to be in place first.

Discovered by

User-story walkthrough (round 4) — Help page still tells users they can manage custom colors, but the data model + UI don't exist.

#76 (closed) — Help page FAQ promised Settings → Thread Palettes; modal is now a placeholder.
#94 (closed) — Editor thread bar was wired to hardcoded 10-color picker; now consumes the real threadStops. Library itself unchanged.
#117 (closed) — underlay toggle was silently dropped; not directly related but shows the pattern of half-wired settings.

## Finding The Brother PR-10 thread color library is a hardcoded `const` array. There is no UI to view, add, edit, rename, reorder, or remove library entries. There is no persistence — the library is whatever the constant declares at module load. ## Where `src/components/workspace/types.ts:233-254` — the `BROTHER_PR10_COLORS` array of 20 hardcoded thread colors. ```ts export const BROTHER_PR10_COLORS: ThreadColor[] = [ { id: 'PR-001', name: 'White', hex: '#FFFFFF' }, // ...19 more... ]; ``` The same `BROTHER_PR10_COLORS` is referenced by: - `src/lib/stitch-adapters.ts:2` — `toServiceStitchObjects` falls back to library index for palette lookup - `src/components/workspace/BottomThreadBar.tsx:7` — bottom thread bar uses it to render swatches - `src/components/workspace/ExportDialog.tsx:9` — export dialog uses it for PR-10 swatch validation ## Why now The Help page FAQ (item "Can I use my own thread colors?") tells users to manage custom colors via Settings → Thread Palettes. The Settings modal exists but is a placeholder (see related issue). The library is the data behind a feature the UI already promises. Prior closed #94 ("EditorThreadBar.tsx renders a static 10-color picker with random lengths disconnected from the Workspace's actual threadStops") fixed the Editor's thread bar to consume the real `threadStops` — but the underlying library is still a const. ## Suggested fix shape Convert `BROTHER_PR10_COLORS` from a `const` to a `localStorage`-backed runtime list: 1. **Storage key**: `tc_thread_library_v1` (existing `STORAGE_KEYS` pattern in `src/components/gallery/data.ts` is a good model). 2. **Default content**: the current 20 colors as the initial value when storage is empty/malformed. 3. **Read API**: a hook or getter (e.g. `useThreadLibrary()`) that reads from localStorage, merges with the in-code defaults, and returns a stable list. 4. **Write API**: `addColor`, `updateColor`, `removeColor`, `reorderColors` — all write to localStorage. 5. **UI surface**: a "Thread Library" section in the Settings modal (see related issue) with: - List of all entries: color swatch, id, name, hex - "Add color" button → opens a small inline editor (name, hex picker) - Per-row: edit, delete, drag-to-reorder - Reset to defaults button 6. **Migration safety**: if localStorage JSON is malformed, fall back to the in-code defaults and don't crash. Same pattern as `loadDesigns` in `src/components/gallery/data.ts`. ## Severity Low (no current user-facing bug — the app works fine with the hardcoded library). Becomes Medium once Settings page is built and exposes the CRUD UI, because the data layer needs to be in place first. ## Discovered by User-story walkthrough (round 4) — Help page still tells users they can manage custom colors, but the data model + UI don't exist. ## Related - #76 (closed) — Help page FAQ promised Settings → Thread Palettes; modal is now a placeholder. - #94 (closed) — Editor thread bar was wired to hardcoded 10-color picker; now consumes the real threadStops. Library itself unchanged. - #117 (closed) — underlay toggle was silently dropped; not directly related but shows the pattern of half-wired settings.