Fixed window dragging for main menu

frontend/src/App.jsx

@@ -47,6 +47,35 @@ function App() {
     }
   }, []);
 
+  // Function to handle window focus/show events to re-apply cursor
+  useEffect(() => {
+    const setupFocusHandler = async () => {
+      const unlistenFocus = await appWindow.onFocusChanged(async ({ payload: focused }) => {
+        if (focused) {
+          console.log('Window gained focus, re-applying custom cursor');
+          try {
+            await invoke("reapply_custom_cursor");
+          } catch (error) {
+            console.error('Failed to re-apply cursor on focus:', error);
+          }
+        }
+      });
+
+      return unlistenFocus;
+    };
+
+    let unlistenFocusFn;
+    setupFocusHandler().then(unlisten => {
+      unlistenFocusFn = unlisten;
+    }).catch(err => console.error('Failed to set up focus handler:', err));
+
+    return () => {
+      if (unlistenFocusFn) {
+        unlistenFocusFn();
+      }
+    };
+  }, []);
+
   // Load cursors on mount and set up event listeners
   useEffect(() => {
     const loadCursors = async () => {
@@ -87,6 +116,14 @@ function App() {
           // Prevent the window from closing
           event.preventDefault();
 
+          // Temporarily restore cursor before hiding to tray
+          try {
+            console.log('Temporarily restoring cursor before hiding to tray');
+            await invoke("temporarily_restore_cursor");
+          } catch (error) {
+            console.error('Failed to restore cursor before hiding:', error);
+          }
+
           // Hide the window instead
           try {
             console.log('Calling minimizeToTray function');

frontend/src/components/Header.css

@@ -6,7 +6,8 @@
   position: relative;
   z-index: 10;
   background-color: transparent; /* Reverted to original */
-  /* cursor: move; */ /* Removed, should be handled by drag region or default */
+  -webkit-app-region: drag; /* Ensure the header is draggable */
+  /* cursor: move; */ /* Let the system handle cursor during drag operations */
 }
 
 .tabs-container {
@@ -64,6 +65,16 @@
   color: rgba(205, 214, 244, 0.8);
 }
 
+/* Dedicated drag area */
+.drag-area {
+  flex: 1; /* Take up remaining space */
+  height: 100%;
+  min-width: 50px; /* Ensure there's always some draggable space */
+  -webkit-app-region: drag; /* Explicitly set as draggable */
+  /* cursor: move; */ /* Let the system handle cursor during drag operations */
+  background-color: transparent;
+}
+
 /* Window control buttons */
 .window-controls {
   -webkit-app-region: no-drag; /* Override drag region for buttons */

frontend/src/components/Header.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import './Header.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { appWindow } from '@tauri-apps/api/window';
+import { invoke } from '@tauri-apps/api/tauri';
 import {
   faGripVertical,
   faBoxOpen,
@@ -36,8 +38,29 @@ function Header({ activePage, setActivePage, minimizeToTray, quitApp, settings }
     }
   };
 
+  // Handle window dragging programmatically as a fallback
+  const handleMouseDown = async (e) => {
+    // Only start dragging on left mouse button and if not clicking on interactive elements
+    if (e.button === 0 && !e.target.closest('.tab, .window-controls')) {
+      try {
+        // Temporarily restore system cursor for dragging
+        await invoke('temporarily_restore_cursor');
+        await appWindow.startDragging();
+      } catch (error) {
+        console.error('Failed to start window dragging:', error);
+      } finally {
+        // Re-apply custom cursor after dragging
+        try {
+          await invoke('reapply_custom_cursor');
+        } catch (error) {
+          console.error('Failed to re-apply custom cursor:', error);
+        }
+      }
+    }
+  };
+
   return (
-    <header className="app-header" data-tauri-drag-region>
+    <header className="app-header" data-tauri-drag-region onMouseDown={handleMouseDown}>
       <div className="tabs-container">
         {navItems.map((item) => (
           <div
@@ -49,6 +72,10 @@ function Header({ activePage, setActivePage, minimizeToTray, quitApp, settings }
             <FontAwesomeIcon icon={item.icon} />
           </div>
         ))}
+
+        {/* Dedicated drag area */}
+        <div className="drag-area" title="Drag to move window"></div>
+
         <div className="window-controls">
           <button className="minimize-button" onClick={minimizeToTray} title="Minimize to Tray">
             _

frontend/src/components/content_modules/Settings.css

@@ -29,7 +29,9 @@
 .setting-item {
   padding: 8px 0;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
 }
 
 .setting-item label {
@@ -73,3 +75,31 @@
   font-size: 14px;
   opacity: 0.8;
 }
+
+.restore-button {
+  background-color: var(--accent-color, #89b4fa);
+  color: var(--bg-color, #1e1e2e);
+  border: none;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.restore-button:hover {
+  background-color: var(--accent-hover, #74c7ec);
+  transform: translateY(-1px);
+}
+
+.restore-button:active {
+  transform: translateY(0);
+}
+
+.setting-description {
+  font-size: 12px;
+  opacity: 0.7;
+  margin: 0;
+  color: var(--text-color, #cdd6f4);
+}

frontend/src/components/content_modules/Settings.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { invoke } from "@tauri-apps/api/tauri";
 import './Settings.css';
 
 function Settings({ settings, setSettings }) {
@@ -10,6 +11,19 @@ function Settings({ settings, setSettings }) {
     });
   };
 
+  // Handler for restoring default cursors
+  const handleRestoreDefaultCursors = async () => {
+    try {
+      console.log('Manually restoring default cursors');
+      await invoke("restore_default_cursors");
+      console.log('Default cursors restored successfully');
+      alert('Default cursors restored successfully!');
+    } catch (error) {
+      console.error('Failed to restore default cursors:', error);
+      alert('Failed to restore default cursors: ' + error);
+    }
+  };
+
   return (
     <div className="settings-container">
       <h2 className="content-title">Settings</h2>
@@ -50,6 +64,17 @@ function Settings({ settings, setSettings }) {
               Auto-apply cursor on selection
             </label>
           </div>
+          <div className="setting-item">
+            <button
+              onClick={handleRestoreDefaultCursors}
+              className="restore-button"
+            >
+              Restore Default Cursors
+            </button>
+            <p className="setting-description">
+              Manually restore the system's default cursors if they're not working properly.
+            </p>
+          </div>
         </div>
 
         <div className="settings-group">

frontend/src/main.jsx

@@ -3,7 +3,5 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <App />
 );