- Changed logging level from WARNING to INFO in config.py for better visibility during development.
- Adjusted chore update logic in chores.py to ensure correct payload structure.
- Improved invite acceptance process in invites.py by refining error handling and updating response models for better clarity.
- Updated API endpoint configurations in api-config.ts for consistency and added new endpoints for list statuses.
- Enhanced UI components in ChoresPage.vue and GroupsPage.vue for improved user experience and accessibility.
- Deleted obsolete task management files: `tasks.mdc` and `notes.md`.
- Introduced a new `groupStore` for managing group data, including fetching user groups and handling loading states.
- Updated `MainLayout.vue` to navigate to groups with improved loading checks.
- Enhanced `GroupsPage.vue` to support a tabbed interface for creating and joining groups, improving user experience.
- Refined `GroupDetailPage.vue` to display recent expenses with a more interactive layout and added functionality for settling shares.
- Enhanced the ChoresPage by refining button attributes for accessibility and improving layout consistency.
- Updated the GroupDetailPage to include a more interactive member avatar list and streamlined invite member functionality.
- Introduced new styles for better visual hierarchy and user experience across both pages.
- Implemented click-outside functionality for member menus and invite UI to enhance usability.
- Updated VBadge component to include additional badge variants: 'primary', 'success', 'danger', 'warning', 'info', and 'neutral'.
- Modified the GroupDetailPage to utilize the new badge variants for member roles and chore frequencies.
- Improved layout and styling of sections within GroupDetailPage for better user experience.
- Enhanced error handling and notification messages for invite code generation and clipboard actions.
- Introduced a new 'position' column in the Item model to facilitate item ordering.
- Updated the List model's relationship to order items by position and creation date.
- Enhanced CRUD operations to handle item creation and updates with position management.
- Implemented drag-and-drop reordering in the frontend, ensuring proper position updates on item movement.
- Adjusted item update logic to accommodate reordering and version control.
- Updated `vue-i18n` and related dependencies to version 9.14.4 for improved localization support.
- Added `vuedraggable` to enable drag-and-drop functionality for list items in `ListDetailPage.vue`.
- Refactored the item list structure to accommodate drag handles and improved item actions.
- Enhanced styling for drag-and-drop interactions and item actions for better user experience.
- Updated the `check_list_access_for_financials` function to allow access for list creators and members.
- Refactored the `list_expenses` endpoint to support filtering by `list_id`, `group_id`, and `isRecurring`, providing more flexible expense retrieval options.
- Introduced a new `read_list_expenses` endpoint to fetch expenses associated with a specific list, ensuring proper permission checks.
- Enhanced expense retrieval logic in the `get_expenses_for_list` and `get_user_accessible_expenses` functions to include settlement activities.
- Updated frontend API configuration to reflect new endpoint paths and ensure consistency across the application.
The expenses frontend was encountering 404 errors due to mismatched API paths
between the frontend calls and backend routing.
This commit addresses the issue by:
1. Modifying backend API routing in `be/app/api/v1/api.py`:
- Added a `/financials` prefix to the `financials.router`. Expense endpoints are now served under `/api/v1/financials/expenses`.
2. Updating frontend API configuration in `fe/src/config/api-config.ts`:
- Prepended `/api/v1` to all paths within the `API_ENDPOINTS.FINANCIALS` object to match the new backend structure (e.g., `API_ENDPOINTS.FINANCIALS.EXPENSES` is now `/api/v1/financials/expenses`).
3. Updating frontend expense service in `fe/src/services/expenseService.ts`:
- Replaced hardcoded relative URLs with the updated constants from `API_ENDPOINTS.FINANCIALS`.
- Ensured `API_ENDPOINTS` is correctly imported.
These changes align the frontend API calls with the backend endpoint definitions,
resolving the 404 errors.
- Increased the maximum file size for caching in PWA settings from 5MB to 15MB in vite.config.ts.
- Updated import paths for i18n messages in main.ts for consistency.
- Simplified the i18n index by removing unnecessary keys and using shorthand for language imports.
- Added debug output in LoginPage.vue to log current locale and available messages for easier troubleshooting.
- Increased the maximum file size for caching in PWA settings from 5MB to 15MB in vite.config.ts.
- Updated import paths for i18n messages in main.ts for consistency.
- Simplified the i18n index by removing unnecessary keys and using shorthand for language imports.
- Added debug output in LoginPage.vue to log current locale and available messages for easier troubleshooting.
This commit completes the internationalization (i18n) for several key pages
within the frontend application.
The following pages have been updated to support multiple languages:
- AccountPage.vue
- SignupPage.vue
- ListDetailPage.vue (including items, OCR, expenses, and cost summary)
- MyChoresPage.vue
- PersonalChoresPage.vue
- IndexPage.vue
Key changes include:
- Extraction of all user-facing strings from these Vue components.
- Addition of new translation keys and their English values to `fe/src/i18n/en.json`.
- Modification of the Vue components to use the Vue I18n plugin's `$t()` (template)
and `t()` (script) functions for displaying translated strings.
- Dynamic messages, notifications, and form validation messages are now also
internationalized.
- The language files `de.json`, `es.json`, and `fr.json` have been updated
with the new keys, using the English text as placeholders for future
translation.
This effort significantly expands the i18n coverage of the application,
making it more accessible to a wider audience.
This commit introduces internationalization for several pages:
- AuthCallbackPage.vue
- ChoresPage.vue (a comprehensive page with many elements)
- ErrorNotFound.vue
- GroupDetailPage.vue (including sub-sections for members, invites, chores summary, and expenses summary)
Key changes:
- Integrated `useI18n` in each listed page to handle translatable strings.
- Replaced hardcoded text in templates and relevant script sections (notifications, dynamic messages, fallbacks, etc.) with `t('key')` calls.
- Added new translation keys, organized under page-specific namespaces (e.g., `authCallbackPage`, `choresPage`, `errorNotFoundPage`, `groupDetailPage`), to `fe/src/i18n/en.json`.
- Added corresponding keys with placeholder translations (prefixed with DE:, FR:, ES:) to `fe/src/i18n/de.json`, `fe/src/i18n/fr.json`, and `fe/src/i18n/es.json`.
- Reused existing translation keys (e.g., for chore frequency options) where applicable.
This commit addresses an issue where you, when clicking the "Continue with Google"
button, were redirected back to the login page instead of to Google's
authentication page.
The following changes were made:
1. **Frontend Redirect:**
* Modified `fe/src/components/SocialLoginButtons.vue` to make the "Continue with Google" button redirect to the correct backend API endpoint (`/auth/google/login`) using the configured `API_BASE_URL`.
2. **Backend Route Confirmation:**
* Verified that the backend OAuth routes in `be/app/api/auth/oauth.py` are correctly included in `be/app/main.py` under the `/auth` prefix, making them accessible.
3. **OAuth Credentials Configuration:**
* Added `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` placeholders to `env.production.template` to guide you in setting up your OAuth credentials.
* Added instructional comments in `be/app/config.py` regarding the necessity of these environment variables and the correct configuration of `GOOGLE_REDIRECT_URI`.
With these changes, and assuming the necessary Google Cloud OAuth credentials
(Client ID, Client Secret) and redirect URIs are correctly configured in the
environment, the Google OAuth flow should now function as expected.
This commit completes the internationalization (i18n) for several key pages
within the frontend application.
The following pages have been updated to support multiple languages:
- AccountPage.vue
- SignupPage.vue
- ListDetailPage.vue (including items, OCR, expenses, and cost summary)
- MyChoresPage.vue
- PersonalChoresPage.vue
- IndexPage.vue
Key changes include:
- Extraction of all user-facing strings from these Vue components.
- Addition of new translation keys and their English values to `fe/src/i18n/en.json`.
- Modification of the Vue components to use the Vue I18n plugin's `$t()` (template)
and `t()` (script) functions for displaying translated strings.
- Dynamic messages, notifications, and form validation messages are now also
internationalized.
- The language files `de.json`, `es.json`, and `fr.json` have been updated
with the new keys, using the English text as placeholders for future
translation.
This effort significantly expands the i18n coverage of the application,
making it more accessible to a wider audience.
This commit introduces internationalization for several pages:
- AuthCallbackPage.vue
- ChoresPage.vue (a comprehensive page with many elements)
- ErrorNotFound.vue
- GroupDetailPage.vue (including sub-sections for members, invites, chores summary, and expenses summary)
Key changes:
- Integrated `useI18n` in each listed page to handle translatable strings.
- Replaced hardcoded text in templates and relevant script sections (notifications, dynamic messages, fallbacks, etc.) with `t('key')` calls.
- Added new translation keys, organized under page-specific namespaces (e.g., `authCallbackPage`, `choresPage`, `errorNotFoundPage`, `groupDetailPage`), to `fe/src/i18n/en.json`.
- Added corresponding keys with placeholder translations (prefixed with DE:, FR:, ES:) to `fe/src/i18n/de.json`, `fe/src/i18n/fr.json`, and `fe/src/i18n/es.json`.
- Reused existing translation keys (e.g., for chore frequency options) where applicable.
This commit addresses an issue where you, when clicking the "Continue with Google"
button, were redirected back to the login page instead of to Google's
authentication page.
The following changes were made:
1. **Frontend Redirect:**
* Modified `fe/src/components/SocialLoginButtons.vue` to make the "Continue with Google" button redirect to the correct backend API endpoint (`/auth/google/login`) using the configured `API_BASE_URL`.
2. **Backend Route Confirmation:**
* Verified that the backend OAuth routes in `be/app/api/auth/oauth.py` are correctly included in `be/app/main.py` under the `/auth` prefix, making them accessible.
3. **OAuth Credentials Configuration:**
* Added `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` placeholders to `env.production.template` to guide you in setting up your OAuth credentials.
* Added instructional comments in `be/app/config.py` regarding the necessity of these environment variables and the correct configuration of `GOOGLE_REDIRECT_URI`.
With these changes, and assuming the necessary Google Cloud OAuth credentials
(Client ID, Client Secret) and redirect URIs are correctly configured in the
environment, the Google OAuth flow should now function as expected.
- Changed the Google and Apple redirect URIs in the configuration to include the API version in the path.
- Reorganized the inclusion of OAuth routes in the main application to ensure they are properly prefixed and accessible.
These updates aim to enhance the API structure and ensure consistency in the authentication flow.
- Updated the OAuth routes to be included under the main API prefix for better organization.
- Changed the Google login URL in the SocialLoginButtons component to reflect the new API structure.
These changes aim to improve the clarity and consistency of the API routing and enhance the login flow for users.
- Updated transition effects for checkbox elements to use cubic-bezier for smoother animations.
- Added scale transformation on hover and checked states for improved visual feedback.
- Adjusted animation durations for checkbox interactions to enhance user experience.
- Refined text styling for checked checkboxes to include color change and line-through effect.
These changes aim to improve the overall user interface and interaction dynamics of the ListsPage component.
- Added ARIA roles and attributes to buttons and modals for improved accessibility.
- Updated chore types and properties in the Chore interface to allow for null values.
- Refactored chore loading and filtering logic to handle edge cases and improve performance.
- Enhanced calendar and list views with better user feedback for empty states and loading indicators.
- Improved styling for mobile responsiveness and dark mode support.
These changes aim to enhance user experience, accessibility, and maintainability of the ChoresPage component.
- Added `motion` and `framer-motion` packages to `package.json` and `package-lock.json`.
- Updated API base URL in `api-config.ts` to point to the local development environment.
- Refactored `ListDetailPage.vue` to enhance item rendering and interaction, replacing `VListItem` with a custom list structure.
- Improved `ListsPage.vue` to handle loading states and item addition more effectively, including better handling of temporary item IDs.
These changes aim to improve the user experience and maintainability of the application.
This commit includes several enhancements across multiple files:
- In `valerie-ui.scss`, improved formatting of CSS properties and adjusted selectors for better readability and consistency.
- In `CreateListModal.vue`, introduced a sentinel value for group selection and refined the logic for handling group options.
- In `VModal.vue`, streamlined modal structure and removed unnecessary styles, centralizing modal styling in `valerie-ui.scss`.
- In `VTextarea.vue`, adjusted aria attributes for better accessibility and improved code clarity.
- Updated `api-config.ts` to switch the API base URL to a local development environment.
These changes aim to enhance maintainability, accessibility, and overall user experience.
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.
- 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.
- 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.
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.
