# Email Inbox Three-pane mailbox workspace with folders, search, messages, and reading controls. - Category: Application page - Tier: Free - Page: /blocks/email_inbox - Source attribution: shadcn/ui - License: MIT OR Apache-2.0 (block source) ## Source Free block source is dual licensed under MIT OR Apache-2.0. Use of the Proa framework is governed separately under AGPL-3.0-only or a commercial Proa license. ### email_inbox.rs ```rust // SPDX-FileCopyrightText: 2026 Proa Labs, Inc. // SPDX-License-Identifier: (MIT OR Apache-2.0) AND MIT //! Adapted from shadcn/ui //! `apps/v4/registry/new-york-v4/blocks/sidebar-09/page.tsx` and //! `apps/v4/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx` at //! https://github.com/shadcn-ui/ui, commit //! fa4872c8ed948c111884e52ae23a649e83591b71. MIT License, Copyright (c) 2023 //! shadcn; see the upstream `LICENSE.md`. use proa_core::{DataLoader, StaticRaw, WebContext, WebRenderSync, WriteBuf, WriteError}; use proa_macros::html_sync; use proa_ui::{ Avatar, AvatarFallback, AvatarImage, AvatarShape, AvatarSize, Card, Input, InputType, }; use rsjs_macros::rsjs; struct Message { sender: &'static str, initials: &'static str, email: &'static str, /// Timestamp as the list shows it, beside the long form the reading pane /// uses. Two fields because the list column is width-constrained. list_time: &'static str, full_time: &'static str, subject: &'static str, preview: &'static str, category: &'static str, /// The two body paragraphs, between the greeting and the sign-off. body: [&'static str; 2], signoff: &'static str, unread: bool, } const MESSAGES: &[Message] = &[ Message { sender: "Maya Chen", initials: "MC", email: "maya@northstar.dev", list_time: "9:34 AM", full_time: "Today, 9:34 AM", subject: "Design review tomorrow", preview: "I added the final interaction notes and linked the updated prototype for tomorrow's review.", category: "Design", body: [ "I added the final interaction notes and linked the updated prototype for tomorrow's review. The navigation and empty states are ready for engineering feedback.", "Could you take one last pass through the mobile flow before 3 PM? I want to resolve any layout questions before the meeting.", ], signoff: "Thanks, Maya", unread: true, }, Message { sender: "Jordan Lee", initials: "JL", email: "jordan@northstar.dev", list_time: "Yesterday", full_time: "Yesterday, 4:18 PM", subject: "Re: Edge rollout", preview: "The rollout is holding steady at one hundred percent. Error rates are below the target.", category: "Engineering", body: [ "The rollout is holding steady at one hundred percent. Error rates are below the target, and the regional edge metrics are all inside the expected range.", "I will keep the dashboards open through tomorrow morning, but there is nothing in the current data that should block the next region.", ], signoff: "Thanks, Jordan", unread: false, }, Message { sender: "Samira Khan", initials: "SK", email: "samira@northstar.dev", list_time: "Monday", full_time: "Monday, 11:02 AM", subject: "Research synthesis", preview: "Here are the recurring themes from the six customer conversations we completed last week.", category: "Research", body: [ "I grouped the recurring themes from the six customer conversations we completed last week and added supporting quotes to the research board.", "The strongest pattern is that teams want clearer ownership during handoffs. I highlighted three opportunities for the next planning session.", ], signoff: "Best, Samira", unread: false, }, Message { sender: "Dario Torres", initials: "DT", email: "dario@northstar.dev", list_time: "Friday", full_time: "Friday, 2:47 PM", subject: "Launch checklist", preview: "Documentation and migration examples are ready. I left two questions in the release brief.", category: "Launch", body: [ "Documentation and migration examples are ready. I also checked the release steps against the latest staging build and noted the final owners.", "Two questions remain in the release brief: the final support window and who sends the customer announcement. Everything else is checked off.", ], signoff: "Thanks, Dario", unread: false, }, ]; /// How one list row is drawn. Read state changes the dot, its screen-reader /// label, and the sender weight together, so they are derived in one place /// instead of re-testing `unread` at three points in the markup. struct RowStyle { dot: &'static str, unread_label: &'static str, sender: &'static str, visibility: &'static str, } impl Message { fn row_style(&self) -> RowStyle { if self.unread { RowStyle { dot: "mt-1 size-2 shrink-0 rounded-full bg-primary", unread_label: "Unread", sender: "font-semibold text-foreground", visibility: "", } } else { // A read row keeps the dot in the tree but collapsed, so the flex // gap does not leave a hole where the indicator would be. RowStyle { dot: "hidden", unread_label: "", sender: "font-medium text-foreground", visibility: "group-data-[unread-only=true]/inbox:hidden", } } } } /// `MESSAGES.len()`, spelled as a `u32` because the selection signal and every /// loop bound inside the island have to carry a proven fixed-width domain. const MESSAGE_COUNT: u32 = 4; const MAIL_ICON: &str = r#""#; struct Folder { label: &'static str, /// Inner markup for the 24×24 icon. icon: &'static str, /// Unread count, shown only on the folder that has one. count: Option<&'static str>, current: bool, } const FOLDERS: &[Folder] = &[ Folder { label: "Inbox", icon: MAIL_ICON, count: Some("12"), current: true, }, Folder { label: "Drafts", icon: r#""#, count: None, current: false, }, Folder { label: "Sent", icon: r#""#, count: None, current: false, }, Folder { label: "Archive", icon: r#""#, count: None, current: false, }, Folder { label: "Junk", icon: r#""#, count: None, current: false, }, ]; struct InboxMessages; #[rsjs(component, client)] impl WebRenderSync for InboxMessages { fn render(self, cx: &mut WebContext) -> Result<(), WriteError> { // rsjs resolves identifiers inside an island against function-local // bindings; a module-level const is invisible to it. Binding the table // here is what lets the loops below read `messages[i]`. let messages = MESSAGES; let search_input = Input { input_type: InputType::Search, placeholder: Some("Search messages..."), aria_label: Some("Search messages"), ..Input::new() }; let selected_message = rsjs::signal(0_u32); let unread_only = rsjs::signal(false); let select_message = rsjs::event_handler(|_: rsjs::MouseEvent, message: u32| { selected_message.set(message); }); let filter_unread = rsjs::event_handler(|event: rsjs::ChangeEvent| { let next = event.current_checked(); unread_only.set(next); if next { selected_message.set(0_u32); } }); html_sync! {

"Inbox"

{search_input}
{for index in 0_u32..MESSAGE_COUNT { let message = &messages[index as usize]; let row = message.row_style(); html_sync! {
} }}
{for index in 0_u32..MESSAGE_COUNT { let message = &messages[index as usize]; html_sync! { {message.category} } }}
{for index in 0_u32..MESSAGE_COUNT { let message = &messages[index as usize]; html_sync! { {message.initials} } }}

{for index in 0_u32..MESSAGE_COUNT { let message = &messages[index as usize]; html_sync! { {message.sender} } }}

{for index in 0_u32..MESSAGE_COUNT { let message = &messages[index as usize]; html_sync! { {message.email} } }}

{for index in 0_u32..MESSAGE_COUNT { let message = &messages[index as usize]; html_sync! { {message.subject} } }}

"Hi Alex,"

{for index in 0_u32..MESSAGE_COUNT { let message = &messages[index as usize]; html_sync! { {message.body[0]} } }}

{for index in 0_u32..MESSAGE_COUNT { let message = &messages[index as usize]; html_sync! { {message.body[1]} } }}

{for index in 0_u32..MESSAGE_COUNT { let message = &messages[index as usize]; html_sync! { {message.signoff} } }}

} .render(cx) } } // Beyond the Proa UI components, this block needs these crates in Cargo.toml: rsjs, rsjs_macros. /// Copy-paste-ready block composition. pub struct EmailInboxBlock; impl proa_core::WebRenderSync for EmailInboxBlock { fn render( self, cx: &mut proa_core::WebContext, ) -> Result<(), proa_core::WriteError> { html_sync! {
{Card { class: Some("overflow-hidden py-0 shadow-xs"), children: Some(html_sync! {
{InboxMessages}
}), }}
} .render(cx) } } ```