mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-09-30 11:12:35 +02:00
maziggy
86b54026f6
@maugsburger surfaced four 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. 3. Sparkle was almost invisible on card-sized swatches. The original 4-dot pattern (each ~1px) read fine on the inline 20×20 swatch but disappeared on the 60-pixel inventory card banners — exactly where the user actually identifies a spool. 4. Checkerboard cell density scaled with the swatch — the same 4-cell pattern was either tiny squares on a small swatch or four huge squares on a card-sized banner. The user couldn't tell a translucent filament from a multi-colour one because the indicator changed shape. Fix: - ``ColorSection.tsx``: ref-guarded ``useEffect`` resyncs the draft whenever the parent's ``formData.extra_colors`` changes via an external update. ``commitExtraColors`` updates the ref before calling ``updateField`` so live user typing is round-tripped without the resync useEffect clobbering it. - ``filamentSwatchHelpers.ts: buildColorLayer``: branch on ``effect_type``. ``dual-color`` and ``tri-color`` produce ``linear-gradient(to right, c1 0 X%, c2 X% Y%, ...)`` with CSS double-position stops (hard line, not blend) and equal-width segments. ``gradient`` keeps the original 135° smooth blend. The ``multicolor`` conic-gradient path is untouched. - ``filamentSwatchHelpers.ts: EFFECT_OVERLAYS.sparkle``: bumped from 4 dots to 13 flecks in mixed sizes (1 / 1.5 / 2 px) and varying opacity (0.65 → 1.0) for a depth-of-field "metal flake" feel. - ``filamentSwatchHelpers.ts: buildFilamentBackground``: now returns ``{ backgroundImage, backgroundSize }`` so per-layer sizes can be applied — painted layers stay ``cover``, the checkerboard gets a fixed 12px tile so cell density is constant regardless of element size. Updated the three existing call sites (``InventoryPage`` group banner + spool card, ``ColorSection`` preview) to spread the style object directly. ``FilamentSwatch.tsx`` composes the same per-layer sizing inline so its output stays in lockstep. Tests: 8 new frontend cases pinning the four fixes — Dual/Tri Color hard-split (3 tests + 1 regression guard that Dual ≠ Gradient for the same stops), Sparkle prominence (≥ 10 distinct radial-gradient layers in the rendered background), checkerboard density (last backgroundSize layer is a fixed pixel value, not ``cover``), 4 hydration cases (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). Existing buildFilamentBackground tests updated for the new return-object shape. Full frontend suite: 1610 passed; full backend suite: 3598 passed; no regressions.
