diff --git a/WOOD_PANELING_PLAN.md b/WOOD_PANELING_PLAN.md
index daddc7d..f7b6135 100644
--- a/WOOD_PANELING_PLAN.md
+++ b/WOOD_PANELING_PLAN.md
@@ -7,7 +7,7 @@ The current "wood themes" were implemented as color themes with CSS gradients, b
## Implementation Principles
### Critical Requirements
-- ✅ **All JavaScript must be TypeScript** - No inline scripts except for simple initialization
+- ✅ **All JavaScript must be TypeScript** - No inline scripts (use separate .ts files)
- ✅ **Use TailwindCSS only** - No custom CSS, use CSS variables already defined in `input.css`
- ✅ **Post-edit verification mandatory** - Run build after each file edit
- ✅ **Sequential git commits** - No `&&` chaining, explicit verification between commands
@@ -243,6 +243,47 @@ git commit -m "refactor(css): remove wood theme CSS variables
---
+### Phase 1b: Remove Wood Themes from Profile Form
+
+**Goal:** Remove wood theme options from profile settings form since wood paneling will be browser-only.
+
+#### File: `templates/profile_form.templ`
+
+**Remove lines 55-57 (wood theme options):**
+
+```templ
+
+
+
+
+
+
+```
+
+**Rationale:** Wood paneling is a browser preference (localStorage only), not a server-synced theme. Users will control wood paneling from the header dropdown's "Bookshelf Background" section, not profile settings.
+
+#### Verification Steps:
+```bash
+# Build Go templates
+go build ./...
+
+# Verify: Build succeeds with no template errors
+# Verify: Wood options removed from profile theme dropdown
+```
+
+#### Git Commit:
+```bash
+git add templates/profile_form.templ
+git commit -m "refactor(profile): remove wood themes from profile settings
+
+- Remove wood-light, wood-dark, wood-mahogany from theme dropdown
+- Wood paneling is now browser-only (localStorage preference)
+- Users select wood paneling from header dropdown, not profile
+- Profile form only controls server-synced color themes"
+```
+
+---
+
### Phase 2: Create Wood Paneling TypeScript Module
**Goal:** Create separate wood paneling preference system using localStorage and Tailwind classes.
@@ -338,6 +379,37 @@ if (typeof document !== 'undefined') {
**Note:** This uses Tailwind classes (`bg-wood-light`, etc.) instead of inline styles, and CSS variable classes (`bg-wood-active`, `bg-wood-inactive`) for indicators.
+#### New File: `web/src/woodPanelingInit.ts`
+
+```typescript
+// Early initialization script to prevent flash of wrong background
+// Loads before woodPaneling.js to apply paneling immediately
+
+const WOOD_STORAGE_KEY = 'wood-paneling';
+
+// Apply wood paneling immediately (before DOM ready if possible)
+(function() {
+ const woodPaneling = localStorage.getItem(WOOD_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();
+ }
+ }
+})();
+```
+
+**Note:** This standalone script prevents flash of unstyled content by applying wood paneling as early as possible. It has no dependencies and runs before the main woodPaneling.js module.
+
#### Verification Steps:
```bash
# Build TypeScript
@@ -349,10 +421,11 @@ npm run build
#### Git Commit:
```bash
-git add web/src/woodPaneling.ts
+git add web/src/woodPaneling.ts web/src/woodPanelingInit.ts
git commit -m "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
@@ -636,7 +709,7 @@ git commit -m "refactor(header): separate wood paneling from color themes
### Phase 7: Apply Full-Width Layout to Dashboard
-**Goal:** Apply full-width layout and add inline script for immediate wood paneling application.
+**Goal:** Apply full-width layout and include wood paneling initialization script.
#### File: `templates/dashboard.templ`
@@ -660,29 +733,16 @@ git commit -m "refactor(header): separate wood paneling from color themes
```
-**Change 3 - Before closing body tag: Add inline script:**
+**Change 3 - Before closing body tag: Add wood paneling initialization script:**
```templ
-
+
```
**This ensures:**
-- Wood paneling applied before external woodPaneling.js loads
+- Wood paneling applied immediately when script loads (before DOM ready)
- No flash of wrong background
-- Progressive enhancement: works even if external JS fails
+- All JavaScript is TypeScript (follows PROJECT_GUIDELINES.md)
#### Verification Steps:
```bash
@@ -690,7 +750,8 @@ git commit -m "refactor(header): separate wood paneling from color themes
go build ./...
# Verify: Build succeeds
-# Verify: Script properly placed before closing body tag
+# Verify: Script tag placed before closing body tag
+# Verify: woodPanelingInit.js exists in web/static/
```
#### Git Commit:
@@ -699,7 +760,7 @@ git add templates/dashboard.templ
git commit -m "refactor(dashboard): apply full-width layout and wood paneling
- Remove max-w-7xl constraints from library selector and collections
-- Add inline script to apply wood paneling immediately on load
+- Include woodPanelingInit.js script for early paneling application
- Prevent flash of wrong background on page load
- Wood paneling applied only to #collections-container
"
@@ -914,6 +975,7 @@ git commit -m "chore: final cleanup for wood paneling and full-width layout
## Files Summary
- `web/src/woodPaneling.ts` - Wood paneling management
+- `web/src/woodPanelingInit.ts` - Early wood paneling initialization (prevents flash)
- `web/src/themeDropdown.ts` - Active indicator management
- `web/static/textures/wood-light.png` - Light wood texture
- `web/static/textures/wood-dark.png` - Dark wood texture
@@ -921,9 +983,9 @@ git commit -m "chore: final cleanup for wood paneling and full-width layout
### Files Modified
- `templates/header.templ` - Remove wood themes, add wood paneling section, remove max-width
+- `templates/profile_form.templ` - Remove wood theme options from profile settings
- `tailwind.config.ts` - Remove theme-wood-* from safelist, add wood background images
-- `web/src/header.ts` - Remove wood theme logic from `changeThemeTo()`
-- `templates/dashboard.templ` - Remove max-width, add inline initialization script
+- `templates/dashboard.templ` - Remove max-width, add wood paneling script include
- `templates/*.templ` - Remove `max-w-7xl` from all page templates
---