Add clone buttons, fix card navigation highlight, UI polish

- Add clone buttons to Audio Source and Value Source cards
- Fix command palette navigation destroying card highlight by skipping
  redundant data reload (skipLoad option on switchTab)
- Convert value source modal sliders to value-in-label pattern
- Change audio/value source modal footers to icon-only buttons
- Remove separator lines between card sections
- Add UI conventions to CLAUDE.md (card appearance, modal footer, sliders)

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

server/src/wled_controller/templates/modals/audio-source-editor.html

@@ -87,8 +87,8 @@
             </form>
         </div>
         <div class="modal-footer">
-            <button class="btn btn-secondary" onclick="closeAudioSourceModal()" data-i18n="settings.button.cancel">&times; Cancel</button>
-            <button class="btn btn-primary" onclick="saveAudioSource()" data-i18n="settings.button.save">&check; Save</button>
+            <button class="btn btn-icon btn-secondary" onclick="closeAudioSourceModal()" title="Cancel" data-i18n-title="settings.button.cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
+            <button class="btn btn-icon btn-primary" onclick="saveAudioSource()" title="Save" data-i18n-title="settings.button.save" data-i18n-aria-label="aria.save">&#x2713;</button>
         </div>
     </div>
 </div>

server/src/wled_controller/templates/modals/value-source-editor.html

@@ -41,15 +41,12 @@
                 <div id="value-source-static-section">
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-value" data-i18n="value_source.value">Value:</label>
+                            <label for="value-source-value"><span data-i18n="value_source.value">Value:</span> <span id="value-source-value-display">1.0</span></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="value_source.value.hint">Constant output value (0.0 = off, 1.0 = full brightness)</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-value" min="0" max="1" step="0.01" value="1.0"
-                                oninput="document.getElementById('value-source-value-display').textContent = this.value">
-                            <span id="value-source-value-display">1.0</span>
-                        </div>
+                        <input type="range" id="value-source-value" min="0" max="1" step="0.01" value="1.0"
+                            oninput="document.getElementById('value-source-value-display').textContent = this.value">
                     </div>
                 </div>
 
@@ -71,41 +68,32 @@
 
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-speed" data-i18n="value_source.speed">Speed (cpm):</label>
+                            <label for="value-source-speed"><span data-i18n="value_source.speed">Speed (cpm):</span> <span id="value-source-speed-display">10</span></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="value_source.speed.hint">Cycles per minute — how fast the waveform repeats (1 = very slow, 120 = very fast)</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-speed" min="1" max="120" step="1" value="10"
-                                oninput="document.getElementById('value-source-speed-display').textContent = this.value">
-                            <span id="value-source-speed-display">10</span>
-                        </div>
+                        <input type="range" id="value-source-speed" min="1" max="120" step="1" value="10"
+                            oninput="document.getElementById('value-source-speed-display').textContent = this.value">
                     </div>
 
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-min-value" data-i18n="value_source.min_value">Min Value:</label>
+                            <label for="value-source-min-value"><span data-i18n="value_source.min_value">Min Value:</span> <span id="value-source-min-value-display">0</span></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="value_source.min_value.hint">Minimum output of the waveform cycle</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-min-value" min="0" max="1" step="0.01" value="0"
-                                oninput="document.getElementById('value-source-min-value-display').textContent = this.value">
-                            <span id="value-source-min-value-display">0</span>
-                        </div>
+                        <input type="range" id="value-source-min-value" min="0" max="1" step="0.01" value="0"
+                            oninput="document.getElementById('value-source-min-value-display').textContent = this.value">
                     </div>
 
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-max-value" data-i18n="value_source.max_value">Max Value:</label>
+                            <label for="value-source-max-value"><span data-i18n="value_source.max_value">Max Value:</span> <span id="value-source-max-value-display">1</span></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="value_source.max_value.hint">Maximum output of the waveform cycle</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-max-value" min="0" max="1" step="0.01" value="1"
-                                oninput="document.getElementById('value-source-max-value-display').textContent = this.value">
-                            <span id="value-source-max-value-display">1</span>
-                        </div>
+                        <input type="range" id="value-source-max-value" min="0" max="1" step="0.01" value="1"
+                            oninput="document.getElementById('value-source-max-value-display').textContent = this.value">
                     </div>
                 </div>
 
@@ -137,54 +125,42 @@
 
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-sensitivity" data-i18n="value_source.sensitivity">Sensitivity:</label>
+                            <label for="value-source-sensitivity"><span data-i18n="value_source.sensitivity">Sensitivity:</span> <span id="value-source-sensitivity-display">1.0</span></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="value_source.sensitivity.hint">Gain multiplier for the audio signal (higher = more reactive)</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-sensitivity" min="0.1" max="5" step="0.1" value="1.0"
-                                oninput="document.getElementById('value-source-sensitivity-display').textContent = this.value">
-                            <span id="value-source-sensitivity-display">1.0</span>
-                        </div>
+                        <input type="range" id="value-source-sensitivity" min="0.1" max="5" step="0.1" value="1.0"
+                            oninput="document.getElementById('value-source-sensitivity-display').textContent = this.value">
                     </div>
 
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-smoothing" data-i18n="value_source.smoothing">Smoothing:</label>
+                            <label for="value-source-smoothing"><span data-i18n="value_source.smoothing">Smoothing:</span> <span id="value-source-smoothing-display">0.3</span></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="value_source.smoothing.hint">Temporal smoothing (0 = instant response, 1 = very smooth/slow)</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-smoothing" min="0" max="1" step="0.05" value="0.3"
-                                oninput="document.getElementById('value-source-smoothing-display').textContent = this.value">
-                            <span id="value-source-smoothing-display">0.3</span>
-                        </div>
+                        <input type="range" id="value-source-smoothing" min="0" max="1" step="0.05" value="0.3"
+                            oninput="document.getElementById('value-source-smoothing-display').textContent = this.value">
                     </div>
 
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-audio-min-value" data-i18n="value_source.audio_min_value">Min Value:</label>
+                            <label for="value-source-audio-min-value"><span data-i18n="value_source.audio_min_value">Min Value:</span> <span id="value-source-audio-min-value-display">0</span></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="value_source.audio_min_value.hint">Output when audio is silent (e.g. 0.3 = 30% brightness floor)</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-audio-min-value" min="0" max="1" step="0.01" value="0"
-                                oninput="document.getElementById('value-source-audio-min-value-display').textContent = this.value">
-                            <span id="value-source-audio-min-value-display">0</span>
-                        </div>
+                        <input type="range" id="value-source-audio-min-value" min="0" max="1" step="0.01" value="0"
+                            oninput="document.getElementById('value-source-audio-min-value-display').textContent = this.value">
                     </div>
 
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-audio-max-value" data-i18n="value_source.audio_max_value">Max Value:</label>
+                            <label for="value-source-audio-max-value"><span data-i18n="value_source.audio_max_value">Max Value:</span> <span id="value-source-audio-max-value-display">1</span></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="value_source.audio_max_value.hint">Output at maximum audio level</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-audio-max-value" min="0" max="1" step="0.01" value="1"
-                                oninput="document.getElementById('value-source-audio-max-value-display').textContent = this.value">
-                            <span id="value-source-audio-max-value-display">1</span>
-                        </div>
+                        <input type="range" id="value-source-audio-max-value" min="0" max="1" step="0.01" value="1"
+                            oninput="document.getElementById('value-source-audio-max-value-display').textContent = this.value">
                     </div>
                 </div>
 
@@ -228,28 +204,22 @@
 
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-scene-sensitivity" data-i18n="value_source.sensitivity">Sensitivity:</label>
+                            <label for="value-source-scene-sensitivity"><span data-i18n="value_source.sensitivity">Sensitivity:</span> <span id="value-source-scene-sensitivity-display">1.0</span></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="value_source.scene_sensitivity.hint">Gain multiplier for the luminance signal (higher = more reactive to brightness changes)</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-scene-sensitivity" min="0.1" max="5" step="0.1" value="1.0"
-                                oninput="document.getElementById('value-source-scene-sensitivity-display').textContent = this.value">
-                            <span id="value-source-scene-sensitivity-display">1.0</span>
-                        </div>
+                        <input type="range" id="value-source-scene-sensitivity" min="0.1" max="5" step="0.1" value="1.0"
+                            oninput="document.getElementById('value-source-scene-sensitivity-display').textContent = this.value">
                     </div>
 
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-scene-smoothing" data-i18n="value_source.smoothing">Smoothing:</label>
+                            <label for="value-source-scene-smoothing"><span data-i18n="value_source.smoothing">Smoothing:</span> <span id="value-source-scene-smoothing-display">0.3</span></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="value_source.smoothing.hint">Temporal smoothing (0 = instant response, 1 = very smooth transitions)</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-scene-smoothing" min="0" max="1" step="0.05" value="0.3"
-                                oninput="document.getElementById('value-source-scene-smoothing-display').textContent = this.value">
-                            <span id="value-source-scene-smoothing-display">0.3</span>
-                        </div>
+                        <input type="range" id="value-source-scene-smoothing" min="0" max="1" step="0.05" value="0.3"
+                            oninput="document.getElementById('value-source-scene-smoothing-display').textContent = this.value">
                     </div>
                 </div>
 
@@ -257,28 +227,22 @@
                 <div id="value-source-adaptive-range-section" style="display:none">
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-adaptive-min-value" data-i18n="value_source.adaptive_min_value">Min Value:</label>
+                            <label for="value-source-adaptive-min-value"><span data-i18n="value_source.adaptive_min_value">Min Value:</span> <span id="value-source-adaptive-min-value-display">0</span></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="value_source.adaptive_min_value.hint">Minimum output brightness</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-adaptive-min-value" min="0" max="1" step="0.01" value="0"
-                                oninput="document.getElementById('value-source-adaptive-min-value-display').textContent = this.value">
-                            <span id="value-source-adaptive-min-value-display">0</span>
-                        </div>
+                        <input type="range" id="value-source-adaptive-min-value" min="0" max="1" step="0.01" value="0"
+                            oninput="document.getElementById('value-source-adaptive-min-value-display').textContent = this.value">
                     </div>
 
                     <div class="form-group">
                         <div class="label-row">
-                            <label for="value-source-adaptive-max-value" data-i18n="value_source.adaptive_max_value">Max Value:</label>
+                            <label for="value-source-adaptive-max-value"><span data-i18n="value_source.adaptive_max_value">Max Value:</span> <span id="value-source-adaptive-max-value-display">1</span></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="value_source.adaptive_max_value.hint">Maximum output brightness</small>
-                        <div class="range-with-value">
-                            <input type="range" id="value-source-adaptive-max-value" min="0" max="1" step="0.01" value="1"
-                                oninput="document.getElementById('value-source-adaptive-max-value-display').textContent = this.value">
-                            <span id="value-source-adaptive-max-value-display">1</span>
-                        </div>
+                        <input type="range" id="value-source-adaptive-max-value" min="0" max="1" step="0.01" value="1"
+                            oninput="document.getElementById('value-source-adaptive-max-value-display').textContent = this.value">
                     </div>
                 </div>
 
@@ -294,8 +258,8 @@
             </form>
         </div>
         <div class="modal-footer">
-            <button class="btn btn-secondary" onclick="closeValueSourceModal()" data-i18n="settings.button.cancel">&times; Cancel</button>
-            <button class="btn btn-primary" onclick="saveValueSource()" data-i18n="settings.button.save">&check; Save</button>
+            <button class="btn btn-icon btn-secondary" onclick="closeValueSourceModal()" title="Cancel" data-i18n-title="settings.button.cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
+            <button class="btn btn-icon btn-primary" onclick="saveValueSource()" title="Save" data-i18n-title="settings.button.save" data-i18n-aria-label="aria.save">&#x2713;</button>
         </div>
     </div>
 </div>