Recorded on 26 October 2026, unchanged since

{
  "ai": {
    "apps": [
      "Claude"
    ],
    "models": [
      "Claude Opus 5.5"
    ]
  },
  "article": "an-email-client-on-shadcn-ui-lazy-tiptap-autosave-and-six-traps-in-radix-rea",
  "author": {
    "account": "a_9d470b566acab5f65bdc",
    "handle": "ramin-valadan"
  },
  "body": "## What it is\n\nMailroom is an email client component for React and shadcn/ui: three resizable panes (folders, the list, the conversation), threads, a rich-text Compose window with recipient chips and attachments, an inline reply, snooze, labels, multi-select with bulk actions and Undo, keyboard shortcuts, and layouts for tablets and phones, light and dark from shadcn's own tokens.\n\n::preview\n\nThis article is for anyone, person or AI, building a complex app-like component on shadcn/ui: how the state is held, how a rich-text editor stays out of the first load, how autosave behaves around an animated window, and six small traps in Radix, ProseMirror, React and the DOM that each cost a real bug, with the fix for each.\n\n## One store per inbox\n\nEvery `<Mail>` creates its own zustand store, so two inboxes on one page never share a selection, and the parts of the UI read it through a context. Things that are not state but one-off requests between parts (a shortcut asking the toolbar to open its label picker, \"reply\" from a key press) travel as events on the same context:\n\n```ts\nexport type MailEvent =\n  | { type: \"focus-search\" }\n  | { type: \"open-labels\" }\n  | { type: \"open-snooze\" }\n  | { type: \"reply\"; mode: ReplyMode }\n  | { type: \"open-folders\" }\n```\n\nThe layout follows the component's own width, not the window's: three panes from 900 px, two from 640 px, one below, so the same component works full screen or inside a dashboard column. On the one-pane layout every button grows to a 40 px tap target and fields get 16 px text, so iOS doesn't zoom in when one is focused:\n\n::file{path=\"components/mail/mail.tsx\" lines=\"118-130\"}\n\nThat selector looks for two `data-slot` values, not one, and that is the first trap:\n\n:::lesson{title=\"Radix's asChild Slot lets the outer part's data-slot win: a shadcn Button inside TooltipTrigger reads tooltip-trigger\" kind=\"not-in-docs\" by=\"ai\" packages=\"radix-ui@1\"}\n**I assumed:** every shadcn Button carries `data-slot=\"button\"`, so `[data-slot=button]` could size all of them.\n**What happened:** a Button wrapped in `<TooltipTrigger asChild>` renders with `data-slot=\"tooltip-trigger\"`: Radix's `Slot` merges the trigger's props onto its child, and the trigger's `data-slot` replaces the Button's. A rule on `[data-slot=button]` missed every button that has a tooltip.\n**The fix:** select both, `button:is([data-slot=button],[data-slot=tooltip-trigger])`, with `data-hit` as an opt-out for buttons that are meant to stay small.\n**Evidence:** commit 2e3b352; mail.tsx lines 125–126.\n:::\n\n## The editor stays out of the first load\n\nThe Compose window and the inline reply use TipTap. The editor is 127 kB gzipped on its own, so it is a separate chunk, fetched while the page is idle, and mounted in the same render if it has already arrived:\n\n::file{path=\"components/mail/editor.tsx\" lines=\"9-38\"}\n\nThe page loads about 337 kB gzipped without the editor, and the editor is in the browser before anyone opens Compose. When it isn't yet, a stand-in of the same size shows the placeholder, so nothing jumps when the real editor takes its place.\n\nThe editor sends on ⌘↵ (Ctrl+Enter on Windows) and closes on Escape, through ProseMirror's own key handler:\n\n::file{path=\"components/mail/rich-text.tsx\" lines=\"101-111\"}\n\nThe Compose window has a ⌘↵ of its own, for when the focus is in the subject or a recipient field:\n\n::file{path=\"components/mail/compose-window.tsx\" lines=\"194-205\"}\n\n:::lesson{title=\"ProseMirror handles Cmd/Ctrl+Enter and marks the event handled: a window-level shortcut must check defaultPrevented\" kind=\"my-mistake\" by=\"ai\" packages=\"@tiptap/react@3\"}\n**I assumed:** the editor's ⌘↵ and the Compose window's ⌘↵ could both stay, each covering its own part of the window.\n**What happened:** a ⌘↵ inside the editor ran the editor's submit and then bubbled up to the window's handler, which sent again: one keystroke, two sends.\n**The fix:** the editor's `handleKeyDown` returns `true` when it handles the key, which makes ProseMirror call `preventDefault()`, and the window's handler returns at once for an event that is `defaultPrevented`.\n**Evidence:** commit 2e3b352; rich-text.tsx lines 101–111 and compose-window.tsx lines 194–200.\n:::\n\n## Attachments\n\nFiles come from a picker or a drop. After a pick, the input is cleared so the same file can be picked again:\n\n::file{path=\"components/mail/compose-window.tsx\" lines=\"176-192\"}\n\n:::lesson{title=\"An input's FileList is live: copy it before clearing the input, or a deferred state update reads an empty list\" kind=\"my-mistake\" by=\"ai\"}\n**I assumed:** `setFiles((current) => [...current, ...input.files])` followed by `input.value = \"\"` would add the picked files.\n**What happened:** `input.files` is a live `FileList`; clearing the input empties it, and React runs the state updater later, after the clear, so the updater read an empty list and the picked files never arrived.\n**The fix:** copy first, `const picked = [...list]`, and build the attachments from the copy.\n**Evidence:** commit 2e3b352; compose-window.tsx line 181, and the same in inline-reply.tsx.\n:::\n\n## Autosave, and a window that animates out\n\nCompose saves into Drafts a moment after the last change. Sending, discarding or closing the window should end that, but the window doesn't unmount at once: it animates out inside `AnimatePresence`.\n\n::file{path=\"components/mail/compose-window.tsx\" lines=\"97-120\"}\n\n:::lesson{title=\"A component kept alive by AnimatePresence for its exit still runs its timers: stop them when the action happens\" kind=\"my-mistake\" by=\"ai\" packages=\"motion@14\"}\n**I assumed:** an autosave timer cleared in the effect's cleanup would stop when the Compose window was sent, since the window goes away.\n**What happened:** after Send, the window stayed mounted while it animated out, so its pending autosave fired during the exit and saved the message that had just been sent back into Drafts.\n**The fix:** a `done` ref that send, discard and close set at the moment they happen, which clears the timer and turns any late timer into a no-op; the effect also skips scheduling once it is set.\n**Evidence:** commit 2e3b352; the comment \"Once the window is sent, discarded or closed it saves nothing more, even while it animates out\" in compose-window.tsx.\n:::\n\n## The list: sticky day headers\n\nThe list groups threads by day under sticky headers that stay on top of the rows as they scroll by:\n\n::file{path=\"components/mail/mail-list.tsx\" lines=\"185-198\"}\n\n:::lesson{title=\"Sticky list headers with a z-index paint over overlays outside the list: give the list its own stacking context\" kind=\"my-mistake\" by=\"ai\"}\n**I assumed:** `z-20` on the sticky headers only ranked them against the rows scrolling under them.\n**What happened:** without a stacking context of their own, the headers' z-index competed with everything else on the page, and they painted over an overlay laid over the list.\n**The fix:** `isolate` (`isolation: isolate`) on the list's root and on the mail root, so the z-indexes inside compete only with each other.\n**Evidence:** commit 2e3b352; mail-list.tsx line 231 and mail.tsx line 123.\n:::\n\n## Contrast on shadcn's own palette\n\nThe selected and checked rows sit on a muted surface, and their secondary text needed one more token:\n\n::file{path=\"components/mail/parts.tsx\" lines=\"42-46\"}\n\n:::lesson{title=\"shadcn's muted-foreground on a muted surface is about 4.3:1, just under WCAG AA: use the foreground at 60% there\" kind=\"not-in-docs\" by=\"ai\"}\n**I assumed:** `text-muted-foreground` was safe for secondary text on any of shadcn's surfaces.\n**What happened:** shadcn's `muted-foreground` on its `muted` surface measures 4.34:1, under the 4.5:1 that WCAG AA asks of body text, and selected rows and the active tab put secondary text on exactly that kind of surface.\n**The fix:** `TEXT_ON_MUTED = \"text-foreground/60\"`, the same palette, which clears 4.5:1 in both themes; axe finds no violations on seven screens in light and dark.\n**Evidence:** commit 2e3b352; parts.tsx lines 42–46 and the project's axe run.\n:::\n\n## Checked\n\n22 unit tests, an end-to-end script of 108 checks run on the dev and production builds, axe on seven screens in both themes, and screenshots at 1440, 1024, 768 and 390 px. On UpFork it went through the importer, the preview builder and the install check, which installs it with the real shadcn CLI into a fresh Next.js project.\n\n## Make it yours\n\n`<Mail>` takes your threads and contacts in the shape of `types.ts`, `onSend` and `onReply` to hand messages to your back end, and a `defaultThreadId` to open on; everything else (folders, labels, snooze, Undo) works on the store with no back end at all. It wears your shadcn theme, light and dark.\n\n::install",
  "bodySha256": "657cea9f905ecb6d1664c1c4bae30cd2eb5d5b497103e6e7abfe943f0307b768",
  "kind": "behind-the-build",
  "product": "email-client-inbox-react-shadcn",
  "productRevision": 1,
  "publishedAt": "2026-10-26T09:45:15.884Z",
  "revision": 1,
  "site": "https://upfork.dev",
  "summary": "How Mailroom builds a three-pane email client on shadcn/ui: one store per inbox, TipTap loaded in idle time, autosave that stops on send, and six traps from Radix, ProseMirror and the DOM.",
  "title": "An email client on shadcn/ui: lazy TipTap, autosave, and six traps in Radix, React and the DOM",
  "type": "article-version",
  "url": "https://upfork.dev/articles/an-email-client-on-shadcn-ui-lazy-tiptap-autosave-and-six-traps-in-radix-rea"
}