Fix: "navigator is not defined" on dev env startup (#1933)

Author: Nikit-Singh

apps/mail/components/mail/mail.tsx

@@ -16,7 +16,6 @@ import { Check, ChevronDown, RefreshCcw } from 'lucide-react';
 import { useMediaQuery } from '../../hooks/use-media-query';
 import useSearchLabels from '@/hooks/use-labels-search';
 import * as CustomIcons from '@/components/icons/icons';
-import { isMac } from '@/lib/hotkeys/use-hotkey-utils';
 import { MailList } from '@/components/mail/mail-list';
 import { useNavigate, useParams } from 'react-router';
 import { useMail } from '@/components/mail/use-mail';
@@ -31,6 +30,7 @@ import { useIsMobile } from '@/hooks/use-mobile';
 import { Button } from '@/components/ui/button';
 import { useSession } from '@/lib/auth-client';
 import { m } from '@/paraglide/messages';
+import { isMac } from '@/lib/platform';
 import { useQueryState } from 'nuqs';
 import { cn } from '@/lib/utils';
 import { useAtom } from 'jotai';

apps/mail/config/shortcuts.ts

@@ -1,6 +1,7 @@
-import { z } from 'zod';
 import { keyboardLayoutMapper } from '../utils/keyboard-layout-map';
 import { getKeyCodeFromKey } from '../utils/keyboard-utils';
+import { isMac } from '@/lib/platform';
+import { z } from 'zod';
 
 export const shortcutSchema = z.object({
   keys: z.array(z.string()),
@@ -28,19 +29,19 @@ export interface EnhancedShortcut extends Shortcut {
  */
 export function getDisplayKeysForShortcut(shortcut: Shortcut): string[] {
   const detectedLayout = keyboardLayoutMapper.getDetectedLayout();
-  
-  return shortcut.keys.map(key => {
+
+  return shortcut.keys.map((key) => {
     // Handle special modifiers first
     switch (key.toLowerCase()) {
       case 'mod':
-        return navigator.platform.includes('Mac') ? '⌘' : 'Ctrl';
+        return isMac ? '⌘' : 'Ctrl';
       case 'meta':
         return '⌘';
       case 'ctrl':
       case 'control':
         return 'Ctrl';
       case 'alt':
-        return navigator.platform.includes('Mac') ? '⌥' : 'Alt';
+        return isMac ? '⌥' : 'Alt';
       case 'shift':
         return '⇧';
       case 'escape':
@@ -67,12 +68,11 @@ export function getDisplayKeysForShortcut(shortcut: Shortcut): string[] {
  * Convert a key string to its corresponding KeyCode
  */
 
-
 /**
  * Enhance shortcuts with keyboard layout mapping
  */
 export function enhanceShortcutsWithMapping(shortcuts: Shortcut[]): EnhancedShortcut[] {
-  return shortcuts.map(shortcut => ({
+  return shortcuts.map((shortcut) => ({
     ...shortcut,
     displayKeys: getDisplayKeysForShortcut(shortcut),
     mappedKeys: keyboardLayoutMapper.mapKeys(shortcut.keys.map(getKeyCodeFromKey)),
@@ -433,4 +433,5 @@ export const keyboardShortcuts: Shortcut[] = [
 /**
  * Enhanced keyboard shortcuts with layout mapping
  */
-export const enhancedKeyboardShortcuts: EnhancedShortcut[] = enhanceShortcutsWithMapping(keyboardShortcuts);
+export const enhancedKeyboardShortcuts: EnhancedShortcut[] =
+  enhanceShortcutsWithMapping(keyboardShortcuts);

apps/mail/lib/hotkeys/use-hotkey-utils.ts

@@ -4,6 +4,7 @@ import { keyboardLayoutMapper, type KeyboardLayout } from '@/utils/keyboard-layo
 import { getKeyCodeFromKey } from '@/utils/keyboard-utils';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useCallback, useMemo } from 'react';
+import { isMac } from '@/lib/platform';
 
 export const useShortcutCache = () => {
   // const { data: shortcuts, mutate } = useSWR<Shortcut[]>(
@@ -49,11 +50,6 @@ export const useShortcutCache = () => {
   };
 };
 
-export const isMac =
-  typeof window !== 'undefined' &&
-  (/macintosh|mac os x/i.test(navigator.userAgent) ||
-    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1));
-
 const dvorakToQwerty: Record<string, string> = {
   a: 'a',
   b: 'x',

apps/mail/lib/platform.ts

@@ -0,0 +1,5 @@
+export const isMac =
+  typeof window !== 'undefined' &&
+  typeof navigator !== 'undefined' &&
+  (/macintosh|mac os x/i.test(navigator.userAgent) ||
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1));

pnpm-workspace.yaml

@@ -2,6 +2,7 @@ packages:
   - apps/*
   - packages/*
   - scripts/*
+
 catalog:
   zod: ^3.25.42
   better-auth: ^1.3.4
@@ -15,14 +16,20 @@ catalog:
   drizzle-orm: ^0.43.1
   drizzle-kit: ^0.31.1
   '@types/node': ^22.15.21
-  'react': ^19.1.0
-  'react-dom': ^19.1.0
+  react: ^19.1.0
+  react-dom: ^19.1.0
+
 onlyBuiltDependencies:
+  - '@sentry/cli'
+  - '@tailwindcss/oxide'
+  - better-sqlite3
   - core-js
   - core-js-pure
   - esbuild
+  - msw
   - sharp
   - unrs-resolver
   - workerd
+
 patchedDependencies:
   novel: patches/novel.patch