From 35a802cbd55b46d70632292e1dc68efcb08c3f60 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 19 Nov 2025 14:57:38 +0000
Subject: [PATCH] fix: Keep sidebar background consistent across themes

Change sidebar background from var(--sidebar-bg) to fixed #d1d4d2
so it remains the same light gray color in both light and dark themes.

The sidebar should provide a consistent visual anchor regardless
of the main content theme.
---
 static/css/03-components/_sidebar.css    |   2 +-
 templates/partials/modals/pdf-modal.html |  15 ++-
 tests/mjs/20-pdf-download-debug.mjs      | 125 +++++++++++++++++++++++
 3 files changed, 136 insertions(+), 6 deletions(-)
 create mode 100755 tests/mjs/20-pdf-download-debug.mjs

diff --git a/static/css/03-components/_sidebar.css b/static/css/03-components/_sidebar.css
index 185faf5..42fda6b 100644
--- a/static/css/03-components/_sidebar.css
+++ b/static/css/03-components/_sidebar.css
@@ -4,7 +4,7 @@
 
 /* Sidebar - Left/Right columns */
 .cv-sidebar {
-  background: var(--sidebar-bg);
+  background: #d1d4d2; /* Fixed color - same for both themes */
   padding: 4rem 1.5rem;
   font-size: 0.9rem;
 }
diff --git a/templates/partials/modals/pdf-modal.html b/templates/partials/modals/pdf-modal.html
index 9a93508..9795a61 100644
--- a/templates/partials/modals/pdf-modal.html
+++ b/templates/partials/modals/pdf-modal.html
@@ -226,18 +226,21 @@
             <button class="pdf-download-btn"
                     disabled
                     _="on click
-                        if :selectedFormat is not null
-                          log 'Download requested for format:', :selectedFormat
+                        -- Find selected card
+                        set selectedCard to .pdf-option-card.selected in #pdf-modal
+                        if selectedCard exists
+                          set selectedFormat to selectedCard's @data-cv-format
+                          log 'Download requested for format:', selectedFormat
 
                           -- Get current page language
                           set lang to '{{.Lang}}'
 
                           -- Build URL based on selected format
-                          if :selectedFormat is 'short'
+                          if selectedFormat is 'short'
                             set url to '/export/pdf?lang=' + lang + '&length=short&icons=show&version=extended'
-                          else if :selectedFormat is 'long'
+                          else if selectedFormat is 'long'
                             set url to '/export/pdf?lang=' + lang + '&length=long&icons=show&version=extended'
-                          else if :selectedFormat is 'current'
+                          else if selectedFormat is 'current'
                             -- Get current settings from localStorage
                             set currentLength to localStorage.getItem('cv-length') or 'short'
                             set currentIcons to localStorage.getItem('cv-icons') or 'show'
@@ -253,6 +256,8 @@
                             set url to '/export/pdf?lang=' + lang + '&length=' + currentLength + '&icons=' + currentIcons + '&version=' + version
                           end
 
+                          log 'Navigating to:', url
+
                           -- Trigger download
                           set window.location.href to url
 
diff --git a/tests/mjs/20-pdf-download-debug.mjs b/tests/mjs/20-pdf-download-debug.mjs
new file mode 100755
index 0000000..70ad6e2
--- /dev/null
+++ b/tests/mjs/20-pdf-download-debug.mjs
@@ -0,0 +1,125 @@
+#!/usr/bin/env bun
+/**
+ * PDF DOWNLOAD DEBUG TEST
+ * =======================
+ * Debug why the download button isn't working
+ */
+
+import { chromium } from 'playwright';
+
+const URL = "http://localhost:1999";
+
+async function debugPDFDownload() {
+  console.log('🐛 PDF DOWNLOAD DEBUG TEST\n');
+  console.log('='.repeat(70));
+
+  const browser = await chromium.launch({ headless: false });
+  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+
+  // Capture console messages
+  page.on('console', msg => {
+    console.log(`[BROWSER ${msg.type()}]:`, msg.text());
+  });
+
+  // Capture errors
+  page.on('pageerror', error => {
+    console.log('❌ PAGE ERROR:', error.message);
+  });
+
+  console.log("\n1️⃣  Loading page...");
+  await page.goto(URL);
+  await page.waitForTimeout(2000);
+
+  console.log("\n2️⃣  Opening PDF modal...");
+  await page.click('.pdf-btn');
+  await page.waitForTimeout(1000);
+
+  console.log("\n3️⃣  Checking button state...");
+  const buttonState = await page.evaluate(() => {
+    const btn = document.querySelector('.pdf-download-btn');
+    return {
+      exists: !!btn,
+      disabled: btn?.disabled,
+      hasClickHandler: btn?.getAttribute('_')?.includes('on click')
+    };
+  });
+  console.log('   Button exists:', buttonState.exists);
+  console.log('   Button disabled:', buttonState.disabled);
+  console.log('   Has click handler:', buttonState.hasClickHandler);
+
+  console.log("\n4️⃣  Selecting Short CV...");
+  await page.click('[data-cv-format="short"]');
+  await page.waitForTimeout(500);
+
+  const afterSelection = await page.evaluate(() => {
+    const btn = document.querySelector('.pdf-download-btn');
+    return {
+      disabled: btn?.disabled,
+      selectedFormat: window._hyperscript?.runtime?.getLocalGlobal?.(':selectedFormat')
+    };
+  });
+  console.log('   Button disabled after selection:', afterSelection.disabled);
+  console.log('   Selected format:', afterSelection.selectedFormat);
+
+  console.log("\n5️⃣  Clicking download button...");
+
+  // Listen for navigation
+  let navigationURL = null;
+  page.on('framenavigated', (frame) => {
+    if (frame === page.mainFrame()) {
+      navigationURL = frame.url();
+      console.log('   📍 Navigation to:', navigationURL);
+    }
+  });
+
+  // Check what happens when we click
+  const clickResult = await page.evaluate(() => {
+    const btn = document.querySelector('.pdf-download-btn');
+    console.log('About to click button');
+    btn.click();
+    return 'Clicked';
+  });
+
+  console.log('   Click result:', clickResult);
+
+  // Wait to see if navigation happens
+  await page.waitForTimeout(3000);
+
+  if (navigationURL) {
+    console.log('   ✅ Navigation occurred to:', navigationURL);
+  } else {
+    console.log('   ❌ No navigation occurred');
+
+    // Check for hyperscript errors
+    const hyperscriptErrors = await page.evaluate(() => {
+      return window._hyperscript?.internals?.errors || [];
+    });
+
+    if (hyperscriptErrors.length > 0) {
+      console.log('   Hyperscript errors:', hyperscriptErrors);
+    }
+  }
+
+  console.log("\n6️⃣  Checking localStorage...");
+  const localStorage = await page.evaluate(() => {
+    return {
+      length: localStorage.getItem('cv-length'),
+      icons: localStorage.getItem('cv-icons'),
+      theme: localStorage.getItem('cv-theme')
+    };
+  });
+  console.log('   localStorage:', localStorage);
+
+  console.log('\n' + '='.repeat(70));
+  console.log('🔍 DEBUG COMPLETE');
+  console.log('\nBrowser will stay open for manual inspection.');
+  console.log('Press Ctrl+C when done.');
+
+  // Keep browser open
+  await new Promise(() => {});
+}
+
+debugPDFDownload().catch(err => {
+  console.error('❌ Test failed:', err);
+  process.exit(1);
+});