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 ---