From 3698385af4dd0dcf0c699cb75031b74db4f49eb6 Mon Sep 17 00:00:00 2001
From: Jimmy <me@jimmy.nz>
Date: Sat, 21 Mar 2026 23:51:02 +1300
Subject: [PATCH] feat(ui): help sections, menu order, remove settings, send
 presets edit-only

Made-with: Cursor
---
 src/templates/index.html | 42 +++++++++++++++++-----------------------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/templates/index.html b/src/templates/index.html
index 015f4d8..3ca2ec7 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -15,13 +15,12 @@
                 </div>
             </div>
             <div class="header-actions">
+                <button class="btn btn-secondary" id="profiles-btn">Profiles</button>
                 <button class="btn btn-secondary edit-mode-only" id="tabs-btn">Tabs</button>
-                <button class="btn btn-secondary edit-mode-only" id="color-palette-btn">Color Palette</button>
                 <button class="btn btn-secondary edit-mode-only" id="presets-btn">Presets</button>
-                <button class="btn btn-secondary" id="send-profile-presets-btn">Send Presets</button>
                 <button class="btn btn-secondary edit-mode-only" id="patterns-btn">Patterns</button>
-                <button class="btn btn-secondary edit-mode-only" id="profiles-btn">Profiles</button>
-                <button class="btn btn-secondary" id="settings-btn">Settings</button>
+                <button class="btn btn-secondary edit-mode-only" id="color-palette-btn">Color Palette</button>
+                <button class="btn btn-secondary edit-mode-only" id="send-profile-presets-btn">Send Presets</button>
                 <button class="btn btn-secondary" id="help-btn">Help</button>
                 <button type="button" class="btn btn-secondary ui-mode-toggle" id="ui-mode-toggle" aria-pressed="false" title="Switch preset strip mode — label is the mode you will switch to">Edit mode</button>
             </div>
@@ -29,13 +28,12 @@
                 <button class="btn btn-secondary" id="main-menu-btn">Menu</button>
                 <div id="main-menu-dropdown" class="main-menu-dropdown">
                     <button type="button" class="ui-mode-toggle" id="ui-mode-toggle-mobile" aria-pressed="false">Edit mode</button>
+                    <button type="button" data-target="profiles-btn">Profiles</button>
                     <button type="button" class="edit-mode-only" data-target="tabs-btn">Tabs</button>
-                    <button type="button" class="edit-mode-only" data-target="color-palette-btn">Color Palette</button>
                     <button type="button" class="edit-mode-only" data-target="presets-btn">Presets</button>
-                    <button type="button" data-target="send-profile-presets-btn">Send Presets</button>
                     <button type="button" class="edit-mode-only" data-target="patterns-btn">Patterns</button>
-                    <button type="button" class="edit-mode-only" data-target="profiles-btn">Profiles</button>
-                    <button type="button" data-target="settings-btn">Settings</button>
+                    <button type="button" class="edit-mode-only" data-target="color-palette-btn">Color Palette</button>
+                    <button type="button" class="edit-mode-only" data-target="send-profile-presets-btn">Send Presets</button>
                     <button type="button" data-target="help-btn">Help</button>
                 </div>
             </div>
@@ -224,27 +222,23 @@
             <h2>Help</h2>
             <p class="muted-text">How to use the LED controller UI.</p>
 
-            <h3>Tabs & devices</h3>
+            <h3>Run mode</h3>
             <ul>
                 <li><strong>Select tab</strong>: left-click a tab button in the top bar.</li>
-                <li><strong>Edit tab</strong>: right-click a tab button, or click <strong>Edit</strong> in the Tabs modal.</li>
-                <li><strong>Send all presets</strong>: open the <strong>Tabs</strong> menu and click <strong>Send Presets</strong> next to the tab to push every preset used in that tab to all devices.</li>
+                <li><strong>Select preset</strong>: left-click a preset tile to send a <code>select</code> message to all devices in the tab.</li>
+                <li><strong>Profiles</strong>: open <strong>Profiles</strong> to apply a profile. Profile editing actions are hidden in Run mode.</li>
+                <li><strong>Send all presets</strong>: this action is available in <strong>Edit mode</strong> and pushes every preset used in the current tab to all tab devices.</li>
+                <li><strong>Switch modes</strong>: use the mode button in the menu. The button label shows the mode you will switch to.</li>
             </ul>
 
-            <h3>Presets in a tab</h3>
+            <h3>Edit mode</h3>
             <ul>
-                <li><strong>Select preset</strong>: left-click a preset tile to select it and send a <code>select</code> message to all devices in the tab.</li>
-                <li><strong>Run vs Edit mode</strong>: use the mode button in the menu (it shows the mode you will <em>switch to</em>). In <strong>Edit mode</strong>, each preset tile shows <strong>Edit</strong> and <strong>Remove</strong> on the right.</li>
-                <li><strong>Edit preset</strong>: switch to <strong>Edit mode</strong> (menu button) and use <strong>Edit</strong> on each tile.</li>
-                <li><strong>Remove from tab</strong>: in <strong>Edit mode</strong>, use <strong>Remove</strong> on the tile (the preset itself is not deleted, only its link from this tab).</li>
-                <li><strong>Reorder presets</strong>: in <strong>Edit mode</strong> only, drag tiles to change order; the layout saves automatically.</li>
-            </ul>
-
-            <h3>Presets, profiles & colors</h3>
-            <ul>
-                <li><strong>Presets</strong>: use the <strong>Presets</strong> button in the header to create and manage reusable presets.</li>
-                <li><strong>Profiles</strong>: use <strong>Profiles</strong> to save and recall groups of settings.</li>
-                <li><strong>Color Palette</strong>: use <strong>Color Palette</strong> to build a reusable set of colors you can pull into presets.</li>
+                <li><strong>Tabs</strong>: create, edit, and manage tabs and device assignments.</li>
+                <li><strong>Presets</strong>: create/manage reusable presets and edit preset details.</li>
+                <li><strong>Preset tiles</strong>: each tile shows <strong>Edit</strong> and <strong>Remove</strong> controls in Edit mode.</li>
+                <li><strong>Reorder presets</strong>: drag and drop preset tiles to save tab order.</li>
+                <li><strong>Profiles</strong>: create/clone/delete profiles. New profiles get a populated <strong>default</strong> tab and can optionally seed a <strong>DJ tab</strong>.</li>
+                <li><strong>Color Palette</strong>: build profile colors and use <strong>From Palette</strong> in preset editor to add linked colors (badge <strong>P</strong>) that update when palette colors change.</li>
             </ul>
 
             <div class="modal-actions">