UI Components
This document describes the reusable UI components in the SMS Router application, including settings forms, message log display components, navigation system, and the overall implementation of the design system. These components form the basis of the application interface and are designed to ensure consistency and performance.
The UI component system in the SMS Router application is based on Jetpack Compose and follows the principles of Material3 design.
The system includes specialized components for:
- SIM card and webhook settings management's
- Displaying SMS message delivery logs
- Indications of delivery statuses with animation
- Handling loading states and errors
- Navigation between the application screens
Component Hierarchy and Dependencies
UI components follow a hierarchical structure where lower-level components (theme, common utilities) are assembled into specialized high-level components, which are then integrated into functional modules.
The SimCardSettingsItem component is a settings card for each SIM card, which includes fields for configuring the webhook.
| Property | Type | Description |
|---|---|---|
simCard |
SimCardUiModel |
SIM card data model |
onWebhookUrlChanged |
(String) -> Unit |
Callback invoked when the webhook URL is changed |
onSecretKeyChanged |
(String) -> Unit |
Callback invoked when the secret key is changed |
onWebhookTypeChanged |
(WebhookType) -> Unit |
Callback invoked when the webhook type is changed |
onChatIdChanged |
(String) -> Unit |
Callback invoked when the Telegram Chat ID is changed |
The app uses a NavigationBar with two main screens:
The navigation structure of the application
| Route | Screen | Description |
|---|---|---|
Routes.Messages |
MessagesScreen |
Displays SMS logs (home screen) |
Routes.Settings |
SettingsScreen |
SIM card and webhook settings |
SMS Router uses an MVI (Model-View-Intent) architecture with a clear separation of states, intents, and effects:
