Dioxus Application Structure
Relevant source files
The following files were used as context for generating this wiki page:
Mailiner is a browser-based IMAP client written in Rust using the Dioxus library. The application cross-compiles to WebAssembly (WASM) to run directly in the browser, providing a desktop-like email experience without intermediate server-side processing.
The project structure prioritizes performance and memory efficiency for the WASM target. It employs techniques like lazy loading, pre-fetching, and LRU caching to maintain responsiveness within the browser environment.
Sources: README.md:3-6, AGENTS.md:5-13
Core Architecture and Platforms
The application uses the dioxus crate with several feature flags to support different deployment targets. While the primary focus is the web, the configuration allows for desktop and mobile builds.
| Feature | Description |
|---|---|
launch | Provides the entry point for starting the application. |
router | Manages navigation and URL states within the app. |
web | Enables the WASM/Browser target and web-specific optimizations. |
desktop | Supports building as a native desktop application. |
mobile | Supports building for mobile platforms. |
Sources: crates/mailiner-app/Cargo.toml:16-22, 54-56
Network Proxy Layer
Because browsers cannot create direct TCP connections, Mailiner uses a WebSocket-to-TCP proxy (ws-tcp-proxy). The application establishes a WebSocket connection to the proxy, which forwards payloads to the destination IMAP server. Encryption is handled on the browser side, ensuring the proxy cannot read the communication.
Sources: README.md:12-25
UI Layout and Styling
The UI follows a classic multi-pane email client layout, managed through CSS variables and Rust logic that interacts with the browser's localStorage and DOM.
Pane Management
The layout consists of three primary vertical sections:
- Folder Navigation: Displays the mailbox tree.
- Message List: Shows emails within the selected folder.
- Message View: Displays the content of the selected email.
The dimensions of these panes are persistent. The layout.rs module manages the width of the folder pane and the height of the message list.
The diagram shows the hierarchical flexbox structure used to organize the primary UI components.
Sources: crates/mailiner-app/assets/main.css:55-75, 755-780, crates/mailiner-app/src/layout.rs:3-13
Persistent Layout Configuration
Pane sizes are constrained by minimum and maximum values to ensure UI usability.
| Layout Property | Constant | Default | Min | Max |
|---|---|---|---|---|
| Folder Width | FOLDER_WIDTH | 240.0px | 160.0px | 480.0px |
| List Height | LIST_HEIGHT | 40.0% | 18.0% | 70.0% |
Sources: crates/mailiner-app/src/layout.rs:5-13
Security Configuration
The application implements security through a Content-Security-Policy (CSP) and local-only secret storage.
Content Security Policy
Mailiner defines a baseline CSP using a <meta> tag injected after the WASM module mounts. This policy hardens the application against XSS attacks.
script-src: Restricted to'self'and'wasm-unsafe-eval'to allow WASM execution while blocking third-party JS.connect-src: Allowsws:andwss:for proxy connections.img-src: Allowsdata:andblob:for inline message images and previews.
Sources: README.md:43-61, crates/mailiner-app/Dioxus.toml:18-20
Local Secret Storage
Account settings, including IMAP passwords and proxy tokens, are stored exclusively in the browser's localStorage. No server-side accounts exist for Mailiner itself.
Sources: README.md:33-36, crates/mailiner-app/src/layout.rs:80-84
Build and Resource Configuration
The Dioxus.toml file manages web-specific metadata and resource optimization.
- WASM Optimization: The application uses
level = "s"(size optimization) and disables debug symbols in release builds to reduce the binary size. - Asset Pipeline: The
assetsdirectory is included in the web platform resources. CSS files and JavaScript scripts can be explicitly linked in the configuration.
Sources: crates/mailiner-app/Dioxus.toml:3-33, crates/mailiner-app/README.md:16-20
Conclusion
The Dioxus Application Structure in Mailiner utilizes a WASM-centric architecture to provide a secure and efficient IMAP client. By leveraging local browser storage and a WebSocket proxy, it maintains high privacy standards while offering a persistent, customizable UI layout defined by Rust-managed CSS variables.