{ "name": "EmailThreadRow", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/EmailThreadRow.tsx", "chapterTag": "16 Pipeline & CRM", "chapter": "16-app-pipeline.html", "sectionId": "email-thread-row", "elName": "Four-row mailbox (mixed unread / starred states)", "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#email-thread-row", "hasLiveDemo": false, "description": "Gmail-shaped inbox row — left-side star, avatar, sender + subject + preview\non a single truncated line, time on the right edge, hover-discoverable\narchive button. Sibling to ``; both compose into ``.", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "EmailThreadRow", "isPrincipal": true, "isType": false }, { "name": "EmailThreadRowProps", "isPrincipal": false, "isType": true } ], "importStatement": "import { EmailThreadRow } from \"@magicblocksai/ui\";", "props": [ { "name": "id", "optional": false, "type": "string", "doc": "Row id — passed back to all callbacks." }, { "name": "avatar", "optional": true, "type": "ReactNode | string", "doc": "Avatar — pass a fully-rendered `.av` span / ``, or a 2-letter string and we'll render the default `.av` chip." }, { "name": "avatarStyle", "optional": true, "type": "React.CSSProperties", "doc": "Optional inline style on the avatar — honoured only when `avatar` is a bare string." }, { "name": "sender", "optional": false, "type": "ReactNode", "doc": "Sender display name (e.g. `\"Eric Wilson\"`). Renders bold when `unread`." }, { "name": "subSender", "optional": true, "type": "ReactNode", "doc": "Optional tail after the sender (e.g. `\" · Acme\"`). Rendered in soft tone." }, { "name": "subject", "optional": false, "type": "ReactNode", "doc": "Subject line. Renders bold when `unread`." }, { "name": "preview", "optional": true, "type": "ReactNode", "doc": "Snippet of the latest message body. Rendered after the subject in soft tone; the whole subject-line truncates with ellipsis on overflow." }, { "name": "time", "optional": true, "type": "ReactNode", "doc": "Relative time / timestamp on the right edge (e.g. `\"2:14 pm\"`, `\"3d\"`)." }, { "name": "unread", "optional": true, "type": "boolean", "doc": "Unread state — paints the accent left-rail and bolds sender + subject." }, { "name": "starred", "optional": true, "type": "boolean", "doc": "Starred state — drives the star button's pressed visual + icon swap." }, { "name": "onStar", "optional": true, "type": "(next: boolean, id: string) => void", "doc": "Fires when the user clicks the star button. Receives the next pressed state. Omit to hide the star slot entirely." }, { "name": "starLabel", "optional": true, "type": "string", "doc": "Override the star button's `aria-label`. Defaults to \"Star\" / \"Unstar\"." }, { "name": "onArchive", "optional": true, "type": "(id: string) => void", "doc": "Fires when the user clicks the archive button. Omit to hide the slot entirely." }, { "name": "archiveLabel", "optional": true, "type": "string", "doc": "Override the archive button's `aria-label` (default `\"Archive\"`)." }, { "name": "archiveIcon", "optional": true, "type": "ReactNode", "doc": "Override the archive button glyph (default a small archive box icon). Useful for \"restore from archive\" surfaces." }, { "name": "onOpen", "optional": true, "type": "(id: string) => void", "doc": "Fires when the row body is clicked or `Enter` / `Space` is pressed." } ], "classesUsed": [ "av", "email-thread-row", "email-thread-row-archive", "email-thread-row-body", "email-thread-row-sender-line", "email-thread-row-star", "email-thread-row-sub-sender", "email-thread-row-subject", "email-thread-row-subject-line", "email-thread-row-time" ], "examples": { "react": "\n setStarred(next)}\n onArchive={archive}\n onOpen={(id) => router.push(`/inbox/${id}`)}\n />\n", "html": "
\n
    \n
  • \n \n EW\n
    \n
    \n Eric Wilson\n · Acme\n
    \n
    \n Quarterly review next Tuesday?\n — Wanted to align on the renewal timeline before the call…\n
    \n
    \n 2:14 pm\n \n
    • \n
  • \n \n MR\n
    \n
    \n Marcus Reid\n · Northpeak Logistics\n
    \n
    \n Pricing pushback — can we flex on implementation?\n — Hi Jay, the team likes the product but the listed price is 15% over budget…\n
    \n
    \n 1h\n \n
    • \n
  • \n \n SK\n
    \n
    \n Sara Kim\n · Skyhook Manufacturing\n
    \n
    \n Discovery follow-up — loop in operations?\n — Quick thought before we lock the next meeting…\n
    \n
    \n 3h\n \n
    • \n
  • \n \n DL\n
    \n
    \n Dr. Liu\n · CareSync Clinical\n
    \n
    \n Onboarding kickoff confirmation\n — The week of the 12th works for our team…\n
    \n
    \n Apr 27\n \n
    • \n
\n
", "css": ".av {\n width: 32px; height: 32px; border-radius: 50%;\n display: inline-flex; align-items: center; justify-content: center;\n font: 600 12px/1 var(--f-display); letter-spacing: 0.02em;\n flex-shrink: 0;\n overflow: hidden; /* clip image children cleanly */\n /* v1.12.0 (R11-2): default fill so initials are legible without consumers\n having to think about background. Pre-1.12.0 `.av` was background-less;\n on a same-tone page wash (e.g. warm-1) initials rendered invisible.\n Image children cover this fill via `overflow: hidden` clipping. */\n background: var(--bg-warm);\n color: var(--fg-soft);\n}\n\n.email-thread-row {\n display: grid;\n grid-template-columns: 28px 32px 1fr auto 28px;\n align-items: center;\n gap: var(--s-3);\n padding: var(--s-2) var(--s-4);\n border-bottom: 1px solid var(--hair-soft);\n background: transparent;\n cursor: pointer;\n position: relative;\n transition: background var(--dur-2) var(--ease);\n}\n\n.email-thread-row-archive {\n appearance: none;\n background: transparent;\n border: 0;\n padding: 0;\n width: 28px; height: 28px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--r-xs);\n color: var(--fg-faint);\n cursor: pointer;\n transition: color var(--dur-2) var(--ease),\n background var(--dur-2) var(--ease),\n opacity var(--dur-2) var(--ease);\n}\n.email-thread-row-archive { opacity: 0; }\n\n.email-thread-row-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n\n.email-thread-row-sender-line { font: 500 13px/1.3 var(--f-body); color: var(--fg);\n white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.email-thread-row-star {\n appearance: none;\n background: transparent;\n border: 0;\n padding: 0;\n width: 28px; height: 28px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--r-xs);\n color: var(--fg-faint);\n cursor: pointer;\n transition: color var(--dur-2) var(--ease),\n background var(--dur-2) var(--ease),\n opacity var(--dur-2) var(--ease);\n}\n\n.email-thread-row-sub-sender { font-weight: 400; color: var(--fg-soft); }\n\n.email-thread-row-subject { color: var(--fg); font-weight: 400; }\n\n.email-thread-row-subject-line { font: 400 13px/1.35 var(--f-body); color: var(--fg-soft);\n white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.email-thread-row-time { font: 400 12px/1 var(--f-mono); color: var(--fg-faint);\n white-space: nowrap; }" } }