Rename WLED Grab to LED Grab, merge Devices into Targets tab with WLED sub-tab, and UI polish

- Rename "WLED Grab" to "LED Grab" across all files (title, logs, locales)
- Merge Devices and Targets into a single Targets tab with WLED sub-tab
  containing Devices and Targets sections (like Sources tab pattern)
- Make target card source name label full-width
- Render engine template config as two-column key-value grid
- Update CLAUDE.md: no server restart needed for frontend-only changes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-12 15:44:11 +03:00
parent 55814a3c30
commit 58df163ded
9 changed files with 176 additions and 142 deletions

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WLED Grab</title>
<title>LED Grab</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>💡</text></svg>">
<link rel="stylesheet" href="/static/style.css">
</head>
@@ -12,7 +12,7 @@
<header>
<div class="header-title">
<span id="server-status" class="status-badge"></span>
<h1 data-i18n="app.title">WLED Grab</h1>
<h1 data-i18n="app.title">LED Grab</h1>
<span id="server-version"><span id="version-number"></span></span>
</div>
<div class="server-info">
@@ -34,19 +34,12 @@
<div class="tabs">
<div class="tab-bar">
<button class="tab-btn active" data-tab="devices" onclick="switchTab('devices')"><span data-i18n="devices.title">💡 Devices</span></button>
<button class="tab-btn active" data-tab="targets" onclick="switchTab('targets')"><span data-i18n="targets.title">⚡ Targets</span></button>
<button class="tab-btn" data-tab="streams" onclick="switchTab('streams')"><span data-i18n="streams.title">📺 Sources</span></button>
<button class="tab-btn" data-tab="targets" onclick="switchTab('targets')"><span data-i18n="targets.title">⚡ Targets</span></button>
</div>
<div class="tab-panel active" id="tab-devices">
<div id="devices-list" class="devices-grid">
<div class="loading-spinner"></div>
</div>
</div>
<div class="tab-panel" id="tab-targets">
<div id="targets-list" class="devices-grid">
<div class="tab-panel active" id="tab-targets">
<div id="targets-panel-content">
<div class="loading-spinner"></div>
</div>
</div>
@@ -321,7 +314,7 @@
<form id="api-key-form" onsubmit="submitApiKey(event)">
<div class="modal-body">
<p class="modal-description" data-i18n="auth.message">
Please enter your API key to authenticate and access the WLED Grab.
Please enter your API key to authenticate and access the LED Grab.
</p>
<div class="form-group">
<div class="label-row">
@@ -761,7 +754,7 @@
showToast(t('auth.logout.success'), 'info');
// Clear the UI
document.getElementById('devices-list').innerHTML = `<div class="loading">${t('auth.please_login')} devices</div>`;
document.getElementById('targets-panel-content').innerHTML = `<div class="loading">${t('auth.please_login')}</div>`;
}
// Initialize on load
@@ -837,7 +830,7 @@
// Reload data
loadServerInfo();
loadDisplays();
loadDevices();
loadTargetsTab();
// Start auto-refresh if not already running
if (!refreshInterval) {