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
2026-01-08 02:08:18 +01:00
parent dbffaf2a15
commit 58cfe09dc6
18 changed files with 778 additions and 100 deletions
@@ -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>
@@ -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
-        const shouldBlockExternal = externalContentPolicy === 'block' ||
-          (externalContentPolicy === 'ask' && !allowExternalContent);
+        // 'allow' = never block, 'block' = always block (unless trusted), 'ask' = block until user allows or trusted
+        const shouldBlockExternal = !senderIsTrusted && (
+          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 */}
-        {hasBlockedContent && !allowExternalContent && externalContentPolicy === 'ask' && (
+        {/* External Content Banner - show in 'ask' or 'block' mode */}
+        {hasBlockedContent && !allowExternalContent && externalContentPolicy !== 'allow' && (
          <div className="border-b border-border">
-            <div className="max-w-4xl mx-auto px-6 py-2">
-              <button
-                onClick={() => setAllowExternalContent(true)}
-                className="mx-auto flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <Image className="w-3.5 h-3.5" />
-                Show images
-              </button>
+            <div className="max-w-4xl mx-auto px-6 py-2 flex items-center justify-center gap-4">
+              {/* Load images button - only in 'ask' mode */}
+              {externalContentPolicy === 'ask' && (
+                <button
+                  onClick={() => setAllowExternalContent(true)}
+                  className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <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>
        )}
@@ -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) => (
-            <EmailCard
-              key={email.id}
-              email={email}
-              isExpanded={expandedIds.has(email.id)}
-              isLatest={index === 0}
-              allowExternal={externalContentPolicy === 'allow' || allowExternalContent.has(email.id)}
-              onToggleExpanded={() => toggleExpanded(email.id)}
-              onAllowExternal={() => toggleAllowExternal(email.id)}
-              onReply={onReply ? () => onReply(email) : undefined}
-              onReplyAll={onReplyAll ? () => onReplyAll(email) : undefined}
-              onForward={onForward ? () => onForward(email) : undefined}
-              onDownloadAttachment={onDownloadAttachment}
-              onMarkAsRead={onMarkAsRead}
-            />
-          ))}
+          {emails.map((email, index) => {
+            const senderEmail = email.from?.[0]?.email?.toLowerCase();
+            const senderIsTrusted = senderEmail ? isSenderTrusted(senderEmail) : false;
+            return (
+              <EmailCard
+                key={email.id}
+                email={email}
+                isExpanded={expandedIds.has(email.id)}
+                isLatest={index === 0}
+                allowExternal={externalContentPolicy === 'allow' || senderIsTrusted || allowExternalContent.has(email.id)}
+                onToggleExpanded={() => toggleExpanded(email.id)}
+                onAllowExternal={() => toggleAllowExternal(email.id)}
+                onTrustSender={senderEmail ? () => {
+                  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
-                variant="ghost"
-                size="sm"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onAllowExternal();
-                }}
-              >
-                {t("email_viewer.load_external_content")}
-              </Button>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onAllowExternal();
+                  }}
+                >
+                  {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>
          )}