Merge templates into Streams tab, rename app to WLED Grab

- Merge Capture Templates and Processing Templates main tabs into Picture
  Streams sub-tabs (Screen Capture shows streams + engine templates,
  Processed shows streams + filter templates)
- Rename "Capture Templates" to "Engine Templates" and "Processing
  Templates" to "Filter Templates" across all locale strings
- Rename "Picture Streams" tab to "Streams" throughout UI and locales
- Rename "WLED Screen Controller" to "WLED Grab" across all files
- Add subtab section headers and styling for merged template views
- Remove add card labels, keeping only plus icon for cleaner UI

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-11 20:53:03 +03:00
parent 7d0b6f2583
commit 9ae93497a6
9 changed files with 241 additions and 239 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 Screen Controller</title>
<title>WLED 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 Screen Controller</h1>
<h1 data-i18n="app.title">WLED Grab</h1>
<span id="server-version"><span id="version-number"></span></span>
</div>
<div class="server-info">
@@ -36,9 +36,7 @@
<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" data-tab="streams" onclick="switchTab('streams')"><span data-i18n="streams.title">📺 Picture Streams</span></button>
<button class="tab-btn" data-tab="templates" onclick="switchTab('templates')"><span data-i18n="templates.title">🎯 Capture Templates</span></button>
<button class="tab-btn" data-tab="pp-templates" onclick="switchTab('pp-templates')"><span data-i18n="postprocessing.title">🎨 Processing Templates</span></button>
<button class="tab-btn" data-tab="streams" onclick="switchTab('streams')"><span data-i18n="streams.title">📺 Streams</span></button>
</div>
<div class="tab-panel active" id="tab-devices">
@@ -54,17 +52,6 @@
</div>
</div>
<div class="tab-panel" id="tab-templates">
<div id="templates-list" class="templates-grid">
<div class="loading-spinner"></div>
</div>
</div>
<div class="tab-panel" id="tab-pp-templates">
<div id="pp-templates-list" class="templates-grid">
<div class="loading-spinner"></div>
</div>
</div>
</div>
<footer class="app-footer">
@@ -249,9 +236,9 @@
<input type="hidden" id="stream-selector-device-id">
<div class="form-group">
<label for="stream-selector-stream" data-i18n="device.stream_selector.label">Assigned Picture Stream:</label>
<label for="stream-selector-stream" data-i18n="device.stream_selector.label">Stream:</label>
<select id="stream-selector-stream"></select>
<small class="input-hint" data-i18n="device.stream_selector.hint">Select a picture stream that defines what this device captures and processes</small>
<small class="input-hint" data-i18n="device.stream_selector.hint">Select a stream that defines what this device captures and processes</small>
</div>
<div id="stream-selector-info" class="stream-info-panel" style="display: none;"></div>
@@ -301,7 +288,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 Screen Controller.
Please enter your API key to authenticate and access the WLED Grab.
</p>
<div class="form-group">
<label for="api-key-input" data-i18n="auth.label">API Key:</label>
@@ -447,7 +434,7 @@
<div id="test-stream-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 data-i18n="streams.test.title">Test Picture Stream</h2>
<h2 data-i18n="streams.test.title">Test Stream</h2>
<button class="modal-close-btn" onclick="closeTestStreamModal()" title="Close">&#x2715;</button>
</div>
<div class="modal-body">
@@ -495,11 +482,11 @@
</div>
</div>
<!-- Picture Stream Modal -->
<!-- Stream Modal -->
<div id="stream-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="stream-modal-title" data-i18n="streams.add">Add Picture Stream</h2>
<h2 id="stream-modal-title" data-i18n="streams.add">Add Stream</h2>
<button class="modal-close-btn" onclick="closeStreamModal()" title="Close">&#x2715;</button>
</div>
<div class="modal-body">