feat: Add runtime config, trusted senders, JMAP identities, and UI improvements

- Runtime environment variables for Docker-friendly configuration
- Trusted senders list for automatic image loading
- JMAP identities for proper sender address
- Improved email composer readability
- Horizontal scroll for wide HTML emails

README.md

@@ -45,6 +45,7 @@ This webmail client is designed to work seamlessly with [**Stalwart Mail Server*
 
 ### Security & Privacy
 - External content blocked by default
+- Trusted senders list for automatic image loading
 - HTML sanitization with DOMPurify
 - SPF/DKIM/DMARC status indicators
 - No password storage (session-based auth)
@@ -92,12 +93,14 @@ Edit `.env.local` with your settings:
 
 ```env
 # App name displayed in the UI
-NEXT_PUBLIC_APP_NAME=My Webmail
+APP_NAME=My Webmail
 
-# Your JMAP server URL
+# Your JMAP server URL (required)
-NEXT_PUBLIC_JMAP_SERVER_URL=https://mail.example.com
+JMAP_SERVER_URL=https://mail.example.com
 ```
 
+**Note:** These are runtime environment variables, read at request time. This enables Docker deployments to be configured without rebuilding the image. Legacy `NEXT_PUBLIC_*` variables are still supported as fallbacks.
+
 ### Development
 
 ```bash

ROADMAP.md

@@ -16,6 +16,7 @@ This document tracks the development status and planned features for JMAP Webmai
 - [x] Username autocomplete with history
 - [x] Logout functionality
 - [x] Authentication error handling
+- [x] JMAP identities for sender address
 
 ### JMAP Server Connection
 - [x] Session establishment and keep-alive
@@ -76,6 +77,10 @@ This document tracks the development status and planned features for JMAP Webmai
 - [x] External content blocked by default
 - [x] HTML sanitization with DOMPurify
 - [x] User control for loading external content
+- [x] Trusted senders list for automatic image loading
+
+### Deployment
+- [x] Runtime environment variables (Docker-friendly configuration)
 
 ## Planned Features
 

app/[locale]/login/page.tsx

@@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useAuthStore } from "@/stores/auth-store";
+import { useConfig } from "@/hooks/use-config";
 import { Mail, AlertCircle, Loader2, X } from "lucide-react";
 
 export default function LoginPage() {
@@ -13,9 +14,7 @@ export default function LoginPage() {
   const params = useParams();
   const t = useTranslations("login");
   const { login, isLoading, error, clearError, isAuthenticated } = useAuthStore();
-
+  const { appName, jmapServerUrl: serverUrl, isLoading: configLoading, error: configError } = useConfig();
-  const serverUrl = process.env.NEXT_PUBLIC_JMAP_SERVER_URL;
-  const appName = process.env.NEXT_PUBLIC_APP_NAME || 'Webmail';
 
   // All hooks must be called unconditionally at the top
   const [formData, setFormData] = useState({
@@ -100,6 +99,35 @@ export default function LoginPage() {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [serverUrl]);
 
+  // Show loading state while config is being fetched
+  if (configLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+        <div className="w-full max-w-sm mx-auto px-4 text-center" role="status">
+          <Loader2 className="w-8 h-8 animate-spin text-primary mx-auto" />
+          <span className="sr-only">{t("loading")}</span>
+        </div>
+      </div>
+    );
+  }
+
+  // Show error if config fetch failed
+  if (configError) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+        <div className="w-full max-w-sm mx-auto px-4 text-center">
+          <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-red-500/10 mb-6">
+            <AlertCircle className="w-10 h-10 text-red-500" />
+          </div>
+          <h1 className="text-xl font-medium text-foreground mb-2">{t("config_error.title")}</h1>
+          <p className="text-muted-foreground text-sm">
+            {t("config_error.fetch_failed")}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   // Show error if JMAP server URL is not configured
   if (!serverUrl) {
     return (
@@ -108,9 +136,9 @@ export default function LoginPage() {
           <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-red-500/10 mb-6">
             <AlertCircle className="w-10 h-10 text-red-500" />
           </div>
-          <h1 className="text-xl font-medium text-foreground mb-2">Configuration Error</h1>
+          <h1 className="text-xl font-medium text-foreground mb-2">{t("config_error.title")}</h1>
           <p className="text-muted-foreground text-sm">
-            NEXT_PUBLIC_JMAP_SERVER_URL environment variable is not set.
+            {t("config_error.server_not_configured")}
           </p>
         </div>
       </div>
@@ -268,7 +296,7 @@ export default function LoginPage() {
                         type="button"
                         onClick={(e) => removeUsername(username, e)}
                         className="p-1 hover:bg-background rounded transition-colors"
-                        title="Remove from history"
+                        title={t("remove_from_history")}
                       >
                         <X className="w-3 h-3 text-muted-foreground" />
                       </button>

app/[locale]/page.tsx

@@ -353,11 +353,13 @@ export default function Home() {
     subject: string;
     body: string;
     draftId?: string;
+    fromEmail?: string;
+    identityId?: string;
   }) => {
     if (!client) return;
 
     try {
-      await sendEmail(client, data.to, data.subject, data.body, data.cc, data.bcc, data.draftId);
+      await sendEmail(client, data.to, data.subject, data.body, data.cc, data.bcc, data.draftId, data.fromEmail, data.identityId);
       setShowComposer(false);
     } catch (error) {
       console.error("Failed to send email:", error);
@@ -810,7 +812,7 @@ export default function Home() {
         {showComposer && (
           <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 md:p-0">
             <div className={cn(
-              "w-full h-full md:h-auto md:max-w-3xl md:max-h-[600px]",
+              "w-full h-full md:h-[600px] md:max-w-3xl",
               "max-md:flex max-md:flex-col"
             )}>
               <ErrorBoundary

app/api/config/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+
+/**
+ * Runtime configuration endpoint
+ *
+ * This endpoint serves configuration values that can be set at runtime
+ * via environment variables, enabling post-build configuration for
+ * Docker deployments.
+ *
+ * Priority order:
+ * 1. Runtime env vars (APP_NAME, JMAP_SERVER_URL)
+ * 2. Build-time env vars (NEXT_PUBLIC_APP_NAME, NEXT_PUBLIC_JMAP_SERVER_URL)
+ * 3. Default values
+ */
+export async function GET() {
+  return NextResponse.json({
+    appName: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || 'Webmail',
+    jmapServerUrl: process.env.JMAP_SERVER_URL || process.env.NEXT_PUBLIC_JMAP_SERVER_URL || '',
+  });
+}

components/email/email-composer.tsx

@@ -16,6 +16,8 @@ interface EmailComposerProps {
     subject: string;
     body: string;
     draftId?: string;
+    fromEmail?: string;
+    identityId?: string;
   }) => void;
   onClose?: () => void;
   onDiscardDraft?: (draftId: string) => void;
@@ -97,8 +99,9 @@ export function EmailComposer({
   const lastSavedDataRef = useRef<string>("");
   const [attachments, setAttachments] = useState<Array<{ file: File; blobId?: string; uploading?: boolean; error?: boolean }>>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [selectedIdentityId, setSelectedIdentityId] = useState<string | null>(null);
 
-  const { client } = useAuthStore();
+  const { client, identities, primaryIdentity } = useAuthStore();
 
   // Handle file selection
   const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -255,6 +258,11 @@ export function EmailComposer({
         }
       }
 
+      // Get the selected identity or primary identity
+      const currentIdentity = selectedIdentityId
+        ? identities.find(id => id.id === selectedIdentityId)
+        : primaryIdentity;
+
       onSend?.({
         to: toAddresses,
         cc: ccAddresses,
@@ -262,6 +270,8 @@ export function EmailComposer({
         subject,
         body,
         draftId: finalDraftId || undefined,
+        fromEmail: currentIdentity?.email,
+        identityId: currentIdentity?.id,
       });
 
       // Reset form
@@ -301,7 +311,7 @@ export function EmailComposer({
     <div className={cn("flex flex-col h-full bg-background border rounded-lg", className)}>
       <div className="flex items-center justify-between px-4 py-3 border-b">
         <div className="flex items-center gap-2">
-          <h3 className="font-semibold">New Message</h3>
+          <h3 className="font-semibold">{t('new_message')}</h3>
           {saveStatus === 'saving' && (
             <div className="flex items-center gap-1 text-xs text-muted-foreground">
               <Save className="w-3 h-3 animate-pulse" />
@@ -328,8 +338,32 @@ export function EmailComposer({
 
       <div className="flex-1 flex flex-col">
         <div className="space-y-2 px-4 py-3 border-b">
+          {/* From field - show dropdown if multiple identities, otherwise display email */}
           <div className="flex items-center gap-2">
-            <span className="text-sm text-muted-foreground w-16">To:</span>
+            <span className="text-sm text-muted-foreground w-16">{t('from')}:</span>
+            {identities.length > 1 ? (
+              <select
+                value={selectedIdentityId || primaryIdentity?.id || ''}
+                onChange={(e) => setSelectedIdentityId(e.target.value)}
+                className="flex-1 bg-transparent text-sm text-foreground outline-none cursor-pointer hover:text-muted-foreground transition-colors"
+              >
+                {identities.map((identity) => (
+                  <option key={identity.id} value={identity.id}>
+                    {identity.name ? `${identity.name} <${identity.email}>` : identity.email}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <span className="text-sm text-foreground">
+                {primaryIdentity?.name
+                  ? `${primaryIdentity.name} <${primaryIdentity.email}>`
+                  : primaryIdentity?.email || ''}
+              </span>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground w-16">{t('to')}:</span>
             <Input
               type="email"
               placeholder="Recipient email addresses (comma separated)"
@@ -395,9 +429,9 @@ export function EmailComposer({
           </div>
         </div>
 
-        <div className="flex-1 px-4 py-3">
+        <div className="flex-1 px-4 py-3 min-h-0">
           <textarea
-            className="w-full h-full resize-none outline-none text-sm"
+            className="w-full h-full resize-none outline-none text-sm bg-transparent text-foreground placeholder:text-muted-foreground"
             placeholder="Compose email..."
             value={body}
             onChange={(e) => setBody(e.target.value)}
@@ -413,7 +447,7 @@ export function EmailComposer({
                   key={index}
                   className={cn(
                     "flex items-center gap-2 px-3 py-1 rounded-md text-sm",
-                    att.error ? "bg-red-50 text-red-700" : "bg-gray-100 text-gray-700"
+                    att.error ? "bg-red-500/10 text-red-600 dark:text-red-400" : "bg-muted text-foreground"
                   )}
                 >
                   {att.uploading ? (
@@ -424,12 +458,12 @@ export function EmailComposer({
                     <Paperclip className="w-3 h-3" />
                   )}
                   <span className="max-w-[200px] truncate">{att.file.name}</span>
-                  <span className="text-xs text-gray-500">
+                  <span className="text-xs text-muted-foreground">
                     ({(att.file.size / 1024).toFixed(1)} KB)
                   </span>
                   <button
                     onClick={() => removeAttachment(index)}
-                    className="ml-1 hover:text-red-600"
+                    className="ml-1 hover:text-red-500"
                   >
                     <X className="w-3 h-3" />
                   </button>
@@ -440,7 +474,17 @@ export function EmailComposer({
         )}
 
         <div className="flex items-center justify-between px-4 py-3 border-t">
-          <div>
+          {/* Left side - Discard button */}
+          <button
+            type="button"
+            onClick={handleClose}
+            className="text-sm text-muted-foreground hover:text-red-500 transition-colors"
+          >
+            {t('discard')}
+          </button>
+
+          {/* Right side - Attach and Send */}
+          <div className="flex items-center gap-2">
             <input
               ref={fileInputRef}
               type="file"
@@ -455,13 +499,13 @@ export function EmailComposer({
               onClick={() => fileInputRef.current?.click()}
             >
               <Paperclip className="w-4 h-4 mr-2" />
-              Attach
+              {t('attach')}
+            </Button>
+            <Button onClick={handleSend}>
+              <Send className="w-4 h-4 mr-2" />
+              {t('send')}
             </Button>
           </div>
-          <Button onClick={handleSend}>
-            <Send className="w-4 h-4 mr-2" />
-            Send
-          </Button>
         </div>
       </div>
     </div>

components/email/email-viewer.tsx

@@ -134,6 +134,8 @@ export function EmailViewer({
   const t = useTranslations('email_viewer');
   const tNotifications = useTranslations('notifications');
   const externalContentPolicy = useSettingsStore((state) => state.externalContentPolicy);
+  const addTrustedSender = useSettingsStore((state) => state.addTrustedSender);
+  const isSenderTrusted = useSettingsStore((state) => state.isSenderTrusted);
   const [showFullHeaders, setShowFullHeaders] = useState(false);
   const [allowExternalContent, setAllowExternalContent] = useState(false);
   const [hasBlockedContent, setHasBlockedContent] = useState(false);
@@ -353,10 +355,16 @@ export function EmailViewer({
           FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur'],
         };
 
+        // Check if sender is trusted
+        const senderEmail = email.from?.[0]?.email?.toLowerCase();
+        const senderIsTrusted = senderEmail ? isSenderTrusted(senderEmail) : false;
+
         // Block external content based on policy:
-        // 'allow' = never block, 'block' = always block, 'ask' = block until user allows
+        // 'allow' = never block, 'block' = always block (unless trusted), 'ask' = block until user allows or trusted
-        const shouldBlockExternal = externalContentPolicy === 'block' ||
+        const shouldBlockExternal = !senderIsTrusted && (
-          (externalContentPolicy === 'ask' && !allowExternalContent);
+          externalContentPolicy === 'block' ||
+          (externalContentPolicy === 'ask' && !allowExternalContent)
+        );
 
         if (shouldBlockExternal) {
           sanitizeConfig.FORBID_TAGS.push('link');
@@ -451,7 +459,7 @@ export function EmailViewer({
       html: '<p style="color: #999;">No content available</p>',
       isHtml: false
     };
-  }, [email, allowExternalContent, hasBlockedContent, externalContentPolicy]);
+  }, [email, allowExternalContent, hasBlockedContent, externalContentPolicy, isSenderTrusted]);
 
   // Show loading skeleton while email is being fetched
   if (isLoading && !email) {
@@ -1094,17 +1102,38 @@ export function EmailViewer({
 
       {/* Email Content Area */}
       <div className="flex-1 overflow-auto bg-muted/30">
-        {/* Ultra Minimalist External Content Banner - only show in 'ask' mode */}
+        {/* External Content Banner - show in 'ask' or 'block' mode */}
-        {hasBlockedContent && !allowExternalContent && externalContentPolicy === 'ask' && (
+        {hasBlockedContent && !allowExternalContent && externalContentPolicy !== 'allow' && (
           <div className="border-b border-border">
-            <div className="max-w-4xl mx-auto px-6 py-2">
+            <div className="max-w-4xl mx-auto px-6 py-2 flex items-center justify-center gap-4">
-              <button
+              {/* Load images button - only in 'ask' mode */}
-                onClick={() => setAllowExternalContent(true)}
+              {externalContentPolicy === 'ask' && (
-                className="mx-auto flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                <button
-              >
+                  onClick={() => setAllowExternalContent(true)}
-                <Image className="w-3.5 h-3.5" />
+                  className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-                Show images
+                >
-              </button>
+                  <Image className="w-3.5 h-3.5" />
+                  {t('load_external_content')}
+                </button>
+              )}
+              {/* Trust sender button - in both 'ask' and 'block' modes */}
+              {email.from?.[0]?.email && (
+                <>
+                  {externalContentPolicy === 'ask' && <span className="text-muted-foreground/50">|</span>}
+                  <button
+                    onClick={() => {
+                      const senderEmail = email.from?.[0]?.email;
+                      if (senderEmail) {
+                        addTrustedSender(senderEmail);
+                        setAllowExternalContent(true);
+                      }
+                    }}
+                    className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    {t('trust_sender')}
+                  </button>
+                </>
+              )}
             </div>
           </div>
         )}

components/email/thread-conversation-view.tsx

@@ -75,6 +75,8 @@ export function ThreadConversationView({
 }: ThreadConversationViewProps) {
   const t = useTranslations();
   const externalContentPolicy = useSettingsStore((state) => state.externalContentPolicy);
+  const addTrustedSender = useSettingsStore((state) => state.addTrustedSender);
+  const isSenderTrusted = useSettingsStore((state) => state.isSenderTrusted);
 
   // Track which emails are expanded (most recent by default)
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
@@ -153,22 +155,30 @@ export function ThreadConversationView({
       {/* Email Cards */}
       <div className="flex-1 overflow-y-auto">
         <div className="p-4 space-y-3">
-          {emails.map((email, index) => (
+          {emails.map((email, index) => {
-            <EmailCard
+            const senderEmail = email.from?.[0]?.email?.toLowerCase();
-              key={email.id}
+            const senderIsTrusted = senderEmail ? isSenderTrusted(senderEmail) : false;
-              email={email}
+            return (
-              isExpanded={expandedIds.has(email.id)}
+              <EmailCard
-              isLatest={index === 0}
+                key={email.id}
-              allowExternal={externalContentPolicy === 'allow' || allowExternalContent.has(email.id)}
+                email={email}
-              onToggleExpanded={() => toggleExpanded(email.id)}
+                isExpanded={expandedIds.has(email.id)}
-              onAllowExternal={() => toggleAllowExternal(email.id)}
+                isLatest={index === 0}
-              onReply={onReply ? () => onReply(email) : undefined}
+                allowExternal={externalContentPolicy === 'allow' || senderIsTrusted || allowExternalContent.has(email.id)}
-              onReplyAll={onReplyAll ? () => onReplyAll(email) : undefined}
+                onToggleExpanded={() => toggleExpanded(email.id)}
-              onForward={onForward ? () => onForward(email) : undefined}
+                onAllowExternal={() => toggleAllowExternal(email.id)}
-              onDownloadAttachment={onDownloadAttachment}
+                onTrustSender={senderEmail ? () => {
-              onMarkAsRead={onMarkAsRead}
+                  addTrustedSender(senderEmail);
-            />
+                  toggleAllowExternal(email.id);
-          ))}
+                } : undefined}
+                onReply={onReply ? () => onReply(email) : undefined}
+                onReplyAll={onReplyAll ? () => onReplyAll(email) : undefined}
+                onForward={onForward ? () => onForward(email) : undefined}
+                onDownloadAttachment={onDownloadAttachment}
+                onMarkAsRead={onMarkAsRead}
+              />
+            );
+          })}
         </div>
       </div>
     </div>
@@ -183,6 +193,7 @@ interface EmailCardProps {
   allowExternal: boolean;
   onToggleExpanded: () => void;
   onAllowExternal: () => void;
+  onTrustSender?: () => void;
   onReply?: () => void;
   onReplyAll?: () => void;
   onForward?: () => void;
@@ -197,6 +208,7 @@ function EmailCard({
   allowExternal,
   onToggleExpanded,
   onAllowExternal,
+  onTrustSender,
   onReply,
   onReplyAll,
   onForward,
@@ -382,16 +394,30 @@ function EmailCard({
               <span className="text-muted-foreground">
                 {t("email_viewer.external_content_warning")}
               </span>
-              <Button
+              <div className="flex items-center gap-2">
-                variant="ghost"
+                <Button
-                size="sm"
+                  variant="ghost"
-                onClick={(e) => {
+                  size="sm"
-                  e.stopPropagation();
+                  onClick={(e) => {
-                  onAllowExternal();
+                    e.stopPropagation();
-                }}
+                    onAllowExternal();
-              >
+                  }}
-                {t("email_viewer.load_external_content")}
+                >
-              </Button>
+                  {t("email_viewer.load_external_content")}
+                </Button>
+                {onTrustSender && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onTrustSender();
+                    }}
+                  >
+                    {t("email_viewer.trust_sender")}
+                  </Button>
+                )}
+              </div>
             </div>
           )}
 

components/settings/email-settings.tsx

@@ -1,20 +1,34 @@
 "use client";
 
+import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useSettingsStore } from '@/stores/settings-store';
 import { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
+import { TrustedSendersModal } from '@/components/trusted-senders-modal';
+import { ChevronRight } from 'lucide-react';
 
 export function EmailSettings() {
   const t = useTranslations('settings.email_behavior');
+  const [showTrustedModal, setShowTrustedModal] = useState(false);
+
   const {
     markAsReadDelay,
     deleteAction,
     showPreview,
     emailsPerPage,
     externalContentPolicy,
+    trustedSenders,
     updateSetting,
   } = useSettingsStore();
 
+  // Get count label for trusted senders button
+  const getTrustedSendersCount = () => {
+    const count = trustedSenders.length;
+    if (count === 0) return t('trusted_senders.count_zero');
+    if (count === 1) return t('trusted_senders.count_one');
+    return t('trusted_senders.count_other', { count });
+  };
+
   return (
     <SettingsSection title={t('title')} description={t('description')}>
       {/* Mark as Read */}
@@ -75,6 +89,23 @@ export function EmailSettings() {
           ]}
         />
       </SettingItem>
+
+      {/* Trusted Senders */}
+      <SettingItem label={t('trusted_senders.label')} description={t('trusted_senders.description')}>
+        <button
+          onClick={() => setShowTrustedModal(true)}
+          className="flex items-center gap-2 px-3 py-1.5 bg-muted hover:bg-accent rounded-md transition-colors"
+        >
+          <span className="text-sm text-foreground">{getTrustedSendersCount()}</span>
+          <ChevronRight className="w-4 h-4 text-muted-foreground" />
+        </button>
+      </SettingItem>
+
+      {/* Trusted Senders Modal */}
+      <TrustedSendersModal
+        isOpen={showTrustedModal}
+        onClose={() => setShowTrustedModal(false)}
+      />
     </SettingsSection>
   );
 }

components/trusted-senders-modal.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import { useState, useEffect, useRef, useMemo } from "react";
+import { useTranslations } from "next-intl";
+import { X, ShieldCheck, Search, Trash2, Plus } from "lucide-react";
+import { Avatar } from "@/components/ui/avatar";
+import { useSettingsStore } from "@/stores/settings-store";
+import { cn } from "@/lib/utils";
+
+interface TrustedSendersModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function TrustedSendersModal({ isOpen, onClose }: TrustedSendersModalProps) {
+  const t = useTranslations("settings.email_behavior.trusted_senders");
+  const modalRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { trustedSenders, addTrustedSender, removeTrustedSender } = useSettingsStore();
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isAdding, setIsAdding] = useState(false);
+  const [newEmail, setNewEmail] = useState("");
+  const [emailError, setEmailError] = useState("");
+
+  // Filter senders based on search query
+  const filteredSenders = useMemo(() => {
+    if (!searchQuery.trim()) return trustedSenders;
+    const query = searchQuery.toLowerCase();
+    return trustedSenders.filter((email) => email.toLowerCase().includes(query));
+  }, [trustedSenders, searchQuery]);
+
+  // Show search only when 5+ senders
+  const showSearch = trustedSenders.length >= 5;
+
+  // Close on Escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        if (isAdding) {
+          setIsAdding(false);
+          setNewEmail("");
+          setEmailError("");
+        } else {
+          onClose();
+        }
+      }
+    };
+
+    if (isOpen) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [isOpen, isAdding, onClose]);
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen, onClose]);
+
+  // Focus input when adding mode is enabled
+  useEffect(() => {
+    if (isAdding && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isAdding]);
+
+  // Reset state when modal closes
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchQuery("");
+      setIsAdding(false);
+      setNewEmail("");
+      setEmailError("");
+    }
+  }, [isOpen]);
+
+  const validateEmail = (email: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleAddSender = () => {
+    const trimmedEmail = newEmail.trim().toLowerCase();
+
+    if (!trimmedEmail) {
+      setEmailError(t("invalid_email"));
+      return;
+    }
+
+    if (!validateEmail(trimmedEmail)) {
+      setEmailError(t("invalid_email"));
+      return;
+    }
+
+    if (trustedSenders.includes(trimmedEmail)) {
+      setEmailError(t("already_added"));
+      return;
+    }
+
+    addTrustedSender(trimmedEmail);
+    setNewEmail("");
+    setIsAdding(false);
+    setEmailError("");
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleAddSender();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-in fade-in duration-150">
+      <div
+        ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="trusted-senders-title"
+        className={cn(
+          "bg-background border border-border rounded-lg shadow-xl",
+          "w-full max-w-md max-h-[60vh] overflow-hidden flex flex-col",
+          "animate-in zoom-in-95 duration-200"
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
+          <div className="flex items-center gap-3">
+            <ShieldCheck className="w-5 h-5 text-primary" />
+            <h2 id="trusted-senders-title" className="text-lg font-semibold text-foreground">
+              {t("modal_title")}
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            aria-label={t("close")}
+            className="p-2 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Search (only when 5+ senders) */}
+        {showSearch && (
+          <div className="px-6 py-3 border-b border-border flex-shrink-0">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder={t("search_placeholder")}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-9 pr-3 py-2 text-sm bg-muted border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto">
+          {trustedSenders.length === 0 ? (
+            /* Empty State */
+            <div className="flex flex-col items-center justify-center py-12 px-6 text-center">
+              <ShieldCheck className="w-12 h-12 text-muted-foreground/50 mb-4" />
+              <h3 className="text-base font-medium text-foreground mb-2">
+                {t("empty_title")}
+              </h3>
+              <p className="text-sm text-muted-foreground max-w-[280px] mb-6">
+                {t("empty_description")}
+              </p>
+              <button
+                onClick={() => setIsAdding(true)}
+                className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors text-sm font-medium"
+              >
+                <Plus className="w-4 h-4" />
+                {t("add_manually")}
+              </button>
+            </div>
+          ) : filteredSenders.length === 0 ? (
+            /* No search results */
+            <div className="flex flex-col items-center justify-center py-12 px-6 text-center">
+              <Search className="w-10 h-10 text-muted-foreground/50 mb-3" />
+              <p className="text-sm text-muted-foreground">
+                {t("no_results")}
+              </p>
+            </div>
+          ) : (
+            /* Sender list */
+            <div className="divide-y divide-border">
+              {filteredSenders.map((email) => (
+                <div
+                  key={email}
+                  className="flex items-center gap-3 px-6 py-3 hover:bg-muted/50 transition-colors group"
+                >
+                  <Avatar email={email} size="sm" />
+                  <span className="flex-1 text-sm text-foreground truncate">
+                    {email}
+                  </span>
+                  <button
+                    onClick={() => removeTrustedSender(email)}
+                    className="p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100"
+                    aria-label={`${t("remove")} ${email}`}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer - Add sender */}
+        {trustedSenders.length > 0 && (
+          <div className="px-6 py-4 border-t border-border flex-shrink-0">
+            {isAdding ? (
+              <div className="space-y-2">
+                <div className="flex gap-2">
+                  <input
+                    ref={inputRef}
+                    type="email"
+                    placeholder={t("add_placeholder")}
+                    value={newEmail}
+                    onChange={(e) => {
+                      setNewEmail(e.target.value);
+                      setEmailError("");
+                    }}
+                    onKeyDown={handleKeyDown}
+                    className={cn(
+                      "flex-1 px-3 py-2 text-sm bg-background border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50",
+                      emailError ? "border-destructive" : "border-border"
+                    )}
+                  />
+                  <button
+                    onClick={handleAddSender}
+                    className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors text-sm font-medium"
+                  >
+                    {t("add_button")}
+                  </button>
+                </div>
+                {emailError && (
+                  <p className="text-xs text-destructive">{emailError}</p>
+                )}
+              </div>
+            ) : (
+              <button
+                onClick={() => setIsAdding(true)}
+                className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <Plus className="w-4 h-4" />
+                {t("add_manually")}
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

hooks/use-config.ts

@@ -0,0 +1,93 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+
+interface AppConfig {
+  appName: string;
+  jmapServerUrl: string;
+  isLoading: boolean;
+  error: string | null;
+}
+
+// Cache the config to avoid multiple fetches
+let configCache: { appName: string; jmapServerUrl: string } | null = null;
+let configPromise: Promise<{ appName: string; jmapServerUrl: string }> | null = null;
+
+async function fetchConfig(): Promise<{ appName: string; jmapServerUrl: string }> {
+  // Return cached config if available
+  if (configCache) {
+    return configCache;
+  }
+
+  // If a fetch is already in progress, wait for it
+  if (configPromise) {
+    return configPromise;
+  }
+
+  // Start a new fetch
+  configPromise = fetch('/api/config')
+    .then((res) => {
+      if (!res.ok) {
+        throw new Error('Failed to fetch config');
+      }
+      return res.json();
+    })
+    .then((data) => {
+      configCache = data;
+      return data;
+    })
+    .finally(() => {
+      configPromise = null;
+    });
+
+  return configPromise;
+}
+
+/**
+ * Hook to fetch runtime configuration
+ *
+ * Fetches app configuration from /api/config endpoint, which reads
+ * environment variables at runtime (not build time).
+ *
+ * The config is cached after first fetch to avoid unnecessary requests.
+ */
+export function useConfig(): AppConfig {
+  const [config, setConfig] = useState<AppConfig>({
+    appName: configCache?.appName || 'Webmail',
+    jmapServerUrl: configCache?.jmapServerUrl || '',
+    isLoading: !configCache,
+    error: null,
+  });
+
+  useEffect(() => {
+    // If already cached, no need to fetch
+    if (configCache) {
+      setConfig({
+        appName: configCache.appName,
+        jmapServerUrl: configCache.jmapServerUrl,
+        isLoading: false,
+        error: null,
+      });
+      return;
+    }
+
+    fetchConfig()
+      .then((data) => {
+        setConfig({
+          appName: data.appName,
+          jmapServerUrl: data.jmapServerUrl,
+          isLoading: false,
+          error: null,
+        });
+      })
+      .catch((err) => {
+        setConfig((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: err.message,
+        }));
+      });
+  }, []);
+
+  return config;
+}

lib/jmap/client.ts

@@ -1,4 +1,4 @@
-import type { Email, Mailbox, StateChange, AccountStates, Thread } from "./types";
+import type { Email, Mailbox, StateChange, AccountStates, Thread, Identity } from "./types";
 
 // JMAP protocol types - these are intentionally flexible due to server variations
 interface JMAPSession {
@@ -900,6 +900,26 @@ export class JMAPClient {
     }
   }
 
+  async getIdentities(): Promise<Identity[]> {
+    try {
+      const response = await this.request([
+        ["Identity/get", {
+          accountId: this.accountId,
+        }, "0"]
+      ]);
+
+      if (response.methodResponses?.[0]?.[0] === "Identity/get") {
+        const identities = (response.methodResponses[0][1].list || []) as Identity[];
+        return identities;
+      }
+
+      return [];
+    } catch (error) {
+      console.error('Failed to get identities:', error);
+      return [];
+    }
+  }
+
   async createDraft(
     to: string[],
     subject: string,
@@ -907,7 +927,8 @@ export class JMAPClient {
     cc?: string[],
     bcc?: string[],
     draftId?: string,
-    attachments?: Array<{ blobId: string; name: string; type: string; size: number }>
+    attachments?: Array<{ blobId: string; name: string; type: string; size: number }>,
+    fromEmail?: string
   ): Promise<string> {
     // Find the drafts mailbox
     const mailboxes = await this.getMailboxes();
@@ -933,7 +954,7 @@ export class JMAPClient {
       attachments?: { blobId: string; type: string; name: string; disposition: string }[];
     }
     const emailData: EmailDraft = {
-      from: [{ email: this.username }],
+      from: [{ email: fromEmail || this.username }],
       to: to.map(email => ({ email })),
       cc: cc?.map(email => ({ email })),
       bcc: bcc?.map(email => ({ email })),
@@ -1025,7 +1046,9 @@ export class JMAPClient {
     body: string,
     cc?: string[],
     bcc?: string[],
-    draftId?: string
+    draftId?: string,
+    fromEmail?: string,
+    selectedIdentityId?: string
   ): Promise<void> {
     const emailId = draftId || `draft-${Date.now()}`;
 
@@ -1037,22 +1060,26 @@ export class JMAPClient {
       throw new Error('No sent mailbox found');
     }
 
-    // Get the identity ID - fetch identities from server
+    // Use provided identity ID or fetch from server as fallback
-    const identityResponse = await this.request([
+    let identityId = selectedIdentityId;
-      ["Identity/get", {
-        accountId: this.accountId,
-      }, "0"]
-    ]);
 
-    let identityId = this.accountId; // fallback
+    if (!identityId) {
+      const identityResponse = await this.request([
+        ["Identity/get", {
+          accountId: this.accountId,
+        }, "0"]
+      ]);
 
-    if (identityResponse.methodResponses?.[0]?.[0] === "Identity/get") {
+      identityId = this.accountId; // fallback
-      const identities = (identityResponse.methodResponses[0][1].list || []) as { id: string; email: string }[];
 
-      if (identities.length > 0) {
+      if (identityResponse.methodResponses?.[0]?.[0] === "Identity/get") {
-        // Use the first identity (or find one matching the username)
+        const identities = (identityResponse.methodResponses[0][1].list || []) as { id: string; email: string }[];
-        const matchingIdentity = identities.find((id) => id.email === this.username);
+
-        identityId = matchingIdentity?.id || identities[0].id;
+        if (identities.length > 0) {
+          // Use the first identity (or find one matching the fromEmail/username)
+          const matchingIdentity = identities.find((id) => id.email === (fromEmail || this.username));
+          identityId = matchingIdentity?.id || identities[0].id;
+        }
       }
     }
 
@@ -1085,7 +1112,7 @@ export class JMAPClient {
         accountId: this.accountId,
         create: {
           [emailId]: {
-            from: [{ email: this.username }],
+            from: [{ email: fromEmail || this.username }],
             to: to.map(email => ({ email })),
             cc: cc?.map(email => ({ email })),
             bcc: bcc?.map(email => ({ email })),

locales/en/common.json

@@ -7,11 +7,18 @@
     "password_placeholder": "Enter your password",
     "sign_in": "Sign in",
     "signing_in": "Signing in...",
+    "loading": "Loading...",
     "error": {
       "invalid_credentials": "Invalid email or password",
       "connection_failed": "Failed to connect to the server",
       "generic": "An error occurred. Please try again."
-    }
+    },
+    "config_error": {
+      "title": "Configuration Error",
+      "fetch_failed": "Unable to load application configuration. Please try again later.",
+      "server_not_configured": "The mail server has not been configured. Please contact your administrator."
+    },
+    "remove_from_history": "Remove from history"
   },
   "sidebar": {
     "compose": "Compose",
@@ -82,6 +89,7 @@
     "hide_details": "Hide details",
     "external_content_warning": "Images and external content have been blocked",
     "load_external_content": "Load images",
+    "trust_sender": "Always trust this sender",
     "message_details": "Message Details",
     "authentication": {
       "title": "Authentication",
@@ -132,6 +140,7 @@
     "reply_to": "Reply",
     "reply_all_to": "Reply All",
     "forward_message": "Forward",
+    "from": "From",
     "to": "To",
     "cc": "CC",
     "bcc": "BCC",
@@ -139,7 +148,8 @@
     "body_placeholder": "Write your message...",
     "send": "Send",
     "cancel": "Cancel",
-    "attach": "Attach files",
+    "attach": "Attach",
+    "discard": "Discard",
     "discard_draft_confirm": "You have unsaved changes. Do you want to discard this draft?",
     "quote": {
       "reply_header": "On {{date}}, {{sender}} wrote:",
@@ -313,6 +323,25 @@
         "ask": "Always ask",
         "block": "Always block",
         "allow": "Always allow"
+      },
+      "trusted_senders": {
+        "label": "Trusted Senders",
+        "description": "Manage senders whose images load automatically",
+        "count_zero": "None",
+        "count_one": "1 sender",
+        "count_other": "{count} senders",
+        "modal_title": "Trusted Senders",
+        "empty_title": "No trusted senders yet",
+        "empty_description": "When viewing an email with blocked images, click \"Always trust this sender\" to add them here.",
+        "add_manually": "Add sender manually",
+        "add_button": "Add",
+        "add_placeholder": "Enter email address",
+        "search_placeholder": "Search senders...",
+        "no_results": "No senders match your search",
+        "remove": "Remove",
+        "close": "Close",
+        "invalid_email": "Please enter a valid email address",
+        "already_added": "This sender is already trusted"
       }
     },
     "composer": {

locales/fr/common.json

@@ -7,11 +7,18 @@
     "password_placeholder": "Entrez votre mot de passe",
     "sign_in": "Se connecter",
     "signing_in": "Connexion en cours...",
+    "loading": "Chargement...",
     "error": {
       "invalid_credentials": "Email ou mot de passe invalide",
       "connection_failed": "Échec de la connexion au serveur",
       "generic": "Une erreur s'est produite. Veuillez réessayer."
-    }
+    },
+    "config_error": {
+      "title": "Erreur de configuration",
+      "fetch_failed": "Impossible de charger la configuration de l'application. Veuillez réessayer plus tard.",
+      "server_not_configured": "Le serveur de messagerie n'a pas été configuré. Veuillez contacter votre administrateur."
+    },
+    "remove_from_history": "Supprimer de l'historique"
   },
   "sidebar": {
     "compose": "Composer",
@@ -82,6 +89,7 @@
     "hide_details": "Masquer les détails",
     "external_content_warning": "Les images et le contenu externe ont été bloqués",
     "load_external_content": "Charger les images",
+    "trust_sender": "Toujours faire confiance à cet expéditeur",
     "message_details": "Détails du message",
     "authentication": {
       "title": "Authentification",
@@ -132,6 +140,7 @@
     "reply_to": "Répondre",
     "reply_all_to": "Répondre à tous",
     "forward_message": "Transférer",
+    "from": "De",
     "to": "À",
     "cc": "CC",
     "bcc": "CCI",
@@ -139,7 +148,8 @@
     "body_placeholder": "Écrivez votre message...",
     "send": "Envoyer",
     "cancel": "Annuler",
-    "attach": "Joindre des fichiers",
+    "attach": "Joindre",
+    "discard": "Supprimer",
     "discard_draft_confirm": "Vous avez des modifications non enregistrées. Voulez-vous supprimer ce brouillon ?",
     "quote": {
       "reply_header": "Le {{date}}, {{sender}} a écrit :",
@@ -313,6 +323,25 @@
         "ask": "Toujours demander",
         "block": "Toujours bloquer",
         "allow": "Toujours autoriser"
+      },
+      "trusted_senders": {
+        "label": "Expéditeurs de confiance",
+        "description": "Gérer les expéditeurs dont les images se chargent automatiquement",
+        "count_zero": "Aucun",
+        "count_one": "1 expéditeur",
+        "count_other": "{count} expéditeurs",
+        "modal_title": "Expéditeurs de confiance",
+        "empty_title": "Aucun expéditeur de confiance",
+        "empty_description": "Lorsque vous consultez un email avec des images bloquées, cliquez sur « Toujours faire confiance à cet expéditeur » pour l'ajouter ici.",
+        "add_manually": "Ajouter manuellement",
+        "add_button": "Ajouter",
+        "add_placeholder": "Entrez une adresse email",
+        "search_placeholder": "Rechercher...",
+        "no_results": "Aucun expéditeur ne correspond à votre recherche",
+        "remove": "Supprimer",
+        "close": "Fermer",
+        "invalid_email": "Veuillez entrer une adresse email valide",
+        "already_added": "Cet expéditeur est déjà de confiance"
       }
     },
     "composer": {

package.json

@@ -37,28 +37,28 @@
     "dompurify": "^3.2.7",
     "jmap-jam": "^0.13.1",
     "lucide-react": "^0.562.0",
-    "next": "^16.1.1",
+    "next": "^16.0.8",
     "next-auth": "^4.24.11",
-    "next-intl": "^4.6.1",
+    "next-intl": "^4.5.8",
-    "react": "^19.2.3",
+    "react": "^19.2.1",
-    "react-dom": "^19.2.3",
+    "react-dom": "^19.2.1",
     "tailwind-merge": "^3.3.1",
     "zustand": "^5.0.9"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@typescript-eslint/eslint-plugin": "^8.50.1",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
-    "@typescript-eslint/parser": "^8.50.1",
+    "@typescript-eslint/parser": "^8.49.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.1",
-    "eslint-config-next": "^16.1.1",
+    "eslint-config-next": "^16.0.8",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.5.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5"
   }
 }

stores/auth-store.ts

@@ -2,6 +2,7 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { JMAPClient } from '@/lib/jmap/client';
 import { useEmailStore } from './email-store';
+import type { Identity } from '@/lib/jmap/types';
 
 interface AuthState {
   isAuthenticated: boolean;
@@ -10,6 +11,8 @@ interface AuthState {
   serverUrl: string | null;
   username: string | null;
   client: JMAPClient | null;
+  identities: Identity[];
+  primaryIdentity: Identity | null;
 
   login: (serverUrl: string, username: string, password: string) => Promise<boolean>;
   logout: () => void;
@@ -26,6 +29,8 @@ export const useAuthStore = create<AuthState>()(
       serverUrl: null,
       username: null,
       client: null,
+      identities: [],
+      primaryIdentity: null,
 
       login: async (serverUrl, username, password) => {
         set({ isLoading: true, error: null });
@@ -37,6 +42,10 @@ export const useAuthStore = create<AuthState>()(
           // Try to connect
           await client.connect();
 
+          // Fetch identities from the server
+          const identities = await client.getIdentities();
+          const primaryIdentity = identities.length > 0 ? identities[0] : null;
+
           // Success - save state (but NOT the password)
           set({
             isAuthenticated: true,
@@ -44,6 +53,8 @@ export const useAuthStore = create<AuthState>()(
             serverUrl,
             username,
             client,
+            identities,
+            primaryIdentity,
             error: null,
           });
 
@@ -87,6 +98,8 @@ export const useAuthStore = create<AuthState>()(
           serverUrl: null,
           username: null,
           client: null,
+          identities: [],
+          primaryIdentity: null,
           error: null,
         });
 

stores/email-store.ts

@@ -46,7 +46,7 @@ interface EmailStore {
   loadMoreEmails: (client: JMAPClient) => Promise<void>;
   fetchEmailContent: (client: JMAPClient, emailId: string) => Promise<Email | null>;
   fetchQuota: (client: JMAPClient) => Promise<void>;
-  sendEmail: (client: JMAPClient, to: string[], subject: string, body: string, cc?: string[], bcc?: string[], draftId?: string) => Promise<void>;
+  sendEmail: (client: JMAPClient, to: string[], subject: string, body: string, cc?: string[], bcc?: string[], draftId?: string, fromEmail?: string, identityId?: string) => Promise<void>;
   deleteEmail: (client: JMAPClient, emailId: string) => Promise<void>;
   markAsRead: (client: JMAPClient, emailId: string, read: boolean) => Promise<void>;
   moveToMailbox: (client: JMAPClient, emailId: string, mailboxId: string) => Promise<void>;
@@ -282,10 +282,10 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
     }
   },
 
-  sendEmail: async (client, to, subject, body, cc, bcc, draftId) => {
+  sendEmail: async (client, to, subject, body, cc, bcc, draftId, fromEmail, identityId) => {
     set({ isLoading: true, error: null });
     try {
-      await client.sendEmail(to, subject, body, cc, bcc, draftId);
+      await client.sendEmail(to, subject, body, cc, bcc, draftId, fromEmail, identityId);
       // Refresh emails after sending
       await get().fetchEmails(client);
       set({ isLoading: false });

stores/settings-store.ts

@@ -35,6 +35,7 @@ interface SettingsState {
 
   // Privacy & Security
   sessionTimeout: number; // minutes (0 = never)
+  trustedSenders: string[]; // Email addresses that can load external content
 
   // Advanced
   debugMode: boolean;
@@ -47,6 +48,11 @@ interface SettingsState {
   resetToDefaults: () => void;
   exportSettings: () => string;
   importSettings: (json: string) => boolean;
+
+  // Trusted senders
+  addTrustedSender: (email: string) => void;
+  removeTrustedSender: (email: string) => void;
+  isSenderTrusted: (email: string) => boolean;
 }
 
 const DEFAULT_SETTINGS = {
@@ -74,6 +80,7 @@ const DEFAULT_SETTINGS = {
 
   // Privacy & Security
   sessionTimeout: 0, // Never
+  trustedSenders: [] as string[],
 
   // Advanced
   debugMode: false,
@@ -124,6 +131,7 @@ export const useSettingsStore = create<SettingsState>()(
           showPreview: state.showPreview,
           emailsPerPage: state.emailsPerPage,
           externalContentPolicy: state.externalContentPolicy,
+          trustedSenders: state.trustedSenders,
           autoSaveDraftInterval: state.autoSaveDraftInterval,
           sendConfirmation: state.sendConfirmation,
           defaultReplyMode: state.defaultReplyMode,
@@ -160,6 +168,27 @@ export const useSettingsStore = create<SettingsState>()(
           return false;
         }
       },
+
+      // Trusted senders methods
+      addTrustedSender: (email: string) => {
+        const normalizedEmail = email.toLowerCase().trim();
+        const current = get().trustedSenders;
+        if (!current.includes(normalizedEmail)) {
+          set({ trustedSenders: [...current, normalizedEmail] });
+        }
+      },
+
+      removeTrustedSender: (email: string) => {
+        const normalizedEmail = email.toLowerCase().trim();
+        set({
+          trustedSenders: get().trustedSenders.filter(e => e !== normalizedEmail)
+        });
+      },
+
+      isSenderTrusted: (email: string) => {
+        const normalizedEmail = email.toLowerCase().trim();
+        return get().trustedSenders.includes(normalizedEmail);
+      },
     }),
     {
       name: 'settings-storage',