From 33cf00f65c0f0874e5f259ad4fbd666ee5901583 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Mon, 9 Mar 2026 20:58:40 -0400
Subject: [PATCH] refactor: Consolidate Alpine.js initialization and module
 loading

This commit reorganizes the Alpine.js initialization process to ensure all
component modules are registered before Alpine starts, preventing potential
race conditions and improving code organization.

Changes:
- Add web/src/register-alpine.ts: Central module that imports all Alpine
  component modules before calling Alpine.start(), ensuring proper
  registration order
- Update web/src/alpine.ts: Remove Alpine.start() call since it's now
  handled in register-alpine.ts
- Update web/src/main.ts: Replace individual module imports with single
  register-alpine import, simplifying the entry point
- Update web/src/header.ts: Rename changeThemeTo function to changeTheme
  for consistency with other naming conventions

This change ensures all Alpine.global() calls complete before Alpine
initializes, following best practices for Alpine.js module registration.
---
 web/src/alpine.ts          |  1 -
 web/src/header.ts          |  7 ++++---
 web/src/main.ts            |  8 +-------
 web/src/register-alpine.ts | 33 +++++++++++++++++++++++++++++++++
 4 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 web/src/register-alpine.ts

diff --git a/web/src/alpine.ts b/web/src/alpine.ts
index 602f8e2..b348965 100644
--- a/web/src/alpine.ts
+++ b/web/src/alpine.ts
@@ -9,7 +9,6 @@ declare global {
 
 // Initialize Alpine
 window.Alpine = Alpine;
-Alpine.start();
 
 // Re-export Alpine for other modules to use
 export { Alpine };
diff --git a/web/src/header.ts b/web/src/header.ts
index 0f72143..873e00a 100644
--- a/web/src/header.ts
+++ b/web/src/header.ts
@@ -4,7 +4,7 @@ import { Alpine } from "./alpine";
 import { applyTheme } from "./theme";
 import { updateThemeIndicators } from "./themeDropdown";
 
-const changeThemeTo = (theme: string): void => {
+const changeTheme = (theme: string): void => {
   // Apply the theme using the consolidated function from theme.ts
   applyTheme(theme);
 
@@ -30,12 +30,13 @@ const logout = (): void => {
   window.location.href = "/";
 };
 
-export { changeThemeTo, logout };
+export { changeTheme, logout };
 
 Alpine.global("header", {
   logout,
   changeThemeTo: (theme: string) => {
-    changeThemeTo(theme);
+    console.log("changeThemeTo called with:", theme);
+    changeTheme(theme);
     updateThemeIndicators();
   },
 });
diff --git a/web/src/main.ts b/web/src/main.ts
index 53f81a8..8dbfeab 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -23,13 +23,7 @@ import "./profile";
 import "./profile-modal";
 import "./queue";
 import "./register";
-import "./search";
+import "./register-alpine";
 import "./storage";
-import "./themeDropdown";
 import "./theme";
-import "./toast";
-import "./toast-error";
-import "./unlinked_books";
 import "./woodPanelingInit";
-import "./woodPaneling";
-import "./alpine";
diff --git a/web/src/register-alpine.ts b/web/src/register-alpine.ts
new file mode 100644
index 0000000..910dab7
--- /dev/null
+++ b/web/src/register-alpine.ts
@@ -0,0 +1,33 @@
+import { Alpine } from "./alpine";
+// Import all modules that register Alpine globals
+// These imports trigger their Alpine.global() calls
+import "./admin";
+import "./api";
+import "./analytics";
+import "./api-explorer-docs";
+import "./bookshelf";
+import "./collection-rules";
+import "./collections";
+import "./conflicts";
+import "./custom-section-builder";
+import "./dashboard";
+import "./device-management";
+import "./docs";
+import "./header";
+import "./index";
+import "./library";
+import "./login";
+import "./linking";
+import "./password_validation";
+import "./profile";
+import "./profile-modal";
+import "./queue";
+import "./register";
+import "./search";
+import "./themeDropdown";
+import "./toast";
+import "./toast-error";
+import "./unlinked_books";
+import "./woodPaneling";
+// NOW start Alpine after all registrations complete
+Alpine.start();