From 0327d367f234ed69a952e8f105e0a02e5d3d1532 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Tue, 24 Feb 2026 13:01:45 -0500
Subject: [PATCH] refactor(header): separate wood paneling from color themes

- Remove max-w-7xl constraint, use full-width layout
- Replace wood theme buttons with wood paneling section
- Add visual previews for wood textures in dropdown
- Section labeled "Bookshelf Background" for clarity
- Include woodPaneling.js and themeDropdown.js scripts
---
 templates/header.templ | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/templates/header.templ b/templates/header.templ
index c07fd34..2af9167 100644
--- a/templates/header.templ
+++ b/templates/header.templ
@@ -2,7 +2,7 @@ package templates
 
 templ Header(user User, currentPath string) {
 	<nav class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="w-full px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between items-center h-16">
                 <!-- Left: App Title & Navigation -->
                 <div class="flex items-center space-x-6">
@@ -83,17 +83,35 @@ templ Header(user User, currentPath string) {
                                         Material Dark
                                     </button>
                                     <div class="border-t pt-2 mt-2" style="border-color: var(--border);">
-                                        <p class="text-xs mb-2" style="color: var(--text-secondary)">Background Options</p>
-                                        <button onclick="changeThemeTo('wood-light')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
-                                            <span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #deb887 0%, #d2a679 100%);"></span>
+                                        <p class="text-xs mb-2" style="color: var(--text-secondary)">Bookshelf Background</p>
+                                        <button onclick="changeWoodPaneling('none')"
+                                                class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+                                                style="color: var(--text-primary);"
+                                                data-wood="none">
+                                            None
+                                        </button>
+                                        <button onclick="changeWoodPaneling('wood-light')"
+                                                class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+                                                style="color: var(--text-primary);"
+                                                data-wood="wood-light">
+                                            <span class="inline-block w-4 h-4 rounded mr-2"
+                                                  style="background: url('/static/textures/wood-light.png'); background-size: cover;"></span>
                                             Wood Light
                                         </button>
-                                        <button onclick="changeThemeTo('wood-dark')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
-                                            <span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #8b7355 0%, #6b5344 100%);"></span>
+                                        <button onclick="changeWoodPaneling('wood-dark')"
+                                                class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+                                                style="color: var(--text-primary);"
+                                                data-wood="wood-dark">
+                                            <span class="inline-block w-4 h-4 rounded mr-2"
+                                                  style="background: url('/static/textures/wood-dark.png'); background-size: cover;"></span>
                                             Wood Dark
                                         </button>
-                                        <button onclick="changeThemeTo('wood-mahogany')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
-                                            <span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);"></span>
+                                        <button onclick="changeWoodPaneling('wood-mahogany')"
+                                                class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+                                                style="color: var(--text-primary);"
+                                                data-wood="wood-mahogany">
+                                            <span class="inline-block w-4 h-4 rounded mr-2"
+                                                  style="background: url('/static/textures/wood-mahogany.png'); background-size: cover;"></span>
                                             Wood Mahogany
                                         </button>
                                     </div>
@@ -164,5 +182,7 @@ templ Header(user User, currentPath string) {
         </div>
     </nav>
     <script src="/static/theme.js"></script>
+    <script src="/static/woodPaneling.js"></script>
+    <script src="/static/themeDropdown.js"></script>
     <script src="/static/header.js"></script>
 }