docs(wood-paneling): fix JavaScript violations and add profile form updates

- Add Phase 1b to remove wood themes from profile_form.templ - Add woodPanelingInit.ts to Phase 2 for early initialization - Remove inline JavaScript from Phase 7, use TypeScript instead - Update Critical Requirements to prohibit inline scripts entirely - Update Files Summary with new files and modifications - All changes align with PROJECT_GUIDELINES.md requirements
2026-02-24 12:35:06 -05:00
parent f2577ef96d
commit ee3e2147c2
1 changed files with 86 additions and 24 deletions
@@ -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
+<!-- Before -->
+<option value="wood-light" selected?={user.Theme == "wood-light"}>Wood Light</option>
+<option value="wood-dark" selected?={user.Theme == "wood-dark"}>Wood Dark</option>
+<option value="wood-mahogany" selected?={user.Theme == "wood-mahogany"}>Wood Mahogany</option>
+
+<!-- After (remove these 3 lines) -->
+```
+
+**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
 <main id="collections-container" class="w-full px-4 py-8">
 ```

-**Change 3 - Before closing body tag: Add inline script:**
+**Change 3 - Before closing body tag: Add wood paneling initialization script:**

 ```templ
-<script>
-    // Apply wood paneling immediately (before external script loads)
-    (function() {
-        const woodPaneling = localStorage.getItem('wood-paneling') || 'none';
-        if (woodPaneling !== 'none') {
-            document.addEventListener('DOMContentLoaded', function() {
-                const container = document.getElementById('collections-container');
-                if (container) {
-                    container.classList.add('bg-' + woodPaneling);
-                }
-            });
-        }
-    })();
-</script>
+<script src="/static/woodPanelingInit.js"></script>
 ```

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

 ---