fix: command palette navigation and reduce window height

- Fix navigation listener by moving from NavigationHandler to App component
- Use Events.On from @wailsio/runtime for proper event handling
- Reduce command palette window height to 80% (480px -> 384px)
- Adjust CSS heights for results area and list to match new window size

Author: vuon9

frontend/src/App.jsx

@@ -1,49 +1,69 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
 import { Events } from '@wailsio/runtime';
+
 import { Sidebar } from './components/Sidebar';
 import { TitleBar } from './components/TitleBar';
 import { SettingsModal } from './components/SettingsModal';
 import ToolRouter from './ToolRouter';
 import './App.css';
 
-// NavigationHandler listens for navigate events from command palette
-function NavigationHandler() {
+function App() {
   const navigate = useNavigate();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [themeMode, setThemeMode] = useState(() => {
+    return localStorage.getItem('themeMode') || 'dark';
+  });
+
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+  const openSettings = () => setIsSettingsOpen(true);
+  const closeSettings = () => setIsSettingsOpen(false);
 
+  // Handle navigation events from command palette
   useEffect(() => {
-    console.log('[App] Setting up navigation event listener...');
+    console.log('[App] Setting up navigation listener for command palette...');
+
+    const handleNavigation = (data) => {
+      console.log('[App] Received navigate:to event:', data);
+
+      // In Wails V3, data might be the path string OR an event object with path in data
+      let path = '';
+      if (typeof data === 'string') {
+        path = data;
+      } else if (data && typeof data === 'object') {
+        if (data.data) {
+          path = typeof data.data === 'string' ? data.data : data.data[0];
+        } else if (data.path) {
+          path = data.path;
+        }
+      }
 
-    // Listen for navigation events from command palette (via Go backend)
-    const unsubscribe = Events.On('navigate:to', (path) => {
-      console.log('[App] Received navigate:to event:', path);
       if (path) {
+        console.log('[App] Navigating to path:', path);
         navigate(path);
+      } else {
+        console.warn('[App] Received empty/invalid path via navigate:to:', data);
       }
-    });
+    };
+
+    let unsubscribe = null;
+    try {
+      unsubscribe = Events.On('navigate:to', (event) => {
+        handleNavigation(event);
+      });
+      console.log('[App] Navigation listener registered successfully');
+    } catch (err) {
+      console.error('[App] Failed to register navigation listener:', err);
+    }
 
     return () => {
-      console.log('[App] Cleaning up navigation event listener');
+      console.log('[App] Cleaning up navigation listener');
       if (unsubscribe) unsubscribe();
     };
   }, [navigate]);
 
-  return null;
-}
-
-function App() {
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-  const [themeMode, setThemeMode] = useState(() => {
-    return localStorage.getItem('themeMode') || 'dark';
-  });
-
-  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
-  const openSettings = () => setIsSettingsOpen(true);
-  const closeSettings = () => setIsSettingsOpen(false);
-
-  // Global spotlight shortcut is Cmd+Shift+Space (handled by Go backend)
-
+  // Handle theme changes
   useEffect(() => {
     localStorage.setItem('themeMode', themeMode);
     if (themeMode === 'dark') {
@@ -90,7 +110,6 @@ function App() {
             <Route path="/tool/:toolId/*" element={<ToolRouter />} />
             <Route path="*" element={<Navigate to="/tool/text-converter" replace />} />
           </Routes>
-          <NavigationHandler />
         </main>
       </div>
 

frontend/src/components/CommandPalette.css

@@ -59,7 +59,7 @@
 }
 
 .command-palette-results {
-  height: 332px; /* Reduced to ~80% of original (416 * 0.8) */
+  height: 264px; /* Results area: 80% of original (332 * 0.8) */
   overflow: hidden;
   background: #18181b;
 }
@@ -73,7 +73,7 @@
 
 .command-palette-list {
   overflow-y: auto;
-  max-height: 320px; /* Reduced to match results height */
+  max-height: 252px; /* 80% of original (320 * 0.8) */
 }
 
 .command-palette-item {

main.go

@@ -160,9 +160,9 @@ func main() {
 	spotlightWindow := app.Window.NewWithOptions(application.WebviewWindowOptions{
 		Title:            "Spotlight",
 		Width:            640,
-		Height:           480,
-		MinHeight:        480,
-		MaxHeight:        480,
+		Height:           384,
+		MinHeight:        384,
+		MaxHeight:        384,
 		Frameless:        true,
 		Hidden:           true,
 		BackgroundColour: application.RGBA{Red: 22, Green: 22, Blue: 22, Alpha: 255},