fix tauri module resolution in browser builds - dynamic imports for window controls

src/components/layout/AppHeader.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { NavLink, useLocation, useNavigate } from 'react-router-dom'
-import { getCurrentWindow } from '@tauri-apps/api/window'
+
 import { motion, AnimatePresence } from 'framer-motion'
 import {
   Search,
@@ -110,6 +110,8 @@ export default function AppHeader({ pinned, onTogglePin }: Props) {
     if (!isTauri) return
     let cancelled = false
     let unlisten: (() => void) | undefined
+    import('@tauri-apps/api/window').then(({ getCurrentWindow }) => {
+      if (cancelled) return
       const win = getCurrentWindow()
       win.isMaximized().then(v => {
         if (!cancelled) setMaximized(v)
@@ -121,6 +123,7 @@ export default function AppHeader({ pinned, onTogglePin }: Props) {
         if (cancelled) u()
         else unlisten = u
       }).catch(() => {})
+    })
     return () => {
       cancelled = true
       unlisten?.()
@@ -129,10 +132,12 @@ export default function AppHeader({ pinned, onTogglePin }: Props) {
 
   function callWin(action: 'minimize' | 'toggleMaximize' | 'close') {
     if (!isTauri) return
+    import('@tauri-apps/api/window').then(({ getCurrentWindow }) => {
       const win = getCurrentWindow()
       if (action === 'minimize') win.minimize()
       else if (action === 'toggleMaximize') win.toggleMaximize()
       else win.close()
+    })
   }
 
   const showBack = !TOP_LEVEL_PATHS.has(location.pathname)

src/components/layout/Titlebar.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react'
-import { getCurrentWindow } from '@tauri-apps/api/window'
 import { Minus, Square, RestoreDown, X } from '../../lib/icons'
 
 /**
@@ -13,22 +12,30 @@ import { Minus, Square, RestoreDown, X } from '../../lib/icons'
  */
 export default function Titlebar() {
   const [maximized, setMaximized] = useState(false)
-  const win = getCurrentWindow()
+  const [win, setWin] = useState<any>(null)
 
   useEffect(() => {
     let cancelled = false
-    win.isMaximized().then(v => {
+    let unlisten: (() => void) | undefined
+    import('@tauri-apps/api/window').then(({ getCurrentWindow }) => {
+      if (cancelled) return
+      const w = getCurrentWindow()
+      setWin(w)
+      w.isMaximized().then((v: boolean) => {
         if (!cancelled) setMaximized(v)
       })
-    const unlistenP = win.onResized(async () => {
-      const v = await win.isMaximized()
+      w.onResized(async () => {
+        const v = await w.isMaximized()
         if (!cancelled) setMaximized(v)
+      }).then((u: () => void) => {
+        unlisten = u
+      })
     })
     return () => {
       cancelled = true
-      unlistenP.then(u => u())
+      unlisten?.()
     }
-  }, [win])
+  }, [])
 
   return (
     <div
@@ -52,13 +59,13 @@ export default function Titlebar() {
       </div>
 
       <div className="flex items-stretch h-full">
-        <TitlebarButton onClick={() => win.minimize()} aria-label="Minimize">
+        <TitlebarButton onClick={() => win?.minimize()} aria-label="Minimize">
           <Minus size={14} stroke={2} />
         </TitlebarButton>
-        <TitlebarButton onClick={() => win.toggleMaximize()} aria-label={maximized ? 'Restore' : 'Maximize'}>
+        <TitlebarButton onClick={() => win?.toggleMaximize()} aria-label={maximized ? 'Restore' : 'Maximize'}>
           {maximized ? <RestoreDown size={12} stroke={2} /> : <Square size={12} stroke={2} />}
         </TitlebarButton>
-        <TitlebarButton onClick={() => win.close()} aria-label="Close" variant="close">
+        <TitlebarButton onClick={() => win?.close()} aria-label="Close" variant="close">
           <X size={14} stroke={2.25} />
         </TitlebarButton>
       </div>