mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-03 20:56:18 +02:00
maziggy
6a1e3454db
@maugsburger surfaced two bugs against the original #1154 multi-colour swatch work: 1. Editing an existing spool always opened with the Extra Colours field blank, even when the COLOR preview banner above it was rendering correctly from the saved data. ColorSection seeded its local ``extraColorsDraft`` via ``useState(formData.extra_colors)`` at mount time, but SpoolFormModal opens *before* its own useEffect populates ``formData`` from the spool record — so by the time the saved value landed, the input had already locked onto ''. The user then had to retype the value before saving anything else. 2. Dual Color and Gradient produced the same diagonal blend (``linear-gradient(135deg, A, B)``), so the two variants were visually indistinguishable. The whole point of the Dual Color variant is that the spool has two distinct bars on the reel — a smooth blend defeats it. Fix: - ``ColorSection.tsx``: ref-guarded ``useEffect`` resyncs the draft whenever the parent's ``formData.extra_colors`` changes via an external update (modal opening with a spool, or switching to a different spool mid-form). ``commitExtraColors`` updates the ref before calling ``updateField`` so the user's own typing is round- tripped without the resync useEffect clobbering it. - ``filamentSwatchHelpers.ts``: ``buildColorLayer`` now branches on ``effect_type``. ``dual-color`` and ``tri-color`` produce ``linear-gradient(to right, c1 0 X%, c2 X% Y%, ...)`` with CSS double-position stops — the colour change is a hard vertical line rather than a blend region — and equal-width segments across N stops. ``gradient`` keeps the original 135° smooth blend. The ``multicolor`` conic-gradient path is untouched. Tests: 4 new ``FilamentSwatch.test.tsx`` cases pinning the hard-split contract (Dual Color uses ``to right`` not ``135deg``; Tri Color renders 3 equal hard-split bars; ``gradient`` keeps the smooth diagonal; explicit regression guard that Dual Color and Gradient never produce the same CSS string for the same stops). 4 new ``ColorSectionExtraColorsHydration.test.tsx`` cases pinning the input hydration (fills when formData arrives via parent update, resyncs when the spool changes mid-form, doesn't clobber live user typing, clears when the new spool has no extra_colors). Full frontend suite: 1608 passed; full backend suite: 3598 passed; no regressions. The minor "Sparkle could be more prominent / checkerboard denser" feedback in the same comment is deferred to a separate cosmetic pass — the reporter flagged it as finetuning.