This commit updates the GroupsPage.vue file by replacing standard button elements with custom VButton and VIcon components for improved consistency and styling. This change enhances the UI component structure and aligns with the project's design system.
This commit cleans up the `docker-compose.prod.yml` file by removing the database, Redis, and frontend service configurations, which were deemed unnecessary. The backend service configuration has been streamlined, including the update of the `VITE_API_URL` environment variable. This refactor aims to enhance clarity and maintainability of the Docker setup.
This commit addresses two issues:
1. A `TypeError` during Alembic migrations (`upgrade() takes 0 positional
arguments but 1 was given`). This was caused by the `upgrade` and
`downgrade` functions in the initial migration script not accepting
any arguments, while the custom migration runner in `migrations.py`
was passing a context argument.
- Modified `be/alembic/versions/0001_initial_schema.py` to ensure
`upgrade` and `downgrade` functions accept a `context` argument.
2. Redundant execution of migrations. Migrations were being triggered
both by the `entrypoint.sh` script and within the FastAPI application's
startup event in `app/main.py`.
- Commented out the `await run_migrations()` call in `app/main.py`
to ensure migrations are only handled by the `entrypoint.sh` script.
These changes should ensure that database migrations run correctly and only
once when the backend container starts.
This commit introduces changes to ensure that Alembic database migrations
are automatically applied when the backend Docker container starts.
Key changes:
- Added `be/entrypoint.sh`: This script first runs `alembic upgrade head`
to apply any pending migrations and then executes the main container
command (e.g., starting Uvicorn).
- Modified `be/Dockerfile`:
- The `entrypoint.sh` script is copied into the image and made executable.
- The Docker `ENTRYPOINT` is set to this script, ensuring migrations
run before the application starts.
- Updated `docker-compose.yml`:
- The `DATABASE_URL` for the `backend` service has been set to the
Neon database URL you provided.
- Verified `be/alembic/env.py`: Confirmed that it correctly sources the
`DATABASE_URL` from environment variables for Alembic to use.
These changes address the issue where migrations were not being run,
preventing the application from starting correctly.
- Updated Dockerfiles to use `python:3.11-slim` for reduced image size and enhanced build efficiency.
- Implemented multi-stage builds with selective file copying and non-root user creation for better security.
- Enhanced deployment workflow with retry logic for image pushes and added cleanup steps for Docker resources.
- Improved build commands with BuildKit optimizations for both backend and frontend images.
- Updated .dockerignore to categorize ignored files, including logs and local development configurations.
- Implemented a multi-stage build in Dockerfile to optimize image size and dependency management.
- Added build dependencies and created a virtual environment for better isolation of Python packages.
- Consolidated and categorized ignored files for better readability.
- Added entries for logs, local development, and documentation.
- Removed redundant entries and ensured proper grouping of related files.
- Changed the frontend Dockerfile to use process.env for environment variables instead of direct interpolation.
- Updated the production Docker Compose file to set environment variables directly instead of using build args.
- Switched the backend Dockerfile base image from `python:3.11-slim` to `python:alpine` for a smaller image size and increased worker count from 4 to 8 for better performance.
- Changed the build command in Dockerfile from `npm run build` to `npm run build-only` for optimized production builds.
- Simplified service worker initialization by removing conditional precaching logic.
- Enhanced styling and structure in `VListItem.vue` and `ListDetailPage.vue` for better readability and consistency with Valerie UI components.
- Improved focus handling in item addition and editing processes for better user experience.
- Cleaned up unused CSS classes and ensured consistent usage of Valerie UI components across the application.
- Modified the GitHub Actions workflow to streamline the deployment process by installing Docker directly and using shell commands for building and pushing images.
- Changed the base image for the backend Dockerfile from `python:3.11-slim` to `python:alpine` for a smaller footprint.
- Updated the frontend Dockerfile to use `node:23-alpine` instead of `node:24-alpine`, and refactored the production stage to use `node:slim`. Added a script for runtime environment variable injection.
- Removed redundant form elements and improved the layout for better readability.
- Streamlined the chore creation and editing process with enhanced validation and auto-save features.
- Updated keyboard shortcuts for improved accessibility and user experience.
- Enhanced modal interactions and improved loading states during data fetching.
- Cleaned up unused code and optimized the overall component structure.
This commit addresses issues with backend models, schemas, and migrations.
Key changes:
- Consolidated all SQLAlchemy model definitions into `be/app/models.py`.
- Emptied `be/app/models/expense.py` as its contents were duplicates.
- Verified and standardized Base class usage and SQLAlchemy imports in models.
- Confirmed the correctness of self-referential relationships in the `Expense` model.
- Added a clarifying comment to `SplitTypeEnum` regarding future extensibility.
- Corrected a typo in `Settlement.created_by_user_id`.
Migration Cleanup:
- Deleted all existing Alembic migration files from `be/alembic/versions/`.
- Created a new, single initial migration script (`0001_initial_schema.py`) that defines the entire database schema based on the current state of the SQLAlchemy models. This provides a clean slate for future migrations.
This reset was performed because the previous migration history was complex and contained a revision that was incompatible with the current model definitions. Starting fresh ensures consistency between the models and the database schema from the initial point.
Here's a breakdown of the changes:
1. **`AccountPage.vue`**:
* I replaced the main heading with `VHeading`.
* I updated the loading spinner to `VSpinner`.
* I converted the error alert to `VAlert` with an action button.
* I refactored the Profile, Password, and Notifications sections to use `VCard` for their structure.
* The form elements within these cards (name, email, passwords) now use `VFormField` and `VInput`.
* Action buttons like "Save Changes" and "Change Password" are now `VButton` with an integrated `VSpinner` for loading states.
* The notification preferences list uses `VList` and `VListItem`, with each preference toggle converted to `VToggleSwitch`.
2. **`GroupDetailPage.vue`**:
* I updated the page-level loading spinner, error alert, and main heading to `VSpinner`, `VAlert`, and `VHeading`.
* I refactored the "Group Members", "Invite Members", "Chores", and "Expenses" sections from custom "neo-card" styling to use `VCard`.
* Headers within these cards use `VHeading` and action buttons use `VButton` (I kept Material Icons where `VIcon` wasn't a direct replacement).
* Lists of members, chores, and expenses now use `VList` and `VListItem`.
* Buttons within list items (e.g., "Remove member") are `VButton` with `VSpinner`.
* Role indicators and frequency/split type "chips" are now `VBadge` components, and I updated the helper functions to return VBadge-compatible variants.
* The "Invite Members" form elements (input for code, copy button) use `VFormField`, `VInput`, and `VButton`.
* I simplified empty states within card bodies using `VIcon` and text.
3. **`ListDetailPage.vue`**: This complex page required several steps to refactor:
* **Page-Level & Header:** I updated the loading state to `VSpinner`, the error alert to `VAlert`, and the main title to `VHeading`. Header action buttons are `VButton` with icons, and the list status is `VBadge`.
* **Modals:** I converted all five custom modals (OCR, Confirmation, Edit Item, Settle Share, Cost Summary shell) to use `VModal`. Internal forms and actions within these modals now use `VFormField`, `VInput`, `VButton`, `VSpinner`, `VList`, `VListItem`, and `VAlert` as appropriate. I removed the `onClickOutside` logic.
* **Main Items List:** The loading state uses `VCard` with `VSpinner`, and the empty state uses `VCard variant="empty-state"`. The list itself is now a `VCard` containing a `VList`. Each item is a `VListItem` with internal content refactored to use `VCheckbox`, `VInput` (for price), and `VButton` with `VIcon` for actions.
* **Add Item Form:** I re-structured this below the items list, using `VFormField`, `VInput`, and `VButton` with `VIcon`.
* **Expenses Section:** The main card uses `VCard` with `VHeading` and `VButton` in the header. Loading/error/empty states use `VSpinner`, `VAlert`, `VIcon`. The expenses list is `VList`, with each expense item as a `VListItem`. Statuses are `VBadge`.
This refactoring significantly increases the usage of the Valerie UI component library across these key application pages. This should help create a more consistent experience for you and make development smoother. Next, I'll focus on the Chores-related pages.
This commit refactors parts of `GroupsPage.vue`, `ListsPage.vue`, and the shared `CreateListModal.vue` to use the newly created Valerie UI components.
Key changes include:
1. **Modals:**
* The "Create Group Dialog" in `GroupsPage.vue` now uses `VModal`, `VFormField`, `VInput`, `VButton`, and `VSpinner`.
* The `CreateListModal.vue` component (used by both pages) has been internally refactored to use `VModal`, `VFormField`, `VInput`, `VTextarea`, `VSelect`, `VButton`, and `VSpinner`.
2. **Forms:**
* The "Join Group" form in `GroupsPage.vue` now uses `VFormField`, `VInput`, `VButton`, and `VSpinner`.
3. **Alerts:**
* Error alerts in both `GroupsPage.vue` and `ListsPage.vue` now use the `VAlert` component, with retry buttons placed in the `actions` slot.
4. **Empty States:**
* The empty state displays (e.g., "No Groups Yet", "No lists found") in both pages now use the `VCard` component with `variant="empty-state"`, mapping content to the relevant props and slots.
5. **Buttons:**
* Various standalone buttons (e.g., "Create New Group", "Create New List", "List" button on group cards) have been updated to use the `VButton` component with appropriate props for variants, sizes, and icons.
**Scope of this Refactor:**
* The focus was on replacing direct usages of custom-styled modal dialogs, form elements, alerts, and buttons with their Valerie UI component counterparts.
* Highly custom card-like structures such as `neo-group-card` (in `GroupsPage.vue`) and `neo-list-card` (in `ListsPage.vue`), along with their specific "create" card variants, have been kept with their existing custom styling for this phase. This is due to their unique layouts and styling not directly mapping to the current generic `VCard` component without significant effort or potential introduction of overly specific props to `VCard`. Only buttons within these custom cards were refactored.
* The internal item rendering within `neo-list-card` (custom checkboxes, add item input) also remains custom for now.
This refactoring improves consistency by leveraging the standardized Valerie UI components for common UI patterns like modals, forms, alerts, and buttons on these pages.
