Add OpenRGB per-zone LED control with separate/combined modes and zone preview

- Zone picker UI in device add/settings modals with per-zone checkbox selection
- Combined mode: pixels distributed sequentially across zones
- Separate mode: full effect resampled independently to each zone via linear interpolation
- Per-zone LED preview in target cards: one canvas strip per zone with hover overlay labels
- Zone badges on device cards enriched with actual LED counts from OpenRGB API
- Fix stale led_count by using device_led_count discovered at connect time

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

server/src/wled_controller/templates/modals/add-device.html

@@ -56,6 +56,31 @@
                     <small class="input-hint" style="display:none" data-i18n="device.serial_port.hint">Select the COM port of the Adalight device</small>
                     <select id="device-serial-port" onfocus="onSerialPortFocus()"></select>
                 </div>
+                <div class="form-group" id="device-zone-group" style="display: none;">
+                    <div class="label-row">
+                        <label data-i18n="device.openrgb.zone">Zones:</label>
+                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
+                    </div>
+                    <small class="input-hint" style="display:none" data-i18n="device.openrgb.zone.hint">Select which LED zones to control (leave all unchecked for all zones)</small>
+                    <div id="device-zone-list" class="zone-checkbox-list"></div>
+                </div>
+                <div class="form-group" id="device-zone-mode-group" style="display: none;">
+                    <div class="label-row">
+                        <label data-i18n="device.openrgb.mode">Zone mode:</label>
+                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
+                    </div>
+                    <small class="input-hint" style="display:none" data-i18n="device.openrgb.mode.hint">Combined treats all zones as one continuous LED strip. Separate renders each zone independently with the full effect.</small>
+                    <div class="zone-mode-radios">
+                        <label class="zone-mode-option">
+                            <input type="radio" name="device-zone-mode" value="combined" checked>
+                            <span data-i18n="device.openrgb.mode.combined">Combined strip</span>
+                        </label>
+                        <label class="zone-mode-option">
+                            <input type="radio" name="device-zone-mode" value="separate">
+                            <span data-i18n="device.openrgb.mode.separate">Independent zones</span>
+                        </label>
+                    </div>
+                </div>
                 <div class="form-group" id="device-led-count-group" style="display: none;">
                     <div class="label-row">
                         <label for="device-led-count" data-i18n="device.led_count">LED Count:</label>

server/src/wled_controller/templates/modals/device-settings.html

@@ -31,6 +31,31 @@
                     <select id="settings-serial-port"></select>
                 </div>
 
+                <div class="form-group" id="settings-zone-group" style="display: none;">
+                    <div class="label-row">
+                        <label data-i18n="device.openrgb.zone">Zones:</label>
+                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
+                    </div>
+                    <small class="input-hint" style="display:none" data-i18n="device.openrgb.zone.hint">Select which LED zones to control (leave all unchecked for all zones)</small>
+                    <div id="settings-zone-list" class="zone-checkbox-list"></div>
+                </div>
+                <div class="form-group" id="settings-zone-mode-group" style="display: none;">
+                    <div class="label-row">
+                        <label data-i18n="device.openrgb.mode">Zone mode:</label>
+                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
+                    </div>
+                    <small class="input-hint" style="display:none" data-i18n="device.openrgb.mode.hint">Combined treats all zones as one continuous LED strip. Separate renders each zone independently with the full effect.</small>
+                    <div class="zone-mode-radios">
+                        <label class="zone-mode-option">
+                            <input type="radio" name="settings-zone-mode" value="combined" checked>
+                            <span data-i18n="device.openrgb.mode.combined">Combined strip</span>
+                        </label>
+                        <label class="zone-mode-option">
+                            <input type="radio" name="settings-zone-mode" value="separate">
+                            <span data-i18n="device.openrgb.mode.separate">Independent zones</span>
+                        </label>
+                    </div>
+                </div>
                 <div class="form-group" id="settings-led-count-group" style="display: none;">
                     <div class="label-row">
                         <label for="settings-led-count" data-i18n="device.led_count">LED Count:</label>