Merge branch 'dev'

.dockerignore

@@ -5,9 +5,7 @@ node_modules
 .env*
 !.env.example
 !.env.dev.example
-.claude/
 scripts/
 TODO.md
-CLAUDE.md
 *.md
 !README.md

.gitignore

@@ -42,9 +42,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# claude code
-.claude/
-
 # settings sync data
 /data/
 

app/[locale]/calendar/page.tsx

@@ -7,7 +7,7 @@ import { Plus } from "lucide-react";
 import {
   startOfMonth, endOfMonth, startOfWeek, endOfWeek,
   addMonths, subMonths, addWeeks, subWeeks, addDays, subDays,
-  format, parseISO,
+  startOfDay, format, parseISO,
 } from "date-fns";
 import { useCalendarStore } from "@/stores/calendar-store";
 import { isCalendarViewMode } from "@/stores/calendar-store";
@@ -156,11 +156,15 @@ export default function CalendarPage() {
           start: format(d, "yyyy-MM-dd'T'00:00:00"),
           end: format(d, "yyyy-MM-dd'T'23:59:59"),
         };
-      case "agenda":
+      case "agenda": {
+        // Agenda always starts from today at the earliest
+        const today = startOfDay(new Date());
+        const agendaStart = d >= today ? d : today;
         return {
-          start: format(d, "yyyy-MM-dd'T'00:00:00"),
+          start: format(agendaStart, "yyyy-MM-dd'T'00:00:00"),
-          end: format(addDays(d, 30), "yyyy-MM-dd'T'23:59:59"),
+          end: format(addDays(agendaStart, 30), "yyyy-MM-dd'T'23:59:59"),
         };
+      }
     }
   }, [selectedDate, normalizedViewMode, firstDayOfWeek]);
 

app/[locale]/page.tsx

@@ -816,13 +816,13 @@ export default function Home() {
     };
   }, []);
 
-  const handleDownloadAttachment = async (blobId: string, name: string, type?: string) => {
+  const handleDownloadAttachment = async (blobId: string, name: string, type?: string, forceDownload?: boolean) => {
     if (!client) return;
 
     try {
       const { mailAttachmentAction } = useSettingsStore.getState();
 
-      if (mailAttachmentAction === 'preview' && isFilePreviewable(name, type)) {
+      if (!forceDownload && mailAttachmentAction === 'preview' && isFilePreviewable(name, type)) {
         setPreviewAttachment({ blobId, name, type });
         return;
       }

app/globals.css

@@ -20,6 +20,8 @@
   --color-accent-foreground: #1e40af;
   --color-destructive: #ef4444;
   --color-destructive-foreground: #ffffff;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #0f172a;
 
   /* Settings variables */
   --font-size-base: 16px;
@@ -50,6 +52,8 @@
   --color-accent-foreground: #dbeafe;
   --color-destructive: #ef4444;
   --color-destructive-foreground: #fafafa;
+  --color-popover: #1c1c1c;
+  --color-popover-foreground: #fafafa;
 }
 
 @theme inline {
@@ -68,6 +72,8 @@
   --color-accent-foreground: var(--color-accent-foreground);
   --color-destructive: var(--color-destructive);
   --color-destructive-foreground: var(--color-destructive-foreground);
+  --color-popover: var(--color-popover);
+  --color-popover-foreground: var(--color-popover-foreground);
 }
 
 * {

components/calendar/calendar-agenda-view.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useRef, useEffect, useCallback } from "react";
 import { useTranslations, useFormatter } from "next-intl";
-import { format, parseISO, isToday, isTomorrow } from "date-fns";
+import { format, parseISO, isToday, isTomorrow, startOfDay } from "date-fns";
 import { Calendar as CalendarIcon, MapPin, Users } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { parseDuration, getEventColor } from "./event-card";
@@ -27,6 +27,7 @@ interface DayGroup {
 }
 
 export function CalendarAgendaView({
+  selectedDate,
   events,
   calendars,
   onSelectEvent,
@@ -43,6 +44,9 @@ export function CalendarAgendaView({
     return map;
   }, [calendars]);
 
+  const todayRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
   const grouped = useMemo(() => {
     const sorted = [...events].sort((a, b) =>
       new Date(a.start).getTime() - new Date(b.start).getTime()
@@ -69,10 +73,38 @@ export function CalendarAgendaView({
       } catch { /* skip invalid dates */ }
     });
 
+    // Always include today's date in the groups so the view has a "Today" anchor
+    const todayKey = format(new Date(), "yyyy-MM-dd");
+    if (!groupMap.has(todayKey)) {
+      const todayGroup = { date: startOfDay(new Date()), dateKey: todayKey, events: [] as CalendarEvent[] };
+      groupMap.set(todayKey, todayGroup);
+      groups.push(todayGroup);
+    }
+
     groups.sort((a, b) => a.date.getTime() - b.date.getTime());
     return groups;
   }, [events]);
 
+  // Auto-scroll to today's section on mount and when selectedDate changes to today
+  const scrollToToday = useCallback(() => {
+    if (todayRef.current) {
+      todayRef.current.scrollIntoView({ block: "start" });
+    }
+  }, []);
+
+  useEffect(() => {
+    // Scroll to today on mount
+    const frame = requestAnimationFrame(scrollToToday);
+    return () => cancelAnimationFrame(frame);
+  }, [scrollToToday]);
+
+  useEffect(() => {
+    // Scroll to today when selectedDate changes to today
+    if (isToday(selectedDate)) {
+      scrollToToday();
+    }
+  }, [selectedDate, scrollToToday]);
+
   const formatDateHeader = (date: Date): string => {
     if (isToday(date)) return t("events.today_header");
     if (isTomorrow(date)) return t("events.tomorrow_header");
@@ -86,19 +118,10 @@ export function CalendarAgendaView({
     return format(date, "HH:mm");
   };
 
-  if (grouped.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center flex-1 text-muted-foreground">
-        <CalendarIcon className="w-12 h-12 mb-3 opacity-30" />
-        <p className="text-sm">{t("events.no_events")}</p>
-      </div>
-    );
-  }
-
   return (
-    <div className="flex-1 overflow-y-auto">
+    <div className="flex-1 overflow-y-auto" ref={scrollContainerRef}>
       {grouped.map((group) => (
-        <div key={group.dateKey}>
+        <div key={group.dateKey} ref={isToday(group.date) ? todayRef : undefined}>
           <div className="sticky top-0 bg-muted/80 backdrop-blur-sm px-4 py-2 border-b border-border">
             <span className={cn(
               "text-sm font-medium",
@@ -111,6 +134,11 @@ export function CalendarAgendaView({
             </span>
           </div>
 
+          {group.events.length === 0 ? (
+            <div className="px-4 py-6 text-center text-sm text-muted-foreground">
+              {t("events.no_events")}
+            </div>
+          ) : (
           <div className="divide-y divide-border">
             {group.events.map((ev) => {
               const calId = getPrimaryCalendarId(ev);
@@ -176,6 +204,7 @@ export function CalendarAgendaView({
               );
             })}
           </div>
+          )}
         </div>
       ))}
     </div>

components/email/email-viewer.tsx

@@ -105,7 +105,7 @@ interface EmailViewerProps {
   onToggleStar?: () => void;
   onMarkAsRead?: (emailId: string, read: boolean) => void;
   onSetColorTag?: (emailId: string, color: string | null) => void;
-  onDownloadAttachment?: (blobId: string, name: string, type?: string) => void;
+  onDownloadAttachment?: (blobId: string, name: string, type?: string, forceDownload?: boolean) => void;
   onQuickReply?: (body: string) => Promise<void>;
   onMarkAsSpam?: () => void;
   onUndoSpam?: () => void;
@@ -149,6 +149,42 @@ const getFileIcon = (name?: string, type?: string) => {
   return File;
 };
 
+const MIME_TYPE_LABELS: Record<string, string> = {
+  'application/pdf': 'Document.pdf',
+  'application/zip': 'Archive.zip',
+  'application/x-zip-compressed': 'Archive.zip',
+  'application/gzip': 'Archive.gz',
+  'application/x-rar-compressed': 'Archive.rar',
+  'application/x-7z-compressed': 'Archive.7z',
+  'application/msword': 'Document.doc',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Document.docx',
+  'application/vnd.ms-excel': 'Spreadsheet.xls',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Spreadsheet.xlsx',
+  'application/vnd.ms-powerpoint': 'Presentation.ppt',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'Presentation.pptx',
+  'text/plain': 'Text.txt',
+  'text/html': 'Document.html',
+  'text/csv': 'Data.csv',
+  'application/json': 'Data.json',
+  'application/xml': 'Data.xml',
+  'application/octet-stream': 'Attachment',
+  'message/rfc822': 'Email.eml',
+};
+
+const getAttachmentDisplayName = (name: string | null | undefined, mimeType?: string): string => {
+  if (name) return name;
+  if (mimeType) {
+    const label = MIME_TYPE_LABELS[mimeType.toLowerCase()];
+    if (label) return label;
+    const sub = mimeType.split('/')[1];
+    if (sub) {
+      const clean = sub.replace(/^x-/, '').replace(/^vnd\./, '');
+      return `Attachment.${clean}`;
+    }
+  }
+  return 'Attachment';
+};
+
 const getCurrentColor = (keywords: Record<string, boolean> | undefined) => {
   if (!keywords) return null;
   for (const key of Object.keys(keywords)) {
@@ -837,6 +873,7 @@ export function EmailViewer({
   const tFiles = useTranslations('files');
   const externalContentPolicy = useSettingsStore((state) => state.externalContentPolicy);
   const mailAttachmentAction = useSettingsStore((state) => state.mailAttachmentAction);
+  const attachmentPosition = useSettingsStore((state) => state.attachmentPosition);
   const addTrustedSender = useSettingsStore((state) => state.addTrustedSender);
   const isSenderTrusted = useSettingsStore((state) => state.isSenderTrusted);
   const emailKeywords = useSettingsStore((state) => state.emailKeywords);
@@ -864,6 +901,8 @@ export function EmailViewer({
   const { identities, client } = useAuthStore();
   const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
   const [showFullHeaders, setShowFullHeaders] = useState(false);
+  const [showAllBesideAttachments, setShowAllBesideAttachments] = useState(false);
+  const [showAllMobileAttachments, setShowAllMobileAttachments] = useState(false);
   const [allowExternalContent, setAllowExternalContent] = useState(false);
   const [hasBlockedContent, setHasBlockedContent] = useState(false);
   const [cidBlobUrls, setCidBlobUrls] = useState<Record<string, string>>({});
@@ -2394,6 +2433,44 @@ export function EmailViewer({
     setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
   }, [mailAttachmentAction, onDownloadAttachment]);
 
+  const handleEffectiveAttachmentDownload = useCallback((attachment: EffectiveAttachment) => {
+    if (attachment.blobId && onDownloadAttachment) {
+      onDownloadAttachment(attachment.blobId, attachment.name || 'download', attachment.type, true);
+      return;
+    }
+
+    if (attachment.tnefData) {
+      const buffer = attachment.tnefData.buffer.slice(
+        attachment.tnefData.byteOffset,
+        attachment.tnefData.byteOffset + attachment.tnefData.byteLength,
+      ) as ArrayBuffer;
+      const blob = new Blob([buffer], { type: attachment.type || 'application/octet-stream' });
+      const objectUrl = URL.createObjectURL(blob);
+      const anchor = document.createElement('a');
+      anchor.href = objectUrl;
+      anchor.download = attachment.name || 'download';
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      setTimeout(() => URL.revokeObjectURL(objectUrl), 60000);
+      return;
+    }
+
+    if (!attachment.decryptedAttachment) return;
+    const bytes = getAttachmentContentBytes(attachment.decryptedAttachment);
+    if (!bytes || bytes.byteLength === 0) return;
+    const buffer = bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength) as ArrayBuffer;
+    const blob = new Blob([buffer], { type: attachment.type || 'application/octet-stream' });
+    const objectUrl = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = objectUrl;
+    anchor.download = attachment.name || 'download';
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
+  }, [onDownloadAttachment]);
+
   // Iframe for rendering HTML emails true-to-life
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
@@ -2913,6 +2990,21 @@ export function EmailViewer({
           <Code className="w-4 h-4" />
         </Button>
 
+        {/* Dark/light mode toggle for HTML emails */}
+        {effectiveEmailContent.isHtml && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
+            data-overflow-item
+            data-overflow-priority="11"
+            className="hidden sm:inline-flex h-8 gap-1.5"
+            title={isDark ? 'View in light mode' : 'View in dark mode'}
+          >
+            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+          </Button>
+        )}
+
         {/* More menu — click-based */}
         <div ref={moreMenuRef} className="relative">
           <Button
@@ -3095,6 +3187,16 @@ export function EmailViewer({
                 <Code className="w-4 h-4" />
                 {t('view_source')}
               </button>
+              {/* Overflow: dark/light mode toggle */}
+              {effectiveEmailContent.isHtml && (
+                <button
+                  onClick={() => { setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev); setMoreMenuOpen(false); setMoreMenuSub(null); }}
+                  className={cn("w-full px-3 py-1.5 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2", hiddenPriorities.has(11) ? "" : "sm:hidden")}
+                >
+                  {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+                  {isDark ? 'View in light mode' : 'View in dark mode'}
+                </button>
+              )}
               <div className="h-px bg-border my-1" />
               {/* Export email */}
               <button
@@ -3268,6 +3370,15 @@ export function EmailViewer({
             <Code className="w-5 h-5" />
             {t('view_source')}
           </button>
+          {effectiveEmailContent.isHtml && (
+            <button
+              onClick={() => { setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev); setMoreMenuOpen(false); }}
+              className="w-full px-4 py-3 min-h-[44px] text-sm text-left hover:bg-muted text-foreground flex items-center gap-3"
+            >
+              {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+              {isDark ? 'View in light mode' : 'View in dark mode'}
+            </button>
+          )}
           <div className="h-px bg-border my-1" />
           <button
             onClick={() => { handleExportEmail(); setMoreMenuOpen(false); }}
@@ -3341,7 +3452,7 @@ export function EmailViewer({
             )}
             <div className="flex-1 min-w-0">
               <div className="flex items-start gap-2">
-                <h1 className="text-lg lg:text-2xl font-bold text-foreground tracking-tight break-words min-w-0">
+                <h1 className="text-lg lg:text-xl font-bold text-foreground tracking-tight break-words min-w-0">
                   {email.subject || t('no_subject')}
                 </h1>
                 {/* Star inline with subject (top toolbar mode) */}
@@ -3365,19 +3476,24 @@ export function EmailViewer({
                     <span className={cn("w-2.5 h-2.5 rounded-full flex-shrink-0", dotClass)} title={kw!.label} />
                   ) : null;
                 })()}
-              </div>
-              <div className="flex items-center gap-2 lg:gap-3 mt-1 lg:mt-1.5 text-xs lg:text-sm text-muted-foreground">
-                <span className="flex items-center gap-1 lg:gap-1.5 whitespace-nowrap">
-                  <Clock className="w-3.5 h-3.5 lg:w-4 lg:h-4" />
-                  {formatDateTime(email.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })}
-                </span>
                 {isImportant && (
-                  <span className="px-1.5 lg:px-2 py-0.5 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-medium whitespace-nowrap">
+                  <span className="px-1.5 lg:px-2 py-0.5 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-medium whitespace-nowrap flex-shrink-0 self-center">
                     {t('important')}
                   </span>
                 )}
               </div>
             </div>
+            {/* Date/time on the right of subject row */}
+            <div className="flex-shrink-0 text-right">
+              <span className="text-xs lg:text-sm text-muted-foreground whitespace-nowrap">
+                {formatDateTime(email.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })}
+              </span>
+              {email.size > 0 && (
+                <div className="text-xs text-muted-foreground/60">
+                  {formatFileSize(email.size)}
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -3408,13 +3524,14 @@ export function EmailViewer({
                 name={sender?.name}
                 email={sender?.email}
                 size="lg"
-                className="shadow-sm w-12 h-12 group-hover:ring-2 group-hover:ring-primary/30 transition-all"
+                className="shadow-sm w-10 h-10 group-hover:ring-2 group-hover:ring-primary/30 transition-all"
               />
             </button>
 
-            <div className="flex-1 min-w-0">
+            <div className="flex-1 min-w-0 flex gap-4">
-              {/* Sender line with email and badges */}
+              <div className="flex-1 min-w-0">
-              <div className="flex items-start justify-between gap-4">
+              {/* Row 1: Sender name + badges */}
+              <div>
                 <div className="min-w-0">
                   <div className="flex items-center gap-2 flex-wrap">
                     <button
@@ -3425,103 +3542,80 @@ export function EmailViewer({
                       {sender?.name || sender?.email || t('unknown_sender')}
                     </button>
                     <EmailIdentityBadge email={email} identities={identities} />
+                    {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
+                      <UnsubscribeBanner
+                        listUnsubscribe={listHeaders.listUnsubscribe}
+                        senderEmail={email?.from?.[0]?.email || ''}
+                        onDismiss={() => {
+                          const messageId = email?.messageId || '';
+                          const newSet = new Set(dismissedUnsubBanners).add(messageId);
+                          setDismissedUnsubBanners(newSet);
+                          localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
+                        }}
+                      />
+                    )}
                   </div>
-                  {sender?.email && (
+                  {/* Email address under name */}
-                    <div className="text-sm text-muted-foreground mt-0.5 flex items-center min-w-0">
+                  {sender?.email && sender?.name && (
-                      <span className="truncate">{sender.email}</span>
+                    <div className="text-sm text-muted-foreground mt-0.5 truncate">{sender.email}</div>
-                      {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
-                        <UnsubscribeBanner
-                          listUnsubscribe={listHeaders.listUnsubscribe}
-                          senderEmail={email?.from?.[0]?.email || ''}
-                          onDismiss={() => {
-                            const messageId = email?.messageId || '';
-                            const newSet = new Set(dismissedUnsubBanners).add(messageId);
-                            setDismissedUnsubBanners(newSet);
-                            localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
-                          }}
-                        />
-                      )}
-                    </div>
-                  )}
-                </div>
-                {/* Date and size on the right */}
-                <div className="text-right flex-shrink-0">
-                  <div className="text-sm text-muted-foreground whitespace-nowrap">
-                    {formatDateTime(email.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })}
-                  </div>
-                  {email.size > 0 && (
-                    <div className="text-xs text-muted-foreground/70 mt-0.5">
-                      {formatFileSize(email.size)}
-                    </div>
-                  )}
-                  {effectiveEmailContent.isHtml && (
-                    <button
-                      onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
-                      className="inline-flex items-center rounded-full p-1 mt-1 text-muted-foreground/70 hover:text-foreground transition-colors hover:bg-muted"
-                      title={isDark ? 'View in light mode' : 'View in dark mode'}
-                    >
-                      {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-                    </button>
                   )}
                 </div>
               </div>
 
-              {/* Recipient section - separate line */}
+              {/* Row 2: Recipients + Show details */}
-              <div className="mt-2 space-y-1">
+              <div className="mt-1 flex items-center gap-2 text-sm text-muted-foreground flex-wrap">
                 {email.to && email.to.length > 0 && (
-                  <div className="flex flex-wrap items-center gap-1 text-sm">
+                  <>
-                    <span className="text-muted-foreground">{t('recipient_to_prefix')}</span>
+                    <span>{t('recipient_to_prefix')}</span>
                     {renderClickableRecipients(email.to, currentUserEmail, t, handleViewContactSidebar)}
                     {email.to.length > 2 && (
                       <button
                         onClick={() => setShowFullHeaders(!showFullHeaders)}
-                        className="ml-1 text-blue-600 dark:text-blue-400 hover:underline text-sm"
+                        className="text-blue-600 dark:text-blue-400 hover:underline text-sm"
                       >
                         {t('more_count', { count: email.to.length - 2 })}
                       </button>
                     )}
-                  </div>
+                  </>
                 )}
-
                 {email.cc && email.cc.length > 0 && (
-                  <div className="flex flex-wrap items-center gap-1 text-sm">
+                  <>
-                    <span className="text-muted-foreground">CC:</span>
+                    <span className="text-muted-foreground/50">|</span>
+                    <span>CC:</span>
                     {renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar)}
                     {email.cc.length > 2 && (
-                      <span className="text-muted-foreground text-sm">+{email.cc.length - 2}</span>
+                      <span className="text-muted-foreground">+{email.cc.length - 2}</span>
                     )}
-                  </div>
+                  </>
                 )}
-
                 {email.bcc && email.bcc.length > 0 && (
-                  <div className="flex flex-wrap items-center gap-1 text-sm">
+                  <>
-                    <span className="text-muted-foreground">{t('bcc')}:</span>
+                    <span className="text-muted-foreground/50">|</span>
+                    <span>{t('bcc')}:</span>
                     {renderClickableRecipients(email.bcc, currentUserEmail, t, handleViewContactSidebar)}
                     {email.bcc.length > 2 && (
-                      <span className="text-muted-foreground text-sm">+{email.bcc.length - 2}</span>
+                      <span className="text-muted-foreground">+{email.bcc.length - 2}</span>
                     )}
-                  </div>
+                  </>
                 )}
+                <button
+                  onClick={() => setShowFullHeaders(!showFullHeaders)}
+                  className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-0.5 transition-colors ml-1"
+                >
+                  {showFullHeaders ? (
+                    <>
+                      <ChevronUp className="w-3 h-3" />
+                      {t('hide_details')}
+                    </>
+                  ) : (
+                    <>
+                      <ChevronDown className="w-3 h-3" />
+                      {t('show_details')}
+                    </>
+                  )}
+                </button>
               </div>
 
-              {/* Details toggle - stays in place when expanded */}
-              <button
-                onClick={() => setShowFullHeaders(!showFullHeaders)}
-                className="mt-3 text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
-              >
-                {showFullHeaders ? (
-                  <>
-                    <ChevronUp className="w-3 h-3" />
-                    {t('hide_details')}
-                  </>
-                ) : (
-                  <>
-                    <ChevronDown className="w-3 h-3" />
-                    {t('show_details')}
-                  </>
-                )}
-              </button>
-
               {/* Expandable Details */}
               {showFullHeaders && (
                 <div className="mt-3 space-y-3">
@@ -3893,46 +3987,248 @@ export function EmailViewer({
                 </div>
               )}
 
+              </div>
+              {/* Attachments on the right (beside-sender mode) */}
+              {attachmentPosition === 'beside-sender' && effectiveAttachments.length > 0 && (
+                <div className="relative flex flex-col items-end justify-start gap-1 flex-shrink-0 max-w-[50%]">
+                  {effectiveAttachments.slice(0, 2).map((attachment) => {
+                    const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                    const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                    const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                    return (
+                      <div
+                        key={attachment.id}
+                        className="inline-flex items-center gap-1.5 px-2 py-1 bg-muted/60 rounded-md border border-border/50 group relative cursor-default"
+                      >
+                        <FileIcon className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+                        <span className="text-xs text-foreground truncate max-w-[140px]">
+                          {getAttachmentDisplayName(attachment.name, attachment.type)}
+                        </span>
+                        <span className="text-[10px] text-muted-foreground">
+                          {formatFileSize(attachment.size)}
+                        </span>
+                        <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                          <button
+                            className="p-1 hover:bg-accent rounded transition-colors"
+                            title={t('download')}
+                            onClick={() => handleEffectiveAttachmentDownload(attachment)}
+                          >
+                            <Download className="w-3.5 h-3.5 text-foreground" />
+                          </button>
+                          {opensPreview && (
+                            <button
+                              className="p-1 hover:bg-accent rounded transition-colors"
+                              title={tFiles('preview')}
+                              onClick={() => handleEffectiveAttachmentOpen(attachment)}
+                            >
+                              <Eye className="w-3.5 h-3.5 text-foreground" />
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                  {effectiveAttachments.length > 2 && (
+                    <button
+                      onClick={() => setShowAllBesideAttachments(!showAllBesideAttachments)}
+                      className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-0.5"
+                    >
+                      +{effectiveAttachments.length - 2} {t('more')}
+                    </button>
+                  )}
+                  {/* Floating popup for remaining attachments */}
+                  {showAllBesideAttachments && effectiveAttachments.length > 2 && (
+                    <>
+                      <div className="fixed inset-0 z-40" onClick={() => setShowAllBesideAttachments(false)} />
+                      <div className="absolute top-full right-0 mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-2 flex flex-col gap-1 min-w-[220px]">
+                        {effectiveAttachments.slice(2).map((attachment) => {
+                          const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                          const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                          const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                          return (
+                            <div
+                              key={attachment.id}
+                              className="flex items-center gap-1.5 px-2 py-1 rounded-md group relative cursor-default w-full"
+                            >
+                              <FileIcon className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+                              <span className="text-xs text-foreground truncate max-w-[180px]">
+                                {getAttachmentDisplayName(attachment.name, attachment.type)}
+                              </span>
+                              <span className="text-[10px] text-muted-foreground ml-auto flex-shrink-0">
+                                {formatFileSize(attachment.size)}
+                              </span>
+                              <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                                <button
+                                  className="p-1 hover:bg-accent rounded transition-colors"
+                                  title={t('download')}
+                                  onClick={() => { handleEffectiveAttachmentDownload(attachment); setShowAllBesideAttachments(false); }}
+                                >
+                                  <Download className="w-3.5 h-3.5 text-foreground" />
+                                </button>
+                                {opensPreview && (
+                                  <button
+                                    className="p-1 hover:bg-accent rounded transition-colors"
+                                    title={tFiles('preview')}
+                                    onClick={() => { handleEffectiveAttachmentOpen(attachment); setShowAllBesideAttachments(false); }}
+                                  >
+                                    <Eye className="w-3.5 h-3.5 text-foreground" />
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </>
+                  )}
+                </div>
+              )}
             </div>
           </div>
       </div>
 
-      {/* === ATTACHMENTS (integrated into header) === */}
+      {/* === ATTACHMENTS below header (below-header mode, desktop only) === */}
-      {effectiveAttachments.length > 0 && (
+      {attachmentPosition === 'below-header' && effectiveAttachments.length > 0 && (
-        <div className="bg-background border-b border-border px-4 lg:px-6 py-3">
+        <div className="hidden lg:block bg-background border-b border-border px-4 lg:px-6 py-2">
-          <div className="flex items-start gap-2 flex-wrap">
+          <div className="flex items-center gap-2 flex-wrap">
             {effectiveAttachments.map((attachment) => {
               const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
               const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
               const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
               return (
-                <button
+                <div
                   key={attachment.id}
-                  className="inline-flex items-center gap-2 px-3 py-2 bg-muted/60 hover:bg-accent rounded-lg transition-colors group border border-border/50"
+                  className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-muted/60 rounded-md border border-border/50 group relative cursor-default"
-                  title={`${opensPreview ? tFiles('preview') : t('download')} ${attachment.name || 'Unnamed'} (${formatFileSize(attachment.size)})`}
-                  onClick={() => handleEffectiveAttachmentOpen(attachment)}
                 >
                   <FileIcon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-                  <div className="flex flex-col items-start min-w-0">
+                  <span className="text-sm text-foreground truncate max-w-[200px]">
-                    <span className="text-sm text-foreground truncate max-w-[200px]">
+                    {getAttachmentDisplayName(attachment.name, attachment.type)}
-                      {attachment.name || "Unnamed"}
+                  </span>
-                    </span>
+                  <span className="text-xs text-muted-foreground">
-                    <span className="text-xs text-muted-foreground">
+                    {formatFileSize(attachment.size)}
-                      {formatFileSize(attachment.size)}
+                  </span>
-                    </span>
+                  <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                    <button
+                      className="p-1 hover:bg-accent rounded transition-colors"
+                      title={t('download')}
+                      onClick={() => handleEffectiveAttachmentDownload(attachment)}
+                    >
+                      <Download className="w-4 h-4 text-foreground" />
+                    </button>
+                    {opensPreview && (
+                      <button
+                        className="p-1 hover:bg-accent rounded transition-colors"
+                        title={tFiles('preview')}
+                        onClick={() => handleEffectiveAttachmentOpen(attachment)}
+                      >
+                        <Eye className="w-4 h-4 text-foreground" />
+                      </button>
+                    )}
                   </div>
-                  {opensPreview ? (
+                </div>
-                    <Eye className="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
-                  ) : (
-                    <Download className="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
-                  )}
-                </button>
               );
             })}
           </div>
         </div>
       )}
 
+        {/* Mobile/Tablet Attachments */}
+        {effectiveAttachments.length > 0 && (
+          <div className="lg:hidden bg-background border-b border-border px-4 py-2">
+            <div className="relative flex items-center gap-1.5 flex-wrap">
+              {effectiveAttachments.slice(0, 2).map((attachment) => {
+                const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                return (
+                  <div
+                    key={attachment.id}
+                    className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-muted/60 rounded-md border border-border/50 group relative cursor-default"
+                  >
+                    <FileIcon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                    <span className="text-sm text-foreground truncate max-w-[200px]">
+                      {getAttachmentDisplayName(attachment.name, attachment.type)}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {formatFileSize(attachment.size)}
+                    </span>
+                    <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                      <button
+                        className="p-1 hover:bg-accent rounded transition-colors"
+                        title={t('download')}
+                        onClick={() => handleEffectiveAttachmentDownload(attachment)}
+                      >
+                        <Download className="w-4 h-4 text-foreground" />
+                      </button>
+                      {opensPreview && (
+                        <button
+                          className="p-1 hover:bg-accent rounded transition-colors"
+                          title={tFiles('preview')}
+                          onClick={() => handleEffectiveAttachmentOpen(attachment)}
+                        >
+                          <Eye className="w-4 h-4 text-foreground" />
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+              {effectiveAttachments.length > 2 && (
+                <button
+                  onClick={() => setShowAllMobileAttachments(!showAllMobileAttachments)}
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-0.5"
+                >
+                  +{effectiveAttachments.length - 2} {t('more')}
+                </button>
+              )}
+              {showAllMobileAttachments && effectiveAttachments.length > 2 && (
+                <>
+                  <div className="fixed inset-0 z-40" onClick={() => setShowAllMobileAttachments(false)} />
+                  <div className="absolute top-full left-0 mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-2 flex flex-col gap-1 min-w-[220px]">
+                    {effectiveAttachments.slice(2).map((attachment) => {
+                      const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                      const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                      const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                      return (
+                        <div
+                          key={attachment.id}
+                          className="flex items-center gap-1.5 px-2 py-1 rounded-md group relative cursor-default w-full"
+                        >
+                          <FileIcon className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+                          <span className="text-xs text-foreground truncate max-w-[180px]">
+                            {getAttachmentDisplayName(attachment.name, attachment.type)}
+                          </span>
+                          <span className="text-[10px] text-muted-foreground ml-auto flex-shrink-0">
+                            {formatFileSize(attachment.size)}
+                          </span>
+                          <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                            <button
+                              className="p-1 hover:bg-accent rounded transition-colors"
+                              title={t('download')}
+                              onClick={() => { handleEffectiveAttachmentDownload(attachment); setShowAllMobileAttachments(false); }}
+                            >
+                              <Download className="w-3.5 h-3.5 text-foreground" />
+                            </button>
+                            {opensPreview && (
+                              <button
+                                className="p-1 hover:bg-accent rounded transition-colors"
+                                title={tFiles('preview')}
+                                onClick={() => { handleEffectiveAttachmentOpen(attachment); setShowAllMobileAttachments(false); }}
+                              >
+                                <Eye className="w-3.5 h-3.5 text-foreground" />
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
         {/* Mobile/Tablet Sender Info - scrolls with content */}
         <div className="lg:hidden bg-background border-b border-border px-4" style={{ paddingBlock: 'var(--density-header-py)' }}>
           <div className="flex items-start" style={{ gap: 'var(--density-item-gap)' }}>
@@ -3949,8 +4245,8 @@ export function EmailViewer({
               />
             </button>
             <div className="flex-1 min-w-0">
-              {/* Mobile 2-line layout */}
+              {/* Row 1: Sender name + badges */}
-              <div className="flex items-center gap-2 flex-wrap">
+              <div className="flex items-center gap-1.5 flex-wrap">
                 <button
                   onClick={() => sender?.email && handleViewContactSidebar(null, sender.email)}
                   className="text-sm font-semibold text-foreground hover:text-primary hover:underline transition-colors cursor-pointer text-left"
@@ -3958,43 +4254,42 @@ export function EmailViewer({
                   {sender?.name || sender?.email || t('unknown_sender')}
                 </button>
                 <EmailIdentityBadge email={email} identities={identities} />
-              </div>
+                {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
-              <div className="mt-1 flex items-center gap-1 text-sm text-muted-foreground flex-wrap">
+                  <UnsubscribeBanner
-                {sender?.email && sender?.name && (
+                    listUnsubscribe={listHeaders.listUnsubscribe}
-                  <>
+                    senderEmail={email?.from?.[0]?.email || ''}
-                    <span className="truncate">{sender.email}</span>
+                    onDismiss={() => {
-                    {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
+                      const messageId = email?.messageId || '';
-                      <UnsubscribeBanner
+                      const newSet = new Set(dismissedUnsubBanners).add(messageId);
-                        listUnsubscribe={listHeaders.listUnsubscribe}
+                      setDismissedUnsubBanners(newSet);
-                        senderEmail={email?.from?.[0]?.email || ''}
+                      localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
-                        onDismiss={() => {
+                    }}
-                          const messageId = email?.messageId || '';
+                  />
-                          const newSet = new Set(dismissedUnsubBanners).add(messageId);
-                          setDismissedUnsubBanners(newSet);
-                          localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
-                        }}
-                      />
-                    )}
-                    <span>·</span>
-                  </>
                 )}
+              </div>
+              {/* Email address under name */}
+              {sender?.email && sender?.name && (
+                <div className="text-xs text-muted-foreground mt-0.5 truncate">{sender.email}</div>
+              )}
+              {/* Row 2: Recipients */}
+              <div className="mt-0.5 flex items-center gap-1 text-sm text-muted-foreground flex-wrap">
                 {email.to && email.to.length > 0 && (
                   <>
                     <span>→ {t('recipient_to_prefix')}</span>
                     {renderClickableRecipients(email.to, currentUserEmail, t, handleViewContactSidebar)}
                   </>
                 )}
+                {email.cc && email.cc.length > 0 && (
+                  <>
+                    <span className="text-muted-foreground/50">|</span>
+                    <span>CC:</span>
+                    {renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar)}
+                    {email.cc.length > 2 && (
+                      <span>+{email.cc.length - 2}</span>
+                    )}
+                  </>
+                )}
               </div>
-              {/* CC line (mobile - only if present) */}
-              {email.cc && email.cc.length > 0 && (
-                <div className="mt-1 flex items-center gap-1 text-sm">
-                  <span className="text-muted-foreground">CC:</span>
-                  {renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar)}
-                  {email.cc.length > 2 && (
-                    <span className="text-muted-foreground">+{email.cc.length - 2}</span>
-                  )}
-                </div>
-              )}
             </div>
           </div>
         </div>

components/settings/email-settings.tsx

@@ -24,6 +24,7 @@ export function EmailSettings() {
     emailsPerPage,
     externalContentPolicy,
     mailAttachmentAction,
+    attachmentPosition,
     emailAlwaysLightMode,
     archiveMode,
     trustedSenders,
@@ -195,6 +196,17 @@ export function EmailSettings() {
         />
       </SettingItem>
 
+      <SettingItem label={t('attachment_position.label')} description={t('attachment_position.description')}>
+        <Select
+          value={attachmentPosition}
+          onChange={(value) => updateSetting('attachmentPosition', value as 'beside-sender' | 'below-header')}
+          options={[
+            { value: 'beside-sender', label: t('attachment_position.beside-sender') },
+            { value: 'below-header', label: t('attachment_position.below-header') },
+          ]}
+        />
+      </SettingItem>
+
       {/* Emails Per Page */}
       <SettingItem label={t('emails_per_page.label')} description={t('emails_per_page.description')}>
         <Select

eslint.config.mjs

@@ -28,15 +28,18 @@ export default [
     },
     plugins: {
       "@typescript-eslint": tseslint,
-      "react": reactPlugin,
+      react: reactPlugin,
       "react-hooks": reactHooksPlugin,
     },
     rules: {
       ...tseslint.configs.recommended.rules,
-      "@typescript-eslint/no-unused-vars": ["warn", {
+      "@typescript-eslint/no-unused-vars": [
-        argsIgnorePattern: "^_",
+        "warn",
-        varsIgnorePattern: "^_"
+        {
-      }],
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+        },
+      ],
       "@typescript-eslint/no-explicit-any": "warn",
       "@typescript-eslint/no-empty-object-type": "off",
       "react-hooks/rules-of-hooks": "error",

locales/de/common.json

@@ -210,6 +210,7 @@
     "attachments": "Anhänge",
     "important": "Wichtig",
     "download": "Herunterladen",
+    "download_all": "Alle herunterladen",
     "from": "Von",
     "to": "An",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Zurück",
     "next": "Weiter",
-    "send": "Senden"
+    "send": "Senden",
+    "more": "mehr"
   },
   "email_composer": {
     "new_message": "Neue Nachricht",
@@ -753,6 +755,12 @@
         "preview": "Wenn möglich in Vorschau öffnen",
         "download": "Sofort herunterladen"
       },
+      "attachment_position": {
+        "label": "Anhangsposition",
+        "description": "Wo Anhänge im E-Mail-Header angezeigt werden",
+        "beside-sender": "Neben dem Absender",
+        "below-header": "Unter dem Header"
+      },
       "emails_per_page": {
         "25": "25 E-Mails",
         "50": "50 E-Mails",
@@ -1947,6 +1955,12 @@
       "deleted": "Abonnement entfernt",
       "delete_error": "Abonnement konnte nicht entfernt werden",
       "last_refreshed": "Zuletzt aktualisiert: {time}"
+    },
+    "tasks": {
+      "no_tasks": "Keine Aufgaben",
+      "no_title": "(Kein Titel)",
+      "mark_complete": "Als erledigt markieren",
+      "mark_incomplete": "Als unerledigt markieren"
     }
   },
   "advanced_search": {

locales/en/common.json

@@ -210,6 +210,7 @@
     "attachments": "Attachments",
     "important": "Important",
     "download": "Download",
+    "download_all": "Download all",
     "from": "From",
     "to": "To",
     "cc": "CC",
@@ -401,7 +402,8 @@
       "event_status_tentative": "Tentative",
       "event_status_cancelled": "Cancelled"
     },
-    "send": "Send"
+    "send": "Send",
+    "more": "more"
   },
   "email_composer": {
     "new_message": "New Message",
@@ -753,6 +755,12 @@
         "preview": "Preview when possible",
         "download": "Download immediately"
       },
+      "attachment_position": {
+        "label": "Attachment Position",
+        "description": "Where to display attachments in the email header",
+        "beside-sender": "Next to sender",
+        "below-header": "Below header"
+      },
       "emails_per_page": {
         "25": "25 emails",
         "50": "50 emails",
@@ -1947,6 +1955,12 @@
       "deleted": "Subscription removed",
       "delete_error": "Failed to remove subscription",
       "last_refreshed": "Last updated: {time}"
+    },
+    "tasks": {
+      "no_tasks": "No tasks",
+      "no_title": "(No title)",
+      "mark_complete": "Mark as complete",
+      "mark_incomplete": "Mark as incomplete"
     }
   },
   "advanced_search": {

locales/es/common.json

@@ -210,6 +210,7 @@
     "attachments": "Archivos adjuntos",
     "important": "Importante",
     "download": "Descargar",
+    "download_all": "Descargar todo",
     "from": "De",
     "to": "Para",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Anterior",
     "next": "Siguiente",
-    "send": "Enviar"
+    "send": "Enviar",
+    "more": "más"
   },
   "email_composer": {
     "new_message": "Nuevo Mensaje",
@@ -753,6 +755,12 @@
         "preview": "Mostrar vista previa cuando sea posible",
         "download": "Descargar inmediatamente"
       },
+      "attachment_position": {
+        "label": "Posición del adjunto",
+        "description": "Dónde mostrar los adjuntos en el encabezado del correo",
+        "beside-sender": "Junto al remitente",
+        "below-header": "Debajo del encabezado"
+      },
       "emails_per_page": {
         "25": "25 correos",
         "50": "50 correos",
@@ -1947,6 +1955,12 @@
       "deleted": "Suscripción eliminada",
       "delete_error": "No se pudo eliminar la suscripción",
       "last_refreshed": "Última actualización: {time}"
+    },
+    "tasks": {
+      "no_tasks": "Sin tareas",
+      "no_title": "(Sin título)",
+      "mark_complete": "Marcar como completada",
+      "mark_incomplete": "Marcar como incompleta"
     }
   },
   "advanced_search": {

locales/fr/common.json

@@ -210,6 +210,7 @@
     "attachments": "Pièces jointes",
     "important": "Important",
     "download": "Télécharger",
+    "download_all": "Tout télécharger",
     "from": "De",
     "to": "À",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Précédent",
     "next": "Suivant",
-    "send": "Envoyer"
+    "send": "Envoyer",
+    "more": "plus"
   },
   "email_composer": {
     "new_message": "Nouveau message",
@@ -753,6 +755,12 @@
         "preview": "Aperçu si possible",
         "download": "Télécharger immédiatement"
       },
+      "attachment_position": {
+        "label": "Position des pièces jointes",
+        "description": "Où afficher les pièces jointes dans l'en-tête de l'email",
+        "beside-sender": "À côté de l'expéditeur",
+        "below-header": "Sous l'en-tête"
+      },
       "emails_per_page": {
         "25": "25 emails",
         "50": "50 emails",
@@ -1947,6 +1955,12 @@
       "deleted": "Abonnement supprimé",
       "delete_error": "Impossible de supprimer l'abonnement",
       "last_refreshed": "Dernière mise à jour : {time}"
+    },
+    "tasks": {
+      "no_tasks": "Aucune tâche",
+      "no_title": "(Sans titre)",
+      "mark_complete": "Marquer comme terminée",
+      "mark_incomplete": "Marquer comme non terminée"
     }
   },
   "advanced_search": {

locales/it/common.json

@@ -210,6 +210,7 @@
     "attachments": "Allegati",
     "important": "Importante",
     "download": "Scarica",
+    "download_all": "Scarica tutto",
     "from": "Da",
     "to": "A",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Precedente",
     "next": "Successivo",
-    "send": "Invia"
+    "send": "Invia",
+    "more": "altri"
   },
   "email_composer": {
     "new_message": "Nuovo messaggio",
@@ -753,6 +755,12 @@
         "preview": "Anteprima quando possibile",
         "download": "Scarica immediatamente"
       },
+      "attachment_position": {
+        "label": "Posizione degli allegati",
+        "description": "Dove visualizzare gli allegati nell'intestazione dell'email",
+        "beside-sender": "Accanto al mittente",
+        "below-header": "Sotto l'intestazione"
+      },
       "emails_per_page": {
         "25": "25 messaggi",
         "50": "50 messaggi",
@@ -1947,6 +1955,12 @@
       "deleted": "Abbonamento rimosso",
       "delete_error": "Impossibile rimuovere l'abbonamento",
       "last_refreshed": "Ultimo aggiornamento: {time}"
+    },
+    "tasks": {
+      "no_tasks": "Nessuna attività",
+      "no_title": "(Senza titolo)",
+      "mark_complete": "Segna come completata",
+      "mark_incomplete": "Segna come non completata"
     }
   },
   "advanced_search": {

locales/ja/common.json

@@ -210,6 +210,7 @@
     "attachments": "添付ファイル",
     "important": "重要",
     "download": "ダウンロード",
+    "download_all": "すべてダウンロード",
     "from": "送信者",
     "to": "宛先",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "前へ",
     "next": "次へ",
-    "send": "送信"
+    "send": "送信",
+    "more": "他"
   },
   "email_composer": {
     "new_message": "新規メッセージ",
@@ -753,6 +755,12 @@
         "preview": "可能ならプレビューを開く",
         "download": "すぐにダウンロード"
       },
+      "attachment_position": {
+        "label": "添付ファイルの位置",
+        "description": "メールヘッダー内での添付ファイルの表示位置",
+        "beside-sender": "送信者の横",
+        "below-header": "ヘッダーの下"
+      },
       "emails_per_page": {
         "25": "25件",
         "50": "50件",
@@ -1947,6 +1955,12 @@
       "deleted": "購読を解除しました",
       "delete_error": "購読の解除に失敗しました",
       "last_refreshed": "最終更新: {time}"
+    },
+    "tasks": {
+      "no_tasks": "タスクなし",
+      "no_title": "(タイトルなし)",
+      "mark_complete": "完了にする",
+      "mark_incomplete": "未完了にする"
     }
   },
   "advanced_search": {

locales/nl/common.json

@@ -210,6 +210,7 @@
     "attachments": "Bijlagen",
     "important": "Belangrijk",
     "download": "Downloaden",
+    "download_all": "Alles downloaden",
     "from": "Van",
     "to": "Aan",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Vorige",
     "next": "Volgende",
-    "send": "Verzenden"
+    "send": "Verzenden",
+    "more": "meer"
   },
   "email_composer": {
     "new_message": "Nieuw bericht",
@@ -753,6 +755,12 @@
         "preview": "Voorbeeld tonen indien mogelijk",
         "download": "Direct downloaden"
       },
+      "attachment_position": {
+        "label": "Positie van bijlagen",
+        "description": "Waar bijlagen in de e-mailkop worden weergegeven",
+        "beside-sender": "Naast de afzender",
+        "below-header": "Onder de kop"
+      },
       "emails_per_page": {
         "25": "25 e-mails",
         "50": "50 e-mails",
@@ -1947,6 +1955,12 @@
       "deleted": "Abonnement verwijderd",
       "delete_error": "Kan abonnement niet verwijderen",
       "last_refreshed": "Laatst bijgewerkt: {time}"
+    },
+    "tasks": {
+      "no_tasks": "Geen taken",
+      "no_title": "(Geen titel)",
+      "mark_complete": "Markeren als voltooid",
+      "mark_incomplete": "Markeren als onvoltooid"
     }
   },
   "advanced_search": {

locales/pt/common.json

@@ -210,6 +210,7 @@
     "attachments": "Anexos",
     "important": "Importante",
     "download": "Baixar",
+    "download_all": "Baixar tudo",
     "from": "De",
     "to": "Para",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Anterior",
     "next": "Próximo",
-    "send": "Enviar"
+    "send": "Enviar",
+    "more": "mais"
   },
   "email_composer": {
     "new_message": "Nova Mensagem",
@@ -753,6 +755,12 @@
         "preview": "Visualizar quando possível",
         "download": "Baixar imediatamente"
       },
+      "attachment_position": {
+        "label": "Posição dos anexos",
+        "description": "Onde exibir os anexos no cabeçalho do e-mail",
+        "beside-sender": "Ao lado do remetente",
+        "below-header": "Abaixo do cabeçalho"
+      },
       "emails_per_page": {
         "25": "25 e-mails",
         "50": "50 e-mails",
@@ -1947,6 +1955,12 @@
       "deleted": "Assinatura removida",
       "delete_error": "Falha ao remover assinatura",
       "last_refreshed": "Última atualização: {time}"
+    },
+    "tasks": {
+      "no_tasks": "Sem tarefas",
+      "no_title": "(Sem título)",
+      "mark_complete": "Marcar como concluída",
+      "mark_incomplete": "Marcar como não concluída"
     }
   },
   "advanced_search": {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "bulwark-webmail",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bulwark-webmail",
-      "version": "1.4.3",
+      "version": "1.4.4",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@tanstack/react-virtual": "^3.13.18",
@@ -5480,9 +5480,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.3",
+      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },

package.json

@@ -77,6 +77,7 @@
   },
   "overrides": {
     "elliptic": "^6.6.1",
+    "flatted": "^3.4.2",
     "undici": "^7.24.0"
   }
 }

stores/auth-store.ts

@@ -741,23 +741,39 @@ export const useAuthStore = create<AuthState>()(
             }
           } catch (err) {
             debug.error(`Failed to restore client for ${accountId}:`, err);
-            accountStore.updateAccount(accountId, {
-              isConnected: false,
-              hasError: true,
-              errorMessage: err instanceof Error ? err.message : 'Connection failed',
-            });
-            set({ isLoading: false });
-            return;
           }
         }
 
         if (!targetClient) {
-          accountStore.updateAccount(accountId, {
+          // Cannot restore — remove the stale account and redirect to login
-            isConnected: false,
+          evictAccount(accountId);
-            hasError: true,
+          accountStore.removeAccount(accountId);
-            errorMessage: 'Unable to restore session',
+          fetch(`/api/auth/session?slot=${targetAccount.cookieSlot}`, { method: 'DELETE' }).catch(() => {});
-          });
+
+          // Restore the previous account if still available
+          if (state.activeAccountId && state.activeAccountId !== accountId) {
+            const prevClient = clients.get(state.activeAccountId);
+            const prevAccount = accountStore.getAccountById(state.activeAccountId);
+            if (prevClient && prevAccount) {
+              restoreAccount(state.activeAccountId);
+              accountStore.setActiveAccount(state.activeAccountId);
+              set({
+                isLoading: false,
+                serverUrl: prevAccount.serverUrl,
+                username: prevAccount.username,
+                client: prevClient,
+                authMode: prevAccount.authMode,
+                rememberMe: prevAccount.rememberMe,
+                connectionLost: false,
+                activeAccountId: state.activeAccountId,
+              });
+              return;
+            }
+          }
+
           set({ isLoading: false });
+          // Redirect to login so the user can re-authenticate
+          replaceWindowLocation(getLocaleLoginPath());
           return;
         }
 
@@ -865,11 +881,11 @@ export const useAuthStore = create<AuthState>()(
               }
             } catch (err) {
               debug.error(`Failed to restore account ${account.id}:`, err);
-              accountStore.updateAccount(account.id, {
+              // Remove unrestorable accounts so the user is prompted to log in
-                isConnected: false,
+              // again rather than seeing a stale error entry forever.
-                hasError: true,
+              evictAccount(account.id);
-                errorMessage: err instanceof Error ? err.message : 'Restore failed',
+              accountStore.removeAccount(account.id);
-              });
+              fetch(`/api/auth/session?slot=${account.cookieSlot}`, { method: 'DELETE' }).catch(() => {});
             }
           }
 

stores/calendar-store.ts

@@ -655,6 +655,7 @@ export const useCalendarStore = create<CalendarStore>()(
 
         return {
           ...mergedState,
+          selectedDate: new Date(),
           viewMode: getSafeCalendarViewMode(mergedState.viewMode),
         };
       },

stores/settings-store.ts

@@ -29,6 +29,7 @@ export type TimeFormat = '12h' | '24h';
 export type FirstDayOfWeek = 0 | 1; // 0 = Sunday, 1 = Monday
 export type ExternalContentPolicy = 'ask' | 'block' | 'allow';
 export type MailAttachmentAction = 'preview' | 'download';
+export type AttachmentPosition = 'beside-sender' | 'below-header';
 export type ToolbarPosition = 'top' | 'below-subject';
 export type ArchiveMode = 'single' | 'year' | 'month';
 
@@ -92,6 +93,7 @@ interface SettingsState {
   emailsPerPage: number;
   externalContentPolicy: ExternalContentPolicy;
   mailAttachmentAction: MailAttachmentAction;
+  attachmentPosition: AttachmentPosition;
   emailAlwaysLightMode: boolean; // Always render email content in light mode
   archiveMode: ArchiveMode; // How to organize archived emails: single folder, by year, or by year+month
 
@@ -186,6 +188,7 @@ const DEFAULT_SETTINGS = {
   emailsPerPage: 50,
   externalContentPolicy: 'ask' as ExternalContentPolicy,
   mailAttachmentAction: 'preview' as MailAttachmentAction,
+  attachmentPosition: 'beside-sender' as AttachmentPosition,
   emailAlwaysLightMode: false,
   archiveMode: 'single' as ArchiveMode,
 
@@ -271,6 +274,7 @@ export const useSettingsStore = create<SettingsState>()(
           emailsPerPage: state.emailsPerPage,
           externalContentPolicy: state.externalContentPolicy,
           mailAttachmentAction: state.mailAttachmentAction,
+          attachmentPosition: state.attachmentPosition,
           archiveMode: state.archiveMode,
           trustedSenders: state.trustedSenders,
           autoSaveDraftInterval: state.autoSaveDraftInterval,