Shared UI Components
Relevant source files
The following files were used as context for generating this wiki page:
The Shared UI Components in Mailiner provide a unified visual language and functional primitives for the IMAP client. These components facilitate consistent layout management, user feedback, and core interface structures such as split panes and status banners across the application.
The UI architecture relies on the Dioxus framework to render components as WASM in the browser. It uses a centralized CSS system for design tokens and layout variables, ensuring that components like the sidebar and message list maintain synchronized states. Sources: AGENTS.md:1-12, crates/mailiner-app/assets/main.css:1-50, crates/mailiner-app/src/main.rs:25-45
Global Design Tokens and Styles
Mailiner uses CSS variables (design tokens) defined in the :root selector to maintain consistency. These tokens cover colors, spacing, shadows, and layout constants used by all shared components. Sources: crates/mailiner-app/assets/main.css:1-43
| Category | Token Examples | Usage |
|---|---|---|
| Colors | --background, --item-accent, --danger | Base backgrounds, primary action colors, and error states. |
| Layout | --folder-pane-width, --message-list-height | Dimensions for the main application split panes. |
| Spacing | --space-1 to --space-5, --margin | Consistent padding and margin increments. |
| UI Atoms | --radius-sm, --shadow-fab, --text-md | Corner radii, button shadows, and standard font sizes. |
Layout and Split Panes
The application layout consists of a three-pane view managed by the SplitHandle component. This component allows users to resize the folder navigation and message list areas. The layout state is persisted in the browser's localStorage and applied via CSS variables on the #app container. Sources: crates/mailiner-app/src/layout.rs:1-15, crates/mailiner-app/src/main.rs:430-445
Layout Persistence Flow
The system captures user-initiated resize events and updates the application's style and storage.
The diagram shows the cycle from user interaction with a split handle to persistent storage and re-application during initialization. Sources: crates/mailiner-app/src/layout.rs:52-110
Layout Constraints
Layout dimensions are constrained to minimum and maximum values to ensure the UI remains usable.
- Folder Width: Min 160px, Max 480px (Default: 240px).
- List Height: Min 18%, Max 70% (Default: 40%).
Sources: crates/mailiner-app/src/layout.rs:5-12
Component Primitives
Shared primitives provide the building blocks for complex views like the composer and settings pages. Sources: crates/mailiner-app/assets/main.css:327-410
Buttons and Inputs
.ui-btn: The base button class with.ui-btn-primary(accent background) and.ui-btn-secondary(border/surface) variants..ui-input: Standardized text input styling, including focus rings and disabled states..ui-icon-btn: Minimalist buttons for icon-only actions, providing hover feedback.
Dialogs and Overlays
Shared dialog components (.ui-dialog) provide a consistent container for modal interactions. They include standard sections:
- Head (
.ui-dialog-head): Displays the title and optional close actions. - Body: Flexible content area.
- Actions (
.ui-dialog-actions): Right-aligned button group for primary and cancellation actions.
Sources: crates/mailiner-app/assets/main.css:384-406
Notification and Status Systems
Mailiner provides immediate feedback through persistent banners and temporary toasts.
Connection Status Banner
The ConnectionStatusBanner appears at the top of the main content area. It indicates the current state of the IMAP connection via color-coded states and optional retry buttons. Sources: crates/mailiner-app/assets/main.css:198-255
| Status | CSS Class | Visual Indicator |
|---|---|---|
| Ready | .connection-banner-ready | Green theme, solid dot. |
| Info/Syncing | .connection-banner-info | Blue theme, pulsing dot. |
| Error | .connection-banner-error | Red theme, alert styling. |
| Muted | .connection-banner-muted | Gray theme, inactive state. |
Toast System
The ToastHost manages temporary notifications at the bottom-right of the screen. Toasts include a message, an optional "Undo" action, and a visual timer bar. Sources: crates/mailiner-app/assets/main.css:577-628
The sequence diagram illustrates how toasts are dispatched from the core logic to the UI and handled by the user. Sources: crates/mailiner-app/src/main.rs:370-380, crates/mailiner-app/assets/main.css:620-628
Shell Components
The AppShell component acts as a high-level router and state guard. It manages the transitions between the following application states:
- LoadingStore: Displays a full-page spinner while initializing local storage.
- StoreError: Shows a critical error card if
localStorageis blocked or unavailable. - NeedsOnboarding: Redirects the user to the
OnboardingFormif no accounts exist. - Ready: Mounts the main mail chrome and child routes.
Sources: crates/mailiner-app/src/main.rs:60-70, crates/mailiner-app/src/main.rs:460-505
Conclusion
Shared UI components in Mailiner ensure that critical patterns—such as resizing panes, displaying notifications, and managing modal dialogs—behave consistently across the IMAP client. By leveraging CSS variables and a centralized layout logic, the project maintains a responsive and persistent user experience.