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)

components/settings/account-settings.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { useAuthStore } from '@/stores/auth-store';
+import { useEmailStore } from '@/stores/email-store';
+import { SettingsSection, SettingItem } from './settings-section';
+import { formatFileSize } from '@/lib/utils';
+
+export function AccountSettings() {
+  const t = useTranslations('settings.account');
+  const { username, serverUrl } = useAuthStore();
+  const { quota } = useEmailStore();
+
+  const quotaPercentage = quota ? Math.round((quota.used / quota.total) * 100) : 0;
+
+  return (
+    <SettingsSection title={t('title')} description={t('description')}>
+      {/* Email Address */}
+      <SettingItem label={t('email.label')}>
+        <span className="text-sm text-foreground">{username || t('../../common.unknown')}</span>
+      </SettingItem>
+
+      {/* Server */}
+      <SettingItem label={t('server.label')}>
+        <span className="text-sm text-foreground truncate max-w-xs">
+          {serverUrl || t('../../common.unknown')}
+        </span>
+      </SettingItem>
+
+      {/* Storage */}
+      {quota && quota.total > 0 && (
+        <SettingItem
+          label={t('storage.label')}
+          description={t('storage.used', {
+            used: formatFileSize(quota.used),
+            total: formatFileSize(quota.total),
+          })}
+        >
+          <div className="flex flex-col items-end gap-1">
+            <span className="text-sm text-foreground">
+              {t('storage.percentage', { percent: quotaPercentage })}
+            </span>
+            <div className="w-32 h-2 bg-muted rounded-full overflow-hidden">
+              <div
+                className="h-full bg-primary rounded-full transition-all"
+                style={{ width: `${quotaPercentage}%` }}
+              />
+            </div>
+          </div>
+        </SettingItem>
+      )}
+    </SettingsSection>
+  );
+}

components/settings/advanced-settings.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useState, useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import { useSettingsStore } from '@/stores/settings-store';
+import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
+import { Button } from '@/components/ui/button';
+
+export function AdvancedSettings() {
+  const t = useTranslations('settings.advanced');
+  const tCommon = useTranslations('common');
+  const { debugMode, updateSetting, resetToDefaults, exportSettings, importSettings } =
+    useSettingsStore();
+  const [showResetConfirm, setShowResetConfirm] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleExport = () => {
+    const settingsJson = exportSettings();
+    const blob = new Blob([settingsJson], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `webmail-settings-${new Date().toISOString().split('T')[0]}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleImport = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const json = event.target?.result as string;
+      const success = importSettings(json);
+      if (success) {
+        alert(t('../../settings.import_success'));
+      } else {
+        alert(t('../../settings.import_error'));
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  const handleReset = () => {
+    if (showResetConfirm) {
+      resetToDefaults();
+      setShowResetConfirm(false);
+      alert(t('../../settings.save_success'));
+    } else {
+      setShowResetConfirm(true);
+      setTimeout(() => setShowResetConfirm(false), 5000);
+    }
+  };
+
+  return (
+    <SettingsSection title={t('title')} description={t('description')}>
+      {/* Debug Mode */}
+      <SettingItem label={t('debug_mode.label')} description={t('debug_mode.description')}>
+        <ToggleSwitch checked={debugMode} onChange={(checked) => updateSetting('debugMode', checked)} />
+      </SettingItem>
+
+      {/* Export Settings */}
+      <SettingItem label={t('export_settings.label')} description={t('export_settings.description')}>
+        <Button variant="outline" size="sm" onClick={handleExport}>
+          {t('export_settings.button')}
+        </Button>
+      </SettingItem>
+
+      {/* Import Settings */}
+      <SettingItem label={t('import_settings.label')} description={t('import_settings.description')}>
+        <>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="application/json,.json"
+            onChange={handleFileChange}
+            className="hidden"
+          />
+          <Button variant="outline" size="sm" onClick={handleImport}>
+            {t('import_settings.button')}
+          </Button>
+        </>
+      </SettingItem>
+
+      {/* Reset Settings */}
+      <SettingItem label={t('reset_settings.label')} description={t('reset_settings.description')}>
+        <Button
+          variant={showResetConfirm ? 'destructive' : 'outline'}
+          size="sm"
+          onClick={handleReset}
+        >
+          {showResetConfirm ? tCommon('yes') : t('reset_settings.button')}
+        </Button>
+      </SettingItem>
+    </SettingsSection>
+  );
+}

components/settings/appearance-settings.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { useThemeStore } from '@/stores/theme-store';
+import { useSettingsStore } from '@/stores/settings-store';
+import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
+
+export function AppearanceSettings() {
+  const t = useTranslations('settings.appearance');
+  const { theme, setTheme } = useThemeStore();
+  const { fontSize, listDensity, animationsEnabled, updateSetting } = useSettingsStore();
+
+  return (
+    <SettingsSection title={t('title')} description={t('description')}>
+      {/* Theme */}
+      <SettingItem label={t('theme.label')} description={t('theme.description')}>
+        <RadioGroup
+          value={theme}
+          onChange={(value) => setTheme(value as 'light' | 'dark' | 'system')}
+          options={[
+            { value: 'light', label: t('theme.light') },
+            { value: 'dark', label: t('theme.dark') },
+            { value: 'system', label: t('theme.system') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* Font Size */}
+      <SettingItem label={t('font_size.label')} description={t('font_size.description')}>
+        <RadioGroup
+          value={fontSize}
+          onChange={(value) => updateSetting('fontSize', value as 'small' | 'medium' | 'large')}
+          options={[
+            { value: 'small', label: t('font_size.small') },
+            { value: 'medium', label: t('font_size.medium') },
+            { value: 'large', label: t('font_size.large') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* List Density */}
+      <SettingItem label={t('list_density.label')} description={t('list_density.description')}>
+        <RadioGroup
+          value={listDensity}
+          onChange={(value) =>
+            updateSetting('listDensity', value as 'compact' | 'regular' | 'comfortable')
+          }
+          options={[
+            { value: 'compact', label: t('list_density.compact') },
+            { value: 'regular', label: t('list_density.regular') },
+            { value: 'comfortable', label: t('list_density.comfortable') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* Animations */}
+      <SettingItem label={t('animations.label')} description={t('animations.description')}>
+        <ToggleSwitch
+          checked={animationsEnabled}
+          onChange={(checked) => updateSetting('animationsEnabled', checked)}
+        />
+      </SettingItem>
+    </SettingsSection>
+  );
+}

components/settings/email-settings.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { useSettingsStore } from '@/stores/settings-store';
+import { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
+
+export function EmailSettings() {
+  const t = useTranslations('settings.email_behavior');
+  const {
+    markAsReadDelay,
+    deleteAction,
+    showPreview,
+    emailsPerPage,
+    externalContentPolicy,
+    updateSetting,
+  } = useSettingsStore();
+
+  return (
+    <SettingsSection title={t('title')} description={t('description')}>
+      {/* Mark as Read */}
+      <SettingItem label={t('mark_read.label')} description={t('mark_read.description')}>
+        <Select
+          value={markAsReadDelay.toString()}
+          onChange={(value) => updateSetting('markAsReadDelay', parseInt(value))}
+          options={[
+            { value: '0', label: t('mark_read.instant') },
+            { value: '3000', label: t('mark_read.delay_3s') },
+            { value: '5000', label: t('mark_read.delay_5s') },
+            { value: '-1', label: t('mark_read.never') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* Delete Action */}
+      <SettingItem label={t('delete_action.label')} description={t('delete_action.description')}>
+        <Select
+          value={deleteAction}
+          onChange={(value) => updateSetting('deleteAction', value as 'trash' | 'permanent')}
+          options={[
+            { value: 'trash', label: t('delete_action.trash') },
+            { value: 'permanent', label: t('delete_action.permanent') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* Show Preview */}
+      <SettingItem label={t('show_preview.label')} description={t('show_preview.description')}>
+        <ToggleSwitch checked={showPreview} onChange={(checked) => updateSetting('showPreview', checked)} />
+      </SettingItem>
+
+      {/* Emails Per Page */}
+      <SettingItem label={t('emails_per_page.label')} description={t('emails_per_page.description')}>
+        <Select
+          value={emailsPerPage.toString()}
+          onChange={(value) => updateSetting('emailsPerPage', parseInt(value))}
+          options={[
+            { value: '25', label: t('emails_per_page.25') },
+            { value: '50', label: t('emails_per_page.50') },
+            { value: '100', label: t('emails_per_page.100') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* External Content */}
+      <SettingItem label={t('external_content.label')} description={t('external_content.description')}>
+        <Select
+          value={externalContentPolicy}
+          onChange={(value) =>
+            updateSetting('externalContentPolicy', value as 'ask' | 'block' | 'allow')
+          }
+          options={[
+            { value: 'ask', label: t('external_content.ask') },
+            { value: 'block', label: t('external_content.block') },
+            { value: 'allow', label: t('external_content.allow') },
+          ]}
+        />
+      </SettingItem>
+    </SettingsSection>
+  );
+}

components/settings/settings-section.tsx

@@ -0,0 +1,123 @@
+import { ReactNode } from 'react';
+
+interface SettingsSectionProps {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}
+
+export function SettingsSection({ title, description, children }: SettingsSectionProps) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-lg font-medium text-foreground">{title}</h3>
+        {description && (
+          <p className="text-sm text-muted-foreground mt-1">{description}</p>
+        )}
+      </div>
+      <div className="space-y-4">{children}</div>
+    </div>
+  );
+}
+
+interface SettingItemProps {
+  label: string;
+  description?: string;
+  children: ReactNode;
+}
+
+export function SettingItem({ label, description, children }: SettingItemProps) {
+  return (
+    <div className="flex items-start justify-between py-3 border-b border-border last:border-0">
+      <div className="flex-1 pr-4">
+        <label className="text-sm font-medium text-foreground">{label}</label>
+        {description && (
+          <p className="text-xs text-muted-foreground mt-1">{description}</p>
+        )}
+      </div>
+      <div className="flex-shrink-0">{children}</div>
+    </div>
+  );
+}
+
+interface ToggleSwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export function ToggleSwitch({ checked, onChange, disabled }: ToggleSwitchProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={`
+        relative inline-flex h-6 w-11 items-center rounded-full transition-colors
+        ${checked ? 'bg-primary' : 'bg-muted'}
+        ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+      `}
+    >
+      <span
+        className={`
+          inline-block h-4 w-4 transform rounded-full bg-background transition-transform
+          ${checked ? 'translate-x-6' : 'translate-x-1'}
+        `}
+      />
+    </button>
+  );
+}
+
+interface RadioGroupProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: { value: string; label: string }[];
+}
+
+export function RadioGroup({ value, onChange, options }: RadioGroupProps) {
+  return (
+    <div className="flex gap-2">
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() => onChange(option.value)}
+          className={`
+            px-3 py-1.5 text-xs rounded transition-colors
+            ${
+              value === option.value
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted hover:bg-accent text-foreground'
+            }
+          `}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+interface SelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: { value: string; label: string }[];
+}
+
+export function Select({ value, onChange, options }: SelectProps) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="px-3 py-1.5 text-sm rounded bg-muted border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+}