| # Frontend |
| |
| This package contains the web frontend for Vibepad, built with Jaspr. |
| |
| ## Architecture |
| |
| The frontend follows a **Pragmatic MVVM** architecture designed to maintain a clean separation of concerns without introducing unnecessary boilerplate. |
| |
| ### Folder Structure |
| |
| ```text |
| lib/ |
| app.dart # Root application component |
| main.client.dart # Entrypoint |
| |
| features/ # Feature modules containing Views, ViewModels, and Data Repositories |
| <feature_name>/ # e.g., editor, preview, workspace |
| data/ # Data repositories (if applicable) |
| views/ # Jaspr UI components |
| components/ # Smaller UI widgets specific to the feature |
| view_models/ # ChangeNotifiers for UI state |
| models/ # Domain models or state definitions |
| |
| utils/ # Shared utilities, styles, and providers |
| ``` |
| |
| ### Feature Structure |
| |
| - Contains all logic and UI grouped by logical feature (e.g., `editor`, `preview`, `workspace`, `agent`). |
| - `views/` and `components/`: Pure Jaspr components. They observe `ChangeNotifier` ViewModels and render UI accordingly. |
| - `view_models/`: Presentation logic layer. They depend on Repositories, manage UI state, and expose data formatted for the views. |
| - `models/`: Feature-specific data models or state definitions (like `PreviewState`). |
| |
| ### Dependency Management |
| |
| - Dependencies are instantiated near the root (e.g., `app.dart`) and passed down the component tree using `Provider` and `ChangeNotifierProvider`. |
| - ViewModels expect their repository dependencies to be injected via constructors. |
| - **Repository Independence**: Data repositories should not depend on ViewModels or Views. |
| - **Isolate State**: Avoid having views hold complex state. Let `ChangeNotifier` ViewModels be the single source of truth for the UI state of a feature. |
| |
| ### Styling |
| |
| - Styles should be defined using Jaspr's `@css` or standard styling mechanisms close to the components they style. |
