refactor: migrate dashboard to SSR-first Alpine.js pattern

Update dashboard to follow SSR-first Alpine.js guidelines: - Add x-data="dashboard" and x-init="initDashboard()" to body tag - Wrap initialization in initDashboard() function instead of executing at load time - Alpine.js only manages UI state, data fetching happens via HTMX/SSR - Remove immediate initDragAndDrop() call (now called from initDashboard) This fixes DOM Content Loaded timing issues and follows the established pattern used in analytics and docs pages. The dashboard now properly supports: - SSR with initial data rendered server-side - Alpine.js for interactive UI (drag-drop, modals) - HTMX for dynamic updates without page reload - Progressive enhancement (works without JavaScript)
2026-03-20 22:58:18 -04:00
parent e74eeb5c5b
commit b77da3a289
3 changed files with 94 additions and 85 deletions
@@ -15,7 +15,7 @@ templ Dashboard(user User, sections []handlers.SectionData, allSections []handle
 			<script src="/static/htmx.min.js"></script>
 			<link href="/static/style.css" rel="stylesheet"/>
 		</head>
-		<body class="theme-{ user.Theme }">
+		<body x-data="dashboard" x-init="initDashboard()" class="theme-{ user.Theme }">
 			@Header(user, "/dashboard")
 			<!-- Sticky Library Selector -->
 			<div class="sticky top-0 z-40 bg-opacity-95 backdrop-blur border-b" style="background-color: var(--bg-primary);">