@autono/open-pages 0.8.0 → 0.9.0

package/src/app/lib/page-thumb.tsx

@@ -8,7 +8,15 @@ const THUMB_VIEWPORT = 1280;
  * desktop width and scaled down to fit. Inert — pointer events go to the
  * card, and the frame never takes focus.
  */
-export function PageThumb({ source, title }: { source: FrameSource; title: string }) {
+export function PageThumb({
+  source,
+  title,
+  viewport = THUMB_VIEWPORT,
+}: {
+  source: FrameSource;
+  title: string;
+  viewport?: number;
+}) {
   const ref = useRef<HTMLDivElement | null>(null);
   const [size, setSize] = useState({ width: 0, height: 0 });
 
@@ -22,7 +30,7 @@ export function PageThumb({ source, title }: { source: FrameSource; title: strin
     return () => ro.disconnect();
   }, []);
 
-  const scale = size.width > 0 ? size.width / THUMB_VIEWPORT : 0;
+  const scale = size.width > 0 ? size.width / viewport : 0;
 
   return (
     <div ref={ref} className="h-full w-full overflow-hidden bg-white">
@@ -35,7 +43,7 @@ export function PageThumb({ source, title }: { source: FrameSource; title: strin
           aria-hidden
           className="pointer-events-none origin-top-left border-0"
           style={{
-            width: THUMB_VIEWPORT,
+            width: viewport,
             height: size.height / scale,
             transform: `scale(${scale})`,
           }}

package/src/app/lib/sdk.ts

@@ -29,6 +29,28 @@ export type PageModule = {
   design?: DesignSystem;
 };
 
+export type EmailMeta = {
+  /** Display name in the workspace. Default: the folder name. */
+  title?: string;
+  /** Subject line the email is meant to be sent with. */
+  subject?: string;
+  /** What the email is for; shown on the workspace card. */
+  description?: string;
+  /** ISO 8601 timestamp. Set once at scaffold time; used to sort the email list. */
+  createdAt?: string;
+};
+
+/**
+ * An email is one react-email component rendered on the server to a single
+ * HTML document with inlined styles, plus a plain-text alternative derived
+ * from it. It never runs in a browser: no hooks with effects, no state, no
+ * browser APIs.
+ */
+export type EmailModule = {
+  default: ComponentType;
+  meta?: EmailMeta;
+};
+
 export type FolderIcon = { type: 'emoji'; value: string } | { type: 'color'; value: string };
 
 export type Folder = {

package/src/app/routes/email.tsx

@@ -0,0 +1,424 @@
+import config from 'virtual:open-pages/config';
+import {
+  ChevronLeft,
+  Code2,
+  Copy,
+  Crosshair,
+  ExternalLink,
+  FileText,
+  Loader2,
+  Monitor,
+  RotateCw,
+  Smartphone,
+  TriangleAlert,
+} from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import { type Selection, SelectionNote } from '~/components/selection-note';
+import { Button, buttonVariants } from '~/components/ui/button';
+import { readLastHomeLocation } from '~/lib/last-home-location';
+import { format, useLocale } from '~/lib/use-locale';
+import { cn } from '~/lib/utils';
+import { emailChangeIncludes, emailIds, emailMeta } from '../lib/emails';
+import { emailUrl, type FrameMessage, isFrameMessage, type WorkspaceMessage } from '../lib/frame';
+
+const { showPageUi, showPageBrowser } = config.build;
+
+type View = 'html' | 'text';
+type Viewport = { id: 'desktop' | 'mobile'; width: number | null };
+
+const VIEWPORTS: Viewport[] = [
+  { id: 'desktop', width: null },
+  { id: 'mobile', width: 375 },
+];
+const VIEWPORT_STORAGE_KEY = 'open-pages:email-viewport';
+const VIEWPORT_ICONS = { desktop: Monitor, mobile: Smartphone } as const;
+
+function readViewportPref(): Viewport {
+  try {
+    const raw = window.localStorage.getItem(VIEWPORT_STORAGE_KEY);
+    return VIEWPORTS.find((v) => v.id === raw) ?? VIEWPORTS[0];
+  } catch {
+    return VIEWPORTS[0];
+  }
+}
+
+export function EmailView() {
+  const { emailId = '' } = useParams();
+  const known = emailIds.includes(emailId);
+  const info = emailMeta[emailId];
+  const title = info?.title ?? emailId;
+  const t = useLocale();
+
+  useEffect(() => {
+    document.title = `${title} — Autono`;
+    return () => {
+      document.title = 'Autono';
+    };
+  }, [title]);
+
+  const navigate = useNavigate();
+  const goBack = useCallback(() => {
+    const idx = (window.history.state as { idx?: number } | null)?.idx ?? 0;
+    if (idx > 0) navigate(-1);
+    else navigate(readLastHomeLocation(), { replace: true });
+  }, [navigate]);
+
+  const [view, setView] = useState<View>('html');
+  const [viewport, setViewport] = useState<Viewport>(readViewportPref);
+  const pickViewport = (v: Viewport) => {
+    setViewport(v);
+    try {
+      window.localStorage.setItem(VIEWPORT_STORAGE_KEY, v.id);
+    } catch {}
+  };
+
+  // Bumped on every change to the email or its imports; the frame and the
+  // text alternative both re-fetch from the server.
+  const [version, setVersion] = useState(0);
+  const [frameEl, setFrameEl] = useState<HTMLIFrameElement | null>(null);
+  const [ready, setReady] = useState(false);
+  const [text, setText] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    const handler = (data: unknown) => {
+      if (emailChangeIncludes(data, emailId)) setVersion((v) => v + 1);
+    };
+    import.meta.hot.on('open-pages:email-changed', handler);
+    return () => import.meta.hot?.off('open-pages:email-changed', handler);
+  }, [emailId]);
+
+  const [unresolved, setUnresolved] = useState<string[]>([]);
+  useEffect(() => {
+    if (!known) return;
+    let cancelled = false;
+    fetch(`${emailUrl(emailId, 'json')}?v=${version}`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((body: { unresolved?: unknown } | null) => {
+        if (cancelled) return;
+        setUnresolved(Array.isArray(body?.unresolved) ? (body.unresolved as string[]) : []);
+      })
+      .catch(() => {
+        if (!cancelled) setUnresolved([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [known, emailId, version]);
+
+  useEffect(() => {
+    if (view !== 'text' || !known) return;
+    let cancelled = false;
+    setText(null);
+    fetch(`${emailUrl(emailId, 'text')}?v=${version}`)
+      .then((res) => res.text())
+      .then((body) => {
+        if (!cancelled) setText(body);
+      })
+      .catch((e) => {
+        if (!cancelled) setText(e instanceof Error ? e.message : String(e));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [view, known, emailId, version]);
+
+  const [inspecting, setInspecting] = useState(false);
+  const [selection, setSelection] = useState<Selection | null>(null);
+  const [note, setNote] = useState('');
+  const [savingNote, setSavingNote] = useState(false);
+
+  const send = useCallback(
+    (msg: WorkspaceMessage) => {
+      frameEl?.contentWindow?.postMessage(msg, '*');
+    },
+    [frameEl],
+  );
+
+  useEffect(() => {
+    send({ type: 'op:inspect', on: inspecting });
+    if (!inspecting) {
+      setSelection(null);
+      send({ type: 'op:select', loc: null });
+    }
+  }, [inspecting, send]);
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      if (event.source !== frameEl?.contentWindow) return;
+      if (!isFrameMessage(event.data)) return;
+      const msg: FrameMessage = event.data;
+      if (msg.type === 'op:ready') {
+        setReady(true);
+        send({ type: 'op:inspect', on: inspecting });
+      } else if (msg.type === 'op:select') {
+        setSelection({ loc: msg.loc, tag: msg.tag, text: msg.text });
+        setNote('');
+      } else if (msg.type === 'op:key') {
+        if (msg.key === 'i') setInspecting((v) => !v);
+        if (msg.key === 'Escape') setSelection(null);
+      }
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [frameEl, inspecting, send]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement | null)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+      if (e.key === 'i') setInspecting((v) => !v);
+      if (e.key === 'Escape') setSelection(null);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  useEffect(() => {
+    if (!import.meta.hot || !emailId || !known) return;
+    import.meta.hot.send('open-pages:current', {
+      pageId: emailId,
+      pageTitle: title,
+      view: 'emails',
+    });
+  }, [emailId, known, title]);
+
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    const [line, column] = selection
+      ? selection.loc.split(':').map(Number)
+      : [undefined, undefined];
+    import.meta.hot.send('open-pages:current', {
+      selection: selection ? { line, column, tagName: selection.tag, text: selection.text } : null,
+    });
+    send({ type: 'op:select', loc: selection?.loc ?? null });
+  }, [selection, send]);
+
+  const submitComment = useCallback(async () => {
+    if (!selection || !note.trim()) return;
+    const [line, column] = selection.loc.split(':').map(Number);
+    setSavingNote(true);
+    try {
+      const res = await fetch('/__comments/add', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ pageId: emailId, target: 'email', line, column, text: note.trim() }),
+      });
+      if (!res.ok) {
+        const body = (await res.json().catch(() => ({}))) as { error?: string };
+        throw new Error(body.error ?? `POST /__comments/add → ${res.status}`);
+      }
+      toast.success('Comment saved — run /apply-comments to apply it');
+      setSelection(null);
+      setNote('');
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSavingNote(false);
+    }
+  }, [selection, note, emailId]);
+
+  const copyHtml = useCallback(async () => {
+    try {
+      const res = await fetch(`${emailUrl(emailId, 'html')}?raw`);
+      if (!res.ok) throw new Error(`${res.status}`);
+      await navigator.clipboard.writeText(await res.text());
+      toast.success(t.emails.copiedHtml);
+    } catch {
+      toast.error(t.emails.copyHtmlFailed);
+    }
+  }, [emailId, t]);
+
+  const frameSrc = useMemo(
+    () => (known ? `${emailUrl(emailId, 'html')}?v=${version}` : ''),
+    [known, emailId, version],
+  );
+  const rawSrc = known ? `${emailUrl(emailId, 'html')}?raw` : undefined;
+  const canInspect = view === 'html' && import.meta.env.DEV;
+
+  return (
+    <div className="flex h-screen flex-col bg-muted/40 text-foreground">
+      {showPageUi && (
+        <header className="flex h-12 shrink-0 items-center gap-2 border-b bg-background px-3">
+          {showPageBrowser && (
+            <Button variant="ghost" size="icon" aria-label={t.emails.backToEmails} onClick={goBack}>
+              <ChevronLeft className="size-4" />
+            </Button>
+          )}
+          <h1 className="min-w-0 truncate text-sm font-medium">{title}</h1>
+          <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+            email
+          </span>
+          {known && (
+            <span
+              className="hidden min-w-0 truncate text-xs text-muted-foreground md:inline"
+              title={t.emails.subjectLabel}
+            >
+              {info?.subject ?? t.emails.noSubject}
+            </span>
+          )}
+          <div className="ml-auto flex items-center gap-2">
+            {unresolved.length > 0 && (
+              <span
+                className="flex items-center gap-1.5 rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-1 text-xs text-amber-700 dark:text-amber-300"
+                title={`${t.emails.unresolvedTitle}\n${unresolved.join(' ')}`}
+              >
+                <TriangleAlert className="size-3.5" aria-hidden />
+                {format(t.emails.unresolvedCount, { count: String(unresolved.length) })}
+              </span>
+            )}
+            {!ready && known && view === 'html' && (
+              <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Loader2 className="size-3.5 animate-spin" />
+                {t.page.loadingEyebrow}
+              </span>
+            )}
+            <fieldset className="flex items-center rounded-md border p-0.5" aria-label="View">
+              <Button
+                variant={view === 'html' ? 'secondary' : 'ghost'}
+                size="sm"
+                aria-pressed={view === 'html'}
+                onClick={() => setView('html')}
+              >
+                <Code2 className="size-3.5" />
+                {t.emails.viewHtml}
+              </Button>
+              <Button
+                variant={view === 'text' ? 'secondary' : 'ghost'}
+                size="sm"
+                aria-pressed={view === 'text'}
+                onClick={() => setView('text')}
+              >
+                <FileText className="size-3.5" />
+                {t.emails.viewText}
+              </Button>
+            </fieldset>
+            {view === 'html' && (
+              <fieldset className="flex items-center rounded-md border p-0.5" aria-label="Viewport">
+                {VIEWPORTS.map((v) => {
+                  const Icon = VIEWPORT_ICONS[v.id];
+                  const label =
+                    v.id === 'desktop' ? t.emails.viewportDesktop : t.emails.viewportMobile;
+                  return (
+                    <Button
+                      key={v.id}
+                      variant={viewport.id === v.id ? 'secondary' : 'ghost'}
+                      size="icon-sm"
+                      aria-label={label}
+                      aria-pressed={viewport.id === v.id}
+                      title={v.width ? `${label} · ${v.width}px` : label}
+                      onClick={() => pickViewport(v)}
+                    >
+                      <Icon className="size-3.5" />
+                    </Button>
+                  );
+                })}
+              </fieldset>
+            )}
+            <Button
+              variant="outline"
+              size="icon-sm"
+              aria-label={t.emails.reload}
+              title={t.emails.reload}
+              onClick={() => {
+                setReady(false);
+                setVersion((v) => v + 1);
+              }}
+            >
+              <RotateCw className="size-3.5" />
+            </Button>
+            {canInspect && (
+              <Button
+                variant={inspecting ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setInspecting((v) => !v)}
+                disabled={!ready}
+                aria-pressed={inspecting}
+                title="Inspect elements (i) — click any element to select it or leave a comment"
+              >
+                <Crosshair className="size-4" />
+                Inspect
+              </Button>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={copyHtml}
+              disabled={!known}
+              title={t.emails.copyHtml}
+            >
+              <Copy className="size-4" />
+              {t.emails.copyHtml}
+            </Button>
+            <a
+              href={rawSrc}
+              target="_blank"
+              rel="noreferrer"
+              aria-label={t.emails.openInTab}
+              aria-disabled={!known || undefined}
+              tabIndex={known ? undefined : -1}
+              title={t.emails.openInTab}
+              className={cn(
+                buttonVariants({ variant: 'outline', size: 'sm' }),
+                !known && 'pointer-events-none opacity-50',
+              )}
+            >
+              <ExternalLink className="size-4" />
+              Open
+            </a>
+          </div>
+        </header>
+      )}
+
+      {!known && (
+        <div className="border-b border-destructive/30 bg-destructive/10 px-4 py-2 font-mono text-xs text-destructive whitespace-pre-wrap">
+          {format(t.emails.notFound, { id: emailId })}
+        </div>
+      )}
+
+      <main className="relative flex min-h-0 flex-1 justify-center overflow-hidden">
+        {known && view === 'html' && (
+          <iframe
+            key={frameSrc}
+            ref={setFrameEl}
+            title={title}
+            src={frameSrc}
+            className={cn(
+              'h-full border-0 bg-white',
+              viewport.width !== null && 'border-x shadow-md',
+              inspecting && 'cursor-crosshair',
+            )}
+            style={{ width: viewport.width ?? '100%', maxWidth: '100%' }}
+          />
+        )}
+        {known && view === 'text' && (
+          <div className="h-full w-full overflow-auto bg-background">
+            {text === null ? (
+              <div className="flex items-center gap-1.5 px-6 py-6 text-xs text-muted-foreground">
+                <Loader2 className="size-3.5 animate-spin" />
+                {t.page.loadingEyebrow}
+              </div>
+            ) : (
+              <pre className="mx-auto w-full max-w-[72ch] whitespace-pre-wrap px-6 py-8 font-mono text-[13px] leading-6 text-foreground">
+                {text}
+              </pre>
+            )}
+          </div>
+        )}
+
+        {selection && (
+          <SelectionNote
+            selection={selection}
+            note={note}
+            saving={savingNote}
+            onNoteChange={setNote}
+            onSubmit={submitComment}
+            onClear={() => setSelection(null)}
+          />
+        )}
+      </main>
+    </div>
+  );
+}

package/src/app/routes/emails.tsx

@@ -0,0 +1,94 @@
+import { Mail } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { format, useLocale } from '~/lib/use-locale';
+import { SystemViewIcon } from '../components/sidebar/folder-item';
+import { emailCreatedAt, emailIds, emailMeta } from '../lib/emails';
+import { PageThumb } from '../lib/page-thumb';
+
+// Emails lay out at 600px; a slightly wider thumb viewport keeps the body
+// margins visible so the card reads as an email, not a cropped page.
+const EMAIL_THUMB_VIEWPORT = 760;
+
+export function EmailsGalleryPage() {
+  const t = useLocale();
+  const sorted = emailIds
+    .slice()
+    .sort((a, b) => (emailCreatedAt[b] ?? 0) - (emailCreatedAt[a] ?? 0));
+
+  return (
+    <>
+      <header className="mb-6 md:mb-8">
+        <div className="flex flex-wrap items-center gap-2.5">
+          <SystemViewIcon kind="emails" className="text-muted-foreground" />
+          <h1 className="font-heading text-[19px] font-semibold leading-none tracking-[-0.015em] md:text-[21px]">
+            {t.emails.title}
+          </h1>
+          <span className="folio ml-0.5">{emailIds.length.toString().padStart(2, '0')}</span>
+        </div>
+      </header>
+
+      {sorted.length === 0 ? (
+        <EmptyState />
+      ) : (
+        <ul className="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-x-6 gap-y-9 md:grid-cols-[repeat(auto-fill,minmax(300px,1fr))]">
+          {sorted.map((id, i) => {
+            const info = emailMeta[id];
+            const title = info?.title ?? id;
+            return (
+              <li
+                key={id}
+                className="rise-in"
+                style={{ animationDelay: `${Math.min(i, 11) * 30}ms` }}
+              >
+                <Link
+                  to={`/e/${id}`}
+                  aria-label={format(t.emails.openEmailAria, { name: title })}
+                  className="group block rounded-[6px] outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                >
+                  <div className="relative aspect-[4/3] overflow-hidden rounded-[6px] border border-hairline bg-card shadow-edge ring-1 ring-foreground/[0.04] group-hover:shadow-floating group-hover:ring-foreground/20 motion-safe:transition-[box-shadow,--tw-ring-color,scale] motion-safe:duration-200 group-active:scale-[0.99]">
+                    <div className="h-full w-full motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.03]">
+                      <PageThumb
+                        source={{ emailId: id }}
+                        title={title}
+                        viewport={EMAIL_THUMB_VIEWPORT}
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-3 min-w-0">
+                    <h3 className="truncate font-heading text-[14px] font-medium tracking-tight">
+                      {title}
+                    </h3>
+                    <p className="mt-0.5 truncate text-[12.5px] text-muted-foreground">
+                      {info?.subject ?? t.emails.noSubject}
+                    </p>
+                  </div>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </>
+  );
+}
+
+function EmptyState() {
+  const t = useLocale();
+  return (
+    <div className="rounded-[8px] border border-dashed border-border px-8 py-20">
+      <div className="mx-auto flex max-w-md flex-col items-center text-center">
+        <Mail className="size-5 text-muted-foreground/60" aria-hidden />
+        <p className="mt-4 font-heading text-[14px] font-semibold tracking-tight">
+          {t.emails.noEmailsTitle}
+        </p>
+        <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+          {t.emails.noEmailsHintPrefix}
+          <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
+            /create-email
+          </code>
+          {t.emails.noEmailsHintSuffix}
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/app/routes/home-shell.tsx

@@ -18,7 +18,14 @@ import { cn } from '~/lib/utils';
 import { CommandMenuTrigger } from '../components/command/command-menu';
 import { HomeCommandMenu } from '../components/command/home-command-menu';
 import { SystemViewIcon } from '../components/sidebar/folder-item';
-import { ALL_DOCS_ID, ASSETS_ID, Sidebar, THEMES_ID } from '../components/sidebar/sidebar';
+import {
+  ALL_DOCS_ID,
+  ASSETS_ID,
+  EMAILS_ID,
+  Sidebar,
+  THEMES_ID,
+} from '../components/sidebar/sidebar';
+import { emailIds } from '../lib/emails';
 import { pageIds } from '../lib/pages';
 import type { FoldersManifest } from '../lib/sdk';
 import { themes as themeRegistry } from '../lib/themes';
@@ -28,7 +35,7 @@ export type HomeOutletContext = {
   loading: boolean;
   draftDocs: string[];
   docsByFolder: Record<string, string[]>;
-  /** Selected view id: ALL_DOCS_ID, DRAFT_ID, a folder id, THEMES_ID, or ASSETS_ID. */
+  /** Selected view id: ALL_DOCS_ID, DRAFT_ID, a folder id, THEMES_ID, ASSETS_ID, or EMAILS_ID. */
   selectedId: string;
   selectFolder: (id: string) => void;
   reportTitle: (pageId: string, title: string) => void;
@@ -42,6 +49,7 @@ export type HomeOutletContext = {
 function pathToSelectedId(pathname: string, search: URLSearchParams): string {
   if (pathname === '/themes' || pathname.startsWith('/themes/')) return THEMES_ID;
   if (pathname === '/assets') return ASSETS_ID;
+  if (pathname === '/emails') return EMAILS_ID;
   return search.get('f') ?? ALL_DOCS_ID;
 }
 
@@ -81,6 +89,7 @@ export function HomeShell() {
     (id: string) => {
       if (id === THEMES_ID) navigate('/themes', { replace: true });
       else if (id === ASSETS_ID) navigate('/assets', { replace: true });
+      else if (id === EMAILS_ID) navigate('/emails', { replace: true });
       else if (id === ALL_DOCS_ID) navigate('/', { replace: true });
       else navigate(`/?f=${encodeURIComponent(id)}`, { replace: true });
     },
@@ -151,6 +160,7 @@ export function HomeShell() {
           allCount={pageIds.length}
           themesCount={themeRegistry.length}
           assetsCount={globalAssets.length}
+          emailsCount={emailIds.length}
           selectedId={selectedId}
           onSelect={selectFolder}
           onCreate={(name, icon) => create(name, icon)}
@@ -215,6 +225,7 @@ export function HomeShell() {
                     className={cn(
                       selectedId !== THEMES_ID &&
                         selectedId !== ASSETS_ID &&
+                        selectedId !== EMAILS_ID &&
                         'bg-muted text-foreground',
                     )}
                   >
@@ -232,6 +243,14 @@ export function HomeShell() {
                       {themeRegistry.length.toString().padStart(2, '0')}
                     </span>
                   </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => selectFolder(EMAILS_ID)}
+                    className={cn(selectedId === EMAILS_ID && 'bg-muted text-foreground')}
+                  >
+                    <SystemViewIcon kind="emails" className="text-muted-foreground" />
+                    <span className="flex-1 truncate">{t.home.emails}</span>
+                    <span className="folio">{emailIds.length.toString().padStart(2, '0')}</span>
+                  </DropdownMenuItem>
                   {import.meta.env.DEV && (
                     <DropdownMenuItem
                       onClick={() => selectFolder(ASSETS_ID)}