From 9eddaeafc3c69f5ad22a20766d6deebd5bcb016c Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sun, 8 Feb 2026 03:42:09 +0300
Subject: [PATCH] Move WLED config tips to footer, add Web UI link, move
 preview to calibration

- Move WLED Configuration tips from Add Device modal to page footer
- Add WLED Web UI link in footer (auto-populated with first device URL)
- Add WLED Web UI button (globe icon) to device card actions
- Move pixel preview button from device card to calibration modal footer
- Add en/ru i18n keys for new UI elements

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 server/src/wled_controller/static/app.js         | 16 +++++++++++++---
 server/src/wled_controller/static/index.html     | 14 +++++++++-----
 .../src/wled_controller/static/locales/en.json   |  4 ++++
 .../src/wled_controller/static/locales/ru.json   |  4 ++++
 server/src/wled_controller/static/style.css      | 14 ++++++++++++++
 5 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/server/src/wled_controller/static/app.js b/server/src/wled_controller/static/app.js
index 41a0c9a..616566a 100644
--- a/server/src/wled_controller/static/app.js
+++ b/server/src/wled_controller/static/app.js
@@ -452,6 +452,14 @@ async function loadDevices() {
 
         container.innerHTML = devicesWithState.map(device => createDeviceCard(device)).join('');
 
+        // Update footer WLED Web UI link with first device's URL
+        const webuiLink = document.querySelector('.wled-webui-link');
+        if (webuiLink && devicesWithState.length > 0 && devicesWithState[0].url) {
+            webuiLink.href = devicesWithState[0].url;
+            webuiLink.target = '_blank';
+            webuiLink.rel = 'noopener';
+        }
+
         // Attach event listeners
         devicesWithState.forEach(device => {
             attachDeviceListeners(device.id);
@@ -569,9 +577,11 @@ function createDeviceCard(device) {
                 <button class="btn btn-icon btn-secondary" onclick="showCalibration('${device.id}')" title="${t('device.button.calibrate')}">
                     📐
                 </button>
-                <button class="btn btn-icon btn-secondary" onclick="showPixelPreview('${device.id}')" title="${t('preview.button')}">
-                    👁️
-                </button>
+                ${device.url ? `
+                <a class="btn btn-icon btn-secondary" href="${device.url}" target="_blank" rel="noopener" title="${t('device.button.webui')}">
+                    🌐
+                </a>
+                ` : ''}
             </div>
         </div>
     `;
diff --git a/server/src/wled_controller/static/index.html b/server/src/wled_controller/static/index.html
index a42b578..e6f66a1 100644
--- a/server/src/wled_controller/static/index.html
+++ b/server/src/wled_controller/static/index.html
@@ -56,6 +56,14 @@
 
         <footer class="app-footer">
             <div class="footer-content">
+                <p class="footer-tip">
+                    <strong><span data-i18n="devices.wled_config">WLED Configuration:</span></strong> <span data-i18n="devices.wled_note">Configure your WLED device (effects, segments, color order, power limits, etc.) using the</span>
+                    <a href="https://kno.wled.ge/" target="_blank" rel="noopener" data-i18n="devices.wled_link">official WLED app</a>
+                    <span data-i18n="devices.wled_note_or">or the built-in</span>
+                    <a href="#" class="wled-webui-link" data-i18n="devices.wled_webui_link">WLED Web UI</a>
+                    <span data-i18n="devices.wled_note_webui">(open your device's IP in a browser).</span>
+                    <span data-i18n="devices.wled_note2">This controller sends pixel color data and controls brightness per device.</span>
+                </p>
                 <p>
                     Created by <strong>Alexei Dolgolyov</strong>
                     • <a href="mailto:dolgolyov.alexei@gmail.com">dolgolyov.alexei@gmail.com</a>
@@ -148,6 +156,7 @@
                 <div id="calibration-error" class="error-message" style="display: none;"></div>
             </div>
             <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="showPixelPreview(document.getElementById('calibration-device-id').value)" data-i18n="preview.button" style="margin-right: auto;">Preview</button>
                 <button class="btn btn-secondary" onclick="closeCalibrationModal()" data-i18n="calibration.button.cancel">Cancel</button>
                 <button class="btn btn-primary" onclick="saveCalibration()" data-i18n="calibration.button.save">Save</button>
             </div>
@@ -257,11 +266,6 @@
                 <h2 data-i18n="devices.add">Add New Device</h2>
             </div>
             <div class="modal-body">
-                <div class="info-banner" style="margin-bottom: 16px; padding: 12px; background: rgba(33, 150, 243, 0.1); border-left: 4px solid #2196F3; border-radius: 4px;">
-                    <strong><span data-i18n="devices.wled_config">WLED Configuration:</span></strong> <span data-i18n="devices.wled_note">Configure your WLED device (effects, segments, color order, power limits, etc.) using the</span>
-                    <a href="https://kno.wled.ge/" target="_blank" rel="noopener" style="color: #2196F3; text-decoration: underline;" data-i18n="devices.wled_link">official WLED app</a>.
-                    <span data-i18n="devices.wled_note2">This controller sends pixel color data and controls brightness per device.</span>
-                </div>
                 <form id="add-device-form">
                     <div class="form-group">
                         <label for="device-name" data-i18n="device.name">Device Name:</label>
diff --git a/server/src/wled_controller/static/locales/en.json b/server/src/wled_controller/static/locales/en.json
index 72487e0..d55611a 100644
--- a/server/src/wled_controller/static/locales/en.json
+++ b/server/src/wled_controller/static/locales/en.json
@@ -40,6 +40,9 @@
   "devices.wled_config": "WLED Configuration:",
   "devices.wled_note": "Configure your WLED device (effects, segments, color order, power limits, etc.) using the",
   "devices.wled_link": "official WLED app",
+  "devices.wled_note_or": "or the built-in",
+  "devices.wled_webui_link": "WLED Web UI",
+  "devices.wled_note_webui": "(open your device's IP in a browser).",
   "devices.wled_note2": "This controller sends pixel color data and controls brightness per device.",
   "device.name": "Device Name:",
   "device.name.placeholder": "Living Room TV",
@@ -54,6 +57,7 @@
   "device.button.settings": "Settings",
   "device.button.calibrate": "Calibrate",
   "device.button.remove": "Remove",
+  "device.button.webui": "Open WLED Web UI",
   "device.status.connected": "Connected",
   "device.status.disconnected": "Disconnected",
   "device.status.error": "Error",
diff --git a/server/src/wled_controller/static/locales/ru.json b/server/src/wled_controller/static/locales/ru.json
index ca30216..eb9b216 100644
--- a/server/src/wled_controller/static/locales/ru.json
+++ b/server/src/wled_controller/static/locales/ru.json
@@ -40,6 +40,9 @@
   "devices.wled_config": "Конфигурация WLED:",
   "devices.wled_note": "Настройте ваше WLED устройство (эффекты, сегменты, порядок цветов, ограничения питания и т.д.) используя",
   "devices.wled_link": "официальное приложение WLED",
+  "devices.wled_note_or": "или встроенный",
+  "devices.wled_webui_link": "веб-интерфейс WLED",
+  "devices.wled_note_webui": "(откройте IP устройства в браузере).",
   "devices.wled_note2": "Этот контроллер отправляет данные о цвете пикселей и управляет яркостью для каждого устройства.",
   "device.name": "Имя Устройства:",
   "device.name.placeholder": "ТВ в Гостиной",
@@ -54,6 +57,7 @@
   "device.button.settings": "Настройки",
   "device.button.calibrate": "Калибровка",
   "device.button.remove": "Удалить",
+  "device.button.webui": "Открыть веб-интерфейс WLED",
   "device.status.connected": "Подключено",
   "device.status.disconnected": "Отключено",
   "device.status.error": "Ошибка",
diff --git a/server/src/wled_controller/static/style.css b/server/src/wled_controller/static/style.css
index f3305b2..072ddcf 100644
--- a/server/src/wled_controller/static/style.css
+++ b/server/src/wled_controller/static/style.css
@@ -794,6 +794,20 @@ input:-webkit-autofill:focus {
     margin: 0;
 }
 
+.footer-tip {
+    margin-bottom: 12px !important;
+    padding: 10px 16px;
+    background: rgba(33, 150, 243, 0.08);
+    border-radius: 6px;
+    font-size: 0.85rem;
+    display: inline-block;
+}
+
+.footer-tip a {
+    color: var(--info-color) !important;
+    text-decoration: underline;
+}
+
 .footer-content strong {
     color: var(--text-color);
 }