feat: ability to snooze emails (#1477)

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
Co-authored-by: Adam <[email protected]>

Author: 3 people

apps/mail/app/(routes)/mail/[folder]/page.tsx

@@ -6,7 +6,7 @@ import { authProxy } from '@/lib/auth-proxy';
 import { useEffect, useState } from 'react';
 import type { Route } from './+types/page';
 
-const ALLOWED_FOLDERS = new Set(['inbox', 'draft', 'sent', 'spam', 'bin', 'archive']);
+const ALLOWED_FOLDERS = new Set(['inbox', 'draft', 'sent', 'spam', 'bin', 'archive', 'snoozed']);
 
 export async function clientLoader({ params, request }: Route.ClientLoaderArgs) {
   if (!params.folder) return Response.redirect(`${import.meta.env.VITE_PUBLIC_APP_URL}/mail/inbox`);

apps/mail/components/context/thread-context.tsx

@@ -27,8 +27,8 @@ import { useOptimisticThreadState } from '@/components/mail/optimistic-thread-st
 import { useOptimisticActions } from '@/hooks/use-optimistic-actions';
 import { type ThreadDestination } from '@/lib/thread-actions';
 import { useThread, useThreads } from '@/hooks/use-threads';
-import { ExclamationCircle, Mail } from '../icons/icons';
-import { useMemo, type ReactNode } from 'react';
+import { ExclamationCircle, Mail, Clock } from '../icons/icons';
+import { useMemo, type ReactNode, useState } from 'react';
 import { useLabels } from '@/hooks/use-labels';
 import { FOLDERS, LABELS } from '@/lib/utils';
 import { useMail } from '../mail/use-mail';
@@ -37,6 +37,7 @@ import { m } from '@/paraglide/messages';
 import { useParams } from 'react-router';
 import { useQueryState } from 'nuqs';
 import { toast } from 'sonner';
+import { SnoozeDialog } from '@/components/mail/snooze-dialog';
 
 interface EmailAction {
   id: string;
@@ -68,12 +69,11 @@ const LabelsList = ({ threadId, bulkSelected }: { threadId: string; bulkSelected
 
   if (!labels || !thread) return null;
 
-  const handleToggleLabel = async (labelId: string) => {
+  const handleToggleLabel = (labelId: string) => {
     if (!labelId) return;
 
-    let shouldAddLabel = false;
-
-    let hasLabel = thread.labels?.map((label) => label.id).includes(labelId) || false;
+    // Determine current label state considering optimistic updates
+    let hasLabel = thread!.labels?.some((l) => l.id === labelId) ?? false;
 
     if (rightClickedThreadOptimisticState.optimisticLabels) {
       if (rightClickedThreadOptimisticState.optimisticLabels.addedLabelIds.includes(labelId)) {
@@ -85,24 +85,21 @@ const LabelsList = ({ threadId, bulkSelected }: { threadId: string; bulkSelected
       }
     }
 
-    shouldAddLabel = !hasLabel;
-
-    optimisticToggleLabel(targetThreadIds, labelId, shouldAddLabel);
+    optimisticToggleLabel(targetThreadIds, labelId, !hasLabel);
   };
 
   return (
     <>
       {labels
         .filter((label) => label.id)
         .map((label) => {
-          let isChecked = label.id ? thread.labels?.map((l) => l.id).includes(label.id) : false;
+          let isChecked = label.id ? thread!.labels?.some((l) => l.id === label.id) ?? false : false;
 
-          const checkboxOptimisticState = useOptimisticThreadState(threadId);
-          if (label.id && checkboxOptimisticState.optimisticLabels) {
-            if (checkboxOptimisticState.optimisticLabels.addedLabelIds.includes(label.id)) {
+          if (rightClickedThreadOptimisticState.optimisticLabels) {
+            if (rightClickedThreadOptimisticState.optimisticLabels.addedLabelIds.includes(label.id)) {
               isChecked = true;
             } else if (
-              checkboxOptimisticState.optimisticLabels.removedLabelIds.includes(label.id)
+              rightClickedThreadOptimisticState.optimisticLabels.removedLabelIds.includes(label.id)
             ) {
               isChecked = false;
             }
@@ -138,7 +135,7 @@ export function ThreadContextMenu({
   const [{ isLoading, isFetching }] = useThreads();
   const currentFolder = folder ?? '';
   const isArchiveFolder = currentFolder === FOLDERS.ARCHIVE;
-
+  const isSnoozedFolder = currentFolder === FOLDERS.SNOOZED;
   const [, setMode] = useQueryState('mode');
   const [, setThreadId] = useQueryState('threadId');
   const { data: threadData } = useThread(threadId);
@@ -151,6 +148,8 @@ export function ThreadContextMenu({
     optimisticMarkAsRead,
     optimisticMarkAsUnread,
     optimisticDeleteThreads,
+    optimisticSnooze,
+    optimisticUnsnooze,
   } = useOptimisticActions();
 
   const { isUnread, isStarred, isImportant } = useMemo(() => {
@@ -359,6 +358,31 @@ export function ThreadContextMenu({
       ];
     }
 
+    if (isSnoozedFolder) {
+      return [
+        {
+          id: 'unsnooze',
+          label: 'Unsnooze',
+          icon: <Inbox className="mr-2.5 h-4 w-4 opacity-60" />,
+          action: () => {
+            const targets = mail.bulkSelected.length ? mail.bulkSelected : [threadId];
+            optimisticUnsnooze(targets, currentFolder);
+            if (mail.bulkSelected.length) {
+              setMail({ ...mail, bulkSelected: [] });
+            }
+          },
+          disabled: false,
+        },
+        {
+          id: 'move-to-bin',
+          label: m['common.mail.moveToBin'](),
+          icon: <Trash className="mr-2.5 h-4 w-4 opacity-60" />,
+          action: handleMove(LABELS.SNOOZED, LABELS.TRASH),
+          disabled: false,
+        },
+      ];
+    }
+
     if (isArchiveFolder || !isInbox) {
       return [
         {
@@ -422,6 +446,14 @@ export function ThreadContextMenu({
     ];
   }, [isSpam, isBin, isArchiveFolder, isInbox, isSent, handleMove, handleDelete]);
 
+  const [snoozeOpen, setSnoozeOpen] = useState(false);
+
+  const handleSnoozeConfirm = (wakeAt: Date) => {
+    const targets = mail.bulkSelected.length ? mail.bulkSelected : [threadId];
+    optimisticSnooze(targets, currentFolder, wakeAt);
+    setSnoozeOpen(false);
+  };
+
   const otherActions: EmailAction[] = useMemo(
     () => [
       {
@@ -453,8 +485,23 @@ export function ThreadContextMenu({
         ),
         action: handleFavorites,
       },
+      {
+        id: 'snooze',
+        label: 'Snooze',
+        icon: <Clock className="mr-2.5 h-4 w-4 opacity-60" />,
+        action: () => setSnoozeOpen(true),
+        disabled: false,
+      },
+    ],
+    [
+      isUnread,
+      isImportant,
+      isStarred,
+      m,
+      handleReadUnread,
+      handleToggleImportant,
+      handleFavorites,
     ],
-    [isUnread, isImportant, isStarred, m, handleReadUnread, handleToggleImportant, handleFavorites],
   );
 
   const renderAction = (action: EmailAction) => {
@@ -473,36 +520,43 @@ export function ThreadContextMenu({
   };
 
   return (
-    <ContextMenu>
-      <ContextMenuTrigger disabled={isLoading || isFetching} className="w-full">
-        {children}
-      </ContextMenuTrigger>
-      <ContextMenuContent
-        className="dark:bg-panelDark w-56 overflow-y-auto bg-white"
-        onContextMenu={(e) => e.preventDefault()}
-      >
-        {primaryActions.map(renderAction)}
-
-        <ContextMenuSeparator className="bg-[#E7E7E7] dark:bg-[#252525]" />
-
-        <ContextMenuSub>
-          <ContextMenuSubTrigger className="font-normal">
-            <Tag className="mr-2.5 h-4 w-4 opacity-60" />
-            {m['common.mail.labels']()}
-          </ContextMenuSubTrigger>
-          <ContextMenuSubContent className="dark:bg-panelDark max-h-[520px] w-48 overflow-y-auto bg-white">
-            <LabelsList threadId={threadId} bulkSelected={mail.bulkSelected} />
-          </ContextMenuSubContent>
-        </ContextMenuSub>
-
-        <ContextMenuSeparator className="bg-[#E7E7E7] dark:bg-[#252525]" />
-
-        {getActions.map(renderAction)}
-
-        <ContextMenuSeparator className="bg-[#E7E7E7] dark:bg-[#252525]" />
-
-        {otherActions.map(renderAction)}
-      </ContextMenuContent>
-    </ContextMenu>
+    <>
+      <ContextMenu>
+        <ContextMenuTrigger disabled={isLoading || isFetching} className="w-full">
+          {children}
+        </ContextMenuTrigger>
+        <ContextMenuContent
+          className="dark:bg-panelDark w-56 overflow-y-auto bg-white"
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {primaryActions.map(renderAction)}
+
+          <ContextMenuSeparator className="bg-[#E7E7E7] dark:bg-[#252525]" />
+
+          <ContextMenuSub>
+            <ContextMenuSubTrigger className="font-normal">
+              <Tag className="mr-2.5 h-4 w-4 opacity-60" />
+              {m['common.mail.labels']()}
+            </ContextMenuSubTrigger>
+            <ContextMenuSubContent className="dark:bg-panelDark max-h-[520px] w-48 overflow-y-auto bg-white">
+              <LabelsList threadId={threadId} bulkSelected={mail.bulkSelected} />
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+
+          <ContextMenuSeparator className="bg-[#E7E7E7] dark:bg-[#252525]" />
+
+          {getActions.map(renderAction)}
+
+          <ContextMenuSeparator className="bg-[#E7E7E7] dark:bg-[#252525]" />
+
+          {otherActions.map(renderAction)}
+        </ContextMenuContent>
+      </ContextMenu>
+      <SnoozeDialog
+        open={snoozeOpen}
+        onOpenChange={setSnoozeOpen}
+        onConfirm={handleSnoozeConfirm}
+      />
+    </>
   );
 }

apps/mail/components/icons/icons.tsx

@@ -1625,6 +1625,8 @@ export const Clock = ({ className }: { className?: string }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7ZM7.75 2.75C7.75 2.33579 7.41421 2 7 2C6.58579 2 6.25 2.33579 6.25 2.75V7C6.25 7.41421 6.58579 7.75 7 7.75H10.25C10.6642 7.75 11 7.41421 11 7C11 6.58579 10.6642 6.25 10.25 6.25H7.75V2.75Z"
+      fill="var(--icon-color)"
+      fillOpacity="0.5"
     />
   </svg>
 );

apps/mail/components/mail/optimistic-thread-state.tsx

@@ -72,6 +72,16 @@ export function useOptimisticThreadState(threadId: string) {
           states.isImportant = true;
           states.optimisticImportant = action.important;
           break;
+
+        case 'SNOOZE':
+          states.shouldHide = true;
+          states.optimisticDestination = 'snoozed';
+          break;
+
+        case 'UNSNOOZE':
+          states.shouldHide = true;
+          states.optimisticDestination = 'inbox';
+          break;
       }
     });
 

apps/mail/components/mail/snooze-dialog.tsx

@@ -0,0 +1,98 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+type SnoozeDialogProps = {
+  trigger?: React.ReactElement;
+  onConfirm: (wakeAt: Date) => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export function SnoozeDialog({ trigger, onConfirm, open: controlledOpen, onOpenChange }: SnoozeDialogProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const now = new Date();
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  const defaultDate = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+  const defaultTime = `${pad(now.getHours())}:${pad(now.getMinutes())}`;
+
+  const [date, setDate] = useState<string>(defaultDate);
+  const [time, setTime] = useState<string>(defaultTime);
+
+  const timeZoneLabel = (() => {
+    try {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    } catch {
+      const offsetMin = new Date().getTimezoneOffset();
+      const sign = offsetMin > 0 ? '-' : '+';
+      const abs = Math.abs(offsetMin);
+      const hrs = Math.floor(abs / 60)
+        .toString()
+        .padStart(2, '0');
+      const mins = (abs % 60).toString().padStart(2, '0');
+      return `UTC${sign}${hrs}:${mins}`;
+    }
+  })();
+
+  const handleSubmit = () => {
+    let wakeDate: Date;
+
+    if (date) {
+      wakeDate = new Date(`${date}T${time || defaultTime}`);
+    } else {
+      const today = new Date();
+      const [hours, minutes] = (time || defaultTime).split(':').map((v) => parseInt(v, 10));
+      today.setHours(hours, minutes, 0, 0);
+      wakeDate = today;
+    }
+
+    if (wakeDate.getTime() <= Date.now()) {
+      toast.error('Please choose a future date and time.');
+      return;
+    }
+
+    onConfirm(wakeDate);
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Snooze until…</DialogTitle>
+          <DialogDescription>Select date and time you'd like this email to return.</DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-4 py-2">
+          <label className="text-sm font-medium">
+            Date
+            <Input
+              type="date"
+              min={defaultDate}
+              value={date}
+              onChange={(e) => setDate(e.target.value)}
+            />
+          </label>
+          <label className="text-sm font-medium">
+            Time <span className="text-xs font-normal text-muted-foreground">({timeZoneLabel})</span>
+            <Input
+              type="time"
+              value={time}
+              onChange={(e) => setTime(e.target.value)}
+            />
+          </label>
+        </div>
+        <DialogFooter className="flex justify-end gap-2">
+          <Button variant="ghost" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Snooze</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+} 

apps/mail/config/navigation.ts

@@ -13,6 +13,7 @@ import {
   Sheet,
   Plane2,
   LockIcon,
+  Clock,
 } from '@/components/icons/icons';
 import { MessageSquareIcon } from 'lucide-react';
 import { m } from '@/paraglide/messages';
@@ -81,6 +82,13 @@ export const navigationConfig: Record<string, NavConfig> = {
             icon: Archive,
             shortcut: 'g + a',
           },
+          {
+            id: 'snoozed',
+            title: m['navigation.sidebar.snoozed'](),
+            url: '/mail/snoozed',
+            icon: Clock,
+            shortcut: 'g + z',
+          },
           {
             id: 'spam',
             title: m['navigation.sidebar.spam'](),