Aether Mail - Email App

Aether Mail is a comprehensive email client UI template built with Ionic 8 and React 18. It provides a complete, production-structured starting point for developers building email, inbox, or messaging apps - covering every screen a real email product needs, from authentication through to per-message threading and attachment browsing.

All data interactions go through a clean service layer with realistic mock data wired in. Swapping the mock service for your own API is the only integration work required to ship a real product.

The template uses TypeScript throughout, is built with Vite, and targets iOS mode with a polished indigo/purple design system. Every page is fully interactive with real navigation, state management, and user feedback (toasts, alerts, loading skeletons, empty states).

Key Features

• Complete auth flow - Sign in, create account, forgot password, and post-signup setup screens with persistent sessions via localStorage
• Multi-section mailbox - Inbox, Starred, Sent, Drafts, Archive, and Trash with per-section loading, refresh, and empty states
• Email threading - Thread detail view with multiple expanded/collapsed messages, per-message reply and forward actions, star toggling, and attachment chips
• Compose, Reply & Forward - Full compose screen with To/Cc/Bcc, subject, body, and signature; reply pre-populates sender and quoted body; forward pre-populates subject and forwarded block; draft loading from the Drafts list
• Draft management - Save, load, and delete drafts; discard alert when closing a dirty compose screen
• Swipe actions - IonItemSliding on every email row with context-appropriate actions per mailbox (Archive/Restore on start swipe, Trash/Delete on end swipe)
• Custom labels - Six pre-built colour-coded labels with thread and unread counts; label detail page filters threads by label
• Attachments gallery - Dedicated page listing all attachments across threads, grouped by type (PDF, image, spreadsheet, doc, archive)
• Search - Full-text search across subject, snippet, and participants with recent search history and filter chips (All, Unread, Starred, With files)
• Notifications - Categorised notification feed (important, mention, reminder, update) with mark-as-read
• Multi-account support - Account switcher sheet with mock secondary account
• Settings - Theme (Light/Dark/System), push notifications, notification sounds, show avatars, show snippets, auto-save drafts, signature, and swipe action configuration
• Sign-out confirmation - IonAlert confirmation on sign-out in both the Account and Settings pages
• Realistic mock data - 12 email threads, 25+ messages, 3 drafts, 6 labels, 8 attachments, 4 notifications, and 2 accounts; all served from an in-memory - service with simulated async delays

Included Screens

Auth

• Welcome / onboarding
• Sign in
• Create account
• Forgot password
• Account setup

Mail (Tab Bar)

• Inbox (with filter chips and inline search bar)
• Starred
• Drafts
• Search
• Settings

Mail (Stack)

• Thread detail
• Compose / Reply / Forward / Edit draft
• Sent
• Archive
• Trash

Labels

• Labels list
• Label detail

Other

• Attachments gallery
• Notifications
• Account / profile

Technology Stack

• Ionic 8 (React, iOS mode)
• React 18.2 with functional components and hooks
• TypeScript 5.3 (strict typing throughout)
• React Router v5 with IonReactRouter
• Vite 5 with @vitejs/plugin-react and @vitejs/plugin-legacy
• Ionicons 7
• In-memory mock service - drop-in replacement point for a real REST or GraphQL API
• No Capacitor plugins required; runs in browser and can be wrapped with Capacitor for native deployment

Best For

• Developers building a mobile email or inbox client and needing a complete, polished UI starting point
• Teams prototyping an internal mail or notification inbox feature
• Agencies delivering Ionic projects who want to skip the foundational screen work
• Developers learning Ionic React patterns through a realistic, feature-complete reference app

Notes

• All data is mocked in-memory and resets on page reload. Backend integration requires replacing the emailService and authService methods with real API calls - the service interface is already fully typed.
• Dark mode is wired to the theme setting in AppSettings but CSS variable switching for dark mode is not implemented in this version; the setting is persisted - but the UI currently renders in light mode only.
• Send/reply actions are no-ops in the mock service - the UI flow is complete but no email is actually delivered.
• There is no Capacitor integration included; push notifications, file access, and native sharing would require adding the relevant Capacitor plugins.