fix(frontend): add Tauri environment detection and safe API wrappers

frontend/src/components/FolderPicker/AITaggingFolderPicker.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { open } from '@tauri-apps/plugin-dialog';
+import { safeTauriDialogOpen, isTauriEnvironment } from '@/utils/tauriUtils';
 import { FolderPlus } from 'lucide-react';
 interface FolderPickerProps {
   setFolderPath: (path: string[]) => void;
@@ -14,8 +14,13 @@ const AITaggingFolderPicker: React.FC<FolderPickerProps> = ({
   handleDeleteCache,
 }) => {
   const pickFolder = async () => {
+    if (!isTauriEnvironment()) {
+      alert('Folder selection is only available in desktop mode. Please run the app using "npm run tauri dev" instead of "npm run dev".');
+      return;
+    }
+
     try {
-      const selected = await open({
+      const selected = await safeTauriDialogOpen({
         directory: true,
         multiple: true,
         title: 'Select folders',

frontend/src/components/FolderPicker/FolderPicker.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { open } from '@tauri-apps/plugin-dialog';
+import { safeTauriDialogOpen, isTauriEnvironment } from '@/utils/tauriUtils';
 import { FolderPlus } from 'lucide-react';
 
 interface FolderPickerProps {
@@ -13,8 +13,13 @@ const FolderPicker: React.FC<FolderPickerProps> = ({
   className,
 }) => {
   const pickFolder = async () => {
+    if (!isTauriEnvironment()) {
+      alert('Folder selection is only available in desktop mode. Please run the app using "npm run tauri dev" instead of "npm run dev".');
+      return;
+    }
+
     try {
-      const selected = await open({
+      const selected = await safeTauriDialogOpen({
         directory: true,
         multiple: true, // Allow multiple folder selection
         title: 'Select folders',

frontend/src/hooks/useUpdater.ts

@@ -1,5 +1,6 @@
 import { useState, useCallback } from 'react';
-import { check, Update } from '@tauri-apps/plugin-updater';
+import { Update } from '@tauri-apps/plugin-updater';
+import { safeTauriUpdaterCheck, isTauriEnvironment } from '@/utils/tauriUtils';
 
 interface DownloadProgress {
   downloaded: number;
@@ -32,9 +33,15 @@ export const useUpdater = (): UseUpdaterReturn => {
   const checkForUpdates = useCallback(async (): Promise<boolean> => {
     setError(null);
 
+    // Skip update check in browser mode
+    if (!isTauriEnvironment()) {
+      console.log('Skipping update check in browser mode');
+      return false;
+    }
+
     try {
       console.log('Checking for updates...');
-      const update = await check();
+      const update = await safeTauriUpdaterCheck();
 
       if (update) {
         console.log(
@@ -61,6 +68,11 @@ export const useUpdater = (): UseUpdaterReturn => {
       return;
     }
 
+    if (!isTauriEnvironment()) {
+      console.warn('Update download is not available in browser mode');
+      return;
+    }
+
     setIsDownloading(true);
     setDownloadProgress({ downloaded: 0, total: 0 });
     setError(null);

frontend/src/main.tsx

@@ -3,16 +3,26 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import { isProd } from './utils/isProd';
 import { stopServer, startServer } from './utils/serverUtils';
-import { getCurrentWindow } from '@tauri-apps/api/window';
+import { isTauriEnvironment } from './utils/tauriUtils';
 import { imagesEndpoints } from '../api/apiEndpoints';
 import { store } from './app/store';
 import { Provider } from 'react-redux';
 
 //Listen for window close event and stop server.
 const onCloseListener = async () => {
-  await getCurrentWindow().onCloseRequested(async () => {
-    await stopServer();
-  });
+  if (!isTauriEnvironment()) {
+    console.log('Window close listener is only available in Tauri environment');
+    return;
+  }
+
+  try {
+    const { getCurrentWindow } = await import('@tauri-apps/api/window');
+    await getCurrentWindow().onCloseRequested(async () => {
+      await stopServer();
+    });
+  } catch (error) {
+    console.error('Error setting up close listener:', error);
+  }
 };
 
 const fetchFilePath = async () => {
@@ -60,7 +70,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   </React.StrictMode>,
 );
 
-if (isProd()) {
+if (isProd() && isTauriEnvironment()) {
   onCloseListener();
   console.log('Starting PictoPy Server');
   startServer();

frontend/src/utils/tauriUtils.ts

@@ -0,0 +1,106 @@
+/**
+ * Utility functions for Tauri environment detection and fallbacks
+ */
+
+// Check if we're running in a Tauri environment
+export const isTauriEnvironment = (): boolean => {
+  return typeof window !== 'undefined' && '__TAURI__' in window;
+};
+
+// Safe invoke wrapper that only calls Tauri APIs when available
+export const safeTauriInvoke = async (command: string, args?: any): Promise<any> => {
+  if (!isTauriEnvironment()) {
+    console.warn(`Tauri command "${command}" is not available in browser mode`);
+    return null;
+  }
+
+  try {
+    const { invoke } = await import('@tauri-apps/api/core');
+    return await invoke(command, args);
+  } catch (error) {
+    console.error(`Error invoking Tauri command "${command}":`, error);
+    throw error;
+  }
+};
+
+// Safe updater check that only works in Tauri environment
+export const safeTauriUpdaterCheck = async (): Promise<any> => {
+  if (!isTauriEnvironment()) {
+    console.warn('Updater is not available in browser mode');
+    return null;
+  }
+
+  try {
+    const { check } = await import('@tauri-apps/plugin-updater');
+    return await check();
+  } catch (error) {
+    console.error('Error checking for updates:', error);
+    return null;
+  }
+};
+
+// Safe dialog open that only works in Tauri environment
+export const safeTauriDialogOpen = async (options: any): Promise<string[] | string | null> => {
+  if (!isTauriEnvironment()) {
+    console.warn('File dialog is not available in browser mode');
+    // In browser mode, we could potentially use the HTML5 file input as a fallback
+    return null;
+  }
+
+  try {
+    const { open } = await import('@tauri-apps/plugin-dialog');
+    return await open(options);
+  } catch (error) {
+    console.error('Error opening dialog:', error);
+    return null;
+  }
+};
+
+// Safe convertFileSrc that returns a fallback URL in browser mode
+export const safeTauriConvertFileSrc = (src: string): string => {
+  if (!isTauriEnvironment()) {
+    // In browser mode, return the src as-is or provide a fallback
+    return src;
+  }
+
+  try {
+    // Dynamic import to avoid errors in browser mode
+    const { convertFileSrc } = require('@tauri-apps/api/core');
+    return convertFileSrc(src);
+  } catch (error) {
+    console.error('Error converting file src:', error);
+    return src;
+  }
+};
+
+// Safe dialog save that only works in Tauri environment
+export const safeTauriDialogSave = async (options: any): Promise<string | null> => {
+  if (!isTauriEnvironment()) {
+    console.warn('Save dialog is not available in browser mode');
+    return null;
+  }
+
+  try {
+    const { save } = await import('@tauri-apps/plugin-dialog');
+    return await save(options);
+  } catch (error) {
+    console.error('Error opening save dialog:', error);
+    return null;
+  }
+};
+
+// Safe file read that only works in Tauri environment
+export const safeTauriReadFile = async (path: string): Promise<Uint8Array | null> => {
+  if (!isTauriEnvironment()) {
+    console.warn('File reading is not available in browser mode');
+    return null;
+  }
+
+  try {
+    const { readFile } = await import('@tauri-apps/plugin-fs');
+    return await readFile(path);
+  } catch (error) {
+    console.error('Error reading file:', error);
+    return null;
+  }
+};