Replace sections with tabs, add device card to grid

- Switch Devices/Displays from collapsible sections to tab layout
- Remember active tab in localStorage
- Re-render display layout when switching to Displays tab
- Replace floating "+" button with dashed add-device card in grid
- Rename sections to "Devices" and "Displays"

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

server/src/wled_controller/static/index.html

@@ -32,12 +32,13 @@
             </div>
         </header>
 
-        <section class="devices-section">
-            <div class="section-header">
-                <h2 class="collapsible-header" onclick="toggleSection('devices')" data-section="devices"><span data-i18n="devices.title">💡 Devices</span><span class="collapse-chevron">▼</span></h2>
-                <button class="btn btn-icon btn-primary" onclick="showAddDevice()" data-i18n-title="devices.add" title="Add New Device">+</button>
+        <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" data-tab="displays" onclick="switchTab('displays')"><span data-i18n="displays.layout">🖥️ Displays</span></button>
             </div>
-            <div id="devices-content" class="collapsible-content">
+
+            <div class="tab-panel active" id="tab-devices">
                 <p class="section-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>
@@ -50,11 +51,8 @@
                     <div class="loading" data-i18n="devices.loading">Loading devices...</div>
                 </div>
             </div>
-        </section>
 
-        <section class="displays-section">
-            <h2 class="collapsible-header" onclick="toggleSection('displays')" data-section="displays"><span data-i18n="displays.layout">🖥️ Displays</span><span class="collapse-chevron">▼</span></h2>
-            <div id="displays-content" class="collapsible-content">
+            <div class="tab-panel" id="tab-displays">
                 <div class="display-layout-preview">
                     <div id="display-layout-canvas" class="display-layout-canvas">
                         <div class="loading" data-i18n="displays.loading">Loading layout...</div>
@@ -62,7 +60,7 @@
                 </div>
                 <div id="displays-list" style="display: none;"></div>
             </div>
-        </section>
+        </div>
 
         <footer class="app-footer">
             <div class="footer-content">