Initial release: JMAP Webmail Client

A modern, privacy-focused webmail client built with Next.js and the JMAP protocol.
Designed for Stalwart Mail Server.

Features:
- Full email operations (compose, reply, forward, threading)
- Real-time push notifications
- Dark/light theme support
- Mobile responsive design
- Keyboard shortcuts
- Drag-and-drop organization
- i18n (English/French)
- Security-first (external content blocked, HTML sanitization)

stores/theme-store.ts

@@ -0,0 +1,89 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeState {
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+  initializeTheme: () => void;
+}
+
+const getSystemTheme = (): 'light' | 'dark' => {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+
+const applyTheme = (theme: 'light' | 'dark') => {
+  if (typeof document === 'undefined') return;
+
+  const root = document.documentElement;
+  // Ensure both classes are handled properly
+  if (theme === 'dark') {
+    root.classList.remove('light');
+    root.classList.add('dark');
+  } else {
+    root.classList.remove('dark');
+    root.classList.add('light');
+  }
+
+  // Store in localStorage for immediate access
+  localStorage.setItem('theme-applied', theme);
+};
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set, get) => ({
+      theme: 'system',
+      resolvedTheme: 'light',
+
+      setTheme: (theme) => {
+        const resolvedTheme = theme === 'system' ? getSystemTheme() : theme;
+        applyTheme(resolvedTheme);
+        set({ theme, resolvedTheme });
+      },
+
+      toggleTheme: () => {
+        const { theme } = get();
+        const nextTheme: Theme =
+          theme === 'light' ? 'dark' :
+          theme === 'dark' ? 'system' : 'light';
+        get().setTheme(nextTheme);
+      },
+
+      initializeTheme: () => {
+        const { theme } = get();
+        const resolvedTheme = theme === 'system' ? getSystemTheme() : theme;
+        applyTheme(resolvedTheme);
+        set({ resolvedTheme });
+
+        // Listen for system theme changes
+        if (typeof window !== 'undefined') {
+          const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+          const handleChange = () => {
+            const { theme } = get();
+            if (theme === 'system') {
+              const newResolvedTheme = getSystemTheme();
+              applyTheme(newResolvedTheme);
+              set({ resolvedTheme: newResolvedTheme });
+            }
+          };
+
+          // Modern browsers
+          if (mediaQuery.addEventListener) {
+            mediaQuery.addEventListener('change', handleChange);
+          } else {
+            // Fallback for older browsers
+            mediaQuery.addListener(handleChange);
+          }
+        }
+      },
+    }),
+    {
+      name: 'theme-storage',
+      partialize: (state) => ({ theme: state.theme }),
+    }
+  )
+);