Integrate Tauri frontend with categorization system and Steam integration

frontend/src/App.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { invoke } from "@tauri-apps/api/tauri";
 import { appWindow } from "@tauri-apps/api/window";
 import "./App.css";
@@ -17,8 +17,37 @@ function App() {
   const [activePage, setActivePage] = useState("cursors");
   const [cursors, setCursors] = useState([]);
   const [currentCursorIndex, setCurrentCursorIndex] = useState(0);
+  const [settings, setSettings] = useState({
+    minimizeToTrayOnClose: true,
+    startWithWindows: false,
+    autoApplyCursorOnSelection: true
+  });
 
-  // Load cursors on mount
+  // Function to minimize app to tray
+  const minimizeToTray = useCallback(async () => {
+    try {
+      console.log('Minimizing app to tray');
+      // First hide the window to ensure it disappears immediately
+      await appWindow.hide();
+      console.log('Window hidden, now ensuring tray is visible');
+
+      // Then call the backend to ensure the tray is visible
+      await invoke("minimize_to_tray");
+      console.log('minimize_to_tray command completed successfully');
+    } catch (error) {
+      console.error("Failed to minimize to tray:", error);
+      // Fallback to window API if the invoke fails
+      try {
+        console.log('Trying fallback hide');
+        await appWindow.hide();
+        console.log('Fallback hide succeeded');
+      } catch (fallbackError) {
+        console.error("Fallback hide also failed:", fallbackError);
+      }
+    }
+  }, []);
+
+  // Load cursors on mount and set up event listeners
   useEffect(() => {
     const loadCursors = async () => {
       try {
@@ -26,7 +55,7 @@ function App() {
         const loadedCursors = await invoke("get_cursors");
         console.log("Loaded cursors:", loadedCursors);
         setCursors(loadedCursors || []);
-        
+
         // Get current cursor index
         const currentIndex = await invoke("get_current_cursor_index");
         setCurrentCursorIndex(currentIndex);
@@ -47,6 +76,53 @@ function App() {
     loadCursors();
   }, []);
 
+  // Set up window close event listener
+  useEffect(() => {
+    const setupCloseHandler = async () => {
+      const unlisten = await appWindow.onCloseRequested(async (event) => {
+        console.log('Window close requested');
+
+        if (settings.minimizeToTrayOnClose) {
+          console.log('Minimize to tray setting is enabled, preventing close and hiding instead');
+          // Prevent the window from closing
+          event.preventDefault();
+
+          // Hide the window instead
+          try {
+            console.log('Calling minimizeToTray function');
+            await minimizeToTray();
+            console.log('Window should now be hidden and app should be in system tray');
+          } catch (error) {
+            console.error('Failed to minimize to tray on close:', error);
+          }
+        } else {
+          console.log('Minimize to tray setting is disabled, allowing window to close');
+          // Let the window close normally, but we need to call quit_app to ensure proper cleanup
+          try {
+            await invoke("quit_app");
+          } catch (error) {
+            console.error("Failed to quit app:", error);
+          }
+        }
+      });
+
+      return unlisten;
+    };
+
+    let unlistenFn;
+    setupCloseHandler().then(unlisten => {
+      unlistenFn = unlisten;
+      console.log('Close handler set up successfully');
+    }).catch(err => console.error('Failed to set up close handler:', err));
+
+    // Clean up event listener on unmount
+    return () => {
+      if (unlistenFn) {
+        unlistenFn();
+      }
+    };
+  }, [settings.minimizeToTrayOnClose, minimizeToTray]);
+
   // Functions to handle cursor operations using Tauri backend
   const selectCursor = async (index) => {
     try {
@@ -60,7 +136,7 @@ function App() {
 
   const nextCursor = async () => {
     if (cursors.length === 0) return;
-    
+
     try {
       console.log('Switching to next cursor');
       const newIndex = await invoke("next_cursor");
@@ -73,16 +149,6 @@ function App() {
     }
   };
 
-  // Function to minimize app to tray
-  const minimizeToTray = async () => {
-    try {
-      console.log('Minimizing app to tray');
-      await appWindow.hide();
-    } catch (error) {
-      console.error("Failed to minimize to tray:", error);
-    }
-  };
-
   // Function to exit app
   const quitApp = async () => {
     try {
@@ -96,22 +162,25 @@ function App() {
   return (
     <div className="modal-container">
       <div className="modal">
-        <Header 
-          activePage={activePage} 
+        <Header
+          activePage={activePage}
           setActivePage={setActivePage}
           minimizeToTray={minimizeToTray}
           quitApp={quitApp}
+          settings={settings}
         />
-        
-        <Content 
+
+        <Content
           activePage={activePage}
           cursors={cursors}
           currentCursorIndex={currentCursorIndex}
           selectCursor={selectCursor}
           nextCursor={nextCursor}
+          settings={settings}
+          setSettings={setSettings}
         />
-        
-        <Footer 
+
+        <Footer
           version="0.1.0"
           status={cursors.length > 0 ? `${cursors.length} cursors loaded` : "No cursors found"}
         />