refactor: update core utilities for Tauri environment

- Update comms.ts to use isTauriEnvironment checks
- Update auth utils for Tauri OAuth callback handling
- Update App context for Tauri environment
- Update index.tsx entry point

Author: afonsojramos

src/context/App.tsx

@@ -60,7 +60,11 @@ import {
   mapThemeModeToColorScheme,
 } from '../utils/theme';
 import { setTrayIconColorAndTitle } from '../utils/tray';
-import { zoomLevelToPercentage, zoomPercentageToLevel } from '../utils/zoom';
+import {
+  getCurrentZoomLevel,
+  zoomLevelToPercentage,
+  zoomPercentageToLevel,
+} from '../utils/zoom';
 import {
   defaultAuth,
   defaultFilterSettings,
@@ -305,11 +309,13 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   }, [settings.openAtStartup]);
 
   useEffect(() => {
-    window.gitify.onResetApp(() => {
-      clearState();
-      setAuth(defaultAuth);
-      setSettings(defaultSettings);
-    });
+    if (typeof window !== 'undefined' && window.gitify !== undefined) {
+      window.gitify.onResetApp(() => {
+        clearState();
+        setAuth(defaultAuth);
+        setSettings(defaultSettings);
+      });
+    }
   }, []);
 
   const clearFilters = useCallback(() => {
@@ -356,8 +362,19 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   // Global window zoom handler / listener
   // biome-ignore lint/correctness/useExhaustiveDependencies: We want to update on settings.zoomPercentage changes
   useEffect(() => {
-    // Set the zoom level when settings.zoomPercentage changes
-    window.gitify.zoom.setLevel(zoomPercentageToLevel(settings.zoomPercentage));
+    // Apply zoom level from settings - works in both Tauri and browser
+    const zoomLevel = zoomPercentageToLevel(settings.zoomPercentage);
+    if (typeof window !== 'undefined' && window.gitify !== undefined) {
+      window.gitify.zoom.setLevel(zoomLevel);
+    } else {
+      // Browser fallback using CSS zoom
+      localStorage.setItem('zoomLevel', zoomLevel.toString());
+      const zoomFactor = 1.2 ** zoomLevel;
+      const rootElement = document.getElementById('root');
+      if (rootElement) {
+        rootElement.style.zoom = zoomFactor.toString();
+      }
+    }
 
     // Sync zoom percentage in settings when window is resized
     let timeout: NodeJS.Timeout;
@@ -366,12 +383,9 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     const handleResize = () => {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
-        const zoomPercentage = zoomLevelToPercentage(
-          window.gitify.zoom.getLevel(),
-        );
-
-        if (zoomPercentage !== settings.zoomPercentage) {
-          updateSetting('zoomPercentage', zoomPercentage);
+        const currentZoom = zoomLevelToPercentage(getCurrentZoomLevel());
+        if (currentZoom !== settings.zoomPercentage) {
+          updateSetting('zoomPercentage', currentZoom);
         }
       }, DELAY);
     };

src/index.tsx

@@ -1,9 +1,23 @@
 import { createRoot } from 'react-dom/client';
 
+import './theme.css';
+
 import { App } from './App';
 
-const container = document.getElementById('root');
-if (container) {
-  const root = createRoot(container);
-  root.render(<App />);
-}
+// Initialize Tauri bridge (sets up window.gitify) then render app
+// In browser mode, the import fails gracefully and app renders without Tauri features
+const initApp = async () => {
+  try {
+    await import('./tauri-bridge');
+  } catch {
+    // Browser mode - Tauri bridge not available
+  }
+
+  const container = document.getElementById('root');
+  if (container) {
+    const root = createRoot(container);
+    root.render(<App />);
+  }
+};
+
+initApp();

src/utils/auth/utils.ts

@@ -61,13 +61,26 @@ export function authGitHub(
       }
     };
 
-    window.gitify.onAuthCallback((callbackUrl: string) => {
-      rendererLogInfo(
-        'renderer:auth-callback',
-        `received authentication callback URL ${callbackUrl}`,
+    // Check if auth callback is available (Tauri mode or test environment with mocks)
+    if (
+      typeof window !== 'undefined' &&
+      window.gitify?.onAuthCallback !== undefined
+    ) {
+      window.gitify.onAuthCallback((callbackUrl: string) => {
+        rendererLogInfo(
+          'renderer:auth-callback',
+          `received authentication callback URL ${callbackUrl}`,
+        );
+        handleCallback(callbackUrl);
+      });
+    } else {
+      // Browser fallback - OAuth won't work without Tauri
+      reject(
+        new Error(
+          'OAuth authentication is not available in browser mode. Please run the app with Tauri.',
+        ),
       );
-      handleCallback(callbackUrl);
-    });
+    }
   });
 }
 

src/utils/comms.ts

@@ -1,5 +1,6 @@
 import { defaultSettings } from '../context/defaults';
 import { type Link, OpenPreference } from '../types';
+import { isTauriEnvironment } from './environment';
 import { loadState } from './storage';
 
 export function openExternalLink(url: Link): void {
@@ -10,51 +11,83 @@ export function openExternalLink(url: Link): void {
     : defaultSettings.openLinks;
 
   if (url.toLowerCase().startsWith('https://')) {
-    window.gitify.openExternalLink(
-      url,
-      openPreference === OpenPreference.FOREGROUND,
-    );
+    if (isTauriEnvironment()) {
+      window.gitify.openExternalLink(
+        url,
+        openPreference === OpenPreference.FOREGROUND,
+      );
+    } else {
+      // Browser fallback - open in new tab
+      window.open(url, '_blank');
+    }
   }
 }
 
 export async function getAppVersion(): Promise<string> {
-  return await window.gitify.app.version();
+  if (isTauriEnvironment()) {
+    return await window.gitify.app.version();
+  }
+  return 'dev';
 }
 
 export async function encryptValue(value: string): Promise<string> {
-  return await window.gitify.encryptValue(value);
+  if (isTauriEnvironment()) {
+    return await window.gitify.encryptValue(value);
+  }
+  // Browser fallback - no encryption (dev mode only)
+  return value;
 }
 
 export async function decryptValue(value: string): Promise<string> {
-  return await window.gitify.decryptValue(value);
+  if (isTauriEnvironment()) {
+    return await window.gitify.decryptValue(value);
+  }
+  // Browser fallback - no decryption (dev mode only)
+  return value;
 }
 
 export function quitApp(): void {
-  window.gitify.app.quit();
+  if (isTauriEnvironment()) {
+    window.gitify.app.quit();
+  }
 }
 
 export function showWindow(): void {
-  window.gitify.app.show();
+  if (isTauriEnvironment()) {
+    window.gitify.app.show();
+  }
 }
 
 export function hideWindow(): void {
-  window.gitify.app.hide();
+  if (isTauriEnvironment()) {
+    window.gitify.app.hide();
+  }
 }
 
 export function setAutoLaunch(value: boolean): void {
-  window.gitify.setAutoLaunch(value);
+  if (isTauriEnvironment()) {
+    window.gitify.setAutoLaunch(value);
+  }
 }
 
 export function setUseAlternateIdleIcon(value: boolean): void {
-  window.gitify.tray.useAlternateIdleIcon(value);
+  if (isTauriEnvironment()) {
+    // biome-ignore lint/correctness/useHookAtTopLevel: This is a Tauri tray method, not a React hook
+    window.gitify.tray.useAlternateIdleIcon(value);
+  }
 }
 
 export function setUseUnreadActiveIcon(value: boolean): void {
-  window.gitify.tray.useUnreadActiveIcon(value);
+  if (isTauriEnvironment()) {
+    // biome-ignore lint/correctness/useHookAtTopLevel: This is a Tauri tray method, not a React hook
+    window.gitify.tray.useUnreadActiveIcon(value);
+  }
 }
 
 export function setKeyboardShortcut(keyboardShortcut: boolean): void {
-  window.gitify.setKeyboardShortcut(keyboardShortcut);
+  if (isTauriEnvironment()) {
+    window.gitify.setKeyboardShortcut(keyboardShortcut);
+  }
 }
 
 /**
@@ -65,7 +98,9 @@ export function setKeyboardShortcut(keyboardShortcut: boolean): void {
  * @param notificationsLength The number of unread notifications
  */
 export function updateTrayColor(notificationsLength: number): void {
-  window.gitify.tray.updateColor(notificationsLength);
+  if (isTauriEnvironment()) {
+    window.gitify.tray.updateColor(notificationsLength);
+  }
 }
 
 /**
@@ -74,5 +109,7 @@ export function updateTrayColor(notificationsLength: number): void {
  * @param title The title to set on the tray icon
  */
 export function updateTrayTitle(title: string): void {
-  window.gitify.tray.updateTitle(title);
+  if (isTauriEnvironment()) {
+    window.gitify.tray.updateTitle(title);
+  }
 }