From ef085ca03c026f9a7897a59110eacef61a72786f Mon Sep 17 00:00:00 2001
From: Phillip Carter <pcarter@fastmail.com>
Date: Fri, 24 Jul 2026 09:42:20 -0700
Subject: [PATCH] Phase 2 of UX overhaul

---
 src/app/(inbox)/calendar/page.tsx          |  31 +++--
 src/app/(inbox)/settings/SignatureForm.tsx | 143 +++++++++++++++++----
 src/app/(inbox)/settings/page.tsx          |  45 ++++---
 src/app/layout.tsx                         |  36 +++---
 src/app/login/page.tsx                     |  33 ++++-
 src/components/AttachmentList.tsx          |  25 ++--
 src/components/CalendarEventCard.tsx       |  21 ++-
 src/components/EmailDetailView.tsx         |  43 ++++---
 src/components/LoadingSkeletons.tsx        |  49 ++++---
 src/components/MarkUnreadButton.tsx        |  20 ++-
 src/components/MobileNav.tsx               |  22 ++--
 src/components/NotSpamButton.tsx           |  14 +-
 src/components/PinButton.tsx               |  11 ++
 src/components/Popover.tsx                 | 108 ++++++++++++++++
 src/components/SpreadsheetViewer.tsx       |  28 ++--
 src/components/ThreadView.tsx              |  29 +++--
 src/components/ToastProvider.tsx           |  23 ++++
 src/components/useModalDialog.ts           |  73 +++++++++++
 src/lib/__tests__/compose.test.ts          |  14 ++
 src/lib/compose.ts                         |   5 +
 20 files changed, 594 insertions(+), 179 deletions(-)
 create mode 100644 src/components/Popover.tsx
 create mode 100644 src/components/useModalDialog.ts

diff --git a/src/app/(inbox)/calendar/page.tsx b/src/app/(inbox)/calendar/page.tsx
index e0835f6..8cbcefe 100644
--- a/src/app/(inbox)/calendar/page.tsx
+++ b/src/app/(inbox)/calendar/page.tsx
@@ -67,36 +67,43 @@ export default async function CalendarPage({ searchParams }: Props) {
             </p>
           </div>
 
-          <div className="flex items-center gap-2">
+          <div className="flex w-full items-center gap-2 md:w-auto">
             {monthKey !== currentMonthKey && (
               <Link
                 href={`/calendar?month=${currentMonthKey}`}
-                className="min-h-10 rounded-md border border-stone-200 px-3 text-xs text-stone-600 transition-colors inline-flex items-center hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100"
+                className="inline-flex min-h-10 items-center rounded-md border border-stone-200 px-3 text-xs text-stone-600 transition-colors hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100"
               >
                 Today
               </Link>
             )}
             <Link
               href={`/calendar?month=${addMonths(monthKey, -1)}`}
-              className="inline-flex min-h-10 items-center rounded-md border border-stone-200 px-3 text-xs text-stone-600 transition-colors hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100"
+              aria-label="Previous month"
+              className="inline-flex min-h-10 min-w-10 items-center justify-center rounded-md border border-stone-200 px-2 text-xs text-stone-600 transition-colors hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100 sm:px-3"
             >
-              Prev
+              <span aria-hidden="true">←</span>
+              <span className="ml-1 hidden sm:inline">Previous</span>
             </Link>
-            <div className="min-w-40 text-center text-sm font-medium text-stone-800 dark:text-stone-200">
+            <h2 className="min-w-0 flex-1 text-center text-sm font-medium text-stone-800 dark:text-stone-200 md:min-w-40">
               {monthTitle(monthKey)}
-            </div>
+            </h2>
             <Link
               href={`/calendar?month=${addMonths(monthKey, 1)}`}
-              className="inline-flex min-h-10 items-center rounded-md border border-stone-200 px-3 text-xs text-stone-600 transition-colors hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100"
+              aria-label="Next month"
+              className="inline-flex min-h-10 min-w-10 items-center justify-center rounded-md border border-stone-200 px-2 text-xs text-stone-600 transition-colors hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100 sm:px-3"
             >
-              Next
+              <span className="mr-1 hidden sm:inline">Next</span>
+              <span aria-hidden="true">→</span>
             </Link>
           </div>
         </div>
 
         <MobileCalendarAgenda monthKey={monthKey} entries={monthEntries} />
 
-        <div className="hidden md:block rounded-xl overflow-hidden border border-stone-200 dark:border-stone-700 bg-stone-200 dark:bg-stone-700">
+        <div
+          className="hidden overflow-hidden rounded-xl border border-stone-200 bg-stone-200 dark:border-stone-700 dark:bg-stone-700 md:block"
+          aria-label={`${monthTitle(monthKey)} calendar`}
+        >
               <div className="grid grid-cols-7">
                 {DAY_LABELS.map((label) => (
                   <div
@@ -116,7 +123,9 @@ export default async function CalendarPage({ searchParams }: Props) {
                     ].join(" ")}
                   >
                     <div className="mb-2 flex items-center justify-between">
-                      <span
+                      <time
+                        dateTime={day.key}
+                        aria-current={day.isToday ? "date" : undefined}
                         className={[
                           "inline-flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium",
                           day.isToday
@@ -127,7 +136,7 @@ export default async function CalendarPage({ searchParams }: Props) {
                         ].join(" ")}
                       >
                         {day.date.getDate()}
-                      </span>
+                      </time>
                     </div>
                     <div className="space-y-1.5">
                       {day.events.map((event) => (
diff --git a/src/app/(inbox)/settings/SignatureForm.tsx b/src/app/(inbox)/settings/SignatureForm.tsx
index e96cbfe..470b2e8 100644
--- a/src/app/(inbox)/settings/SignatureForm.tsx
+++ b/src/app/(inbox)/settings/SignatureForm.tsx
@@ -1,8 +1,12 @@
 "use client";
 
-import { useState, useTransition } from "react";
+import { useEffect, useState, useTransition } from "react";
 import { saveSignatureAction } from "./actions";
-import { stripSignatureSeparator } from "@/lib/compose";
+import {
+  formatSignatureForSave,
+  stripSignatureSeparator,
+} from "@/lib/compose";
+import { useToast } from "@/components/ToastProvider";
 
 interface Props {
   identityLabel?: string;
@@ -16,53 +20,144 @@ function stripSepPrefix(sig: string): string {
 }
 
 export default function SignatureForm({ identityLabel, initialSignature }: Props) {
-  const [value, setValue] = useState(() => stripSepPrefix(initialSignature));
-  const [saved, setSaved] = useState(false);
+  const initialValue = stripSepPrefix(initialSignature);
+  const [value, setValue] = useState(initialValue);
+  const [savedValue, setSavedValue] = useState(initialValue);
   const [error, setError] = useState<string | null>(null);
   const [isPending, startTransition] = useTransition();
+  const showToast = useToast();
+  const dirty = value !== savedValue;
+
+  useEffect(() => {
+    if (!dirty) return;
+    function warnBeforeUnload(event: BeforeUnloadEvent) {
+      event.preventDefault();
+    }
+    window.addEventListener("beforeunload", warnBeforeUnload);
+    return () => window.removeEventListener("beforeunload", warnBeforeUnload);
+  }, [dirty]);
 
   function handleSave() {
+    if (!dirty || isPending) return;
     setError(null);
-    setSaved(false);
     startTransition(async () => {
       try {
         // Re-add the `-- \n` prefix so Fastmail stores it in standard format,
         // which other mail clients (Fastmail web, mobile apps) also expect.
-        const toSave = value.trim() ? `-- \n${value.trim()}` : "";
+        const normalized = value.trim();
+        const toSave = formatSignatureForSave(value);
         await saveSignatureAction(toSave);
-        setSaved(true);
+        setValue(normalized);
+        setSavedValue(normalized);
+        showToast({ message: "Signature saved" });
       } catch (e) {
-        setError(e instanceof Error ? e.message : "Failed to save");
+        const message = e instanceof Error ? e.message : "Failed to save";
+        setError(message);
+        showToast({ message: "Couldn’t save the signature.", tone: "error" });
       }
     });
   }
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-5">
       {identityLabel && (
-        <p className="text-xs text-stone-500 dark:text-stone-400 font-mono">{identityLabel}</p>
+        <div className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-2.5 dark:border-stone-700 dark:bg-stone-900/60">
+          <p className="text-[11px] font-medium uppercase tracking-wide text-stone-400 dark:text-stone-500">
+            Sending as
+          </p>
+          <p className="mt-1 break-all text-xs text-stone-600 dark:text-stone-300">
+            {identityLabel}
+          </p>
+        </div>
       )}
-      <textarea
-        value={value}
-        onChange={(e) => { setValue(e.target.value); setSaved(false); }}
-        rows={6}
-        placeholder="Your signature here…"
-        className="w-full text-sm font-mono text-stone-700 dark:text-stone-300 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-lg px-4 py-3 resize-y outline-none focus:border-stone-400 dark:focus:border-stone-500 placeholder:text-stone-300 dark:placeholder:text-stone-600"
-      />
+      <div>
+        <label
+          htmlFor="signature"
+          className="mb-2 block text-xs font-medium text-stone-600 dark:text-stone-300"
+        >
+          Signature text
+        </label>
+        <textarea
+          id="signature"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={(event) => {
+            if (
+              event.key.toLowerCase() === "s" &&
+              (event.metaKey || event.ctrlKey)
+            ) {
+              event.preventDefault();
+              handleSave();
+            }
+          }}
+          rows={6}
+          placeholder="Your signature here…"
+          aria-describedby="signature-help signature-status"
+          className="w-full resize-y rounded-lg border border-stone-200 bg-white px-4 py-3 font-mono text-sm leading-relaxed text-stone-700 outline-none placeholder:text-stone-300 focus:border-stone-400 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-300 dark:placeholder:text-stone-600 dark:focus:border-stone-500"
+        />
+        <p
+          id="signature-help"
+          className="mt-2 text-xs text-stone-400 dark:text-stone-500"
+        >
+          Plain text · ⌘S or Ctrl+S to save
+        </p>
+      </div>
+
+      <div>
+        <p className="mb-2 text-xs font-medium text-stone-600 dark:text-stone-300">
+          Preview
+        </p>
+        <div className="min-h-28 rounded-lg border border-stone-200 bg-stone-50 px-4 py-3 text-sm leading-relaxed text-stone-600 dark:border-stone-700 dark:bg-stone-900/60 dark:text-stone-300">
+          {value.trim() ? (
+            <div className="whitespace-pre-wrap">
+              <span className="text-stone-400 dark:text-stone-500">--</span>
+              {"\n"}
+              {value.trim()}
+            </div>
+          ) : (
+            <span className="text-stone-400 dark:text-stone-500">
+              No signature will be added.
+            </span>
+          )}
+        </div>
+      </div>
+
       <div className="flex items-center gap-3">
         <button
+          type="button"
           onClick={handleSave}
-          disabled={isPending}
-          className="text-sm bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900 px-4 py-2 rounded-lg hover:bg-stone-700 dark:hover:bg-stone-300 transition-colors disabled:opacity-50"
+          disabled={isPending || !dirty}
+          className="min-h-10 rounded-lg bg-stone-900 px-4 text-sm font-medium text-white transition-colors hover:bg-stone-700 disabled:opacity-40 dark:bg-stone-100 dark:text-stone-900 dark:hover:bg-stone-300"
         >
           {isPending ? "Saving…" : "Save"}
         </button>
-        {saved && (
-          <span className="text-xs text-green-600 dark:text-green-400">Saved</span>
-        )}
-        {error && (
-          <span className="text-xs text-red-500">{error}</span>
+        {dirty && !isPending && (
+          <button
+            type="button"
+            onClick={() => {
+              setValue(savedValue);
+              setError(null);
+            }}
+            className="min-h-10 rounded-lg px-3 text-xs text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-800 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100"
+          >
+            Reset
+          </button>
         )}
+        <span
+          id="signature-status"
+          className={[
+            "ml-auto text-xs",
+            error
+              ? "text-red-500 dark:text-red-400"
+              : dirty
+                ? "text-amber-600 dark:text-amber-400"
+                : "text-stone-400 dark:text-stone-500",
+          ].join(" ")}
+          role={error ? "alert" : "status"}
+          aria-live="polite"
+        >
+          {error || (dirty ? "Unsaved changes" : "Up to date")}
+        </span>
       </div>
     </div>
   );
diff --git a/src/app/(inbox)/settings/page.tsx b/src/app/(inbox)/settings/page.tsx
index d2c15a9..39fe5d8 100644
--- a/src/app/(inbox)/settings/page.tsx
+++ b/src/app/(inbox)/settings/page.tsx
@@ -9,25 +9,34 @@ export default async function SettingsPage() {
   const identity = identities.find((i) => i.mayDelete === false) ?? identities[0];
 
   return (
-    <div className="overflow-y-auto h-full bg-stone-50 dark:bg-stone-900">
-      <div className="max-w-2xl mx-auto px-8 py-8">
-        <MobileBackButton label="Inbox" />
-        <h1 className="text-xl font-semibold text-stone-900 dark:text-stone-100 mb-8">
-          Settings
-        </h1>
-
-        <section>
-          <h2 className="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-1">
-            Email signature
-          </h2>
-          <p className="text-xs text-stone-400 dark:text-stone-500 mb-4">
-            Appended to new messages and replies. The{" "}
-            <code className="font-mono">--</code> separator is added automatically.
+    <div className="h-full overflow-y-auto bg-stone-50 dark:bg-stone-900">
+      <div className="mx-auto max-w-2xl px-4 py-6 sm:px-8 sm:py-8">
+        <MobileBackButton label="Inbox" compact />
+        <div className="mb-7">
+          <h1 className="text-xl font-semibold text-stone-900 dark:text-stone-100">
+            Settings
+          </h1>
+          <p className="mt-1 text-sm text-stone-500 dark:text-stone-400">
+            Personalize how your outgoing mail appears.
           </p>
-          <SignatureForm
-            identityLabel={identity ? `${identity.name} <${identity.email}>` : undefined}
-            initialSignature={identity?.textSignature ?? ""}
-          />
+        </div>
+
+        <section className="overflow-hidden rounded-xl border border-stone-200 bg-white shadow-sm dark:border-stone-700 dark:bg-stone-800/40">
+          <div className="border-b border-stone-100 px-5 py-4 dark:border-stone-700/70">
+            <h2 className="text-sm font-semibold text-stone-700 dark:text-stone-200">
+              Email signature
+            </h2>
+            <p className="mt-1 text-xs leading-relaxed text-stone-400 dark:text-stone-500">
+              Appended to new messages and replies. The{" "}
+              <code className="font-mono">--</code> separator is added automatically.
+            </p>
+          </div>
+          <div className="p-5">
+            <SignatureForm
+              identityLabel={identity ? `${identity.name} <${identity.email}>` : undefined}
+              initialSignature={identity?.textSignature ?? ""}
+            />
+          </div>
         </section>
       </div>
     </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 50abe37..2c9f9a4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -63,22 +63,22 @@ export default async function RootLayout({
             {/* Row: desktop sidebar + main content */}
             <div className="flex flex-1 min-h-0 overflow-hidden">
               {/* Sidebar — desktop only */}
-              <nav className="hidden lg:flex print:hidden w-52 shrink-0 flex-col bg-white dark:bg-stone-950 border-r border-stone-200 dark:border-stone-800 px-3 py-5">
-                <div className="mb-6 flex items-center gap-2.5 px-2">
-                  <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-stone-900 text-white dark:bg-stone-100 dark:text-stone-900">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75} className="h-4 w-4" aria-hidden="true">
-                      <rect x="3" y="5" width="18" height="14" rx="2.5" />
-                      <path d="m4 7 7 5.5a1.6 1.6 0 0 0 2 0L20 7" />
-                    </svg>
-                  </span>
-                  <span className="text-base font-semibold tracking-tight text-stone-900 dark:text-stone-100">
-                    Mail
-                  </span>
-                </div>
+              {session && (
+                <nav className="hidden lg:flex print:hidden w-52 shrink-0 flex-col bg-white dark:bg-stone-950 border-r border-stone-200 dark:border-stone-800 px-3 py-5">
+                  <div className="mb-6 flex items-center gap-2.5 px-2">
+                    <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-stone-900 text-white dark:bg-stone-100 dark:text-stone-900">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75} className="h-4 w-4" aria-hidden="true">
+                        <rect x="3" y="5" width="18" height="14" rx="2.5" />
+                        <path d="m4 7 7 5.5a1.6 1.6 0 0 0 2 0L20 7" />
+                      </svg>
+                    </span>
+                    <span className="text-base font-semibold tracking-tight text-stone-900 dark:text-stone-100">
+                      Mail
+                    </span>
+                  </div>
 
-                <DesktopNav />
+                  <DesktopNav />
 
-                {session && (
                   <form
                     className="mt-1"
                     action={async () => {
@@ -93,15 +93,17 @@ export default async function RootLayout({
                       Sign out
                     </button>
                   </form>
-                )}
-              </nav>
+                </nav>
+              )}
 
               {/* Main content */}
               <main className="flex-1 overflow-hidden min-w-0 h-full">{children}</main>
             </div>
 
             {/* Mobile bottom nav — hidden on desktop */}
-            <div className="print:hidden"><MobileNav /></div>
+            {session && (
+              <div className="print:hidden"><MobileNav /></div>
+            )}
           </ToastProvider>
         </UnreadCountProvider>
       </body>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index de38f85..573a8c3 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -2,9 +2,31 @@ import { signIn } from "@/auth";
 
 export default function LoginPage() {
   return (
-    <div className="flex items-center justify-center min-h-screen bg-white">
-      <div className="flex flex-col items-center gap-6">
-        <h1 className="text-xl font-semibold text-zinc-900">Mail</h1>
+    <div className="flex min-h-screen items-center justify-center bg-stone-50 px-5 dark:bg-stone-950">
+      <div className="w-full max-w-sm rounded-2xl border border-stone-200 bg-white p-7 shadow-sm dark:border-stone-800 dark:bg-stone-900">
+        <div className="mb-7 flex items-center gap-3">
+          <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-stone-900 text-white dark:bg-stone-100 dark:text-stone-900">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={1.75}
+              className="h-5 w-5"
+              aria-hidden="true"
+            >
+              <rect x="3" y="5" width="18" height="14" rx="2.5" />
+              <path d="m4 7 7 5.5a1.6 1.6 0 0 0 2 0L20 7" />
+            </svg>
+          </span>
+          <div>
+            <h1 className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+              Mail
+            </h1>
+            <p className="text-xs text-stone-400 dark:text-stone-500">
+              Your inbox, without the noise.
+            </p>
+          </div>
+        </div>
         <form
           action={async () => {
             "use server";
@@ -13,11 +35,14 @@ export default function LoginPage() {
         >
           <button
             type="submit"
-            className="text-sm bg-zinc-900 text-white px-5 py-2.5 rounded hover:bg-zinc-700 transition-colors"
+            className="min-h-11 w-full rounded-lg bg-stone-900 px-5 text-sm font-medium text-white transition-colors hover:bg-stone-700 dark:bg-stone-100 dark:text-stone-900 dark:hover:bg-stone-300"
           >
             Sign in with Google
           </button>
         </form>
+        <p className="mt-4 text-center text-[11px] leading-relaxed text-stone-400 dark:text-stone-500">
+          Sign in to connect your existing mailbox.
+        </p>
       </div>
     </div>
   );
diff --git a/src/components/AttachmentList.tsx b/src/components/AttachmentList.tsx
index 23e3dd5..94ce1ba 100644
--- a/src/components/AttachmentList.tsx
+++ b/src/components/AttachmentList.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import SpreadsheetViewer from "@/components/SpreadsheetViewer";
 import useBodyClass from "@/components/useBodyClass";
+import useModalDialog from "@/components/useModalDialog";
 import { visibleAttachments } from "@/lib/attachments";
 import { isSpreadsheetAttachment } from "@/lib/spreadsheet";
 import { EmailBodyPart } from "@/lib/types";
@@ -40,26 +41,24 @@ interface PdfModalProps {
 
 function PdfModal({ attachment, onClose }: PdfModalProps) {
   const name = attachment.name ?? "document.pdf";
+  const dialogRef = useModalDialog(onClose);
 
   useBodyClass("rich-content-open");
 
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
-    }
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
-
   return (
     <div
+      ref={dialogRef}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="pdf-preview-title"
+      tabIndex={-1}
       className="fixed inset-0 z-50 flex flex-col bg-black/60 backdrop-blur-sm"
       onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
     >
       {/* Header bar */}
       <div className="flex items-center gap-3 px-4 py-3 bg-white dark:bg-stone-900 border-b border-stone-200 dark:border-stone-700 shrink-0">
-        <span className="text-base leading-none">📄</span>
-        <span className="flex-1 text-sm font-medium text-stone-800 dark:text-stone-200 truncate">
+        <span className="text-base leading-none" aria-hidden="true">📄</span>
+        <span id="pdf-preview-title" className="flex-1 text-sm font-medium text-stone-800 dark:text-stone-200 truncate">
           {name}
         </span>
         <span className="text-xs text-stone-400 dark:text-stone-500 shrink-0">
@@ -68,7 +67,7 @@ function PdfModal({ attachment, onClose }: PdfModalProps) {
         <a
           href={downloadUrl(attachment)}
           download={name}
-          className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-md border border-stone-200 dark:border-stone-700 text-stone-600 dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-800 hover:text-stone-900 dark:hover:text-stone-100 transition-colors shrink-0"
+          className="flex min-h-10 items-center gap-1.5 rounded-md border border-stone-200 px-3 text-xs text-stone-600 transition-colors hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100 shrink-0"
         >
           {/* Download icon */}
           <svg viewBox="0 0 20 20" fill="currentColor" className="w-3.5 h-3.5">
@@ -79,7 +78,7 @@ function PdfModal({ attachment, onClose }: PdfModalProps) {
         </a>
         <button
           onClick={onClose}
-          className="p-1.5 rounded-md text-stone-400 dark:text-stone-500 hover:bg-stone-100 dark:hover:bg-stone-800 hover:text-stone-700 dark:hover:text-stone-300 transition-colors shrink-0"
+          className="flex h-10 w-10 items-center justify-center rounded-md text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-700 dark:text-stone-500 dark:hover:bg-stone-800 dark:hover:text-stone-300 shrink-0"
           aria-label="Close"
         >
           <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
diff --git a/src/components/CalendarEventCard.tsx b/src/components/CalendarEventCard.tsx
index 36575b5..9d7e8e8 100644
--- a/src/components/CalendarEventCard.tsx
+++ b/src/components/CalendarEventCard.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { sendCalendarReplyAction } from "@/app/(inbox)/email/[id]/actions";
+import { useToast } from "@/components/ToastProvider";
 
 export interface CalendarEventData {
   uid: string;
@@ -122,6 +123,7 @@ export default function CalendarEventCard({ event, persistedResponse, onResponse
   const [sentResponse, setSentResponse] = useState<Response | null>(initial);
   const [pendingResponse, setPendingResponse] = useState<Response | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const showToast = useToast();
 
   const isCancelled = event.method === "CANCEL";
   const isBusy = pendingResponse !== null;
@@ -134,8 +136,20 @@ export default function CalendarEventCard({ event, persistedResponse, onResponse
       await sendCalendarReplyAction(event.icsText, response, event.emailId, event.inReplyToMessageId);
       setSentResponse(response);
       onResponseSent?.(response);
+      const label =
+        response === "ACCEPTED"
+          ? "Invitation accepted"
+          : response === "DECLINED"
+            ? "Invitation declined"
+            : "Marked as maybe";
+      showToast({ message: label });
     } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to send response");
+      const message = e instanceof Error ? e.message : "Failed to send response";
+      setError(message);
+      showToast({
+        message: "Couldn’t send your calendar response.",
+        tone: "error",
+      });
     } finally {
       setPendingResponse(null);
     }
@@ -203,8 +217,9 @@ export default function CalendarEventCard({ event, persistedResponse, onResponse
                   key={response}
                   onClick={() => respond(response)}
                   disabled={isBusy}
+                  aria-pressed={isSent}
                   className={[
-                    "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md border transition-colors disabled:cursor-default",
+                    "inline-flex min-h-10 items-center gap-1.5 rounded-md border px-3 text-xs transition-colors disabled:cursor-default",
                     isSent || isPending ? active : IDLE,
                     isBusy && !isSent && !isPending ? "opacity-40" : "",
                   ].join(" ")}
@@ -216,7 +231,7 @@ export default function CalendarEventCard({ event, persistedResponse, onResponse
               );
             })}
             {error && (
-              <p className="w-full text-xs text-red-500 dark:text-red-400 mt-1">{error}</p>
+              <p role="alert" className="mt-1 w-full text-xs text-red-500 dark:text-red-400">{error}</p>
             )}
           </>
         )}
diff --git a/src/components/EmailDetailView.tsx b/src/components/EmailDetailView.tsx
index 0e54da6..882af07 100644
--- a/src/components/EmailDetailView.tsx
+++ b/src/components/EmailDetailView.tsx
@@ -11,6 +11,7 @@ import NotSpamButton from "@/components/NotSpamButton";
 import { getJmapMailboxContext } from "@/lib/jmapServer";
 import SenderAvatar from "@/components/SenderAvatar";
 import MailIcon from "@/components/MailIcon";
+import Popover from "@/components/Popover";
 
 interface Props {
   email: Email;
@@ -88,11 +89,15 @@ export default async function EmailDetailView({ email, downloadUrl, accountId }:
             </div>
             <div className="mt-0.5 flex items-center gap-2 text-xs text-stone-400 dark:text-stone-500">
               <span className="truncate">{recipientSummary}</span>
-              <details className="relative shrink-0">
-                <summary className="cursor-pointer list-none rounded px-1 py-0.5 text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-stone-200 [&::-webkit-details-marker]:hidden">
-                  Details
-                </summary>
-                <dl className="absolute left-0 top-full z-20 mt-2 grid w-[min(28rem,calc(100vw-3rem))] grid-cols-[max-content_1fr] gap-x-3 gap-y-1.5 rounded-lg border border-stone-200 bg-white p-3 text-xs shadow-lg dark:border-stone-700 dark:bg-stone-900">
+              <Popover
+                label="Message details"
+                role="dialog"
+                align="left"
+                trigger={<span>Details</span>}
+                triggerClassName="rounded px-1 py-0.5 text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-stone-200"
+                contentClassName="w-[min(28rem,calc(100vw-3rem))] rounded-lg border border-stone-200 bg-white p-3 text-xs shadow-lg dark:border-stone-700 dark:bg-stone-900"
+              >
+                <dl className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1.5">
                   <dt className="text-stone-400 dark:text-stone-500">From</dt>
                   <dd className="break-all text-stone-700 dark:text-stone-300">
                     {formatAddressList(email.from)}
@@ -122,7 +127,7 @@ export default async function EmailDetailView({ email, downloadUrl, accountId }:
                     </>
                   ) : null}
                 </dl>
-              </details>
+              </Popover>
             </div>
           </div>
         </div>
@@ -156,27 +161,33 @@ export default async function EmailDetailView({ email, downloadUrl, accountId }:
               initiallyPinned={!!email.keywords?.["$flagged"]}
             />
             <MarkUnreadButton emailId={email.id} />
-            <details className="relative">
-              <summary className="flex min-h-9 cursor-pointer list-none items-center gap-1 rounded-md border border-stone-200 px-3 text-xs text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-stone-100 [&::-webkit-details-marker]:hidden">
-                More
-                <MailIcon name="chevronDown" className="h-3.5 w-3.5" />
-              </summary>
-              <div className="absolute right-0 top-full z-20 mt-1 min-w-36 overflow-hidden rounded-lg border border-stone-200 bg-white py-1 text-sm shadow-lg dark:border-stone-700 dark:bg-stone-900">
+            <Popover
+              label="More message actions"
+              trigger={
+                <>
+                  More
+                  <MailIcon name="chevronDown" className="h-3.5 w-3.5" />
+                </>
+              }
+              triggerClassName="flex min-h-10 items-center gap-1 rounded-md border border-stone-200 px-3 text-xs text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-stone-100"
+              contentClassName="min-w-36 overflow-hidden rounded-lg border border-stone-200 bg-white py-1 text-sm shadow-lg dark:border-stone-700 dark:bg-stone-900"
+            >
                 <Link
                   href={`/compose?mode=forward&id=${email.id}`}
-                  className="block px-3 py-2 text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800"
+                  role="menuitem"
+                  className="block px-3 py-2.5 text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800"
                 >
                   Forward
                 </Link>
                 <Link
                   href={`/print/${email.id}`}
                   target="_blank"
-                  className="block px-3 py-2 text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800"
+                  role="menuitem"
+                  className="block px-3 py-2.5 text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800"
                 >
                   Print
                 </Link>
-              </div>
-            </details>
+            </Popover>
           </div>
         </div>
       </div>
diff --git a/src/components/LoadingSkeletons.tsx b/src/components/LoadingSkeletons.tsx
index f09eddb..e7c3291 100644
--- a/src/components/LoadingSkeletons.tsx
+++ b/src/components/LoadingSkeletons.tsx
@@ -74,39 +74,34 @@ export function MessageLoadingSkeleton() {
     >
       <div className="mx-auto max-w-4xl px-4 py-6 sm:px-8 sm:py-8">
         <div className="animate-pulse">
-          <SkeletonBar className="mb-6 h-7 w-[min(34rem,78%)]" />
+          <SkeletonBar className="mb-5 h-4 w-16 lg:hidden" />
+          <SkeletonBar className="mb-5 h-7 w-[min(34rem,78%)]" />
 
-          <div className="mb-5 grid grid-cols-[3rem_1fr] gap-x-4 gap-y-2">
-            <SkeletonBar className="h-3 w-10 justify-self-end" />
-            <SkeletonBar className="h-3 w-48" />
-            <SkeletonBar className="h-3 w-7 justify-self-end" />
-            <SkeletonBar className="h-3 w-56" />
-            <SkeletonBar className="h-3 w-9 justify-self-end" />
-            <SkeletonBar className="h-3 w-36" />
-          </div>
-
-          <div className="mb-7 flex gap-2 border-b border-stone-200 pb-6 dark:border-stone-700">
-            {[64, 104, 58, 72, 62].map((width) => (
-              <SkeletonBar
-                key={width}
-                className="h-8 rounded-md"
-                style={{ width }}
-              />
-            ))}
+          <div className="mb-7 overflow-hidden rounded-xl border border-stone-200 bg-white shadow-sm dark:border-stone-700 dark:bg-stone-800/50">
+            <div className="flex items-center gap-3 px-4 py-3.5">
+              <div className="h-10 w-10 shrink-0 rounded-full bg-stone-200/80 dark:bg-stone-700/70" />
+              <div className="min-w-0 flex-1 space-y-2">
+                <div className="flex items-center justify-between gap-4">
+                  <SkeletonBar className="h-3.5 w-36" />
+                  <SkeletonBar className="h-2.5 w-20" />
+                </div>
+                <SkeletonBar className="h-2.5 w-28" />
+              </div>
+            </div>
+            <div className="flex gap-2 border-t border-stone-100 px-4 py-3 dark:border-stone-700/70">
+              <SkeletonBar className="h-10 w-24 rounded-md" />
+              <SkeletonBar className="h-10 w-16 rounded-md" />
+              <SkeletonBar className="ml-auto h-10 w-20 rounded-md" />
+            </div>
           </div>
 
           <div className="mx-auto max-w-2xl space-y-5">
-            <div className="flex items-center gap-3">
-              <div className="h-11 w-11 rounded-lg bg-stone-200/80 dark:bg-stone-700/70" />
-              <div className="flex-1 space-y-2">
-                <SkeletonBar className="h-4 w-40" />
-                <SkeletonBar className="h-3 w-24" />
-              </div>
-            </div>
-            <SkeletonBar className="h-4 w-11/12" />
+            <SkeletonBar className="h-4 w-32" />
             <SkeletonBar className="h-4 w-full" />
+            <SkeletonBar className="h-4 w-11/12" />
             <SkeletonBar className="h-4 w-4/5" />
-            <div className="h-44 rounded-xl border border-stone-200 bg-stone-100/80 dark:border-stone-700 dark:bg-stone-800/70" />
+            <div className="h-6" />
+            <SkeletonBar className="h-4 w-5/6" />
             <SkeletonBar className="h-4 w-full" />
             <SkeletonBar className="h-4 w-3/4" />
           </div>
diff --git a/src/components/MarkUnreadButton.tsx b/src/components/MarkUnreadButton.tsx
index 448755a..3d4909f 100644
--- a/src/components/MarkUnreadButton.tsx
+++ b/src/components/MarkUnreadButton.tsx
@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
 import { useTransition } from "react";
 import { markEmailAsUnread } from "@/app/(inbox)/email/[id]/actions";
 import { dispatchUnreadCountEvent } from "@/lib/unreadCount";
+import { useToast } from "@/components/ToastProvider";
 
 interface Props {
   emailId: string;
@@ -12,14 +13,23 @@ interface Props {
 export default function MarkUnreadButton({ emailId }: Props) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
+  const showToast = useToast();
 
   function handleClick() {
     startTransition(async () => {
-      await markEmailAsUnread(emailId);
-      // Signal EmailListPanel to remove this email from its optimistic-read set
-      window.dispatchEvent(new CustomEvent("email-mark-unread", { detail: emailId }));
-      dispatchUnreadCountEvent("unread", [emailId]);
-      router.push("/");
+      try {
+        await markEmailAsUnread(emailId);
+        // Signal EmailListPanel to remove this email from its optimistic-read set
+        window.dispatchEvent(new CustomEvent("email-mark-unread", { detail: emailId }));
+        dispatchUnreadCountEvent("unread", [emailId]);
+        showToast({ message: "Marked as unread" });
+        router.push("/");
+      } catch {
+        showToast({
+          message: "Couldn’t mark this message as unread.",
+          tone: "error",
+        });
+      }
     });
   }
 
diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
index 4737681..021f156 100644
--- a/src/components/MobileNav.tsx
+++ b/src/components/MobileNav.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { usePathname, useSearchParams } from "next/navigation";
 import MailIcon, { type MailIconName } from "@/components/MailIcon";
 import { useMailboxCounts } from "@/components/UnreadCountProvider";
 import UnreadCountBadge from "@/components/UnreadCountBadge";
+import useModalDialog from "@/components/useModalDialog";
 
 interface Destination {
   href: string;
@@ -108,15 +109,8 @@ export default function MobileNav() {
   const from = searchParams.get("from");
   const counts = useMailboxCounts();
   const [moreOpen, setMoreOpen] = useState(false);
-
-  useEffect(() => {
-    if (!moreOpen) return;
-    function onKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") setMoreOpen(false);
-    }
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [moreOpen]);
+  const closeMore = () => setMoreOpen(false);
+  const dialogRef = useModalDialog(closeMore, moreOpen);
 
   const primary: Destination[] = [
     { href: "/", label: "Inbox", icon: "inbox", badge: counts.inbox },
@@ -142,13 +136,15 @@ export default function MobileNav() {
           <button
             type="button"
             className="absolute inset-0 bg-black/35"
-            onClick={() => setMoreOpen(false)}
+            onClick={closeMore}
             aria-label="Close more navigation"
           />
           <div
+            ref={dialogRef}
             role="dialog"
             aria-modal="true"
             aria-labelledby="more-navigation-title"
+            tabIndex={-1}
             className="absolute inset-x-0 bottom-0 rounded-t-2xl border-t border-stone-200 bg-white px-4 pb-[calc(1rem+env(safe-area-inset-bottom))] pt-3 shadow-2xl dark:border-stone-700 dark:bg-stone-950"
           >
             <div className="mb-3 flex items-center justify-between px-2">
@@ -160,7 +156,7 @@ export default function MobileNav() {
               </h2>
               <button
                 type="button"
-                onClick={() => setMoreOpen(false)}
+                onClick={closeMore}
                 className="flex h-10 w-10 items-center justify-center rounded-lg text-stone-400 hover:bg-stone-100 hover:text-stone-700 dark:text-stone-500 dark:hover:bg-stone-800 dark:hover:text-stone-200"
                 aria-label="Close"
               >
@@ -174,7 +170,7 @@ export default function MobileNav() {
                   item={item}
                   active={destinationActive(item.href, pathname, from)}
                   compact
-                  onNavigate={() => setMoreOpen(false)}
+                  onNavigate={closeMore}
                 />
               ))}
             </div>
diff --git a/src/components/NotSpamButton.tsx b/src/components/NotSpamButton.tsx
index b1e6216..ebdaf14 100644
--- a/src/components/NotSpamButton.tsx
+++ b/src/components/NotSpamButton.tsx
@@ -3,6 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useTransition } from "react";
 import { promoteNotSpamAction } from "@/app/(inbox)/email/[id]/actions";
+import { useToast } from "@/components/ToastProvider";
 
 interface Props {
   emailId: string;
@@ -13,11 +14,20 @@ interface Props {
 export default function NotSpamButton({ emailId, mailboxIds, inboxMailboxId }: Props) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
+  const showToast = useToast();
 
   function handleClick() {
     startTransition(async () => {
-      await promoteNotSpamAction(emailId, mailboxIds, inboxMailboxId);
-      router.push("/spam");
+      try {
+        await promoteNotSpamAction(emailId, mailboxIds, inboxMailboxId);
+        showToast({ message: "Moved to Inbox" });
+        router.push("/spam");
+      } catch {
+        showToast({
+          message: "Couldn’t move this message to Inbox.",
+          tone: "error",
+        });
+      }
     });
   }
 
diff --git a/src/components/PinButton.tsx b/src/components/PinButton.tsx
index 54f1edd..a382c5e 100644
--- a/src/components/PinButton.tsx
+++ b/src/components/PinButton.tsx
@@ -3,6 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { togglePinAction } from "@/app/(inbox)/actions";
+import { useToast } from "@/components/ToastProvider";
 
 interface Props {
   emailId: string;
@@ -21,6 +22,7 @@ export default function PinButton({ emailId, initiallyPinned }: Props) {
   const router = useRouter();
   const [pinned, setPinned] = useState(initiallyPinned);
   const [pending, setPending] = useState(false);
+  const showToast = useToast();
 
   async function handleClick() {
     const next = !pinned;
@@ -32,6 +34,14 @@ export default function PinButton({ emailId, initiallyPinned }: Props) {
         new CustomEvent("email-pin-changed", { detail: { id: emailId, pinned: next } })
       );
       router.refresh();
+    } catch {
+      setPinned(!next);
+      showToast({
+        message: next
+          ? "Couldn’t pin this message."
+          : "Couldn’t remove the pin.",
+        tone: "error",
+      });
     } finally {
       setPending(false);
     }
@@ -41,6 +51,7 @@ export default function PinButton({ emailId, initiallyPinned }: Props) {
     <button
       onClick={handleClick}
       disabled={pending}
+      aria-pressed={pinned}
       className={[
         "inline-flex min-h-10 items-center gap-1.5 rounded-md border px-3 text-xs transition-colors disabled:opacity-50",
         pinned
diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
new file mode 100644
index 0000000..480d2dc
--- /dev/null
+++ b/src/components/Popover.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+
+interface Props {
+  label: string;
+  trigger: ReactNode;
+  children: ReactNode;
+  triggerClassName: string;
+  contentClassName: string;
+  align?: "left" | "right";
+  role?: "dialog" | "menu";
+}
+
+export default function Popover({
+  label,
+  trigger,
+  children,
+  triggerClassName,
+  contentClassName,
+  align = "right",
+  role = "menu",
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLSpanElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const contentId = useId();
+
+  useEffect(() => {
+    if (!open) return;
+
+    function onPointerDown(event: PointerEvent) {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      setOpen(false);
+      triggerRef.current?.focus();
+    }
+
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  function focusFirstItem() {
+    requestAnimationFrame(() => {
+      contentRef.current
+        ?.querySelector<HTMLElement>(
+          '[role="menuitem"], a[href], button:not([disabled])',
+        )
+        ?.focus();
+    });
+  }
+
+  return (
+    <span ref={rootRef} className="relative inline-flex">
+      <button
+        ref={triggerRef}
+        type="button"
+        className={triggerClassName}
+        aria-label={label}
+        aria-expanded={open}
+        aria-haspopup={role}
+        aria-controls={open ? contentId : undefined}
+        onClick={() => setOpen((current) => !current)}
+        onKeyDown={(event) => {
+          if (event.key !== "ArrowDown") return;
+          event.preventDefault();
+          setOpen(true);
+          focusFirstItem();
+        }}
+      >
+        {trigger}
+      </button>
+      {open && (
+        <div
+          ref={contentRef}
+          id={contentId}
+          role={role}
+          aria-label={label}
+          className={[
+            "absolute top-full z-30 mt-1",
+            align === "left" ? "left-0" : "right-0",
+            contentClassName,
+          ].join(" ")}
+          onClick={(event) => {
+            if ((event.target as Element).closest("a, button")) setOpen(false);
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </span>
+  );
+}
diff --git a/src/components/SpreadsheetViewer.tsx b/src/components/SpreadsheetViewer.tsx
index c04ecd7..e2cc10c 100644
--- a/src/components/SpreadsheetViewer.tsx
+++ b/src/components/SpreadsheetViewer.tsx
@@ -9,6 +9,7 @@ import {
   parseSpreadsheetWorkbook,
 } from "@/lib/spreadsheet";
 import useBodyClass from "@/components/useBodyClass";
+import useModalDialog from "@/components/useModalDialog";
 
 interface Props {
   attachmentName?: string;
@@ -39,18 +40,8 @@ export default function SpreadsheetViewer({
   const [loading, setLoading] = useState(true);
 
   useBodyClass("rich-content-open");
-
-  useEffect(() => {
-    if (!onClose) return;
-    const close = onClose;
-
-    function onKey(event: KeyboardEvent) {
-      if (event.key === "Escape") close();
-    }
-
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
+  const closeModal = onClose ?? (() => undefined);
+  const dialogRef = useModalDialog(closeModal, chrome === "modal");
 
   useEffect(() => {
     let cancelled = false;
@@ -226,14 +217,19 @@ export default function SpreadsheetViewer({
   if (chrome === "modal") {
     return (
       <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="spreadsheet-preview-title"
+        tabIndex={-1}
         className="fixed inset-0 z-50 flex flex-col bg-black/60 backdrop-blur-sm"
         onClick={(event) => {
           if (event.target === event.currentTarget) onClose?.();
         }}
       >
         <div className="flex items-center gap-3 px-4 py-3 bg-white dark:bg-stone-900 border-b border-stone-200 dark:border-stone-700 shrink-0">
-          <span className="text-base leading-none">📊</span>
-          <span className="flex-1 text-sm font-medium text-stone-800 dark:text-stone-200 truncate">
+          <span className="text-base leading-none" aria-hidden="true">📊</span>
+          <span id="spreadsheet-preview-title" className="flex-1 text-sm font-medium text-stone-800 dark:text-stone-200 truncate">
             {name}
           </span>
           <span className="text-xs text-stone-400 dark:text-stone-500 shrink-0">
@@ -242,7 +238,7 @@ export default function SpreadsheetViewer({
           <a
             href={downloadHref}
             download={name}
-            className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-md border border-stone-200 dark:border-stone-700 text-stone-600 dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-800 hover:text-stone-900 dark:hover:text-stone-100 transition-colors shrink-0"
+            className="flex min-h-10 items-center gap-1.5 rounded-md border border-stone-200 px-3 text-xs text-stone-600 transition-colors hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100 shrink-0"
           >
             <svg viewBox="0 0 20 20" fill="currentColor" className="w-3.5 h-3.5">
               <path d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z" />
@@ -253,7 +249,7 @@ export default function SpreadsheetViewer({
           <button
             type="button"
             onClick={onClose}
-            className="p-1.5 rounded-md text-stone-400 dark:text-stone-500 hover:bg-stone-100 dark:hover:bg-stone-800 hover:text-stone-700 dark:hover:text-stone-300 transition-colors shrink-0"
+            className="flex h-10 w-10 items-center justify-center rounded-md text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-700 dark:text-stone-500 dark:hover:bg-stone-800 dark:hover:text-stone-300 shrink-0"
             aria-label="Close"
           >
             <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
diff --git a/src/components/ThreadView.tsx b/src/components/ThreadView.tsx
index 5e81acc..e1bda34 100644
--- a/src/components/ThreadView.tsx
+++ b/src/components/ThreadView.tsx
@@ -13,6 +13,7 @@ import { Email } from "@/lib/types";
 import { formatAddressList, formatFullDate } from "@/lib/format";
 import NotSpamButton from "@/components/NotSpamButton";
 import { visibleAttachments } from "@/lib/attachments";
+import Popover from "@/components/Popover";
 
 // ---------------------------------------------------------------------------
 // Body resolution (mirrors email/[id]/page.tsx logic)
@@ -191,27 +192,35 @@ function EmailStackItem({
             )}
             <PinButton emailId={email.id} initiallyPinned={!!email.keywords?.["$flagged"]} />
             <MarkUnreadButton emailId={email.id} />
-            <details className="relative ml-auto">
-              <summary className="flex min-h-9 cursor-pointer list-none items-center gap-1 rounded-md border border-stone-200 px-3 text-xs text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-stone-100 [&::-webkit-details-marker]:hidden">
-                More
-                <MailIcon name="chevronDown" className="h-3.5 w-3.5" />
-              </summary>
-              <div className="absolute right-0 top-full z-20 mt-1 min-w-36 overflow-hidden rounded-lg border border-stone-200 bg-white py-1 text-sm shadow-lg dark:border-stone-700 dark:bg-stone-900">
+            <span className="ml-auto">
+              <Popover
+                label="More message actions"
+                trigger={
+                  <>
+                    More
+                    <MailIcon name="chevronDown" className="h-3.5 w-3.5" />
+                  </>
+                }
+                triggerClassName="flex min-h-10 items-center gap-1 rounded-md border border-stone-200 px-3 text-xs text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-900 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-stone-100"
+                contentClassName="min-w-36 overflow-hidden rounded-lg border border-stone-200 bg-white py-1 text-sm shadow-lg dark:border-stone-700 dark:bg-stone-900"
+              >
                 <Link
                   href={`/compose?mode=forward&id=${email.id}`}
-                  className="block px-3 py-2 text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800"
+                  role="menuitem"
+                  className="block px-3 py-2.5 text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800"
                 >
                   Forward
                 </Link>
                 <Link
                   href={`/print/${email.id}`}
                   target="_blank"
-                  className="block px-3 py-2 text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800"
+                  role="menuitem"
+                  className="block px-3 py-2.5 text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800"
                 >
                   Print
                 </Link>
-              </div>
-            </details>
+              </Popover>
+            </span>
           </div>
 
           {/* Calendar invite */}
diff --git a/src/components/ToastProvider.tsx b/src/components/ToastProvider.tsx
index 7e7bf04..89e5ad9 100644
--- a/src/components/ToastProvider.tsx
+++ b/src/components/ToastProvider.tsx
@@ -52,7 +52,26 @@ export default function ToastProvider({ children }: { children: ReactNode }) {
     [dismiss],
   );
 
+  const pauseTimer = useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+
+  const resumeTimer = useCallback(() => {
+    if (!toast) return;
+    pauseTimer();
+    timer.current = setTimeout(dismiss, Math.min(toast.duration ?? 5000, 3000));
+  }, [dismiss, pauseTimer, toast]);
+
   useEffect(() => dismiss, [dismiss]);
+  useEffect(() => {
+    if (!toast) return;
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") dismiss();
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [dismiss, toast]);
 
   async function runAction() {
     if (!toast?.onAction || actionPending) return;
@@ -95,6 +114,10 @@ export default function ToastProvider({ children }: { children: ReactNode }) {
                 : "border-stone-700 bg-stone-900 text-stone-100 dark:border-stone-200 dark:bg-stone-100 dark:text-stone-900",
             ].join(" ")}
             role={toast.tone === "error" ? "alert" : "status"}
+            onMouseEnter={pauseTimer}
+            onMouseLeave={resumeTimer}
+            onFocusCapture={pauseTimer}
+            onBlurCapture={resumeTimer}
           >
             <span className="min-w-0 flex-1">{toast.message}</span>
             {toast.actionLabel && toast.onAction && (
diff --git a/src/components/useModalDialog.ts b/src/components/useModalDialog.ts
new file mode 100644
index 0000000..524285d
--- /dev/null
+++ b/src/components/useModalDialog.ts
@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+].join(",");
+
+export default function useModalDialog(onClose: () => void, active = true) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const onCloseRef = useRef(onClose);
+
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+
+  useEffect(() => {
+    if (!active) return;
+
+    const previouslyFocused =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    const dialog = dialogRef.current;
+    const frame = requestAnimationFrame(() => {
+      dialog
+        ?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)
+        ?.focus({ preventScroll: true });
+    });
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCloseRef.current();
+        return;
+      }
+      if (event.key !== "Tab" || !dialog) return;
+
+      const focusable = Array.from(
+        dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+      ).filter((element) => !element.hasAttribute("hidden"));
+      if (focusable.length === 0) {
+        event.preventDefault();
+        dialog.focus();
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.removeEventListener("keydown", onKeyDown);
+      previouslyFocused?.focus({ preventScroll: true });
+    };
+  }, [active]);
+
+  return dialogRef;
+}
diff --git a/src/lib/__tests__/compose.test.ts b/src/lib/__tests__/compose.test.ts
index be2a4de..b341b30 100644
--- a/src/lib/__tests__/compose.test.ts
+++ b/src/lib/__tests__/compose.test.ts
@@ -9,6 +9,7 @@ import {
   htmlToPlainText,
   normalizeComposeMarkdown,
   quotedSectionStart,
+  formatSignatureForSave,
   stripSignatureSeparator,
 } from "../compose";
 
@@ -204,6 +205,19 @@ describe("stripSignatureSeparator", () => {
   });
 });
 
+describe("formatSignatureForSave", () => {
+  it("adds one canonical separator and trims outer whitespace", () => {
+    assert.equal(
+      formatSignatureForSave("  Phillip\nhttps://example.com  "),
+      "-- \nPhillip\nhttps://example.com",
+    );
+  });
+
+  it("stores an empty signature without a separator", () => {
+    assert.equal(formatSignatureForSave(" \n "), "");
+  });
+});
+
 describe("normalizeComposeMarkdown", () => {
   it("escapes standalone signature separator lines", () => {
     assert.equal(
diff --git a/src/lib/compose.ts b/src/lib/compose.ts
index 9521b99..91e50ac 100644
--- a/src/lib/compose.ts
+++ b/src/lib/compose.ts
@@ -63,6 +63,11 @@ export function stripSignatureSeparator(sig: string): string {
   return sig.replace(/^(--[ \t]*\r?\n)+/, "").trimStart();
 }
 
+export function formatSignatureForSave(signature: string): string {
+  const normalized = signature.trim();
+  return normalized ? `-- \n${normalized}` : "";
+}
+
 /**
  * Escape RFC-3676 signature separator lines so markdown renderers do not
  * interpret them as Setext heading underlines.
-- 
2.51.2