From b0a769b7818b85733c459c35566404cc9c7270bd Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Tue, 10 Mar 2026 12:15:46 +0300
Subject: [PATCH] Move tags input under name field in all entity editor modals

Remove the separate tags form-group (label, hint toggle, hint text)
from all 14 editor modals and place the tags container directly
below the name input for a cleaner, more compact layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 TODO.md                                                |  2 +-
 .../templates/modals/audio-source-editor.html          |  9 +--------
 .../templates/modals/audio-template.html               | 10 +---------
 .../templates/modals/automation-editor.html            | 10 +---------
 .../templates/modals/capture-template.html             | 10 +---------
 .../wled_controller/templates/modals/css-editor.html   | 10 +---------
 .../templates/modals/device-settings.html              | 10 +---------
 .../wled_controller/templates/modals/kc-editor.html    | 10 +---------
 .../templates/modals/pattern-template.html             | 10 +---------
 .../wled_controller/templates/modals/pp-template.html  | 10 +---------
 .../templates/modals/scene-preset-editor.html          | 10 +---------
 .../src/wled_controller/templates/modals/stream.html   | 10 +---------
 .../templates/modals/sync-clock-editor.html            |  9 +--------
 .../templates/modals/target-editor.html                | 10 +---------
 .../templates/modals/value-source-editor.html          |  9 +--------
 15 files changed, 15 insertions(+), 124 deletions(-)

diff --git a/TODO.md b/TODO.md
index 8ca9695..c1bff0d 100644
--- a/TODO.md
+++ b/TODO.md
@@ -52,5 +52,5 @@ Priority: `P1` quick win · `P2` moderate · `P3` large effort
 - [ ] `P1` **Collapse dashboard running target stats** — Show only FPS chart by default; uptime, errors, and pipeline timings in an expandable section collapsed by default
 - [ ] `P1` **Review new CSS types (Daylight & Candlelight)** — End-to-end review: create via UI, assign to targets, verify LED rendering, check edge cases (0 candles, extreme latitude, real-time toggle)
 - [x] `P1` **Daylight brightness value source** — New value source type that reports a 0–255 brightness level based on daylight cycle time (real-time or simulated), reusing the daylight LUT logic
-- [ ] `P1` **Tags input: move under name, remove hint/title** — Move the tags chip input directly below the name field in all entity editor modals; remove the hint toggle and section title for a cleaner layout
+- [x] `P1` **Tags input: move under name, remove hint/title** — Move the tags chip input directly below the name field in all entity editor modals; remove the hint toggle and section title for a cleaner layout
 - [ ] `P1` **IconSelect grid overflow & scroll jump** — Expandable icon grid sometimes renders outside the visible viewport; opening it causes the modal/page to jump scroll
diff --git a/server/src/wled_controller/templates/modals/audio-source-editor.html b/server/src/wled_controller/templates/modals/audio-source-editor.html
index 1140871..9ec825f 100644
--- a/server/src/wled_controller/templates/modals/audio-source-editor.html
+++ b/server/src/wled_controller/templates/modals/audio-source-editor.html
@@ -19,6 +19,7 @@
                     </div>
                     <small class="input-hint" style="display:none" data-i18n="audio_source.name.hint">A descriptive name for this audio source</small>
                     <input type="text" id="audio-source-name" data-i18n-placeholder="audio_source.name.placeholder" placeholder="System Audio" required>
+                    <div id="audio-source-tags-container"></div>
                 </div>
 
                 <!-- Type (hidden — determined by which add button was clicked) -->
@@ -86,14 +87,6 @@
                     <input type="text" id="audio-source-description" data-i18n-placeholder="audio_source.description.placeholder" placeholder="Describe this audio source...">
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="audio-source-tags-container"></div>
-                </div>
             </form>
         </div>
         <div class="modal-footer">
diff --git a/server/src/wled_controller/templates/modals/audio-template.html b/server/src/wled_controller/templates/modals/audio-template.html
index e291893..80a5400 100644
--- a/server/src/wled_controller/templates/modals/audio-template.html
+++ b/server/src/wled_controller/templates/modals/audio-template.html
@@ -11,6 +11,7 @@
                 <div class="form-group">
                     <label for="audio-template-name" data-i18n="audio_template.name">Template Name:</label>
                     <input type="text" id="audio-template-name" data-i18n-placeholder="audio_template.name.placeholder" placeholder="My Audio Template" required>
+                    <div id="audio-template-tags-container"></div>
                 </div>
 
                 <div class="form-group">
@@ -34,15 +35,6 @@
                     <div id="audio-engine-config-fields"></div>
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="audio-template-tags-container"></div>
-                </div>
-
                 <div id="audio-template-error" class="error-message" style="display: none;"></div>
             </form>
         </div>
diff --git a/server/src/wled_controller/templates/modals/automation-editor.html b/server/src/wled_controller/templates/modals/automation-editor.html
index 8224696..231166e 100644
--- a/server/src/wled_controller/templates/modals/automation-editor.html
+++ b/server/src/wled_controller/templates/modals/automation-editor.html
@@ -16,6 +16,7 @@
                     </div>
                     <small class="input-hint" style="display:none" data-i18n="automations.name.hint">A descriptive name for this automation</small>
                     <input type="text" id="automation-editor-name" data-i18n-placeholder="automations.name.placeholder" placeholder="My Automation" required>
+                    <div id="automation-tags-container"></div>
                 </div>
 
                 <div class="form-group settings-toggle-group">
@@ -85,15 +86,6 @@
                     <select id="automation-fallback-scene-id"></select>
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="automation-tags-container"></div>
-                </div>
-
                 <div id="automation-editor-error" class="error-message" style="display: none;"></div>
             </form>
         </div>
diff --git a/server/src/wled_controller/templates/modals/capture-template.html b/server/src/wled_controller/templates/modals/capture-template.html
index f7e0fe4..067d6ef 100644
--- a/server/src/wled_controller/templates/modals/capture-template.html
+++ b/server/src/wled_controller/templates/modals/capture-template.html
@@ -11,6 +11,7 @@
                 <div class="form-group">
                     <label for="template-name" data-i18n="templates.name">Template Name:</label>
                     <input type="text" id="template-name" data-i18n-placeholder="templates.name.placeholder" placeholder="My Custom Template" required>
+                    <div id="capture-template-tags-container"></div>
                 </div>
 
                 <div class="form-group">
@@ -34,15 +35,6 @@
                     <div id="engine-config-fields"></div>
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="capture-template-tags-container"></div>
-                </div>
-
                 <div id="template-error" class="error-message" style="display: none;"></div>
             </form>
         </div>
diff --git a/server/src/wled_controller/templates/modals/css-editor.html b/server/src/wled_controller/templates/modals/css-editor.html
index 1b186a1..1cfadf8 100644
--- a/server/src/wled_controller/templates/modals/css-editor.html
+++ b/server/src/wled_controller/templates/modals/css-editor.html
@@ -12,6 +12,7 @@
                 <div class="form-group">
                     <label for="css-editor-name" data-i18n="color_strip.name">Name:</label>
                     <input type="text" id="css-editor-name" data-i18n-placeholder="color_strip.name.placeholder" placeholder="Wall Strip" required>
+                    <div id="css-tags-container"></div>
                 </div>
 
                 <div id="css-editor-type-group" class="form-group">
@@ -649,15 +650,6 @@
                     </select>
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="css-tags-container"></div>
-                </div>
-
                 <div id="css-editor-error" class="error-message" style="display: none;"></div>
             </form>
         </div>
diff --git a/server/src/wled_controller/templates/modals/device-settings.html b/server/src/wled_controller/templates/modals/device-settings.html
index 2712b30..0e6b721 100644
--- a/server/src/wled_controller/templates/modals/device-settings.html
+++ b/server/src/wled_controller/templates/modals/device-settings.html
@@ -12,6 +12,7 @@
                 <div class="form-group">
                     <label for="settings-device-name" data-i18n="device.name">Device Name:</label>
                     <input type="text" id="settings-device-name" data-i18n-placeholder="device.name.placeholder" placeholder="Living Room TV" required>
+                    <div id="device-tags-container"></div>
                 </div>
 
                 <div class="form-group" id="settings-url-group">
@@ -136,15 +137,6 @@
                     </div>
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="device-tags-container"></div>
-                </div>
-
                 <div id="settings-error" class="error-message" style="display: none;"></div>
             </form>
         </div>
diff --git a/server/src/wled_controller/templates/modals/kc-editor.html b/server/src/wled_controller/templates/modals/kc-editor.html
index c31677e..be048ae 100644
--- a/server/src/wled_controller/templates/modals/kc-editor.html
+++ b/server/src/wled_controller/templates/modals/kc-editor.html
@@ -12,6 +12,7 @@
                 <div class="form-group">
                     <label for="kc-editor-name" data-i18n="kc.name">Target Name:</label>
                     <input type="text" id="kc-editor-name" data-i18n-placeholder="kc.name.placeholder" placeholder="My Key Colors Target" required>
+                    <div id="kc-tags-container"></div>
                 </div>
 
                 <div class="form-group">
@@ -80,15 +81,6 @@
                     <input type="range" id="kc-editor-smoothing" min="0.0" max="1.0" step="0.05" value="0.3" oninput="document.getElementById('kc-editor-smoothing-value').textContent = this.value">
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="kc-tags-container"></div>
-                </div>
-
                 <div id="kc-editor-error" class="error-message" style="display: none;"></div>
             </form>
         </div>
diff --git a/server/src/wled_controller/templates/modals/pattern-template.html b/server/src/wled_controller/templates/modals/pattern-template.html
index 80973d1..b390e34 100644
--- a/server/src/wled_controller/templates/modals/pattern-template.html
+++ b/server/src/wled_controller/templates/modals/pattern-template.html
@@ -16,6 +16,7 @@
                     </div>
                     <small class="input-hint" style="display:none" data-i18n="pattern.name.hint">A descriptive name for this rectangle layout</small>
                     <input type="text" id="pattern-template-name" data-i18n-placeholder="pattern.name.placeholder" placeholder="My Pattern Template" required>
+                    <div id="pattern-tags-container"></div>
                 </div>
 
                 <div class="form-group">
@@ -56,15 +57,6 @@
                     <div id="pattern-rect-list" class="pattern-rect-list"></div>
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="pattern-tags-container"></div>
-                </div>
-
                 <div id="pattern-template-error" class="error-message" style="display: none;"></div>
             </form>
         </div>
diff --git a/server/src/wled_controller/templates/modals/pp-template.html b/server/src/wled_controller/templates/modals/pp-template.html
index 49c3b7f..eb99d89 100644
--- a/server/src/wled_controller/templates/modals/pp-template.html
+++ b/server/src/wled_controller/templates/modals/pp-template.html
@@ -11,6 +11,7 @@
                 <div class="form-group">
                     <label for="pp-template-name" data-i18n="postprocessing.name">Template Name:</label>
                     <input type="text" id="pp-template-name" data-i18n-placeholder="postprocessing.name.placeholder" placeholder="My Processing Template" required>
+                    <div id="pp-template-tags-container"></div>
                 </div>
 
                 <!-- Dynamic filter list -->
@@ -28,15 +29,6 @@
                     <input type="text" id="pp-template-description" data-i18n-placeholder="postprocessing.description_placeholder" placeholder="Describe this template...">
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="pp-template-tags-container"></div>
-                </div>
-
                 <div id="pp-template-error" class="error-message" style="display: none;"></div>
             </form>
         </div>
diff --git a/server/src/wled_controller/templates/modals/scene-preset-editor.html b/server/src/wled_controller/templates/modals/scene-preset-editor.html
index 182de0e..a065af1 100644
--- a/server/src/wled_controller/templates/modals/scene-preset-editor.html
+++ b/server/src/wled_controller/templates/modals/scene-preset-editor.html
@@ -16,6 +16,7 @@
                     </div>
                     <small class="input-hint" style="display:none" data-i18n="scenes.name.hint">A descriptive name for this scene preset</small>
                     <input type="text" id="scene-preset-editor-name" data-i18n-placeholder="scenes.name.placeholder" placeholder="My Scene" required>
+                    <div id="scene-tags-container"></div>
                 </div>
 
                 <div class="form-group">
@@ -37,15 +38,6 @@
                     <button type="button" id="scene-target-add-btn" class="btn btn-sm btn-secondary" onclick="addSceneTarget()" style="margin-top: 6px;">+ <span data-i18n="scenes.targets.add">Add Target</span></button>
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="scene-tags-container"></div>
-                </div>
-
                 <div id="scene-preset-editor-error" class="error-message" style="display: none;"></div>
             </form>
         </div>
diff --git a/server/src/wled_controller/templates/modals/stream.html b/server/src/wled_controller/templates/modals/stream.html
index c74bf8b..2ddc912 100644
--- a/server/src/wled_controller/templates/modals/stream.html
+++ b/server/src/wled_controller/templates/modals/stream.html
@@ -16,6 +16,7 @@
                 <div class="form-group">
                     <label for="stream-name" data-i18n="streams.name">Source Name:</label>
                     <input type="text" id="stream-name" data-i18n-placeholder="streams.name.placeholder" placeholder="My Source" required>
+                    <div id="stream-tags-container"></div>
                 </div>
 
                 <input type="hidden" id="stream-type" value="raw">
@@ -96,15 +97,6 @@
                     <input type="text" id="stream-description" data-i18n-placeholder="streams.description_placeholder" placeholder="Describe this source...">
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="stream-tags-container"></div>
-                </div>
-
                 <div id="stream-error" class="error-message" style="display: none;"></div>
             </form>
         </div>
diff --git a/server/src/wled_controller/templates/modals/sync-clock-editor.html b/server/src/wled_controller/templates/modals/sync-clock-editor.html
index d6d1968..6a97415 100644
--- a/server/src/wled_controller/templates/modals/sync-clock-editor.html
+++ b/server/src/wled_controller/templates/modals/sync-clock-editor.html
@@ -19,6 +19,7 @@
                     </div>
                     <small class="input-hint" style="display:none" data-i18n="sync_clock.name.hint">A descriptive name for this synchronization clock</small>
                     <input type="text" id="sync-clock-name" data-i18n-placeholder="sync_clock.name.placeholder" placeholder="Main Clock" required>
+                    <div id="sync-clock-tags-container"></div>
                 </div>
 
                 <!-- Speed -->
@@ -42,14 +43,6 @@
                     <input type="text" id="sync-clock-description" data-i18n-placeholder="sync_clock.description.placeholder" placeholder="">
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="sync-clock-tags-container"></div>
-                </div>
             </form>
         </div>
         <div class="modal-footer">
diff --git a/server/src/wled_controller/templates/modals/target-editor.html b/server/src/wled_controller/templates/modals/target-editor.html
index db7ef64..f4ddcf2 100644
--- a/server/src/wled_controller/templates/modals/target-editor.html
+++ b/server/src/wled_controller/templates/modals/target-editor.html
@@ -12,6 +12,7 @@
                 <div class="form-group">
                     <label for="target-editor-name" data-i18n="targets.name">Target Name:</label>
                     <input type="text" id="target-editor-name" data-i18n-placeholder="targets.name.placeholder" placeholder="My Target" required>
+                    <div id="target-tags-container"></div>
                 </div>
 
                 <div class="form-group">
@@ -113,15 +114,6 @@
                     </div>
                 </details>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="target-tags-container"></div>
-                </div>
-
                 <div id="target-editor-error" class="error-message" style="display: none;"></div>
             </form>
         </div>
diff --git a/server/src/wled_controller/templates/modals/value-source-editor.html b/server/src/wled_controller/templates/modals/value-source-editor.html
index 60dc859..78718b5 100644
--- a/server/src/wled_controller/templates/modals/value-source-editor.html
+++ b/server/src/wled_controller/templates/modals/value-source-editor.html
@@ -19,6 +19,7 @@
                     </div>
                     <small class="input-hint" style="display:none" data-i18n="value_source.name.hint">A descriptive name for this value source</small>
                     <input type="text" id="value-source-name" data-i18n-placeholder="value_source.name.placeholder" placeholder="Brightness Pulse" required>
+                    <div id="value-source-tags-container"></div>
                 </div>
 
                 <!-- Type (hidden in edit mode since type is immutable) -->
@@ -304,14 +305,6 @@
                     <input type="text" id="value-source-description" data-i18n-placeholder="value_source.description.placeholder" placeholder="Describe this value source...">
                 </div>
 
-                <div class="form-group">
-                    <div class="label-row">
-                        <label data-i18n="tags.label">Tags:</label>
-                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
-                    </div>
-                    <small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
-                    <div id="value-source-tags-container"></div>
-                </div>
             </form>
         </div>
         <div class="modal-footer">