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

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.