pre-refactor

webui/static/app.js

@@ -55,7 +55,7 @@ window.addEventListener('hashchange', () => {
     router.state.path = location.hash.slice(1) || '/dashboard';
 });
 
-/* ── Sidebar component ─────────────────────────────────────── */
+/* ── Sidebar render root ───────────────────────────────────── */
 function Sidebar() {
     const current = router.state.path;
     return h('div', { class: 'sidebar' },
@@ -72,29 +72,21 @@ function Sidebar() {
     );
 }
 
-/* ── Route component wrapper ───────────────────────────────── */
-function RouteComponent() {
-    return router.component();
-}
-
-/* ── App layout ────────────────────────────────────────────── */
-function AppLayout() {
+/* ── Main content render root ──────────────────────────────── */
+function MainContent() {
     return [
-        h('div', { class: 'layout' },
-            Sidebar(),
-            h('div', { class: 'main' },
-                RouteComponent(),
-            ),
-        ),
+        router.component(),
         ToastContainer(),
     ];
 }
 
 /* ── Init ──────────────────────────────────────────────────── */
 export function initApp() {
-    const appEl = document.getElementById('app');
-    if (appEl) {
-        render(appEl, AppLayout);
+    const sidebarEl = document.getElementById('sidebar');
+    const mainEl = document.getElementById('main');
+    if (sidebarEl && mainEl) {
+        render(sidebarEl, Sidebar);
+        render(mainEl, MainContent);
     }
     // Defer connect() after the first render microtask settles to prevent
     // the initial requestUpdate() from triggering a second commit while