From 91e907bef6c018569f5b4b739c959b2d5086774b Mon Sep 17 00:00:00 2001
From: BillionClaw <billionclaw@gmail.com>
Date: Tue, 17 Mar 2026 14:19:09 +0800
Subject: [PATCH] fix(ui): resolve dark mode toggle and file search errors

- Fix dark mode toggle not responding by deriving theme state from
  localStorage instead of UI pill state. Added syncThemePill() to ensure
  UI and document theme stay synchronized.

- Fix file search error when folder_id is empty by validating the
  currentPath before setting it in search options. Empty folder_id
  now correctly triggers global search instead of causing a backend
  error with invalid UUID.

Fixes #102
---
 static/js/app/searchView.js | 10 +++++--
 static/js/app/userMenu.js   | 56 ++++++++++++++++++++++++++++---------
 2 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/static/js/app/searchView.js b/static/js/app/searchView.js
index 7879cab7..41560cc0 100755
--- a/static/js/app/searchView.js
+++ b/static/js/app/searchView.js
@@ -27,12 +27,16 @@ async function performSearch(query, sortBy) {
         };
 
         if (!app.isTrashView) {
-            options.folder_id = app.currentPath;
-
-            if (!options.folder_id || options.folder_id === '') {
+            // Ensure we have a valid folder_id before searching
+            if (!app.currentPath || app.currentPath === '') {
                 await window.resolveHomeFolder();
+            }
+
+            // Only set folder_id if we have a valid value
+            if (app.currentPath && app.currentPath !== '') {
                 options.folder_id = app.currentPath;
             }
+            // If still no valid folder_id, search will be global (without folder_id)
         }
 
         const searchResults = await window.search.searchFiles(query, options);
diff --git a/static/js/app/userMenu.js b/static/js/app/userMenu.js
index 86d0e6ab..4572847e 100755
--- a/static/js/app/userMenu.js
+++ b/static/js/app/userMenu.js
@@ -52,24 +52,54 @@ function setupUserMenu() {
 
     if (themeBtn) {
         const pill = document.getElementById('theme-toggle-pill');
-        const isDark = localStorage.getItem('oxicloud_theme') === 'dark';
-        if (isDark) {
-            if (pill) pill.classList.add('active');
-            document.documentElement.setAttribute('data-theme', 'dark');
+
+        // Sync pill UI with current theme state
+        function syncThemePill() {
+            const isDark = localStorage.getItem('oxicloud_theme') === 'dark';
+            if (pill) {
+                if (isDark) {
+                    pill.classList.add('active');
+                } else {
+                    pill.classList.remove('active');
+                }
+            }
+            // Ensure document theme matches localStorage
+            if (isDark) {
+                document.documentElement.setAttribute('data-theme', 'dark');
+            } else {
+                document.documentElement.removeAttribute('data-theme');
+            }
         }
 
+        // Initialize pill state on load
+        syncThemePill();
+
         themeBtn.addEventListener('click', (e) => {
             e.stopPropagation();
-            if (pill) {
-                pill.classList.toggle('active');
-                const dark = pill.classList.contains('active');
-                localStorage.setItem('oxicloud_theme', dark ? 'dark' : 'light');
-                document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
-                window.ui.showNotification(
-                    dark ? '🌙' : '☀️',
-                    dark ? 'Dark mode enabled' : 'Light mode enabled'
-                );
+            // Toggle theme based on current state, not pill state
+            const currentIsDark = localStorage.getItem('oxicloud_theme') === 'dark';
+            const newIsDark = !currentIsDark;
+
+            localStorage.setItem('oxicloud_theme', newIsDark ? 'dark' : 'light');
+
+            if (newIsDark) {
+                document.documentElement.setAttribute('data-theme', 'dark');
+            } else {
+                document.documentElement.removeAttribute('data-theme');
             }
+
+            if (pill) {
+                if (newIsDark) {
+                    pill.classList.add('active');
+                } else {
+                    pill.classList.remove('active');
+                }
+            }
+
+            window.ui.showNotification(
+                newIsDark ? '🌙' : '☀️',
+                newIsDark ? 'Dark mode enabled' : 'Light mode enabled'
+            );
         });
     }