fix: resolve stale closure in fullscreen hotkey and use native API

package-lock.json

@@ -8,7 +8,7 @@
       "name": "tauri-app",
       "version": "0.1.0",
       "dependencies": {
-        "@tauri-apps/api": "^2",
+        "@tauri-apps/api": "^2.11.1",
         "@tauri-apps/plugin-opener": "^2",
         "react": "^19.1.0",
         "react-dom": "^19.1.0"

package.json

@@ -10,17 +10,17 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@tauri-apps/api": "^2.11.1",
+    "@tauri-apps/plugin-opener": "^2",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "@tauri-apps/api": "^2",
-    "@tauri-apps/plugin-opener": "^2"
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
+    "@tauri-apps/cli": "^2",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.6.0",
     "typescript": "~5.8.3",
-    "vite": "^7.0.4",
-    "@tauri-apps/cli": "^2"
+    "vite": "^7.0.4"
   }
 }

src-tauri/capabilities/default.json

@@ -5,6 +5,7 @@
   "windows": ["main"],
   "permissions": [
     "core:default",
-    "opener:default"
+    "opener:default",
+    "core:window:allow-set-fullscreen"
   ]
 }

src/components/MangaViewer.tsx

@@ -3,6 +3,7 @@ import type { ViewerSettings } from '../types';
 import type { ChapterData } from '../types';
 import { MangaPage } from './MangaPage';
 import { ViewerToolbar } from './ViewerToolbar';
+import { getCurrentWindow } from '@tauri-apps/api/window';
 import { SettingsPanel } from './SettingsPanel';
 
 interface MangaViewerProps {
@@ -171,7 +172,7 @@ export function MangaViewer({
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, [goNext, goPrev, showSettings, settings.direction]);
+  }, [goNext, goPrev, showSettings, settings.direction, toggleFullscreen]);
 
   // Auto-hide toolbar
   const resetToolbarTimer = useCallback(() => {
@@ -189,15 +190,17 @@ export function MangaViewer({
     };
   }, []);
 
-  const toggleFullscreen = () => {
-    if (!document.fullscreenElement) {
-      containerRef.current?.requestFullscreen();
-      setIsFullscreen(true);
-    } else {
-      document.exitFullscreen();
-      setIsFullscreen(false);
+  const toggleFullscreen = useCallback(async () => {
+    try {
+      const win = getCurrentWindow();
+      const current = await win.isFullscreen();
+      const nextState = !current;
+      await win.setFullscreen(nextState);
+      setIsFullscreen(nextState);
+    } catch (e) {
+      console.error('Failed to toggle fullscreen', e);
     }
-  };
+  }, []);
 
   const bgMap = {
     black: '#000000',