Staging

Dockerfile

@@ -0,0 +1,34 @@
+FROM oven/bun:canary
+
+WORKDIR /app
+
+# Install turbo globally
+RUN bun install -g next turbo
+
+
+COPY package.json bun.lock turbo.json ./
+
+RUN mkdir -p apps packages
+
+COPY apps/*/package.json ./apps/
+COPY packages/*/package.json ./packages/
+COPY packages/tsconfig/ ./packages/tsconfig/
+
+RUN bun install
+
+COPY . .
+
+# Installing with full context. Prevent missing dependencies error. 
+RUN bun install
+
+
+RUN bun run build 
+
+ENV NODE_ENV=production
+
+# Resolve Nextjs TextEncoder error.
+ENV NODE_OPTIONS=--no-experimental-fetch
+
+EXPOSE 3000
+
+CMD ["bun", "run", "start", "--host", "0.0.0.0"]

apps/mail/app/(routes)/layout.tsx

@@ -1,24 +1,27 @@
 'use client';
 
 import { CommandPaletteProvider } from '@/components/context/command-palette-context';
+import { HotkeyProviderWrapper } from '@/components/providers/hotkey-provider-wrapper';
 import { dexieStorageProvider } from '@/lib/idb';
 import { SWRConfig } from 'swr';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <CommandPaletteProvider>
-      <div className="flex h-screen w-screen overflow-hidden">
-        <SWRConfig
-          value={{
-            provider: typeof window !== 'undefined' ? dexieStorageProvider : undefined,
-            revalidateOnFocus: false,
-            revalidateIfStale: false,
-            shouldRetryOnError: false,
-          }}
-        >
-          {children}
-        </SWRConfig>
-      </div>
-    </CommandPaletteProvider>
+    <HotkeyProviderWrapper>
+      <CommandPaletteProvider>
+        <div className="flex h-screen w-screen overflow-hidden">
+          <SWRConfig
+            value={{
+              provider: typeof window !== 'undefined' ? dexieStorageProvider : undefined,
+              revalidateOnFocus: false,
+              revalidateIfStale: false,
+              shouldRetryOnError: false,
+            }}
+          >
+            {children}
+          </SWRConfig>
+        </div>
+      </CommandPaletteProvider>
+    </HotkeyProviderWrapper>
   );
 }

apps/mail/app/(routes)/mail/layout.tsx

@@ -1,12 +1,13 @@
-import { KeyboardShortcuts } from '@/components/mail/keyboard-shortcuts';
 import { AppSidebar } from '@/components/ui/app-sidebar';
+import { GlobalHotkeys } from '@/lib/hotkeys/global-hotkeys';
+import { HotkeyProviderWrapper } from '@/components/providers/hotkey-provider-wrapper';
 
 export default function MailLayout({ children }: { children: React.ReactNode }) {
   return (
-    <>
+    <HotkeyProviderWrapper>
       <AppSidebar />
-      <KeyboardShortcuts />
+      <GlobalHotkeys />
       <div className="w-full bg-white md:py-3 md:pr-2 dark:bg-black">{children}</div>
-    </>
+    </HotkeyProviderWrapper>
   );
 }

apps/mail/app/(routes)/settings/shortcuts/hotkey-recorder.tsx

@@ -0,0 +1,94 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import type { MessageKey } from '@/config/navigation';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+interface HotkeyRecorderProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onHotkeyRecorded: (keys: string[]) => void;
+  currentKeys: string[];
+}
+
+export function HotkeyRecorder({
+  isOpen,
+  onClose,
+  onHotkeyRecorded,
+  currentKeys,
+}: HotkeyRecorderProps) {
+  const t = useTranslations();
+  const [recordedKeys, setRecordedKeys] = useState<string[]>([]);
+  const [isRecording, setIsRecording] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      e.preventDefault();
+      if (!isRecording) return;
+
+      const key = e.key === ' ' ? 'Space' : e.key;
+
+      const formattedKey = key.length === 1 ? key.toUpperCase() : key;
+
+      if (!recordedKeys.includes(formattedKey)) {
+        setRecordedKeys((prev) => [...prev, formattedKey]);
+      }
+    };
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      e.preventDefault();
+      if (isRecording) {
+        setIsRecording(false);
+        if (recordedKeys.length > 0) {
+          onHotkeyRecorded(recordedKeys);
+          onClose();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [isOpen, isRecording, recordedKeys, onHotkeyRecorded, onClose]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setRecordedKeys([]);
+      setIsRecording(true);
+    }
+  }, [isOpen]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {t('pages.settings.shortcuts.actions.recordHotkey' as MessageKey)}
+          </DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col items-center gap-4 py-4">
+          <div className="text-muted-foreground text-center text-sm">
+            {isRecording
+              ? t('pages.settings.shortcuts.actions.pressKeys' as MessageKey)
+              : t('pages.settings.shortcuts.actions.releaseKeys' as MessageKey)}
+          </div>
+          <div className="flex gap-2">
+            {(recordedKeys.length > 0 ? recordedKeys : currentKeys).map((key) => (
+              <kbd
+                key={key}
+                className="border-muted-foreground/10 bg-accent h-6 rounded-[6px] border px-1.5 font-mono text-xs leading-6"
+              >
+                {key}
+              </kbd>
+            ))}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/mail/app/(routes)/settings/shortcuts/page.tsx

@@ -1,31 +1,68 @@
 'use client';
 
 import { SettingsCard } from '@/components/settings/settings-card';
-import { keyboardShortcuts } from '@/config/shortcuts'; //import the shortcuts
+import { keyboardShortcuts, type Shortcut } from '@/config/shortcuts';
 import type { MessageKey } from '@/config/navigation';
+import { HotkeyRecorder } from './hotkey-recorder';
+import { useState, type ReactNode, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { useTranslations } from 'next-intl';
-import type { ReactNode } from 'react';
+import { formatDisplayKeys } from '@/lib/hotkeys/use-hotkey-utils';
+import { hotkeysDB } from '@/lib/hotkeys/hotkeys-db';
+import { toast } from 'sonner';
 
 export default function ShortcutsPage() {
-  const shortcuts = keyboardShortcuts; //now gets shortcuts from the config file
+  const [shortcuts, setShortcuts] = useState<Shortcut[]>(keyboardShortcuts);
   const t = useTranslations();
 
+  useEffect(() => {
+    // Load any custom shortcuts from IndexedDB
+    hotkeysDB.getAllHotkeys()
+      .then(savedShortcuts => {
+        if (savedShortcuts.length > 0) {
+          const updatedShortcuts = keyboardShortcuts.map(defaultShortcut => {
+            const savedShortcut = savedShortcuts.find(s => s.action === defaultShortcut.action);
+            return savedShortcut || defaultShortcut;
+          });
+          setShortcuts(updatedShortcuts);
+        }
+      })
+      .catch(console.error);
+  }, []);
+
   return (
     <div className="grid gap-6">
       <SettingsCard
         title={t('pages.settings.shortcuts.title')}
         description={t('pages.settings.shortcuts.description')}
         footer={
           <div className="flex gap-4">
-            <Button variant="outline">{t('common.actions.resetToDefaults')}</Button>
-            <Button>{t('common.actions.saveChanges')}</Button>
+            <Button 
+              variant="outline" 
+              onClick={async () => {
+                try {
+                  // Save all default shortcuts to IndexedDB
+                  await Promise.all(keyboardShortcuts.map(shortcut => hotkeysDB.saveHotkey(shortcut)));
+                  setShortcuts(keyboardShortcuts);
+                  toast.success('Shortcuts reset to defaults');
+                } catch (error) {
+                  console.error('Failed to reset shortcuts:', error);
+                  toast.error('Failed to reset shortcuts');
+                }
+              }}
+            >
+              {t('common.actions.resetToDefaults')}
+            </Button>
           </div>
         }
       >
         <div className="grid gap-2 md:grid-cols-2">
           {shortcuts.map((shortcut, index) => (
-            <Shortcut key={index} keys={shortcut.keys}>
+            <Shortcut 
+              key={index} 
+              keys={shortcut.keys} 
+              action={shortcut.action}
+            >
               {t(`pages.settings.shortcuts.actions.${shortcut.action}` as MessageKey)}
             </Shortcut>
           ))}
@@ -35,20 +72,57 @@ export default function ShortcutsPage() {
   );
 }
 
-function Shortcut({ children, keys }: { children: ReactNode; keys: string[] }) {
+function Shortcut({ children, keys, action }: { children: ReactNode; keys: string[]; action: string }) {
+  const [isRecording, setIsRecording] = useState(false);
+  const displayKeys = formatDisplayKeys(keys);
+
+  const handleHotkeyRecorded = async (newKeys: string[]) => {
+    try {
+      // Find the original shortcut to preserve its type and description
+      const originalShortcut = keyboardShortcuts.find(s => s.action === action);
+      if (!originalShortcut) {
+        throw new Error('Original shortcut not found');
+      }
+
+      const updatedShortcut: Shortcut = {
+        ...originalShortcut,
+        keys: newKeys,
+      };
+
+      await hotkeysDB.saveHotkey(updatedShortcut);
+      toast.success('Shortcut saved successfully');
+    } catch (error) {
+      console.error('Failed to save shortcut:', error);
+      toast.error('Failed to save shortcut');
+    }
+  };
+
   return (
-    <div className="bg-popover text-muted-foreground flex items-center justify-between gap-2 rounded-lg border p-2 text-sm">
-      <span className="font-medium">{children}</span>
-      <div className="flex select-none gap-1">
-        {keys.map((key) => (
-          <kbd
-            key={key}
-            className="border-muted-foreground/10 bg-accent h-6 rounded-[6px] border px-1.5 font-mono text-xs leading-6"
-          >
-            {key}
-          </kbd>
-        ))}
+    <>
+      <div
+        className="bg-popover text-muted-foreground hover:bg-accent/50 flex cursor-pointer items-center justify-between gap-2 rounded-lg border p-2 text-sm"
+        onClick={() => setIsRecording(true)}
+        role="button"
+        tabIndex={0}
+      >
+        <span className="font-medium">{children}</span>
+        <div className="flex select-none gap-1">
+          {displayKeys.map((key) => (
+            <kbd
+              key={key}
+              className="border-muted-foreground/10 bg-accent h-6 rounded-[6px] border px-1.5 font-mono text-xs leading-6"
+            >
+              {key}
+            </kbd>
+          ))}
+        </div>
       </div>
-    </div>
+      <HotkeyRecorder
+        isOpen={isRecording}
+        onClose={() => setIsRecording(false)}
+        onHotkeyRecorded={handleHotkeyRecorded}
+        currentKeys={keys}
+      />
+    </>
   );
 }