Safety backup before Path A fixes - fixing function mismatches and missing functions

web/src/theme.ts

@@ -1,3 +1,4 @@
+import { Alpine } from "./alpine";
 // Theme management functionality
 
 type ThemeType =
@@ -37,14 +38,8 @@ const loadTheme = (): void => {
   applyTheme(theme);
 };
 
-// Handle theme change from user selection
-const changeTheme = async (): Promise<void> => {
-  const themeSelect = document.getElementById(
-    "theme-select",
-  ) as HTMLSelectElement;
-  if (!themeSelect) return;
-
-  const theme = themeSelect.value as ThemeType;
+// Change: Remove DOM element lookup, accept theme as parameter
+const changeTheme = async (theme: string): Promise<void> => {
   applyTheme(theme);
 
   // Save to server if logged in
@@ -128,14 +123,113 @@ const setupSmoothScroll = (): void => {
   });
 };
 
+// Wood paneling management functionality
+
+type WoodPanelingType = "none" | "wood-light" | "wood-dark" | "wood-mahogany";
+
+const WOOD_STORAGE_KEY = "wood-paneling";
+
+// Apply wood paneling to collections container
+const applyWoodPaneling = (paneling: WoodPanelingType): void => {
+  const container = document.getElementById("collections-container");
+  const body = document.body;
+  if (!container || !body) return;
+
+  // Remove all wood background classes from container
+  container.classList.remove(
+    "bg-wood-light",
+    "bg-wood-dark",
+    "bg-wood-mahogany",
+  );
+  container.removeAttribute("data-wood");
+
+  // Remove from body
+  body.classList.remove("bg-wood-light", "bg-wood-dark", "bg-wood-mahogany");
+
+  if (paneling !== "none") {
+    // Add selected wood background class to both container and body
+    const woodClass = `bg-${paneling}`;
+    container.classList.add(woodClass);
+    container.setAttribute("data-wood", paneling);
+
+    // Add to body for overscroll area
+    body.classList.add(woodClass);
+  }
+
+  // Save to localStorage
+  localStorage.setItem(WOOD_STORAGE_KEY, paneling);
+};
+
+// Load wood paneling from localStorage on page load
+const loadWoodPaneling = (): void => {
+  const stored = localStorage.getItem(
+    WOOD_STORAGE_KEY,
+  ) as WoodPanelingType | null;
+  if (stored) {
+    applyWoodPaneling(stored);
+  } else {
+    // Default to none
+    applyWoodPaneling("none");
+  }
+};
+
+// Change wood paneling (called from theme dropdown)
+const changeWoodPaneling = (paneling: WoodPanelingType): void => {
+  applyWoodPaneling(paneling);
+
+  // Update active indicators
+  updateWoodPanelingIndicators();
+
+  // Alpine closes dropdown automatically via template state
+};
+
+// Update visual indicators for wood paneling buttons
+const updateWoodPanelingIndicators = (): void => {
+  const currentWood = localStorage.getItem(WOOD_STORAGE_KEY) || "none";
+
+  // Update wood paneling buttons
+  document.querySelectorAll(".wood-paneling-btn").forEach((btn) => {
+    const wood = btn.getAttribute("data-wood");
+    if (wood === currentWood) {
+      // Active state - use CSS class instead of inline style
+      btn.classList.add("bg-wood-active");
+      btn.classList.remove("bg-wood-inactive");
+    } else {
+      // Inactive state
+      btn.classList.remove("bg-wood-active");
+      btn.classList.add("bg-wood-inactive");
+    }
+  });
+};
+
 // Auto-initialize when DOM is ready
 if (typeof document !== "undefined") {
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initializeTheme);
+    document.addEventListener("DOMContentLoaded", () => {
+      initializeTheme();
+      loadWoodPaneling();
+      updateWoodPanelingIndicators();
+    });
   } else {
     initializeTheme();
+    loadWoodPaneling();
+    updateWoodPanelingIndicators();
   }
 }
 
-export { applyTheme, changeTheme, initializeTheme, loadTheme, loadUserTheme };
+Alpine.store("theme", {
+  changeTheme,
+  changeWoodPaneling,
+});
+
+export {
+  applyTheme,
+  changeTheme,
+  changeWoodPaneling,
+  initializeTheme,
+  loadTheme,
+  loadUserTheme,
+  loadWoodPaneling,
+  updateWoodPanelingIndicators,
+};
 export type { ThemeType };