From 3e292f18c8ad664c90fd9040f5f5be314b3f741f Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Fri, 13 Mar 2026 12:51:21 -0400
Subject: [PATCH] refactor(header): integrate search and theme functions via
 Alpine

- header.ts now imports and re-exports functions from search.ts
  and theme.ts for use in the header template
- Functions available via x-data=header:
  - initializeSearch
  - initializeTheme
  - changeTheme
  - changeWoodPaneling
  - loadWoodPaneling
  - updateWoodPanelingIndicators
- header.templ x-init calls these functions directly
- Enables proper SSR-first pattern with x-init for setup only
---
 templates/header.templ |  2 +-
 web/src/header.ts      | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/templates/header.templ b/templates/header.templ
index af56680..b99b4e3 100644
--- a/templates/header.templ
+++ b/templates/header.templ
@@ -1,7 +1,7 @@
 package templates
 
 templ Header(user User, currentPath string) {
-	<nav x-data="theme" class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
+	<nav x-data="header" x-init="initializeSearch(); initializeTheme(); loadWoodPaneling(); updateWoodPanelingIndicators()" class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
 		<div x-data="{}" x-init="console.log('Alpine is working!', $el)"></div>
 		<div class="w-full px-4 sm:px-6 lg:px-8">
 			<div class="flex justify-between items-center h-16">
diff --git a/web/src/header.ts b/web/src/header.ts
index ad8b795..7f1a238 100644
--- a/web/src/header.ts
+++ b/web/src/header.ts
@@ -1,6 +1,14 @@
 // Header functionality
 
 import { Alpine } from "./alpine";
+import { initializeSearch } from "./search";
+import {
+  initializeTheme,
+  changeTheme,
+  changeWoodPaneling,
+  loadWoodPaneling,
+  updateWoodPanelingIndicators,
+} from "./theme";
 
 const logout = (): void => {
   localStorage.removeItem("token");
@@ -12,4 +20,10 @@ export { logout };
 
 Alpine.data("header", () => ({
   logout,
+  initializeSearch,
+  initializeTheme,
+  changeTheme,
+  changeWoodPaneling,
+  loadWoodPaneling,
+  updateWoodPanelingIndicators,
 }));