alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace flat sub-tab bars with tree sidebar navigation

Browse Source 
Add TreeNav component that groups related entity types into a
collapsible hierarchy for Targets and Sources tabs. Targets tree
shows section-level leaves (Devices, Color Strips, LED Targets,
KC Targets, Pattern Templates) with scroll-to-section on click.
Sources tree groups into Picture, Audio, and Utility categories.

Also fixes missing csAudioTemplates in stream section expand/collapse.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-10 12:03:31 +03:00
parent ee40d99067
commit 3915573514
10 changed files with 585 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
server/src/wled_controller/templates/index.html
View File

@@ -23,6 +23,7 @@
<link rel="stylesheet" href="/static/css/streams.css">
<link rel="stylesheet" href="/static/css/patterns.css">
<link rel="stylesheet" href="/static/css/automations.css">
<link rel="stylesheet" href="/static/css/tree-nav.css">
<link rel="stylesheet" href="/static/css/tutorials.css">
<link rel="stylesheet" href="/static/css/mobile.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
@@ -109,14 +110,20 @@
</div>
<div class="tab-panel" id="tab-targets" role="tabpanel" aria-labelledby="tab-btn-targets">
<div id="targets-panel-content">
<div class="loading-spinner"></div>
<div class="tree-layout">
<nav class="tree-sidebar" id="targets-tree-nav"></nav>
<div class="tree-content" id="targets-panel-content">
<div class="loading-spinner"></div>
</div>
</div>
</div>
<div class="tab-panel" id="tab-streams" role="tabpanel" aria-labelledby="tab-btn-streams">
<div id="streams-list">
<div class="loading-spinner"></div>
<div class="tree-layout">
<nav class="tree-sidebar" id="streams-tree-nav"></nav>
<div class="tree-content" id="streams-list">
<div class="loading-spinner"></div>
</div>
</div>
</div>