PALETTE: swatch preview + tooltip + OK commit — TDD

Clicking a swatch instantly swaps the body palette class for a live
preview; OK commits silently (POST, no reload); click-elsewhere or
10 s auto-dismiss reverts. Tooltip portal shows label, shoptalk,
lock state. Locked swatches show × (disabled). 20 FTs green.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/templates/apps/dashboard/_partials/_applet-palette.html

@@ -7,16 +7,21 @@
     <div class="palette-scroll">
         {% for palette in palettes %}
             <div class="palette-item">
-                <div class="swatch {{ palette.name }}{% if user_palette == palette.name %} active{% endif %}{% if palette.locked %} locked{% endif %}"></div>
-                {% if not palette.locked %}
-                    <form method="POST" action="{% url "set_palette" %}">
-                        {% csrf_token %}
-                        <button type="submit" name="palette" value="{{ palette.name }}" class="btn btn-confirm">OK</button>
-                    </form>
-                {% else %}
-                    <span class="btn btn-disabled">&times;</span>
-                {% endif %}
+                <div
+                    class="swatch {{ palette.name }}{% if user_palette == palette.name %} active{% endif %}{% if palette.locked %} locked{% endif %}"
+                    data-palette="{{ palette.name }}"
+                    data-label="{{ palette.label }}"
+                    data-locked="{{ palette.locked|yesno:'true,false' }}"
+                    data-unlocked-date="{% if not palette.locked %}Default{% endif %}"
+                    data-shoptalk="Placeholder"
+                >
+                    {% if not palette.locked %}
+                        <button type="button" class="btn btn-confirm palette-ok" hidden>OK</button>
+                    {% else %}
+                        <button type="button" class="btn btn-disabled palette-ok" hidden>&times;</button>
+                    {% endif %}
+                </div>
             </div>
         {% endfor %}
     </div>
-</section>
+</section>

src/templates/apps/dashboard/_partials/_scripts.html

@@ -3,7 +3,7 @@
 <script>
     window.onload = () => {
         initialize("#id_text");
-        bindPaletteForms();
+        bindPaletteSwatches();
         bindPaletteWheel();
     };
 </script>

src/templates/apps/dashboard/home.html

@@ -20,5 +20,6 @@
             {% include "apps/dashboard/_partials/_applets.html" %}
             {% include "apps/applets/_partials/_gear.html" with menu_id="id_dash_applet_menu" %}
         </div>
+        <div id="id_tooltip_portal" class="token-tooltip" style="display:none;"></div>
     {% endif %}
 {% endblock content %}