Merge pull request #1050 from Mail-0/fixes-drafts

feat: add Draft component to mail list for displaying draft messages

apps/mail/components/mail/mail-list.tsx

@@ -46,6 +46,7 @@ import { useThreadLabels } from '@/hooks/use-labels';
 import { useKeyState } from '@/hooks/use-hot-key';
 import { RenderLabels } from './render-labels';
 import { Badge } from '@/components/ui/badge';
+import { useDraft } from '@/hooks/use-drafts';
 import { useStats } from '@/hooks/use-stats';
 import { useTranslations } from 'use-intl';
 import { useParams } from 'react-router';
@@ -480,6 +481,63 @@ const Thread = memo(
   },
 );
 
+const Draft = memo(({ message }: { message: { id: string } }) => {
+  const { data: draft } = useDraft(message.id);
+  const [, setComposeOpen] = useQueryState('isComposeOpen');
+  const [, setDraftId] = useQueryState('draftId');
+  const handleMailClick = useCallback(() => {
+    setComposeOpen('true');
+    setDraftId(message.id);
+    return;
+  }, [message.id]);
+
+  return (
+    <div className="select-none py-1" onClick={handleMailClick}>
+      <div
+        key={message.id}
+        className={cn(
+          'hover:bg-offsetLight hover:bg-primary/5 group relative mx-[8px] flex cursor-pointer flex-col items-start overflow-clip rounded-[10px] border-transparent py-3 text-left text-sm transition-all hover:opacity-100',
+        )}
+      >
+        <div
+          className={cn(
+            'bg-primary absolute inset-y-0 left-0 w-1 -translate-x-2 transition-transform ease-out',
+          )}
+        />
+        <div className="flex w-full items-center justify-between gap-4 px-4">
+          <div className="flex w-full justify-between">
+            <div className="w-full">
+              <div className="flex w-full flex-row items-center justify-between">
+                <div className="flex flex-row items-center gap-[4px]">
+                  <span
+                    className={cn(
+                      'font-medium',
+                      'text-md flex items-baseline gap-1 group-hover:opacity-100',
+                    )}
+                  >
+                    <span className={cn('max-w-[25ch] truncate text-sm')}>
+                      {cleanNameDisplay(draft?.to?.[0] || 'noname') || ''}
+                    </span>
+                  </span>
+                </div>
+              </div>
+              <div className="flex justify-between">
+                <p
+                  className={cn(
+                    'mt-1 line-clamp-1 max-w-[50ch] text-sm text-[#8C8C8C] md:max-w-[30ch]',
+                  )}
+                >
+                  {draft?.subject}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
 export const MailList = memo(
   function MailList() {
     const { folder } = useParams<{ folder: string }>();
@@ -668,12 +726,14 @@ export const MailList = memo(
 
     const filteredItems = useMemo(() => items.filter((item) => item.id), [items]);
 
+    const Comp = folder === FOLDERS.DRAFT ? Draft : Thread;
+
     const vListRenderer = useCallback(
       (index: number) => {
         const item = filteredItems[index];
         return (
           <>
-            <Thread
+            <Comp
               onClick={handleMailClick}
               message={item}
               key={item.id}