[RrrrobertB1992]

Replaces the full picker per color (and the checkboxes for turning extra colors on) with one shared picker and a row of color buttons, so multi-color filament no longer means scrolling past a picker for every color.

What it does

• Color buttons appear above the picker, showing only the colors in use, followed by a single +.
  • Tapping a button points the picker, hex box and hue slider at that color. "Editing Color N" shows which one.
  • + adds the next color, starting as a copy of the previous one (white if the previous code isn't valid), and selects it. A new + appears after it until the format's maximum is reached.
  • The buttons use the existing palette grid, so they wrap like the other palettes (4 per row on a typical phone), and work from the keyboard (Tab, Enter/Space) like the other palettes.
• Under the picker, while there are 2 or more colors: "🗑 Remove Color N", "◀ Move left" and "Move right ▶".
  • Remove asks to confirm, works on any color including Color 1, and moves the later colors down (e.g. removing Color 1 of 3 makes the old 2 and 3 the new 1 and 2). With a single color there's no button row.
  • Move swaps the selected color with its neighbour, and the selection follows it.
  • Remove is first and the Move buttons are always shown (greyed out at the ends), so repeated taps never land on a different button.
• Hex box
  • Typing keeps only hex digits, in upper case, up to 6. Autocorrect/autocomplete are off.
  • Pasting picks the code out of the pasted text (##FF5733, 0xFF5733, #ff5733cc, Color: #FF5733) and replaces the box; alpha is dropped and 3 digits are expanded.
  • A typed 3-digit code (e.g. F53) is accepted and expands to FF5533 when the box is left, when switching/adding/moving colors, and before writing, downloading or saving.
  • Any other length (1, 2, 4, 5, or empty) is invalid: after leaving the box it turns red with a message, and its preview and color button show red stripes instead of a color. Writing, downloading and saving (with Save colors per brand and material type #13) are blocked with a status message, and the picker jumps to the first bad color. The error clears as soon as the code is valid.
• One-line hint ("Hold and drag on the picker, or type a hex code") for every color, so the picker stays at the same height when switching colors.
• Formats with one color (e.g. OpenSpool Compat) keep the plain Color 1 picker; no buttons are shown. The hex box cleanup and validation still apply.
• Unchanged underneath: the original color fields stay in the page (only the selected one shown), so reading, writing and files don't change.
• Layouts: works with the current single "Additional Colors" checkbox (colors 2-4 are moved up next to Color 1 and the checkbox is hidden) and with a checkbox per color (Support up to 5 colors on OpenSpool tags #7). With the single checkbox, a white extra color still counts as unused, as before.
• Saved colors (Save colors per brand and material type #13): if present, selecting a saved color hides the buttons along with the picker. Neither feature needs the other.

All the code is in a new public/colorslots.js, loaded after app.js; app.js isn't changed.

Testing

Tested on a Samsung Galaxy S26 (Chrome, Android) with real tags, together with #7 and #13:

• Added colors 2-5 with + and set each one; tapping between them shows the right color in the picker each time.
• Dragging the picker and the hue slider changes only the selected color.
• Removing a middle color (e.g. Color 2 of 4) moves the later colors down.
• Removing Color 1 of 3 makes the old 2 and 3 the new 1 and 2; removing Color 1 again leaves one color and the Remove button goes away.
• Writing a tag after removing Color 1 and reading it back gives the colors in the new order.
• Wrote and read back 1-color and multi-color tags; they load with the right number of buttons.
• Selecting and deselecting a saved multi-color entry brings back the hand-picked colors, and writing with the new picker saves the colors.
• Moved colors left and right; the button row stays in place, with the unavailable Move button greyed out.
• 3-digit codes expand to 6 digits.
• Invalid codes show the red stripes; the error only shows after leaving the box or trying to save/write, and clears as soon as the code is fixed.
• Writing a tag or saving with an invalid color is blocked and jumps back to the bad hex box, even after switching to another color.
• Typing in a hex box and tapping + right away adds a color on the first tap.
• Adding a color after an invalid one starts the new color as white.
• A new color starts as a copy of the previous one.
• Remove asks to confirm; cancelling keeps the color.
• The one-line hint keeps the picker at the same height when switching between Color 1 and the others.
• Lowercase letters switch to upper case, non-hex characters are ignored, and a pasted code with a leading # drops the #.
• Pasting #abc gives AABBCC right away; typing F53 shows no error while still in the box; 1, 2, 4, 5 digits or an empty box show the error after leaving it.
• Pasting codes with multiple #s in front (e.g. ##FF5733) gives the right code.

Everything above, plus keyboard use (not tested on the phone), is also covered by automated Playwright tests (headless Chromium, mocked Web NFC) on both color layouts.

Made with help from Claude