tauri integration

frontend/src/App.jsx

@@ -0,0 +1,123 @@
+import { useState, useEffect } from "react";
+import { invoke } from "@tauri-apps/api/tauri";
+import { appWindow } from "@tauri-apps/api/window";
+import "./App.css";
+
+// Import cursor images directly
+import defaultCursor from "./cursors/default.png";
+import iconCursor from "./cursors/icon.png";
+import redCursor from "./cursors/red.png";
+
+// Components
+import Header from "./components/Header";
+import Content from "./components/Content";
+import Footer from "./components/Footer";
+
+function App() {
+  const [activePage, setActivePage] = useState("cursors");
+  const [cursors, setCursors] = useState([]);
+  const [currentCursorIndex, setCurrentCursorIndex] = useState(0);
+
+  // Load cursors on mount
+  useEffect(() => {
+    const loadCursors = async () => {
+      try {
+        // Get cursors from the Tauri backend
+        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);
+      } catch (error) {
+        console.error("Failed to load cursors:", error);
+        // Use the imported cursor images directly
+        setCursors([
+          { name: "default", path: defaultCursor },
+          { name: "icon", path: iconCursor },
+          { name: "red", path: redCursor },
+          // We don't have blue and gold cursors imported since they don't exist yet
+          // These will be excluded for now
+        ]);
+        setCurrentCursorIndex(0);
+      }
+    };
+
+    loadCursors();
+  }, []);
+
+  // Functions to handle cursor operations using Tauri backend
+  const selectCursor = async (index) => {
+    try {
+      console.log(`Selecting cursor at index ${index}`);
+      await invoke("select_cursor", { index });
+      setCurrentCursorIndex(index);
+    } catch (error) {
+      console.error("Failed to select cursor:", error);
+    }
+  };
+
+  const nextCursor = async () => {
+    if (cursors.length === 0) return;
+    
+    try {
+      console.log('Switching to next cursor');
+      const newIndex = await invoke("next_cursor");
+      setCurrentCursorIndex(newIndex);
+    } catch (error) {
+      console.error("Failed to switch to next cursor:", error);
+      // Fallback if backend fails
+      const newIndex = (currentCursorIndex + 1) % cursors.length;
+      setCurrentCursorIndex(newIndex);
+    }
+  };
+
+  // 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 {
+      console.log('Quitting app');
+      await invoke("quit_app");
+    } catch (error) {
+      console.error("Failed to quit app:", error);
+    }
+  };
+
+  return (
+    <div className="modal-container">
+      <div className="modal">
+        <Header 
+          activePage={activePage} 
+          setActivePage={setActivePage}
+          minimizeToTray={minimizeToTray}
+          quitApp={quitApp}
+        />
+        
+        <Content 
+          activePage={activePage}
+          cursors={cursors}
+          currentCursorIndex={currentCursorIndex}
+          selectCursor={selectCursor}
+          nextCursor={nextCursor}
+        />
+        
+        <Footer 
+          version="0.1.0"
+          status={cursors.length > 0 ? `${cursors.length} cursors loaded` : "No cursors found"}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default App;