Ui Component Inventory Mobile

An inventory of the GENIE.AI mobile app UI widgets and their usage.

For mobile developers. A reference catalogue of the Flutter app widgets.

Summary

  • Total Dart Files: 76
  • UI Components: 14
  • Design System Components: 6
  • Design System Tokens: 5
  • Services: 12
  • Config: 5
  • i18n Locales: 13

Design System (lib/design_system/)

DS Components (lib/design_system/components/)

ComponentDescription
ds_button.dartButton primitive with variants (primary, secondary, ghost, danger)
ds_card.dartContainer card with elevation and border radius
ds_input.dartText input field with label, validation states, and error messaging
ds_modal.dartModal dialog overlay with content slot
ds_spinner.dartLoading spinner animation (circular progress indicator)
ds_state_display.dartEmpty/error/loading state display component

DS Tokens (lib/design_system/tokens/)

Token FileDescription
app_tokens.dartGlobal design tokens (typography, colors, spacing scale)
color_utils.dartColor utilities (lighten, darken, opacity, theme mapping)
spacing.dartSpacing scale constants (xs, sm, md, lg, xl)
radii.dartBorder radius tokens (sm, md, lg, xl, full)

DS Theme (lib/design_system/theme/)

FileDescription
app_theme.dartMaterial theme configuration (light/dark, color schemes)

Chat Components (lib/components/chat/)

ComponentDescription
chatbot_component.dartMain chat interface with message list and input area
right_sidebar_component.dartRight sidebar displaying context, documents, or service info
chat_response_feedback_dialog.dartFeedback dialog for rating chat responses (thumbs up/down)
web_file_utils.dartFile utility functions for web platform
stub_file_utils.dartFile utility stubs for non-web platforms
right_sidebar_stub.dartStub implementation for right sidebar (conditional compilation)
ComponentDescription
sidebar_component.dartLeft sidebar with conversation history and navigation
chat_folders_panel.dartConversation folder management (create, rename, delete)
service_tree_panel.dartHierarchical tree view of service categories

Authentication Components (lib/components/auth/)

ComponentDescription
oidc_login_screen.dartOIDC login screen with Keycloak authentication flow

User Components (lib/components/user/)

ComponentDescription
user_profile_component.dartUser profile display and edit form

Settings Components (lib/components/settings/)

ComponentDescription
settings_component.dartApplication settings panel (theme, language, preferences)
about_screen.dartAbout screen with app version, license, and links

Shared Components (lib/components/shared/)

ComponentDescription
nav_bar_component.dartBottom navigation bar (mobile app navigation)
confirm_dialog.dartGeneric confirmation dialog (confirm/cancel actions)
language_selector.dartLanguage selection dropdown for i18n

Application Structure (lib/src/)

FileDescription
app.dartRoot app widget with router and global providers
sample_feature/Sample feature code (Flutter template, may be unused)
settings/Settings controller and service (legacy, may be unused)
localization/App localization delegates

Services (lib/services/)

Authentication Services (lib/services/auth/)

ServiceDescription
app_auth.dartAuthentication state management and token handling
auth_interceptor.dartHTTP request interceptor for auth token injection
auth_logger.dartAuthentication event logging
auth_notifier.dartAuthentication state change notifications
auth_state.dartAuthentication state enum and data classes
auth_providers.dartRiverpod providers for auth services
token_storage.dartSecure token storage (Keychain/Keystore)
connectivity_checker.dartNetwork connectivity status checker
network_error_classifier.dartNetwork error classification and retry logic
insecure_http_client.dartHTTP client for dev environments (bypasses SSL)

Other Services (lib/services/)

ServiceDescription
keycloak/keycloak_service.dartKeycloak OIDC service wrapper
connectivity_service.dartNetwork connectivity monitoring
notification_service.dartPush notification handling
user_service.dartUser profile and preferences service
i18n_service.dartInternationalization service
genie_ai_config.dartGENIE.AI configuration loader
fallback_localizations.dartFallback localization delegates
sse_parser.dartServer-Sent Events (SSE) stream parser

Configuration (lib/config/)

FileDescription
keycloak_config.dartKeycloak OIDC client configuration
dev_config.dartDevelopment environment configuration
staging_config.dartStaging environment configuration
e2e_config.dartE2E testing configuration
flavors/itu.dartITU flavor-specific configuration
flavors/template.dartFlavor configuration template

Providers (lib/providers/)

FileDescription
api_providers.dartRiverpod providers for API clients

Utilities (lib/utils/)

FileDescription
theme_manager.dartTheme switching and persistence
chart_theme_utils.dartChart theme utilities (for analytics charts)
dialog_theme_utils.dartDialog theme utilities

Internationalization (lib/i18n/locales/)

Supported languages (14 locales):

LocaleLanguageFile
enEnglishen.dart
arArabicar.dart
bnBengalibn.dart
deGermande.dart
esSpanishes.dart
frFrenchfr.dart
idIndonesianid.dart
manMandarin Chineseman.dart
ptPortuguesept.dart
ruRussianru.dart
stSesothost.dart
swSwahilisw.dart
thThaith.dart
zhChinesezh.dart

Component Organization

lib/
├── main.dart                       # App entry point
├── src/                            # App structure
│   ├── app.dart                    # Root widget
│   ├── sample_feature/             # Sample feature (template code)
│   ├── settings/                   # Settings (legacy)
│   └── localization/               # Localization delegates
├── components/                     # UI components (14)
│   ├── auth/                       # Authentication (1)
│   ├── chat/                       # Chat interface (6)
│   ├── sidebar/                    # Sidebar (3)
│   ├── user/                       # User profile (1)
│   ├── settings/                   # Settings (2)
│   └── shared/                     # Shared UI (3)
├── design_system/                  # Design system (11)
│   ├── components/                 # DS primitives (6)
│   ├── tokens/                     # Design tokens (4)
│   └── theme/                      # App theme (1)
├── services/                       # Business logic (20)
│   ├── auth/                       # Auth services (10)
│   ├── keycloak/                   # Keycloak wrapper (1)
│   └── [other services]            # Other services (9)
├── config/                         # Configuration (5)
│   └── flavors/                    # Flavor configs (2)
├── providers/                      # Riverpod providers (1)
├── utils/                          # Utilities (3)
└── i18n/                           # Internationalization
    └── locales/                    # Translation files (13)

Notes

  • State Management: Riverpod (provider-based)
  • Authentication: Keycloak OIDC with secure token storage
  • Networking: Custom HTTP client with interceptors and SSE support
  • i18n: 13 language locales with fallback support
  • Design System: Token-based with DS components and utilities
  • Flavors: Multi-environment configuration (dev, staging, prod)
  • Platform Support: Web, Android, iOS (conditional file utilities)
Last modified July 1, 2026: docs: consistency-review fixes (env-var names, defaults, stale claims, fabricated content) (aa2e52db8)