From fffa87009abef4cf4a691be1c8431b8e23c11a18 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Tue, 24 Feb 2026 12:59:48 -0500
Subject: [PATCH] feat(wood-paneling): create wood paneling management system

- Add woodPaneling.ts with localStorage-based paneling preferences
- Add woodPanelingInit.ts for early initialization (prevents flash)
- Support none, wood-light, wood-dark, wood-mahogany options
- Apply paneling to #collections-container only (not full body)
- Use Tailwind utility classes for backgrounds
- Use CSS variable classes for active indicators
- Export functions for HTML onclick handlers
- Auto-initialize on DOM ready
---
 web/src/woodPaneling.ts     | 84 +++++++++++++++++++++++++++++++++++++
 web/src/woodPanelingInit.ts | 24 +++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 web/src/woodPaneling.ts
 create mode 100644 web/src/woodPanelingInit.ts

diff --git a/web/src/woodPaneling.ts b/web/src/woodPaneling.ts
new file mode 100644
index 0000000..a197db2
--- /dev/null
+++ b/web/src/woodPaneling.ts
@@ -0,0 +1,84 @@
+// 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');
+    if (!container) return;
+
+    // Remove all wood background classes
+    container.classList.remove('bg-wood-light', 'bg-wood-dark', 'bg-wood-mahogany');
+
+    if (paneling !== 'none') {
+        // Add selected wood background class
+        container.classList.add(`bg-${paneling}`);
+    }
+
+    // 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();
+
+    // Close dropdown
+    const dropdown = document.getElementById('theme-dropdown');
+    if (dropdown) {
+        dropdown.classList.add('hidden');
+    }
+};
+
+// 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');
+        }
+    });
+};
+
+// Make functions available globally
+(window as any).changeWoodPaneling = changeWoodPaneling;
+(window as any).loadWoodPaneling = loadWoodPaneling;
+(window as any).updateWoodPanelingIndicators = updateWoodPanelingIndicators;
+
+// Auto-initialize when DOM is ready
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            loadWoodPaneling();
+            updateWoodPanelingIndicators();
+        });
+    } else {
+        loadWoodPaneling();
+        updateWoodPanelingIndicators();
+    }
+}
diff --git a/web/src/woodPanelingInit.ts b/web/src/woodPanelingInit.ts
new file mode 100644
index 0000000..c9b5699
--- /dev/null
+++ b/web/src/woodPanelingInit.ts
@@ -0,0 +1,24 @@
+// Early initialization script to prevent flash of wrong background
+// Loads before woodPaneling.js to apply paneling immediately
+
+const WOOD_INIT_STORAGE_KEY = 'wood-paneling';
+
+// Apply wood paneling immediately (before DOM ready if possible)
+(function() {
+    const woodPaneling = localStorage.getItem(WOOD_INIT_STORAGE_KEY) || 'none';
+    if (woodPaneling !== 'none') {
+        const applyPaneling = () => {
+            const container = document.getElementById('collections-container');
+            if (container) {
+                container.classList.add(`bg-${woodPaneling}`);
+            }
+        };
+
+        // Apply immediately if DOM is ready, otherwise wait
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', applyPaneling);
+        } else {
+            applyPaneling();
+        }
+    }
+})();