Inbox & messaging
Reusable primitives for assembling Mufflermen workshop conversations — front-desk to bay tech, parts runner to foreman, and customer threads. Distinct from AI assistant chat primitives.
Inbox & messaging is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Inbox & messaging: Reusable primitives for assembling Mufflermen workshop conversations — front-desk to bay tech, parts runner to foreman, and customer threads. Distinct from AI assistant chat primitives.
Conversation list rail
Left rail with search, filter chips, avatar + preview rows, unread badges, active highlight.
Conversation header
Top bar with avatar, presence dot, role chip, and call / video / pin / mute / archive actions.
Message bubble
Self vs other bubble with status ticks, reactions tray, time + footer meta.
Message group
Groups consecutive messages by author with shared header and timestamp divider.
Typing indicator
Three-dot bounce showing someone is typing. Reduced-motion swaps to static dots.
Reply composer
Auto-grow textarea, emoji / attach / mention buttons, send action, Cmd+Enter to send.
Voice memo bubble
Inline voice memo with play button + waveform + duration, tone-coordinated to sender.
Image attachment bubble
Image inside a bubble with expand affordance and hover overlay showing file name.
File attachment bubble
File card in a bubble — typed icon, file name, size, optional progress, download CTA.
Reaction picker
Floating emoji picker shown on hover / click — 6 defaults + expand to more.
Thread reply row
Inline link showing reply count + last-reply time; expands to indented thread panel.
Pinned message bar
Top strip scrolling through pinned items; click a card to jump to that message.
Unread divider
Horizontal divider with pulsing 'Unread messages' pill between read + unread groups.
Read receipts row
Tiny avatar group + timestamp showing who has read your most recent message.
Full inbox scene
Conversation list + header + pinned bar + threaded transcript + typing + composer.