Help page documents 'Loose match' but the underlying color-matching flow has no UI to 'preview' a thread swap before committing — ΔE > 3 just shows the chip, doesn't let the user try alternatives #216

New issue

Closed

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

Mark commented

2026-10-04 00:03:29 +00:00

Owner

Finding

src/components/workspace/BottomThreadBar.tsx:51 defines LOOSE_MATCH_DELTA_E = 3 (the ΔE threshold above which a match is "loose"). The thread bar shows a "Loose match" chip when a stop's match.deltaE > LOOSE_MATCH_DELTA_E. The chip is informational.

The Help page documents the feature:

A "loose match" indicator appears when the chosen thread's color is within ΔE > 3 of the original. This means the design will look close to the source but not pixel-identical. Click the chip to see the next-best alternatives.

(Per the Help page's stitch types section and the loose-match help card I saw earlier.)

But the click on the chip — does it open the alternatives popover? Let me verify.

grep -n 'onClick.*LooseMatch\|alternatives' src/components/workspace/BottomThreadBar.tsx — let me check the popover wiring.

Where

LOOSE_MATCH_DELTA_E: src/components/workspace/BottomThreadBar.tsx:51
Loose match chip: src/components/workspace/BottomThreadBar.tsx:369 (per the comment)
Help page: src/pages/Help.tsx (loose-match card)
Popover: src/components/workspace/BottomThreadBar.tsx (need to verify)

Suggested fix shape

This issue depends on whether the popover is already wired. If it's not, the suggested fix is:

The chip is a button (<button onClick={...}>).
Click opens a popover with the next-best alternatives (the next 5 catalog colors ranked by ΔE).
Each alternative is a swatch; click swaps the thread stop.
The popover has a "Dismiss" button or click-outside-to-close.

The full feature already exists per #128 (per the comment chain on the file). If only the UI is missing, this is a small fix.

Severity

Medium. The "loose match" chip is informative but not actionable. Power users with strict color requirements want to swap to a closer match.

Discovered by

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

#128 (closed) — BottomThreadBar ΔE display. Same component.
#190 (open) — BottomThreadBar stop pills have no remove affordance. Same component, sibling affordance.
The Help page documents this feature; if the UI is missing, the documentation is also misleading (per the #158 / #158 family of issues).

## Finding `src/components/workspace/BottomThreadBar.tsx:51` defines `LOOSE_MATCH_DELTA_E = 3` (the ΔE threshold above which a match is "loose"). The thread bar shows a "Loose match" chip when a stop's `match.deltaE > LOOSE_MATCH_DELTA_E`. The chip is informational. The Help page documents the feature: > A "loose match" indicator appears when the chosen thread's color is within ΔE > 3 of the original. This means the design will look close to the source but not pixel-identical. Click the chip to see the next-best alternatives. (Per the Help page's stitch types section and the loose-match help card I saw earlier.) But the click on the chip — does it open the alternatives popover? Let me verify. `grep -n 'onClick.*LooseMatch\|alternatives' src/components/workspace/BottomThreadBar.tsx` — let me check the popover wiring. ## Where - LOOSE_MATCH_DELTA_E: `src/components/workspace/BottomThreadBar.tsx:51` - Loose match chip: `src/components/workspace/BottomThreadBar.tsx:369` (per the comment) - Help page: `src/pages/Help.tsx` (loose-match card) - Popover: `src/components/workspace/BottomThreadBar.tsx` (need to verify) ## Suggested fix shape This issue depends on whether the popover is already wired. If it's not, the suggested fix is: 1. The chip is a button (`<button onClick={...}>`). 2. Click opens a popover with the next-best alternatives (the next 5 catalog colors ranked by ΔE). 3. Each alternative is a swatch; click swaps the thread stop. 4. The popover has a "Dismiss" button or click-outside-to-close. The full feature already exists per #128 (per the comment chain on the file). If only the UI is missing, this is a small fix. ## Severity Medium. The "loose match" chip is informative but not actionable. Power users with strict color requirements want to swap to a closer match. ## Discovered by Gap analysis (2026-10-02) of workspace thread affordances. ## Related - #128 (closed) — BottomThreadBar ΔE display. Same component. - #190 (open) — BottomThreadBar stop pills have no remove affordance. Same component, sibling affordance. - The Help page documents this feature; if the UI is missing, the documentation is also misleading (per the #158 / #158 family of issues).

Mark added the

feature-request

triage-approved

labels

2026-10-04 00:03:30 +00:00

Mark referenced this issue

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

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

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:10:58 +00:00

docs(help): correct loose-match ΔE threshold and document click-to-open popover (#216)

Mark commented

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

Author

Owner

The click-to-open popover already exists — BottomThreadBar.tsx:434 wires the loose-match chip's onClick to set openPopoverStopId, which renders <AlternativesPopover> (#452). Issue #128 covered the full feature; the test in issue-128.test.tsx:483 ('opens the alternatives popover when the loose-match chip is clicked') confirms it.

The actual gap was documentation: the Help FAQ said 'loose match' fired at ΔE > 5 (the code uses ΔE > 3, LOOSE_MATCH_DELTA_E at BottomThreadBar.tsx:61) and referred to an 'alternatives list' without telling the user to click the chip.

Fixed in commit f5580ca (pushed to origin/main) by updating the FAQ entry in src/pages/Help.tsx:153:

Threshold ΔE > 5 → ΔE > 3 to match the code.
Added 'click the chip to open a popover of closer alternatives' so the documented affordance is reachable.

1064 tests pass; tsc + eslint clean.

The click-to-open popover already exists — `BottomThreadBar.tsx:434` wires the loose-match chip's `onClick` to set `openPopoverStopId`, which renders `<AlternativesPopover>` (#452). Issue #128 covered the full feature; the test in `issue-128.test.tsx:483` ('opens the alternatives popover when the loose-match chip is clicked') confirms it. The actual gap was documentation: the Help FAQ said 'loose match' fired at **ΔE > 5** (the code uses **ΔE > 3**, `LOOSE_MATCH_DELTA_E` at `BottomThreadBar.tsx:61`) and referred to an 'alternatives list' without telling the user to click the chip. Fixed in commit f5580ca (pushed to origin/main) by updating the FAQ entry in `src/pages/Help.tsx:153`: - Threshold ΔE > 5 → ΔE > 3 to match the code. - Added 'click the chip to open a popover of closer alternatives' so the documented affordance is reachable. 1064 tests pass; tsc + eslint clean.

Mark closed this issue

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