Confirm?

Are you sure you want to proceed?
R
Ray Kester

Inbox Hiring Side User

Clone & Customize via AI

MudBlazor Hiring Inbox is a two-column email UI with a searchable message list and a reading pane. It uses MudList selection and a MudTextField search inside a responsive MudLayout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Two-column inbox layout with a responsive drawer and folder navigation. - Searchable message list with selection and unread styling. - Message reading pane that displays sender, timestamp, body and action buttons (Reply/Forward). - Client-side filtering (search) and a simple read-state toggle when a message is selected. ## Key components - MudLayout, MudAppBar, MudDrawer, MudNavMenu - MudGrid, MudItem, MudPaper - MudTextField (search) and MudToolBar - MudList, MudListItem and @bind-SelectedValue for selection - MudAvatar, MudButton, MudIconButton, MudDivider ## How it works - Messages are seeded into a local List<MessageViewModel> in OnInitialized and a first message is pre-selected. - Search is implemented via a computed FilteredMessages enumerable and @bind-Value on MudTextField; the list filters by SenderName or Subject. - Selection binds to SelectedMessage; the property setter marks the message IsRead = true. - Conditional rendering shows the reading pane when SelectedMessage is not null; actions are plain MudButton controls for Reply/Forward. ## Styling - Uses MudBlazor components and theming for layout and controls. - Custom CSS (.unread-message) makes unread items bold and .fill-height enforces full-height panels. - Responsive behavior relies on MudGrid/MudItem sizing and DrawerVariant.Responsive; the right column hides on small screens (d-none d-md-block). ## Reuse steps 1. Add the MudBlazor NuGet package and register services (builder.Services.AddMudServices()). 2. Import MudBlazor namespace and include MudBlazor CSS/theme in the app host (MainLayout/_Host or index.html). 3. Add MessageViewModel to the project and adapt properties to match backend DTOs. 4. Replace the in-memory _messages with an injected data service or HTTP client and load data in OnInitializedAsync. 5. Wire Compose/Reply/Archive/Delete buttons to dialogs or API calls and add routes for folder navigation. 6. Add paging or virtualization for large inboxes and persist read state via a backend. ## Limitations & next steps - This is a single-page UI generated by Instruct UI; no backend, persistence, or authentication is included. - Services, API clients, and authorization must be implemented to persist messages and user actions. - Consider adding attachment handling, compose dialog, server-side filtering/paging, and unit tests for selection and filtering behavior.