From 1980de68c81872003441bade7fbd85416ef4d050 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Mon, 12 Oct 2026 01:10:10 +0200
Subject: [PATCH] feat: give Mountain View's open message Gmail's toolbar,
 pager and header

---
 app/globals.css                           |  17 ++
 components/email/email-viewer.tsx         | 196 ++++++++++++++++++----
 components/mail/mail-app.tsx              |   5 +
 lib/__tests__/format-relative-ago.test.ts |  17 ++
 lib/utils.ts                              |  21 +++
 locales/ar/common.json                    |   3 +-
 locales/ca/common.json                    |   3 +-
 locales/cs/common.json                    |   3 +-
 locales/da/common.json                    |   3 +-
 locales/de/common.json                    |   3 +-
 locales/en/common.json                    |   3 +-
 locales/es/common.json                    |   3 +-
 locales/fa/common.json                    |   3 +-
 locales/fr/common.json                    |   3 +-
 locales/he/common.json                    |   3 +-
 locales/hu/common.json                    |   3 +-
 locales/it/common.json                    |   3 +-
 locales/ja/common.json                    |   3 +-
 locales/ko/common.json                    |   3 +-
 locales/lv/common.json                    |   3 +-
 locales/mn/common.json                    |   3 +-
 locales/nb/common.json                    |   3 +-
 locales/nl/common.json                    |   3 +-
 locales/pl/common.json                    |   3 +-
 locales/pt/common.json                    |   3 +-
 locales/ro/common.json                    |   3 +-
 locales/ru/common.json                    |   3 +-
 locales/sk/common.json                    |   3 +-
 locales/tr/common.json                    |   3 +-
 locales/uk/common.json                    |   3 +-
 locales/zh-TW/common.json                 |   3 +-
 locales/zh/common.json                    |   3 +-
 32 files changed, 282 insertions(+), 55 deletions(-)
 create mode 100644 lib/__tests__/format-relative-ago.test.ts

diff --git a/app/globals.css b/app/globals.css
index 737d4b3f4..becfd7b55 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1106,6 +1106,23 @@ optgroup {
     0 1px 3px 1px rgb(60 64 67 / 0.15);
 }
 
+/* The open message's toolbar: round 40px icon buttons in the muted colour,
+   20px icons. Menus that drop from it keep their own rows. */
+[data-interface-layout="mountain-view"] [data-mv-viewer-toolbar] button:not([role="menu"] *):not([data-mv-pager] *) {
+  height: 40px;
+  min-width: 40px;
+  padding-inline: 10px;
+  border-radius: 9999px;
+  color: var(--color-muted-foreground);
+}
+[data-interface-layout="mountain-view"] [data-mv-viewer-toolbar] button:not([role="menu"] *):not([data-mv-pager] *):hover {
+  color: var(--color-foreground);
+}
+[data-interface-layout="mountain-view"] [data-mv-viewer-toolbar] button:not([role="menu"] *) > svg {
+  width: 20px;
+  height: 20px;
+}
+
 /* The account popover: a wide card with a very round corner, rather
    than the narrow menu the rail and the sidebar switchers drop. */
 [data-interface-layout="mountain-view"] [data-mv-account-popover] {
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index 7b3e1618d..044eb6a55 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -15,7 +15,7 @@ import { buildContactsPath, buildMailPath } from "@/lib/deep-links";
 import { useCopyLink } from "@/hooks/use-copy-link";
 import { Button } from "@/components/ui/button";
 import { Avatar } from "@/components/ui/avatar";
-import { formatFileSize, cn, MailboxNode, formatDate, formatDateTime, generateUUID } from "@/lib/utils";
+import { formatFileSize, cn, MailboxNode, formatDate, formatDateTime, formatRelativeAgo, generateUUID } from "@/lib/utils";
 import { formatScheduledSendAt } from "@/lib/scheduled-send-label";
 import { buildMoveTargets, resolveMoveOwnerAccountId } from "@/lib/move-targets";
 import { emailDisplayDate } from "@/lib/email-date";
@@ -155,6 +155,10 @@ interface EmailViewerProps {
   onBack?: () => void;
   onNavigateNext?: () => void;
   onNavigatePrev?: () => void;
+  /** Mountain View: where the open message sits in the list, for the "1 of N" pager. */
+  mvPosition?: { index: number; total: number };
+  /** Mountain View: the folder the message is in, shown as a chip by the subject. */
+  mvFolderName?: string;
   onShowShortcuts?: () => void;
   onEditDraft?: () => void;
   onCancelScheduledForEdit?: () => void;
@@ -641,6 +645,60 @@ function DraggableAttachmentChip({ attachment, client, accountId, enabled, downl
   return <>{children(drag)}</>;
 }
 
+/**
+ * The time on a Mountain View sender line, followed by how long ago it was:
+ * "12:16 (3 minutes ago)" today, "Oct 10, 2026, 20:33 (2 days ago)" before.
+ */
+function mvSenderDate(date: Date | string, timeFormat: '12h' | '24h'): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  const today = new Date().toDateString() === d.toDateString();
+  const when = today
+    ? formatDateTime(d, timeFormat)
+    : formatDateTime(d, timeFormat, { year: 'numeric', month: 'short', day: 'numeric' });
+  const ago = formatRelativeAgo(d);
+  return ago ? `${when} (${ago})` : when;
+}
+
+/** Mountain View's "1 of 23" with newer / older arrows, at the end of the message toolbar. */
+function MvPager({
+  position,
+  onPrev,
+  onNext,
+}: {
+  position: { index: number; total: number };
+  onPrev?: () => void;
+  onNext?: () => void;
+}) {
+  const t = useTranslations('email_viewer');
+  return (
+    <div className="ms-auto flex items-center gap-0.5 flex-shrink-0" data-mv-pager="">
+      <span className="text-xs text-muted-foreground tabular-nums me-2 whitespace-nowrap">
+        {t('mv_position', { index: position.index.toLocaleString(), total: position.total.toLocaleString() })}
+      </span>
+      <button
+        type="button"
+        onClick={onPrev}
+        disabled={!onPrev}
+        className="grid place-items-center w-9 h-9 rounded-full text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent transition-colors"
+        title={t('tooltips.previous')}
+        aria-label={t('tooltips.previous')}
+      >
+        <ChevronLeft className="w-5 h-5" />
+      </button>
+      <button
+        type="button"
+        onClick={onNext}
+        disabled={!onNext}
+        className="grid place-items-center w-9 h-9 rounded-full text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent transition-colors"
+        title={t('tooltips.next')}
+        aria-label={t('tooltips.next')}
+      >
+        <ChevronRight className="w-5 h-5" />
+      </button>
+    </div>
+  );
+}
+
 function SidebarSection({ icon: Icon, title, children }: { icon: React.ComponentType<{ className?: string }>; title: string; children: React.ReactNode }) {
   return (
     <div>
@@ -674,6 +732,8 @@ export function EmailViewer({
   onBack,
   onNavigateNext,
   onNavigatePrev,
+  mvPosition,
+  mvFolderName,
   onShowShortcuts,
   onEditDraft,
   onCancelScheduledForEdit,
@@ -3077,7 +3137,7 @@ export function EmailViewer({
           onClick={onArchive}
           data-overflow-item
           data-overflow-priority="4"
-          className="flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:gap-1.5 sm:py-0"
+          className={cn("flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:gap-1.5 sm:py-0", mvViewer && "order-1")}
           title={t('tooltips.archive')}
         >
           <Archive className="w-4 h-4" />
@@ -3088,7 +3148,7 @@ export function EmailViewer({
           variant="ghost"
           size="sm"
           onClick={onDelete}
-          className="flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:gap-1.5 sm:py-0"
+          className={cn("flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:gap-1.5 sm:py-0", mvViewer && "order-3")}
           title={t('tooltips.delete')}
         >
           <Trash2 className="w-4 h-4" />
@@ -3096,7 +3156,7 @@ export function EmailViewer({
         </Button>
         {/* Move to folder */}
         {moveTree.length > 0 && onMoveToMailbox && (
-          <div ref={moveMenuRef} data-overflow-item data-overflow-priority="5" className="relative">
+          <div ref={moveMenuRef} data-overflow-item data-overflow-priority="5" className={cn("relative", mvViewer && "order-6")}>
             <Button
               ref={moveButtonRef}
               variant="ghost"
@@ -3157,8 +3217,8 @@ export function EmailViewer({
           </div>
         )}
         {/* Tag Picker - hidden on mobile, overflows to More menu */}
-        <div data-overflow-item data-overflow-priority="6" className="hidden sm:flex items-center">
-        <div className="w-px h-5 bg-border mx-0.5" />
+        <div data-overflow-item data-overflow-priority="6" className={cn("hidden sm:flex items-center", mvViewer && "order-7")}>
+        {!mvViewer && <div className="w-px h-5 bg-border mx-0.5" />}
         <div ref={tagMenuRef} className="relative">
           <button
             onClick={() => { setTagMenuOpen(!tagMenuOpen); setMoreMenuOpen(false); setMoveMenuOpen(false); }}
@@ -3192,14 +3252,16 @@ export function EmailViewer({
             data-overflow-priority="7"
             className={cn(
               "flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:gap-1.5 sm:py-0",
-              isInJunkFolder ? "hover:bg-green-50 dark:hover:bg-green-950/30" : "hover:bg-red-50 dark:hover:bg-red-950/30"
+              mvViewer
+                ? "order-2"
+                : isInJunkFolder ? "hover:bg-green-50 dark:hover:bg-green-950/30" : "hover:bg-red-50 dark:hover:bg-red-950/30"
             )}
             title={isInJunkFolder ? t('spam.not_spam_title') : t('spam.button_title')}
           >
             {isInJunkFolder ? (
-              <ShieldCheck className="h-4 w-4 text-green-600 dark:text-green-400" />
+              <ShieldCheck className={cn("h-4 w-4", !mvViewer && "text-green-600 dark:text-green-400")} />
             ) : (
-              <ShieldAlert className="h-4 w-4 text-red-600 dark:text-red-400" />
+              <ShieldAlert className={cn("h-4 w-4", !mvViewer && "text-red-600 dark:text-red-400")} />
             )}
             {showToolbarLabels && <span className="text-[10px] leading-tight sm:text-sm">{isInJunkFolder ? t('not_spam_short') : t('spam_short')}</span>}
           </Button>
@@ -3210,13 +3272,15 @@ export function EmailViewer({
             (the inactive one invisible) so the button keeps a fixed width when the
             email is auto-marked as read on open. Otherwise the width change re-runs
             the overflow calculation and the toolbar buttons jump around (#864). */}
+        {/* Mountain View groups the actions as Gmail does, with a rule between groups. */}
+        {mvViewer && <div className="order-4 w-px h-5 bg-border mx-1" aria-hidden />}
         <Button
           variant="ghost"
           size="sm"
           onClick={() => onMarkAsRead?.(email.id, isUnread)}
           data-overflow-item
           data-overflow-priority="8"
-          className="flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:gap-1.5 sm:py-0"
+          className={cn("flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:gap-1.5 sm:py-0", mvViewer && "order-5")}
           title={isUnread ? t('mark_read') : t('mark_unread')}
         >
           {isUnread ? <MailOpen className="w-4 h-4" /> : <Mail className="w-4 h-4" />}
@@ -3228,7 +3292,9 @@ export function EmailViewer({
           )}
         </Button>
 
-        {/* Print - hidden on mobile, overflows to More menu */}
+        {/* Print - hidden on mobile, overflows to More menu. Mountain View
+            has it on the subject line. */}
+        {!mvViewer && (
         <Button
           variant="ghost"
           size="sm"
@@ -3241,6 +3307,7 @@ export function EmailViewer({
           <Printer className="w-4 h-4" />
           {showToolbarLabels && <span className="hidden sm:inline text-sm">{t('print')}</span>}
         </Button>
+        )}
 
         {/* View source - hidden on mobile, overflows to More menu */}
         <Button
@@ -3249,7 +3316,7 @@ export function EmailViewer({
           onClick={() => setShowSourceModal(true)}
           data-overflow-item
           data-overflow-priority="10"
-          className="hidden sm:inline-flex h-8 gap-1.5"
+          className={cn("hidden sm:inline-flex h-8 gap-1.5", mvViewer && "order-8")}
           title={t('view_source')}
         >
           <Code className="w-4 h-4" />
@@ -3265,7 +3332,7 @@ export function EmailViewer({
           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"
+          className={cn("hidden sm:inline-flex h-8 gap-1.5", mvViewer && "order-8")}
           title={isDark ? t('view_in_light_mode') : t('view_in_dark_mode')}
           disabled={!effectiveEmailContent.isHtml}
           aria-disabled={!effectiveEmailContent.isHtml}
@@ -3276,7 +3343,7 @@ export function EmailViewer({
         {/* Fullscreen toggle - hidden on mobile (already fullscreen there).
             Never overflows into the More menu: in fullscreen this button is
             the way back out, so it must stay visible. */}
-        {onToggleFullscreen && (
+        {onToggleFullscreen && !mvViewer && (
         <Button
           variant="ghost"
           size="sm"
@@ -3290,7 +3357,7 @@ export function EmailViewer({
         )}
 
         {/* More menu - click-based */}
-        <div ref={moreMenuRef} className="relative">
+        <div ref={moreMenuRef} className={cn("relative", mvViewer && "order-9")}>
           <Button
             ref={moreButtonRef}
             variant="ghost"
@@ -3855,12 +3922,20 @@ export function EmailViewer({
       {/* === TOOLBAR (top position) === */}
       {toolbarPosition === 'top' && (
         <div className={cn(
-          "bg-background border-b border-border",
+          "bg-background",
+          !mvViewer && "border-b border-border",
           "max-lg:sticky max-lg:top-0 max-lg:z-10"
         )}>
-          <div className="px-2 sm:px-4 lg:px-6 h-14 flex items-center">
-            <div ref={toolbarRef} className="flex items-center justify-between gap-0.5 sm:gap-2 w-full">
+          <div className={cn("px-2 sm:px-4 lg:px-6 flex items-center", mvViewer ? "h-12 lg:ps-4" : "h-14")}>
+            <div
+              ref={toolbarRef}
+              data-mv-viewer-toolbar={mvViewer ? "" : undefined}
+              className={cn("flex items-center gap-0.5 sm:gap-2 w-full", mvViewer ? "justify-start" : "justify-between")}
+            >
               {renderToolbarItems(true)}
+              {mvViewer && mvPosition && (
+                <MvPager position={mvPosition} onPrev={onNavigatePrev} onNext={onNavigateNext} />
+              )}
             </div>
           </div>
         </div>
@@ -3868,10 +3943,12 @@ export function EmailViewer({
 
       {/* === SUBJECT BLOCK === */}
       <div className={cn(
-        "bg-background border-b border-border",
+        "bg-background",
+        !mvViewer && "border-b border-border",
         toolbarPosition === 'below-subject' && "max-lg:sticky max-lg:top-0 max-lg:z-10"
       )}>
-        <div className="px-4 lg:px-6" style={{ paddingBlock: 'var(--density-header-py)' }}>
+        {/* Mountain View lines the subject up with the sender's name below it. */}
+        <div className={cn("px-4 lg:px-6", mvViewer && "lg:ps-[80px] pt-3 pb-1")} style={mvViewer ? undefined : { paddingBlock: 'var(--density-header-py)' }}>
           <div className="flex items-start justify-between gap-2 lg:gap-4">
             {/* Back button (for below-subject mode on tablet) */}
             {toolbarPosition === 'below-subject' && (isMobile || (isTablet && !tabletListVisible) || (isFocusedMailLayout && !isMobile)) && onBack && (
@@ -3887,11 +3964,21 @@ export function EmailViewer({
             )}
             <div className="flex-1 min-w-0">
               <div className="flex items-start gap-2">
-                <h1 className="text-lg lg:text-xl font-bold text-foreground tracking-tight break-words min-w-0">
+                <h1 className={cn(
+                  "text-foreground break-words min-w-0",
+                  mvViewer ? "text-[22px] leading-7 font-normal" : "text-lg lg:text-xl font-bold tracking-tight"
+                )}>
                   {email.subject || t('no_subject')}
                 </h1>
-                {/* Star inline with subject (top toolbar mode) */}
-                {toolbarPosition === 'top' && (
+                {/* Mountain View: the folder the message sits in, as a chip on the subject line. */}
+                {mvViewer && mvFolderName && (
+                  <span className="self-center flex-shrink-0 rounded px-1.5 py-0.5 text-xs bg-muted text-muted-foreground" data-mv-folder-chip="">
+                    {mvFolderName}
+                  </span>
+                )}
+                {/* Star inline with subject (top toolbar mode). Mountain View
+                    has it on the sender's line instead. */}
+                {toolbarPosition === 'top' && !mvViewer && (
                   <button
                     onClick={onToggleStar}
                     className="flex-shrink-0 p-1 rounded hover:bg-muted transition-colors"
@@ -3927,6 +4014,31 @@ export function EmailViewer({
                 </div>
               )}
             </div>
+            {/* Mountain View: print and full screen at the end of the subject line. */}
+            {mvViewer && (
+              <div className="hidden lg:flex items-center flex-shrink-0 -me-2" data-mv-subject-actions="">
+                <button
+                  type="button"
+                  onClick={handlePrint}
+                  className="grid place-items-center w-10 h-10 rounded-full text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                  title={t('print')}
+                  aria-label={t('print')}
+                >
+                  <Printer className="w-5 h-5" />
+                </button>
+                {onToggleFullscreen && (
+                  <button
+                    type="button"
+                    onClick={onToggleFullscreen}
+                    className="grid place-items-center w-10 h-10 rounded-full text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                    title={isFullscreen ? t('exit_fullscreen') : t('fullscreen')}
+                    aria-label={isFullscreen ? t('exit_fullscreen') : t('fullscreen')}
+                  >
+                    {isFullscreen ? <Minimize2 className="w-5 h-5" /> : <Maximize2 className="w-5 h-5" />}
+                  </button>
+                )}
+              </div>
+            )}
             {/* Date/time on the right of subject row - hidden on mobile, shown next to sender.
                 Mountain View puts it on the sender's row instead, and shows no size. */}
             <div className={cn("hidden flex-shrink-0 text-end", !mvViewer && "sm:block")}>
@@ -3961,8 +4073,11 @@ export function EmailViewer({
       <div className="min-h-full flex flex-col">
 
       {/* === SENDER INFO (Desktop) === */}
-      <div className="hidden lg:block bg-background border-b border-border px-6" style={{ paddingBlock: 'var(--density-header-py)' }}>
-          <div className="flex items-start" style={{ gap: 'var(--density-item-gap)' }}>
+      <div
+        className={cn("hidden lg:block bg-background px-6", !mvViewer && "border-b border-border")}
+        style={mvViewer ? { paddingBlock: '0.75rem 0.5rem' } : { paddingBlock: 'var(--density-header-py)' }}
+      >
+          <div className="flex items-start" style={{ gap: mvViewer ? '16px' : 'var(--density-item-gap)' }}>
             <button
               onClick={() => sender?.email && handleViewContactSidebar(null, sender.email)}
               className="cursor-pointer group flex-shrink-0"
@@ -4010,8 +4125,31 @@ export function EmailViewer({
                       />
                     )}
                     {mvViewer && (
-                      <span className="ms-auto ps-2 text-xs text-muted-foreground whitespace-nowrap" data-mv-sender-date="">
-                        {formatDateTime(emailDisplayDate(email), timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })}
+                      <span className="ms-auto ps-2 flex items-center gap-1 -my-2 -me-2" data-mv-sender-actions="">
+                        <span className="text-xs text-muted-foreground whitespace-nowrap me-1" data-mv-sender-date="">
+                          {mvSenderDate(emailDisplayDate(email), timeFormat)}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={onToggleStar}
+                          className="grid place-items-center w-10 h-10 rounded-full text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                          title={isStarred ? t('tooltips.unstar') : t('tooltips.star')}
+                          aria-label={isStarred ? t('tooltips.unstar') : t('tooltips.star')}
+                          aria-pressed={!!isStarred}
+                        >
+                          <Star className={cn("w-5 h-5", isStarred && "fill-amber-400 text-amber-400")} />
+                        </button>
+                        {!isDraft && !isScheduled && (
+                          <button
+                            type="button"
+                            onClick={() => onReply?.()}
+                            className="grid place-items-center w-10 h-10 rounded-full text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                            title={t('tooltips.reply')}
+                            aria-label={t('tooltips.reply')}
+                          >
+                            <Reply className="w-5 h-5" />
+                          </button>
+                        )}
                       </span>
                     )}
                   </div>
@@ -5275,6 +5413,8 @@ export function EmailViewer({
           {/* Email Body */}
           <div className={cn(
             "email-content-wrapper overflow-x-auto",
+            // Mountain View indents the body under the sender's name, as Gmail does.
+            mvViewer && "lg:ms-[60px]",
             !isDark && resolvedTheme === 'dark' ? "bg-white email-content-light" : "bg-background"
           )}
           style={isDark ? { backgroundColor: '#121212' } : undefined}>
@@ -5321,7 +5461,7 @@ export function EmailViewer({
           {/* Mountain View: Reply / Reply all / Forward as buttons under the message. */}
           {mvReplyRow && !isDraft && !isScheduled && !isBodyLoading && (effectiveEmailContent.isHtml ? iframeReady : true) && (
             <div
-              className={cn("pb-6 pt-2", isMobile ? "grid grid-cols-3 gap-2 px-4" : "flex flex-wrap items-center gap-2 px-6")}
+              className={cn("pb-6 pt-2", isMobile ? "grid grid-cols-3 gap-2 px-4" : "flex flex-wrap items-center gap-3 px-6 lg:ps-[80px] pt-6")}
               data-mv-reply-row=""
             >
               <Button variant="outline" size="sm" className={cn("rounded-full gap-2", isMobile ? "min-w-0 px-2 text-xs" : "px-5")} onClick={() => onReply?.()}>
diff --git a/components/mail/mail-app.tsx b/components/mail/mail-app.tsx
index 13224001b..764f5d9cc 100644
--- a/components/mail/mail-app.tsx
+++ b/components/mail/mail-app.tsx
@@ -4694,6 +4694,11 @@ export function MailApp({ linkSegments: routeSegments }: MailAppProps = {}) {
                     onBack={handleMobileBack}
                     onNavigateNext={handleNavigateNext}
                     onNavigatePrev={handleNavigatePrev}
+                    mvPosition={mvShell && selectedEmailIndex >= 0 ? {
+                      index: selectedEmailIndex + 1,
+                      total: Math.max(activeEmails.length, mailboxes.find((mb) => mb.id === selectedMailbox)?.totalEmails ?? 0),
+                    } : undefined}
+                    mvFolderName={mvShell && !isScheduledView && !isUnifiedView ? currentMailboxName : undefined}
                     onToggleFullscreen={!isEmbedded && !isMobile ? () => setFullscreenReading((v) => !v) : undefined}
                     isFullscreen={fullscreenReading}
                     onShowShortcuts={() => setShowShortcutsModal(true)}
diff --git a/lib/__tests__/format-relative-ago.test.ts b/lib/__tests__/format-relative-ago.test.ts
new file mode 100644
index 000000000..14d69202b
--- /dev/null
+++ b/lib/__tests__/format-relative-ago.test.ts
@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { formatRelativeAgo } from '../utils';
+
+describe('formatRelativeAgo', () => {
+  const now = new Date('2026-07-01T12:00:00Z');
+
+  it('says how long ago in the largest whole unit', () => {
+    expect(formatRelativeAgo(new Date('2026-07-01T11:57:00Z'), now)).toBe('3 minutes ago');
+    expect(formatRelativeAgo(new Date('2026-07-01T08:00:00Z'), now)).toBe('4 hours ago');
+    expect(formatRelativeAgo(new Date('2026-06-29T12:00:00Z'), now)).toBe('2 days ago');
+  });
+
+  it('says nothing once the message is a month old, or when the date is bad', () => {
+    expect(formatRelativeAgo(new Date('2026-05-01T12:00:00Z'), now)).toBe('');
+    expect(formatRelativeAgo('not a date', now)).toBe('');
+  });
+});
diff --git a/lib/utils.ts b/lib/utils.ts
index 3d5fcbfff..77f3a3b80 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -236,6 +236,27 @@ export function formatDateTime(
   return d.toLocaleString(effectiveLocale, localeOptions);
 }
 
+/**
+ * How long ago `date` was, in words ("3 minutes ago", "2 days ago"), for the
+ * parenthesis Gmail puts after a message's time. Empty once it is a month
+ * old, where the date alone says enough.
+ */
+export function formatRelativeAgo(date: Date | string, now: Date = new Date()): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  if (!d || Number.isNaN(d.getTime())) return '';
+  const diff = Math.max(0, now.getTime() - d.getTime());
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+  if (days >= 30) return '';
+  const locale = getEffectiveLocale();
+  const rtf = new Intl.RelativeTimeFormat(locale === 'en' ? 'en-US' : locale, { numeric: 'auto' });
+  if (minutes < 1) return rtf.format(0, 'second');
+  if (minutes < 60) return rtf.format(-minutes, 'minute');
+  if (hours < 24) return rtf.format(-hours, 'hour');
+  return rtf.format(-days, 'day');
+}
+
 // Marketing emails pad the preheader with whitespace, format chars (soft
 // hyphens, zero-width chars, BOM, directional marks) and combining marks
 // (e.g. U+034F) to push real content past the preview window. Strip them all.
diff --git a/locales/ar/common.json b/locales/ar/common.json
index 413f0e23f..35c97d117 100644
--- a/locales/ar/common.json
+++ b/locales/ar/common.json
@@ -610,7 +610,8 @@
       "copy": "نسخ الرمز {code}",
       "copied": "تم نسخ الرمز",
       "copy_failed": "تعذّر نسخ الرمز"
-    }
+    },
+    "mv_position": "{index} من {total}"
   },
   "email_composer": {
     "minimize": "تصغير",
diff --git a/locales/ca/common.json b/locales/ca/common.json
index 9a298a295..e397d90a2 100644
--- a/locales/ca/common.json
+++ b/locales/ca/common.json
@@ -610,7 +610,8 @@
       "copy": "Copia el codi {code}",
       "copied": "Codi copiat",
       "copy_failed": "No s'ha pogut copiar el codi"
-    }
+    },
+    "mv_position": "{index} de {total}"
   },
   "email_composer": {
     "minimize": "Minimitza",
diff --git a/locales/cs/common.json b/locales/cs/common.json
index c6044aac0..3a1f4b82d 100644
--- a/locales/cs/common.json
+++ b/locales/cs/common.json
@@ -610,7 +610,8 @@
       "copy": "Kopírovat kód {code}",
       "copied": "Kód zkopírován",
       "copy_failed": "Kód se nepodařilo zkopírovat"
-    }
+    },
+    "mv_position": "{index} z {total}"
   },
   "email_composer": {
     "minimize": "Minimalizovat",
diff --git a/locales/da/common.json b/locales/da/common.json
index 6fc5fef7f..61c9c7824 100644
--- a/locales/da/common.json
+++ b/locales/da/common.json
@@ -610,7 +610,8 @@
       "copy": "Kopiér kode {code}",
       "copied": "Kode kopieret",
       "copy_failed": "Koden kunne ikke kopieres"
-    }
+    },
+    "mv_position": "{index} af {total}"
   },
   "email_composer": {
     "minimize": "Minimer",
diff --git a/locales/de/common.json b/locales/de/common.json
index 470fc1d4f..630d18a11 100644
--- a/locales/de/common.json
+++ b/locales/de/common.json
@@ -610,7 +610,8 @@
       "copy": "Code {code} kopieren",
       "copied": "Code kopiert",
       "copy_failed": "Code konnte nicht kopiert werden"
-    }
+    },
+    "mv_position": "{index} von {total}"
   },
   "email_composer": {
     "minimize": "Minimieren",
diff --git a/locales/en/common.json b/locales/en/common.json
index d72684581..b517c92fd 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -610,7 +610,8 @@
       "copy": "Copy code {code}",
       "copied": "Code copied",
       "copy_failed": "Could not copy the code"
-    }
+    },
+    "mv_position": "{index} of {total}"
   },
   "email_composer": {
     "minimize": "Minimize",
diff --git a/locales/es/common.json b/locales/es/common.json
index 805a6561d..efd614354 100644
--- a/locales/es/common.json
+++ b/locales/es/common.json
@@ -610,7 +610,8 @@
       "copy": "Copiar código {code}",
       "copied": "Código copiado",
       "copy_failed": "No se pudo copiar el código"
-    }
+    },
+    "mv_position": "{index} de {total}"
   },
   "email_composer": {
     "minimize": "Minimizar",
diff --git a/locales/fa/common.json b/locales/fa/common.json
index e837a471d..d10f9411b 100644
--- a/locales/fa/common.json
+++ b/locales/fa/common.json
@@ -610,7 +610,8 @@
       "copy": "کپی کد {code}",
       "copied": "کد کپی شد",
       "copy_failed": "کپی کد ممکن نشد"
-    }
+    },
+    "mv_position": "{index} از {total}"
   },
   "email_composer": {
     "minimize": "کوچک کردن",
diff --git a/locales/fr/common.json b/locales/fr/common.json
index 9605c88dc..449a2d170 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -610,7 +610,8 @@
       "copy": "Copier le code {code}",
       "copied": "Code copié",
       "copy_failed": "Impossible de copier le code"
-    }
+    },
+    "mv_position": "{index} sur {total}"
   },
   "email_composer": {
     "minimize": "Réduire",
diff --git a/locales/he/common.json b/locales/he/common.json
index 8e24cb1a6..365ce47cc 100644
--- a/locales/he/common.json
+++ b/locales/he/common.json
@@ -575,7 +575,8 @@
       "copy": "העתקת הקוד {code}",
       "copied": "הקוד הועתק",
       "copy_failed": "לא ניתן להעתיק את הקוד"
-    }
+    },
+    "mv_position": "{index} מתוך {total}"
   },
   "email_composer": {
     "minimize": "מזעור",
diff --git a/locales/hu/common.json b/locales/hu/common.json
index fa91e4a2c..86f115187 100644
--- a/locales/hu/common.json
+++ b/locales/hu/common.json
@@ -610,7 +610,8 @@
       "copy": "{code} kód másolása",
       "copied": "Kód másolva",
       "copy_failed": "Nem sikerült másolni a kódot"
-    }
+    },
+    "mv_position": "{index} / {total}"
   },
   "email_composer": {
     "minimize": "Kis méret",
diff --git a/locales/it/common.json b/locales/it/common.json
index 659dc9d96..0adbcdc83 100644
--- a/locales/it/common.json
+++ b/locales/it/common.json
@@ -610,7 +610,8 @@
       "copy": "Copia codice {code}",
       "copied": "Codice copiato",
       "copy_failed": "Impossibile copiare il codice"
-    }
+    },
+    "mv_position": "{index} di {total}"
   },
   "email_composer": {
     "minimize": "Riduci a icona",
diff --git a/locales/ja/common.json b/locales/ja/common.json
index dd6b9be97..2f1fb0f30 100644
--- a/locales/ja/common.json
+++ b/locales/ja/common.json
@@ -610,7 +610,8 @@
       "copy": "コード {code} をコピー",
       "copied": "コードをコピーしました",
       "copy_failed": "コードをコピーできませんでした"
-    }
+    },
+    "mv_position": "{index} / {total}"
   },
   "email_composer": {
     "minimize": "最小化",
diff --git a/locales/ko/common.json b/locales/ko/common.json
index c659a3d83..b969e3dc4 100644
--- a/locales/ko/common.json
+++ b/locales/ko/common.json
@@ -610,7 +610,8 @@
       "copy": "코드 {code} 복사",
       "copied": "코드를 복사했습니다",
       "copy_failed": "코드를 복사할 수 없습니다"
-    }
+    },
+    "mv_position": "{index} / {total}"
   },
   "email_composer": {
     "minimize": "최소화",
diff --git a/locales/lv/common.json b/locales/lv/common.json
index 895cec34e..9ea540479 100644
--- a/locales/lv/common.json
+++ b/locales/lv/common.json
@@ -610,7 +610,8 @@
       "copy": "Kopēt kodu {code}",
       "copied": "Kods nokopēts",
       "copy_failed": "Neizdevās nokopēt kodu"
-    }
+    },
+    "mv_position": "{index} no {total}"
   },
   "email_composer": {
     "minimize": "Minimizēt",
diff --git a/locales/mn/common.json b/locales/mn/common.json
index d84622257..8c97812fe 100644
--- a/locales/mn/common.json
+++ b/locales/mn/common.json
@@ -610,7 +610,8 @@
       "copy": "{code} кодыг хуулах",
       "copied": "Код хуулагдлаа",
       "copy_failed": "Кодыг хуулж чадсангүй"
-    }
+    },
+    "mv_position": "{total}-с {index}"
   },
   "email_composer": {
     "minimize": "Багасгах",
diff --git a/locales/nb/common.json b/locales/nb/common.json
index 081e64419..535b9207d 100644
--- a/locales/nb/common.json
+++ b/locales/nb/common.json
@@ -610,7 +610,8 @@
       "copy": "Kopier kode {code}",
       "copied": "Kode kopiert",
       "copy_failed": "Kunne ikke kopiere koden"
-    }
+    },
+    "mv_position": "{index} av {total}"
   },
   "email_composer": {
     "minimize": "Minimer",
diff --git a/locales/nl/common.json b/locales/nl/common.json
index d9f4af403..f1ba111e0 100644
--- a/locales/nl/common.json
+++ b/locales/nl/common.json
@@ -610,7 +610,8 @@
       "copy": "Code {code} kopiëren",
       "copied": "Code gekopieerd",
       "copy_failed": "Kan de code niet kopiëren"
-    }
+    },
+    "mv_position": "{index} van {total}"
   },
   "email_composer": {
     "minimize": "Minimaliseren",
diff --git a/locales/pl/common.json b/locales/pl/common.json
index 8b661f780..bb42bc4ab 100644
--- a/locales/pl/common.json
+++ b/locales/pl/common.json
@@ -610,7 +610,8 @@
       "copy": "Kopiuj kod {code}",
       "copied": "Skopiowano kod",
       "copy_failed": "Nie udało się skopiować kodu"
-    }
+    },
+    "mv_position": "{index} z {total}"
   },
   "email_composer": {
     "minimize": "Minimalizuj",
diff --git a/locales/pt/common.json b/locales/pt/common.json
index da266e6ba..c3e858de2 100644
--- a/locales/pt/common.json
+++ b/locales/pt/common.json
@@ -610,7 +610,8 @@
       "copy": "Copiar código {code}",
       "copied": "Código copiado",
       "copy_failed": "Não foi possível copiar o código"
-    }
+    },
+    "mv_position": "{index} de {total}"
   },
   "email_composer": {
     "minimize": "Minimizar",
diff --git a/locales/ro/common.json b/locales/ro/common.json
index 1ed9baba2..4a2edb614 100644
--- a/locales/ro/common.json
+++ b/locales/ro/common.json
@@ -610,7 +610,8 @@
       "copy": "Copiază codul {code}",
       "copied": "Cod copiat",
       "copy_failed": "Codul nu a putut fi copiat"
-    }
+    },
+    "mv_position": "{index} din {total}"
   },
   "email_composer": {
     "minimize": "Minimizează",
diff --git a/locales/ru/common.json b/locales/ru/common.json
index 1f424727e..fd91a3508 100644
--- a/locales/ru/common.json
+++ b/locales/ru/common.json
@@ -610,7 +610,8 @@
       "copy": "Скопировать код {code}",
       "copied": "Код скопирован",
       "copy_failed": "Не удалось скопировать код"
-    }
+    },
+    "mv_position": "{index} из {total}"
   },
   "email_composer": {
     "minimize": "Свернуть",
diff --git a/locales/sk/common.json b/locales/sk/common.json
index 68b3c102a..9bfb28c6f 100644
--- a/locales/sk/common.json
+++ b/locales/sk/common.json
@@ -610,7 +610,8 @@
       "copy": "Kopírovať kód {code}",
       "copied": "Kód skopírovaný",
       "copy_failed": "Kód sa nepodarilo skopírovať"
-    }
+    },
+    "mv_position": "{index} z {total}"
   },
   "email_composer": {
     "minimize": "Minimalizovať",
diff --git a/locales/tr/common.json b/locales/tr/common.json
index 11b8ff521..ec040734d 100644
--- a/locales/tr/common.json
+++ b/locales/tr/common.json
@@ -610,7 +610,8 @@
       "copy": "{code} kodunu kopyala",
       "copied": "Kod kopyalandı",
       "copy_failed": "Kod kopyalanamadı"
-    }
+    },
+    "mv_position": "{index} / {total}"
   },
   "email_composer": {
     "minimize": "Simge durumuna küçült",
diff --git a/locales/uk/common.json b/locales/uk/common.json
index 80e58696e..a86f4fe6a 100644
--- a/locales/uk/common.json
+++ b/locales/uk/common.json
@@ -610,7 +610,8 @@
       "copy": "Скопіювати код {code}",
       "copied": "Код скопійовано",
       "copy_failed": "Не вдалося скопіювати код"
-    }
+    },
+    "mv_position": "{index} з {total}"
   },
   "email_composer": {
     "minimize": "Згорнути",
diff --git a/locales/zh-TW/common.json b/locales/zh-TW/common.json
index c3807f150..d08ab4f16 100644
--- a/locales/zh-TW/common.json
+++ b/locales/zh-TW/common.json
@@ -610,7 +610,8 @@
       "copy": "複製驗證碼 {code}",
       "copied": "驗證碼已複製",
       "copy_failed": "無法複製驗證碼"
-    }
+    },
+    "mv_position": "第 {index} 封，共 {total} 封"
   },
   "email_composer": {
     "minimize": "最小化",
diff --git a/locales/zh/common.json b/locales/zh/common.json
index f1251f246..f9d71a8dd 100644
--- a/locales/zh/common.json
+++ b/locales/zh/common.json
@@ -610,7 +610,8 @@
       "copy": "复制验证码 {code}",
       "copied": "验证码已复制",
       "copy_failed": "无法复制验证码"
-    }
+    },
+    "mv_position": "第 {index} 封，共 {total} 封"
   },
   "email_composer": {
     "minimize": "最小化",