chore: bump version to v3.11.0

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.devcontainer/Dockerfile

@@ -1,9 +1,10 @@
-# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.224.2/containers/python-3/.devcontainer/base.Dockerfile
-
 # [Choice] Python version (use -bullseye variants on local arm64/Apple Silicon): 3, 3.10, 3.9, 3.8, 3.7, 3.6, 3-bullseye, 3.10-bullseye, 3.9-bullseye, 3.8-bullseye, 3.7-bullseye, 3.6-bullseye, 3-buster, 3.10-buster, 3.9-buster, 3.8-buster, 3.7-buster, 3.6-buster
 ARG VARIANT="3.12-bullseye"
 FROM mcr.microsoft.com/devcontainers/python:${VARIANT}
 
+# Remove outdated yarn GPG key, if it exists
+RUN rm -f /etc/apt/sources.list.d/yarn.list /usr/share/keyrings/yarn-archive-keyring.gpg || true
+
 # [Choice] Node.js version: none, lts/*, 16, 14, 12, 10
 ARG NODE_VERSION="none"
 RUN if [ "${NODE_VERSION}" != "none" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi
@@ -13,6 +14,7 @@ RUN echo "export PROMPT_COMMAND='history -a'" >> /home/vscode/.bashrc \
     && chown vscode:vscode -R /home/vscode/
 
 RUN npm install -g @go-task/cli
+RUN npm install -g json-schema-to-typescript
 
 # Install additional OS packages
 RUN apt-get update \

.devcontainer/devcontainer.json

@@ -23,7 +23,6 @@
       "settings": {
         "python.defaultInterpreterPath": "/usr/local/bin/python",
         "python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
-        "python.formatting.blackPath": "/usr/local/py-utils/bin/black",
         "python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
         "mypy.runUsingActiveInterpreter": true
       },
@@ -31,10 +30,10 @@
         "charliermarsh.ruff",
         "dbaeumer.vscode-eslint",
         "matangover.mypy",
-        "ms-python.black-formatter",
         "ms-python.pylint",
         "ms-python.python",
         "ms-python.vscode-pylance",
+        "streetsidesoftware.code-spell-checker-cspell-bundled-dictionaries",
         "Vue.volar"
       ]
     }
@@ -42,6 +41,7 @@
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   "forwardPorts": [
     3000,
+    8000, // used by mkdocs
     9000,
     9091, // used by docker production
     24678 // used by nuxt when hot-reloading using polling

.github/copilot-instructions.md

@@ -0,0 +1,240 @@
+# Mealie Development Guide for AI Agents
+
+## Project Overview
+
+Mealie is a self-hosted recipe manager, meal planner, and shopping list application with a FastAPI backend (Python 3.12) and Nuxt 3 frontend (Vue 3 + TypeScript). It uses SQLAlchemy ORM with support for SQLite and PostgreSQL databases.
+
+**Development vs Production:**
+- **Development:** Frontend (port 3000) and backend (port 9000) run as separate processes
+- **Production:** Frontend is statically generated and served via FastAPI's SPA module (`mealie/routes/spa/`) in a single container
+
+## Architecture & Key Patterns
+
+### Backend Architecture (mealie/)
+
+**Repository-Service-Controller Pattern:**
+- **Controllers** (`mealie/routes/**/controller_*.py`): Inherit from `BaseUserController` or `BaseAdminController`, handle HTTP concerns, delegate to services
+- **Services** (`mealie/services/`): Business logic layer, inherit from `BaseService`, coordinate repos and external dependencies
+- **Repositories** (`mealie/repos/`): Data access layer using SQLAlchemy, accessed via `AllRepositories` factory
+  - Get repos via dependency injection: `repos: AllRepositories = Depends(get_repositories)`
+  - All repos scoped to group/household context automatically
+
+**Route Organization:**
+- Routes in `mealie/routes/` organized by domain (auth, recipe, groups, households, admin)
+- Use `APIRouter` with FastAPI dependency injection
+- Apply `@router.get/post/put/delete` decorators with Pydantic response models
+- Route controllers use `HttpRepo` mixin for common CRUD operations (see `mealie/routes/_base/mixins.py`)
+
+**Schemas & Type Generation:**
+- Pydantic schemas in `mealie/schema/` with strict separation: `*In`, `*Out`, `*Create`, `*Update` suffixes
+- Auto-exported from submodules via `__init__.py` files (generated by `task dev:generate`)
+- TypeScript types auto-generated from Pydantic schemas - **never manually edit** `frontend/lib/api/types/`
+
+**Database & Sessions:**
+- Session management via `Depends(generate_session)` in FastAPI routes
+- Use `session_context()` context manager in services/scripts
+- SQLAlchemy models in `mealie/db/models/`, migrations in `mealie/alembic/`
+- Create migrations: `task py:migrate -- "description"`
+
+### Frontend Architecture (frontend/)
+
+**Component Organization (strict naming conventions):**
+- **Domain Components** (`components/Domain/`): Feature-specific, prefix with domain (e.g., `AdminDashboard`)
+- **Global Components** (`components/global/`): Reusable primitives, prefix with `Base` (e.g., `BaseButton`)
+- **Layout Components** (`components/Layout/`): Layout-only, prefix with `App` if props or `The` if singleton
+- **Page Components** (`components/` with page prefix): Last resort for breaking up complex pages
+
+**API Client Pattern:**
+- API clients in `frontend/lib/api/` extend `BaseAPI`, `BaseCRUDAPI`, or `BaseCRUDAPIReadOnly`
+- Types imported from auto-generated `frontend/lib/api/types/` (DO NOT EDIT MANUALLY)
+- Composables in `frontend/composables/` for shared state and API logic (e.g., `use-mealie-auth.ts`)
+- Use `useAuthBackend()` for authentication state, `useMealieAuth()` for user management
+
+**State Management:**
+- Nuxt 3 composables for state (no Vuex)
+- Auth state via `use-mealie-auth.ts` composable
+- Prefer composables over global state stores
+
+## Essential Commands (via Task/Taskfile.yml)
+
+**Development workflow:**
+```bash
+task setup              # Install all dependencies (Python + Node)
+task dev:services       # Start Postgres & Mailpit containers
+task py                 # Start FastAPI backend (port 9000)
+task ui                 # Start Nuxt frontend (port 3000)
+task docs               # Start MkDocs documentation server
+```
+
+**Code generation (REQUIRED after schema changes):**
+```bash
+task dev:generate       # Generate TypeScript types, schema exports, test helpers
+```
+
+**Testing & Quality:**
+```bash
+task py:test            # Run pytest (supports args: task py:test -- -k test_name)
+task py:check           # Format + lint + type-check + test (full validation)
+task py:format          # Ruff format
+task py:lint            # Ruff check
+task py:mypy            # Type checking
+task ui:test            # Vitest frontend tests
+task ui:check           # Frontend lint + test
+```
+
+**Database:**
+```bash
+task py:migrate -- "description"  # Generate Alembic migration
+task py:postgres        # Run backend with PostgreSQL config
+```
+
+**Docker:**
+```bash
+task docker:prod        # Build and run production Docker compose
+```
+
+## Critical Development Practices
+
+### Python Backend
+
+1. **Always use `uv` for Python commands** (not `python` or `pip`):
+   ```bash
+   uv run python mealie/app.py
+   uv run pytest tests/
+   ```
+
+2. **Type hints are mandatory:** Use mypy-compatible annotations, handle Optional types explicitly
+
+3. **Dependency injection pattern:**
+   ```python
+   from fastapi import Depends
+   from mealie.repos.all_repositories import get_repositories, AllRepositories
+
+   def my_route(
+       repos: AllRepositories = Depends(get_repositories),
+       user: PrivateUser = Depends(get_current_user)
+   ):
+       recipe = repos.recipes.get_one(recipe_id)
+   ```
+
+4. **Settings & Configuration:**
+   - Get settings: `settings = get_app_settings()` (cached singleton)
+   - Get directories: `dirs = get_app_dirs()`
+   - Never instantiate `AppSettings()` directly
+
+5. **Testing:**
+   - Fixtures in `tests/fixtures/`
+   - Use `api_client` fixture for integration tests
+   - Follow existing patterns in `tests/integration_tests/` and `tests/unit_tests/`
+
+### Frontend
+
+1. **Run code generation after backend schema changes:** `task dev:generate`
+
+2. **TypeScript strict mode:** All code must pass type checking
+
+3. **Component naming:** Follow strict conventions (see Architecture section above)
+
+4. **API calls pattern:**
+   ```typescript
+   const api = useUserApi();
+   const recipe = await api.recipes.getOne(recipeId);
+   ```
+
+5. **Composables for shared logic:** Prefer composables in `composables/` over inline code duplication
+
+6. **Translations:** Only modify `en-US` locale files when adding new translation strings - other locales are managed via Crowdin and **must never be modified** (PRs modifying non-English locales will be rejected)
+
+### Cross-Cutting Concerns
+
+1. **Code generation is source of truth:** After Pydantic schema changes, run `task dev:generate` to update:
+   - TypeScript types (`frontend/lib/api/types/`)
+   - Schema exports (`mealie/schema/*/__init__.py`)
+   - Test data paths and routes
+
+2. **Multi-tenancy:** All data scoped to **groups** and **households**:
+   - Groups contain multiple households
+   - Households contain recipes, meal plans, shopping lists
+   - Repositories automatically filter by group/household context
+
+3. **Pre-commit hooks:** Install via `task setup:py`, enforces Ruff formatting/linting
+
+4. **Testing before PRs:** Run `task py:check` and `task ui:check` before submitting PRs
+
+## Pull Request Best Practices
+
+### Before Submitting a PR
+
+1. **Draft PRs are optional:** Create a draft PR early if you want feedback while working, or open directly as ready when complete
+2. **Verify code generation:** If you modified Pydantic schemas, ensure `task dev:generate` was run
+3. **Follow Conventional Commits:** Title your PR according to the conventional commits format (see PR template)
+4. **Add release notes:** Include user-facing changes in the PR description
+
+### What to Review
+
+**Architecture & Patterns:**
+- Does the code follow the repository-service-controller pattern?
+- Are controllers delegating business logic to services?
+- Are services coordinating repositories, not accessing the database directly?
+- Is dependency injection used properly (`Depends(get_repositories)`, `Depends(get_current_user)`)?
+
+**Data Scoping:**
+- Are repositories correctly scoped to group/household context?
+- Do route handlers properly validate group/household ownership before operations?
+- Are multi-tenant boundaries enforced (users can't access other groups' data)?
+
+**Type Safety:**
+- Are type hints present on all functions and methods?
+- Are Pydantic schemas using correct suffixes (`*In`, `*Out`, `*Create`, `*Update`)?
+- For frontend, does TypeScript code pass strict type checking?
+
+**Generated Files:**
+- Verify `frontend/lib/api/types/` files weren't manually edited (they're auto-generated)
+- Check that `mealie/schema/*/__init__.py` exports match actual schema files (auto-generated)
+- If schemas changed, confirm generated files were updated via `task dev:generate`
+
+**Code Quality:**
+- Is the code readable and well-organized?
+- Are complex operations documented with clear comments?
+- Do component names follow the strict naming conventions (Domain/Global/Layout/Page prefixes)?
+- Are composables used for shared frontend logic instead of duplication?
+
+**Translations:**
+- Were only `en-US` locale files modified for new translation strings?
+- Verify no other locale files (managed by Crowdin) were touched
+
+**Database Changes:**
+- Are Alembic migrations included for schema changes?
+- Are migrations tested against both SQLite and PostgreSQL?
+
+### Review Etiquette
+
+- Be constructive and specific in feedback
+- Suggest code examples when proposing changes
+- Focus on architecture and logic - formatting/linting is handled by CI
+- Use "Approve" when ready to merge, "Request Changes" for blocking issues, "Comment" for non-blocking suggestions
+
+## Common Gotchas
+
+- **Don't manually edit generated files:** `frontend/lib/api/types/`, schema `__init__.py` files
+- **Repository context:** Repos are group/household-scoped - passing wrong IDs causes 404s
+- **Session handling:** Don't create sessions manually, use dependency injection or `session_context()`
+- **Schema changes require codegen:** After changing Pydantic models, run `task dev:generate`
+- **Translation files:** Only modify `en-US` locale files - all other locales are managed by Crowdin
+- **Dev containers:** This project uses VS Code dev containers - leverage the pre-configured environment
+- **Task commands:** Use `task` commands instead of direct tool invocation for consistency
+
+## Key Files to Reference
+
+- `Taskfile.yml` - All development commands and workflows
+- `mealie/routes/_base/base_controllers.py` - Controller base classes and patterns
+- `mealie/repos/repository_factory.py` - Repository factory and available repos
+- `frontend/lib/api/base/base-clients.ts` - API client base classes
+- `tests/conftest.py` - Test fixtures and setup
+- `dev/code-generation/main.py` - Code generation entry point
+
+## Additional Resources
+
+- [Documentation](https://docs.mealie.io/)
+- [Contributors Guide](https://nightly.mealie.io/contributors/developers-guide/code-contributions/)
+- [Discord](https://discord.gg/QuStdQGSGK)

.github/workflows/auto-merge-l10n.yml

@@ -0,0 +1,113 @@
+name: Auto-merge l10n PRs
+
+on:
+  pull_request:
+    types: [opened, synchronize, labeled]
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  auto-merge:
+    runs-on: ubuntu-latest
+    if: contains(github.event.pull_request.labels.*.name, 'l10n')
+
+    steps:
+      - name: Validate PR author
+        env:
+          AUTHOR: ${{ github.event.pull_request.user.login }}
+        run: |
+          if [[
+            "$AUTHOR" != "hay-kot" &&
+            "$AUTHOR" != "github-actions[bot]" &&
+            "$AUTHOR" != "mealie-actions[bot]"
+          ]]; then
+            echo "::error::PR author must be hay-kot, github-actions[bot], or mealie-actions[bot] for auto-merge (got: $AUTHOR)"
+            exit 1
+          fi
+          echo "Author validated: $AUTHOR"
+
+      - name: Validate PR size
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          REPO: ${{ github.repository }}
+        run: |
+          ADDITIONS=$(gh pr view "$PR_NUMBER" --repo "$REPO" --json additions --jq '.additions')
+          DELETIONS=$(gh pr view "$PR_NUMBER" --repo "$REPO" --json deletions --jq '.deletions')
+          TOTAL=$((ADDITIONS + DELETIONS))
+
+          echo "PR changes: +$ADDITIONS -$DELETIONS (total: $TOTAL lines)"
+
+          if [ "$TOTAL" -gt 400 ]; then
+            echo "::error::PR exceeds 400 line change limit ($TOTAL lines)"
+            exit 1
+          fi
+
+      - name: Validate file paths
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          REPO: ${{ github.repository }}
+        run: |
+          FILES=$(gh pr view "$PR_NUMBER" --repo "$REPO" --json files --jq '.files[].path')
+
+          for file in $FILES; do
+            # Check if file matches any allowed path
+            if [[ "$file" == "frontend/composables/use-locales/available-locales.ts" ]] || \
+               [[ "$file" =~ ^frontend/lang/ ]] || \
+               [[ "$file" =~ ^mealie/repos/seed/resources/[^/]+/locales/ ]]; then
+              continue
+            fi
+
+            # File doesn't match allowed paths
+            echo "::error::Invalid file path: $file"
+            echo "Only the following paths are allowed:"
+            echo "  - frontend/composables/use-locales/available-locales.ts"
+            echo "  - frontend/lang/"
+            echo "  - mealie/repos/seed/resources/*/locales/"
+            exit 1
+          done
+
+          echo "All files are in allowed paths"
+
+      - name: Approve PR
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          REPO: ${{ github.repository }}
+        run: |
+          APPROVED=$(gh pr view "$PR_NUMBER" \
+            --repo "$REPO" \
+            --json reviews \
+            --jq '.reviews[] | select(.state == "APPROVED") | .id' \
+            | wc -l)
+
+          if [ "$APPROVED" -gt 0 ]; then
+            echo "PR already approved"
+            exit 0
+          fi
+
+          gh pr review "$PR_NUMBER" \
+            --repo "$REPO" \
+            --approve \
+            --body "Auto-approved: l10n PR from trusted author with valid file paths"
+
+      - name: Generate GitHub App Token
+        id: app-token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.COMMIT_BOT_APP_ID }}
+          private-key: ${{ secrets.COMMIT_BOT_APP_PRIVATE_KEY }}
+
+      - name: Enable auto-merge
+        env:
+          GH_TOKEN: ${{ steps.app-token.outputs.token }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          REPO: ${{ github.repository }}
+        run: |
+          gh pr merge "$PR_NUMBER" \
+            --repo "$REPO" \
+            --auto \
+            --squash

.github/workflows/docs.yml

@@ -0,0 +1,50 @@
+name: Deploy Documentation
+
+on:
+  push:
+    branches: [mealie-next]
+    paths:
+      - 'docs/**'
+      - '.github/workflows/docs.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install uv
+        uses: astral-sh/setup-uv@v4
+
+      - name: Install dependencies
+        run: uv sync --only-group docs --no-install-project
+
+      - name: Build docs
+        run: uv run --no-project mkdocs build -d site
+        working-directory: docs
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/site
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/locale-sync.yml

@@ -15,10 +15,17 @@ jobs:
   sync-locales:
     runs-on: ubuntu-latest
     steps:
+      - name: Generate GitHub App Token
+        id: app-token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.COMMIT_BOT_APP_ID }}
+          private-key: ${{ secrets.COMMIT_BOT_APP_PRIVATE_KEY }}
+
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
+          token: ${{ steps.app-token.outputs.token }}
 
       - name: Set up Python
         uses: actions/setup-python@v5
@@ -105,7 +112,7 @@ jobs:
           - Updated frontend locale files
           - Generated from latest translation sources" \
         env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: ${{ steps.app-token.outputs.token }}
 
       - name: No changes detected
         if: steps.changes.outputs.has_changes == 'false'

.github/workflows/publish.yml

@@ -37,6 +37,17 @@ jobs:
 
       - uses: depot/setup-action@v1
 
+      - name: Generate Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            hkotel/mealie
+            ghcr.io/${{ github.repository }}
+          # Overwrite the image.version label with our tag
+          labels: |
+            org.opencontainers.image.version=${{ inputs.tag }}
+
       - name: Retrieve Python package
         uses: actions/download-artifact@v4
         with:
@@ -57,5 +68,6 @@ jobs:
             hkotel/mealie:${{ inputs.tag }}
             ghcr.io/${{ github.repository }}:${{ inputs.tag }}
             ${{ inputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
           build-args: |
             COMMIT=${{ github.sha }}

.github/workflows/pull-requests.yml

@@ -4,14 +4,19 @@ on:
   pull_request:
     branches:
       - mealie-next
+  merge_group:
+    types: [checks_requested]
+    branches:
+      - mealie-next
 
 concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.event.merge_group.head_ref }}
   cancel-in-progress: true
 
 jobs:
   pull-request-lint:
     name: "Lint PR"
+    if: github.event_name == 'pull_request'
     uses: ./.github/workflows/pull-request-lint.yml
 
   backend-tests:
@@ -24,6 +29,7 @@ jobs:
 
   container-scanning:
     name: "Trivy Container Scanning"
+    if: github.event_name == 'pull_request'
     uses: ./.github/workflows/partial-trivy-container-scanning.yml
 
   code-ql:
@@ -47,7 +53,10 @@ jobs:
 
   publish-image:
     name: "Publish PR Image"
-    if: contains(github.event.pull_request.labels.*.name, 'build-image') && github.repository == 'mealie-recipes/mealie'
+    if: |
+      github.event_name == 'pull_request' &&
+      contains(github.event.pull_request.labels.*.name, 'build-image') &&
+      github.repository == 'mealie-recipes/mealie'
     permissions:
       contents: read
       packages: write

.github/workflows/release.yml

@@ -5,17 +5,73 @@ on:
     types: [published]
 
 jobs:
+  commit-version-bump:
+    name: Commit version bump to repository
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    outputs:
+      commit-sha: ${{ steps.commit.outputs.commit-sha }}
+    steps:
+      - name: Generate GitHub App Token
+        id: app-token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.COMMIT_BOT_APP_ID }}
+          private-key: ${{ secrets.COMMIT_BOT_APP_PRIVATE_KEY }}
+
+      - name: Checkout 🛎
+        uses: actions/checkout@v4
+        with:
+          token: ${{ steps.app-token.outputs.token }}
+
+      - name: Extract Version From Tag Name
+        run: echo "VERSION_NUM=$(echo ${{ github.event.release.tag_name }} | sed 's/^v//')" >> $GITHUB_ENV
+
+      - name: Configure Git
+        run: |
+          git config user.name "mealie-commit-bot[bot]"
+          git config user.email "mealie-commit-bot[bot]@users.noreply.github.com"
+
+      - name: Update all version strings
+        run: |
+          sed -i 's/^version = "[^"]*"/version = "${{ env.VERSION_NUM }}"/' pyproject.toml
+          sed -i '/^name = "mealie"$/,/^version = / s/^version = "[^"]*"/version = "${{ env.VERSION_NUM }}"/' uv.lock
+          sed -i 's/\("version": "\)[^"]*"/\1${{ env.VERSION_NUM }}"/' frontend/package.json
+          sed -i 's/:v[0-9]*\.[0-9]*\.[0-9]*/:v${{ env.VERSION_NUM }}/' docs/docs/documentation/getting-started/installation/installation-checklist.md
+          sed -i 's/:v[0-9]*\.[0-9]*\.[0-9]*/:v${{ env.VERSION_NUM }}/' docs/docs/documentation/getting-started/installation/sqlite.md
+          sed -i 's/:v[0-9]*\.[0-9]*\.[0-9]*/:v${{ env.VERSION_NUM }}/' docs/docs/documentation/getting-started/installation/postgres.md
+
+      - name: Commit and push changes
+        id: commit
+        run: |
+          git add pyproject.toml frontend/package.json uv.lock docs/
+          git commit -m "chore: bump version to ${{ github.event.release.tag_name }}"
+          git push origin HEAD:${{ github.event.repository.default_branch }}
+          echo "commit-sha=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
+
+      - name: Move release tag to new commit
+        run: |
+          git tag -f ${{ github.event.release.tag_name }}
+          git push -f origin ${{ github.event.release.tag_name }}
+
   backend-tests:
     name: "Backend Server Tests"
     uses: ./.github/workflows/test-backend.yml
+    needs:
+      - commit-version-bump
 
   frontend-tests:
     name: "Frontend Tests"
     uses: ./.github/workflows/test-frontend.yml
+    needs:
+      - commit-version-bump
 
   build-package:
     name: Build Package
     uses: ./.github/workflows/build-package.yml
+    needs:
+      - commit-version-bump
     with:
       tag: ${{ github.event.release.tag_name }}
 
@@ -43,10 +99,48 @@ jobs:
       DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
       DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
 
+  rollback-on-failure:
+    name: Rollback version commit if deployment fails
+    needs:
+      - commit-version-bump
+      - publish
+    if: always() && needs.publish.result == 'failure'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Generate GitHub App Token
+        id: app-token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.COMMIT_BOT_APP_ID }}
+          private-key: ${{ secrets.COMMIT_BOT_APP_PRIVATE_KEY }}
+
+      - name: Checkout 🛎
+        uses: actions/checkout@v4
+        with:
+          token: ${{ steps.app-token.outputs.token }}
+          fetch-depth: 0
+
+      - name: Configure Git
+        run: |
+          git config user.name "mealie-commit-bot[bot]"
+          git config user.email "mealie-commit-bot[bot]@users.noreply.github.com"
+
+      - name: Delete release tag
+        run: |
+          git push --delete origin ${{ github.event.release.tag_name }}
+
+      - name: Revert version bump commit
+        run: |
+          git revert --no-edit ${{ needs.commit-version-bump.outputs.commit-sha }}
+          git push origin HEAD:${{ github.event.repository.default_branch }}
+
   notify-discord:
     name: Notify Discord
     needs:
       - publish
+    if: success()
     runs-on: ubuntu-latest
     steps:
       - name: Discord notification
@@ -55,41 +149,3 @@ jobs:
         uses: Ilshidur/action-discord@0.3.2
         with:
           args: "🚀  Version {{ EVENT_PAYLOAD.release.tag_name }} of Mealie has been released. See the release notes https://github.com/mealie-recipes/mealie/releases/tag/{{ EVENT_PAYLOAD.release.tag_name }}"
-
-  update-image-tags:
-    name: Update image tag in sample docker-compose files
-    needs:
-      - publish
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-    steps:
-      - name: Checkout 🛎
-        uses: actions/checkout@v4
-
-      - name: Extract Version From Tag Name
-        run: echo "VERSION_NUM=$(echo ${{ github.event.release.tag_name }} | sed 's/^v//')" >> $GITHUB_ENV
-
-      - name: Modify version strings
-        run: |
-          sed -i 's/:v[0-9]*.[0-9]*.[0-9]*/:v${{ env.VERSION_NUM }}/' docs/docs/documentation/getting-started/installation/installation-checklist.md
-          sed -i 's/:v[0-9]*.[0-9]*.[0-9]*/:v${{ env.VERSION_NUM }}/' docs/docs/documentation/getting-started/installation/sqlite.md
-          sed -i 's/:v[0-9]*.[0-9]*.[0-9]*/:v${{ env.VERSION_NUM }}/' docs/docs/documentation/getting-started/installation/postgres.md
-          sed -i 's/^version = "[^"]*"/version = "${{ env.VERSION_NUM }}"/' pyproject.toml
-          sed -i 's/\("version": "\)[^"]*"/\1${{ env.VERSION_NUM }}"/' frontend/package.json
-
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v6
-        # This doesn't currently work for us because it creates the PR but the workflows don't run.
-        # TODO: Provide a personal access token as a parameter here, that solves that problem.
-        # https://github.com/peter-evans/create-pull-request
-        with:
-          commit-message: "Update image tag, for release ${{ github.event.release.tag_name }}"
-          branch: "docs/newrelease-update-version-${{ github.event.release.tag_name }}"
-          labels: |
-            documentation
-          delete-branch: true
-          base: mealie-next
-          title: "docs(auto): Update image tag, for release ${{ github.event.release.tag_name }}"
-          body: "Auto-generated by `.github/workflows/release.yml`, on publish of release ${{ github.event.release.tag_name }}"

.github/workflows/scheduled-checks.yml

@@ -40,12 +40,18 @@ jobs:
         shell: bash
         run: pre-commit autoupdate --color=always
 
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v6
-        # This doesn't currently work for us because it creates the PR but the workflows don't run.
-        # TODO: Provide a personal access token as a parameter here, that solves that problem.
-        # https://github.com/peter-evans/create-pull-request
+      - name: Generate GitHub App Token
+        id: app-token
+        uses: actions/create-github-app-token@v1
         with:
+          app-id: ${{ secrets.COMMIT_BOT_APP_ID }}
+          private-key: ${{ secrets.COMMIT_BOT_APP_PRIVATE_KEY }}
+
+      - name: Create Pull Request
+        id: create-pr
+        uses: peter-evans/create-pull-request@v6
+        with:
+          token: ${{ steps.app-token.outputs.token }}
           commit-message: "Update pre-commit hooks"
           branch: "fix/update-pre-commit-hooks"
           labels: |
@@ -54,3 +60,38 @@ jobs:
           base: mealie-next
           title: "chore(auto): Update pre-commit hooks"
           body: "Auto-generated by `.github/workflows/scheduled-checks.yml`"
+
+      - name: Approve PR
+        if: steps.create-pr.outputs.pull-request-number
+        env:
+          GH_TOKEN: ${{ steps.app-token.outputs.token }}
+          PR_NUMBER: ${{ steps.create-pr.outputs.pull-request-number }}
+          REPO: ${{ github.repository }}
+        run: |
+          APPROVED=$(gh pr view "$PR_NUMBER" \
+            --repo "$REPO" \
+            --json reviews \
+            --jq '.reviews[] | select(.state == "APPROVED") | .id' \
+            | wc -l)
+
+          if [ "$APPROVED" -gt 0 ]; then
+            echo "PR already approved"
+            exit 0
+          fi
+
+          gh pr review "$PR_NUMBER" \
+            --repo "$REPO" \
+            --approve \
+            --body "Auto-approved: Pre-commit hook updates"
+
+      - name: Enable auto-merge
+        if: steps.create-pr.outputs.pull-request-number
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ steps.create-pr.outputs.pull-request-number }}
+          REPO: ${{ github.repository }}
+        run: |
+          gh pr merge "$PR_NUMBER" \
+            --repo "$REPO" \
+            --auto \
+            --squash

.gitignore

@@ -20,6 +20,7 @@ dev/data/backups/*
 dev/data/debug/*
 dev/data/img/*
 dev/data/migration/*
+dev/data/templates/*
 dev/data/users/*
 dev/data/groups/*
 
@@ -69,8 +70,11 @@ wheels/
 .installed.cfg
 *.egg
 
+# packaged output - temporarily written here by `uv build`
+/mealie-*
+
 # frontend copied into Python module for packaging purposes
-/mealie/frontend/
+/mealie/frontend
 
 # PyInstaller
 #  Usually these files are written by a python script from a template

.pre-commit-config.yaml

@@ -12,7 +12,7 @@ repos:
         exclude: ^tests/data/
   - repo: https://github.com/astral-sh/ruff-pre-commit
     # Ruff version.
-    rev: v0.14.7
+    rev: v0.15.1
     hooks:
       - id: ruff
       - id: ruff-format

Taskfile.yml

@@ -47,8 +47,6 @@ tasks:
     sources:
       - package.json
       - yarn.lock
-    generates:
-      - node_modules/**
 
   setup:py:
     desc: setup python dependencies
@@ -61,6 +59,18 @@ tasks:
       - pyproject.toml
       - .pre-commit-config.yaml
 
+  setup:e2e:
+    desc: setup e2e test dependencies
+    dir: tests/e2e
+    run: once
+    cmds:
+      - yarn install
+      - yarn playwright install --with-deps
+    sources:
+      - package.json
+      - playwright.config.ts
+      - yarn.lock
+
   setup:
     desc: setup all dependencies
     deps:
@@ -179,12 +189,21 @@ tasks:
     status:
       - '{{ .SKIP_PACKAGE_DEPS | default "false"}}'
 
-  py:package:
-    desc: builds Python packages (sdist and wheel) in top-level dist directory
+  py:package:build:
+    internal: true
     deps:
       - py:package:deps
     cmds:
       - uv build --out-dir dist
+    sources:
+      - uv.lock
+      - pyproject.toml
+      - mealie/**
+
+  py:package:
+    desc: builds Python packages (sdist and wheel) in top-level dist directory
+    cmds:
+      - task: py:package:build
       - task: py:package:generate-requirements
 
   py:
@@ -215,6 +234,12 @@ tasks:
     dir: frontend
     cmds:
       - yarn build
+    sources:
+      - "**"
+      - exclude: .nuxt/**
+      - exclude: .output/**
+      - exclude: dist/**
+      - exclude: node_modules/.cache/**
 
   ui:generate:
     desc: generates a static version of the frontend in frontend/dist
@@ -223,18 +248,36 @@ tasks:
       - setup:ui
     cmds:
       - yarn generate
+    sources:
+      - "**"
+      - exclude: .nuxt/**
+      - exclude: .output/**
+      - exclude: dist/**
+      - exclude: node_modules/.cache/**
 
   ui:lint:
     desc: runs the frontend linter
     dir: frontend
     cmds:
       - yarn lint --max-warnings=0
+    sources:
+      - "**"
+      - exclude: .nuxt/**
+      - exclude: .output/**
+      - exclude: dist/**
+      - exclude: node_modules/.cache/**
 
   ui:test:
     desc: runs the frontend tests
     dir: frontend
     cmds:
       - yarn test
+    sources:
+      - "**"
+      - exclude: .nuxt/**
+      - exclude: .output/**
+      - exclude: dist/**
+      - exclude: node_modules/.cache/**
 
   ui:check:
     desc: runs all frontend checks
@@ -263,3 +306,48 @@ tasks:
     dir: docker
     cmds:
       - docker compose -f docker-compose.yml -p mealie up -d --build
+
+  e2e:build-image:
+    desc: builds the e2e test docker image
+    deps:
+       - py:package
+    cmds:
+      - docker build --tag mealie:e2e --file docker/Dockerfile --build-context packages=dist .
+    sources:
+      - docker/Dockerfile
+      - dist/**
+
+  e2e:start-server:
+    desc: Builds the image and starts the containers for e2e testing
+    dir: tests/e2e/docker
+    deps:
+       - e2e:build-image
+    vars:
+      WAIT_UNTIL_HEALTHY: '{{if .WAIT_UNTIL_HEALTHY}}--wait{{else}}{{end}}'
+    cmds:
+      - docker compose up -d {{.WAIT_UNTIL_HEALTHY}}
+
+  e2e:stop-server:
+    desc: Shuts down the e2e testing containers
+    dir: tests/e2e/docker
+    cmds:
+      - docker compose down --volumes
+
+  e2e:test:
+    desc: runs the e2e tests
+    dir: tests/e2e
+    deps:
+      - setup:e2e
+    vars:
+      PREVENT_REPORT_OPEN: '{{if .PREVENT_REPORT_OPEN}}PLAYWRIGHT_HTML_OPEN=never{{else}}{{end}}'
+    cmds:
+      - '{{.PREVENT_REPORT_OPEN}} yarn playwright test'
+
+  e2e:
+    desc: runs the full e2e test suite
+    cmds:
+      - task: e2e:start-server
+        vars: { WAIT_UNTIL_HEALTHY: true }
+      - defer: { task: e2e:stop-server }
+      - task: e2e:test
+        vars: { PREVENT_REPORT_OPEN: true }

dev/code-generation/gen_ts_locales.py

@@ -1,6 +1,7 @@
+import json
 import os
 import pathlib
-from dataclasses import dataclass
+import re
 from pathlib import Path
 
 import dotenv
@@ -10,6 +11,7 @@ from pydantic import ConfigDict
 from requests import Response
 from utils import CodeDest, CodeKeys, inject_inline, log
 
+from mealie.lang.locale_config import LOCALE_CONFIG, LocalePluralFoodHandling, LocaleTextDirection
 from mealie.schema._mealie import MealieModel
 
 BASE = pathlib.Path(__file__).parent.parent.parent
@@ -17,57 +19,6 @@ BASE = pathlib.Path(__file__).parent.parent.parent
 API_KEY = dotenv.get_key(BASE / ".env", "CROWDIN_API_KEY") or os.environ.get("CROWDIN_API_KEY", "")
 
 
-@dataclass
-class LocaleData:
-    name: str
-    dir: str = "ltr"
-
-
-LOCALE_DATA: dict[str, LocaleData] = {
-    "af-ZA": LocaleData(name="Afrikaans (Afrikaans)"),
-    "ar-SA": LocaleData(name="العربية (Arabic)", dir="rtl"),
-    "bg-BG": LocaleData(name="Български (Bulgarian)"),
-    "ca-ES": LocaleData(name="Català (Catalan)"),
-    "cs-CZ": LocaleData(name="Čeština (Czech)"),
-    "da-DK": LocaleData(name="Dansk (Danish)"),
-    "de-DE": LocaleData(name="Deutsch (German)"),
-    "el-GR": LocaleData(name="Ελληνικά (Greek)"),
-    "en-GB": LocaleData(name="British English"),
-    "en-US": LocaleData(name="American English"),
-    "es-ES": LocaleData(name="Español (Spanish)"),
-    "et-EE": LocaleData(name="Eesti (Estonian)"),
-    "fi-FI": LocaleData(name="Suomi (Finnish)"),
-    "fr-BE": LocaleData(name="Belge (Belgian)"),
-    "fr-CA": LocaleData(name="Français canadien (Canadian French)"),
-    "fr-FR": LocaleData(name="Français (French)"),
-    "gl-ES": LocaleData(name="Galego (Galician)"),
-    "he-IL": LocaleData(name="עברית (Hebrew)", dir="rtl"),
-    "hr-HR": LocaleData(name="Hrvatski (Croatian)"),
-    "hu-HU": LocaleData(name="Magyar (Hungarian)"),
-    "is-IS": LocaleData(name="Íslenska (Icelandic)"),
-    "it-IT": LocaleData(name="Italiano (Italian)"),
-    "ja-JP": LocaleData(name="日本語 (Japanese)"),
-    "ko-KR": LocaleData(name="한국어 (Korean)"),
-    "lt-LT": LocaleData(name="Lietuvių (Lithuanian)"),
-    "lv-LV": LocaleData(name="Latviešu (Latvian)"),
-    "nl-NL": LocaleData(name="Nederlands (Dutch)"),
-    "no-NO": LocaleData(name="Norsk (Norwegian)"),
-    "pl-PL": LocaleData(name="Polski (Polish)"),
-    "pt-BR": LocaleData(name="Português do Brasil (Brazilian Portuguese)"),
-    "pt-PT": LocaleData(name="Português (Portuguese)"),
-    "ro-RO": LocaleData(name="Română (Romanian)"),
-    "ru-RU": LocaleData(name="Pусский (Russian)"),
-    "sk-SK": LocaleData(name="Slovenčina (Slovak)"),
-    "sl-SI": LocaleData(name="Slovenščina (Slovenian)"),
-    "sr-SP": LocaleData(name="српски (Serbian)"),
-    "sv-SE": LocaleData(name="Svenska (Swedish)"),
-    "tr-TR": LocaleData(name="Türkçe (Turkish)"),
-    "uk-UA": LocaleData(name="Українська (Ukrainian)"),
-    "vi-VN": LocaleData(name="Tiếng Việt (Vietnamese)"),
-    "zh-CN": LocaleData(name="简体中文 (Chinese simplified)"),
-    "zh-TW": LocaleData(name="繁體中文 (Chinese traditional)"),
-}
-
 LOCALE_TEMPLATE = """// This Code is auto generated by gen_ts_locales.py
 export const LOCALES = [{% for locale in locales %}
   {
@@ -75,6 +26,7 @@ export const LOCALES = [{% for locale in locales %}
     value: "{{ locale.locale }}",
     progress: {{ locale.progress }},
     dir: "{{ locale.dir }}",
+    pluralFoodHandling: "{{ locale.plural_food_handling }}",
   },{% endfor %}
 ];
 
@@ -87,10 +39,11 @@ class TargetLanguage(MealieModel):
     id: str
     name: str
     locale: str
-    dir: str = "ltr"
+    dir: LocaleTextDirection = LocaleTextDirection.LTR
+    plural_food_handling: LocalePluralFoodHandling = LocalePluralFoodHandling.ALWAYS
     threeLettersCode: str
     twoLettersCode: str
-    progress: float = 0.0
+    progress: int = 0
 
 
 class CrowdinApi:
@@ -117,43 +70,15 @@ class CrowdinApi:
     def get_languages(self) -> list[TargetLanguage]:
         response = self.get_project()
         tls = response.json()["data"]["targetLanguages"]
+        return [TargetLanguage(**t) for t in tls]
 
-        models = [TargetLanguage(**t) for t in tls]
-
-        models.insert(
-            0,
-            TargetLanguage(
-                id="en-US",
-                name="English",
-                locale="en-US",
-                dir="ltr",
-                threeLettersCode="en",
-                twoLettersCode="en",
-                progress=100,
-            ),
-        )
-
-        progress: list[dict] = self.get_progress()["data"]
-
-        for model in models:
-            if model.locale in LOCALE_DATA:
-                locale_data = LOCALE_DATA[model.locale]
-                model.name = locale_data.name
-                model.dir = locale_data.dir
-
-            for p in progress:
-                if p["data"]["languageId"] == model.id:
-                    model.progress = p["data"]["translationProgress"]
-
-        models.sort(key=lambda x: x.locale, reverse=True)
-        return models
-
-    def get_progress(self) -> dict:
+    def get_progress(self) -> dict[str, int]:
         response = requests.get(
             f"https://api.crowdin.com/api/v2/projects/{self.project_id}/languages/progress?limit=500",
             headers=self.headers,
         )
-        return response.json()
+        data = response.json()["data"]
+        return {p["data"]["languageId"]: p["translationProgress"] for p in data}
 
 
 PROJECT_DIR = Path(__file__).parent.parent.parent
@@ -195,8 +120,8 @@ def inject_nuxt_values():
 
     all_langs = []
     for match in locales_dir.glob("*.json"):
-        match_data = LOCALE_DATA.get(match.stem)
-        match_dir = match_data.dir if match_data else "ltr"
+        match_data = LOCALE_CONFIG.get(match.stem)
+        match_dir = match_data.dir if match_data else LocaleTextDirection.LTR
 
         lang_string = f'{{ code: "{match.stem}", file: "{match.name.replace(".json", ".ts")}", dir: "{match_dir}" }},'
         all_langs.append(lang_string)
@@ -221,9 +146,82 @@ def inject_registration_validation_values():
     inject_inline(reg_valid, CodeKeys.nuxt_local_messages, all_langs)
 
 
+def _get_local_models() -> list[TargetLanguage]:
+    return [
+        TargetLanguage(
+            id=locale,
+            name=data.name,
+            locale=locale,
+            threeLettersCode=locale.split("-")[-1],
+            twoLettersCode=locale.split("-")[-1],
+        )
+        for locale, data in LOCALE_CONFIG.items()
+        if locale != "en-US"  # Crowdin doesn't include this, so we manually inject it later
+    ]
+
+
+def _get_local_progress() -> dict[str, int]:
+    with open(CodeDest.use_locales) as f:
+        content = f.read()
+
+    # Extract the array content between [ and ]
+    match = re.search(r"export const LOCALES = (\[.*?\]);", content, re.DOTALL)
+    if not match:
+        raise ValueError("Could not find LOCALES array in file")
+
+    # Convert JS to JSON
+    array_content = match.group(1)
+
+    # Replace unquoted keys with quoted keys for valid JSON
+    # This converts: { name: "value" } to { "name": "value" }
+    json_str = re.sub(r"([,\{\s])([a-zA-Z_][a-zA-Z0-9_]*)\s*:", r'\1"\2":', array_content)
+
+    # Remove trailing commas before } and ]
+    json_str = re.sub(r",(\s*[}\]])", r"\1", json_str)
+
+    locales = json.loads(json_str)
+    return {locale["value"]: locale["progress"] for locale in locales}
+
+
+def get_languages() -> list[TargetLanguage]:
+    if API_KEY:
+        api = CrowdinApi(None)
+        models = api.get_languages()
+        progress = api.get_progress()
+    else:
+        log.warning("CROWDIN_API_KEY is not set, using local lanugages instead")
+        log.warning("DOUBLE CHECK the output!!! Do not overwrite with bad local locale data!")
+        models = _get_local_models()
+        progress = _get_local_progress()
+
+    models.insert(
+        0,
+        TargetLanguage(
+            id="en-US",
+            name="English",
+            locale="en-US",
+            dir=LocaleTextDirection.LTR,
+            plural_food_handling=LocalePluralFoodHandling.WITHOUT_UNIT,
+            threeLettersCode="en",
+            twoLettersCode="en",
+            progress=100,
+        ),
+    )
+
+    for model in models:
+        if model.locale in LOCALE_CONFIG:
+            locale_data = LOCALE_CONFIG[model.locale]
+            model.name = locale_data.name
+            model.dir = locale_data.dir
+            model.plural_food_handling = locale_data.plural_food_handling
+            model.progress = progress.get(model.id, model.progress)
+
+    models.sort(key=lambda x: x.locale, reverse=True)
+    return models
+
+
 def generate_locales_ts_file():
-    api = CrowdinApi(None)
-    models = api.get_languages()
+    models = get_languages()
     tmpl = Template(LOCALE_TEMPLATE)
     rendered = tmpl.render(locales=models)
 
@@ -233,10 +231,6 @@ def generate_locales_ts_file():
 
 
 def main():
-    if API_KEY is None or API_KEY == "":
-        log.error("CROWDIN_API_KEY is not set")
-        return
-
     generate_locales_ts_file()
     inject_nuxt_values()
     inject_registration_validation_values()

docker/Dockerfile

@@ -1,7 +1,7 @@
 ###############################################
 # Frontend Build
 ###############################################
-FROM node:24@sha256:aa648b387728c25f81ff811799bbf8de39df66d7e2d9b3ab55cc6300cb9175d9 \
+FROM node:24@sha256:00e9195ebd49985a6da8921f419978d85dfe354589755192dc090425ce4da2f7 \
     AS frontend-builder
 
 WORKDIR /frontend
@@ -111,7 +111,6 @@ RUN . $VENV_PATH/bin/activate \
 # Production Image
 ###############################################
 FROM python-base AS production
-LABEL org.opencontainers.image.source="https://github.com/mealie-recipes/mealie"
 ENV PRODUCTION=true
 ENV TESTING=false
 

docs/docs/contributors/developers-guide/migration-guide.md

@@ -6,7 +6,7 @@ While this guide aims to simplify the migration process for developers, it's not
 
 ## V1 → V2
 
-The biggest change between V1 and V2 is the introduction of Households. For more information on how households work in relation to groups/users, check out the [Groups and Households](./features.md#groups-and-households) section in the Features guide.
+The biggest change between V1 and V2 is the introduction of Households. For more information on how households work in relation to groups/users, check out the [Groups and Households](../../documentation/getting-started/features.md#groups-and-households) section in the Features guide.
 
 ### `updateAt` is now `updatedAt`
 

docs/docs/documentation/getting-started/api-usage.md

@@ -16,7 +16,7 @@ Recipes extras are a key feature of the Mealie API. They allow you to create cus
 For example you could add `{"message": "Remember to thaw the chicken"}` to a recipe and use the webhooks built into mealie to send that message payload to a destination to be processed.
 
 #### Shopping List and Food Extras
-Similarly to recipes, extras are supported on shopping lists, shopping list items, and foods. At this time they are only accessible through the API. Extras for these objects allow for rich integrations between the Mealie shopping list and your favorite list manager, such as Alexa, ToDoist, Trello, or any other list manager with an API.
+Similarly to recipes, extras are supported on shopping lists, shopping list items, and foods. At this time they are only accessible through the API. Extras for these objects allow for rich integrations between the Mealie shopping list and your favorite list manager, such as Todoist, Trello, or any other list manager with an API.
 
 To keep shopping lists in sync, for instance, you can store your Trello list id on your Mealie shopping list: <br />
 `{"trello_list_id": "5abbe4b7ddc1b351ef961414"}`
@@ -52,6 +52,7 @@ Many applications will keep track of the query and adjust the page parameter app
 Notice that the route does not contain the baseurl (e.g. `https://mymealieapplication.com/api`).
 
 There are a few shorthands available to reduce the number of calls for certain common requests:
+
 - if you want to return _all_ results, effectively disabling pagination, set `perPage = -1` (and fetch the first page)
 - if you want to fetch the _last_ page, set `page = -1`
 
@@ -89,6 +90,28 @@ This filter will find all recipes that don't start with the word "Test": <br>
 This filter will find all recipes that have particular slugs: <br>
 `slug IN ["pasta-fagioli", "delicious-ramen"]`
 
+##### Placeholder Keywords
+You can use placeholders to insert dynamic values as opposed to static values. Currently the only supported placeholder keyword is `$NOW`, to insert the current date/time.
+
+`$NOW` can optionally be paired with basic offsets. Here is an example of a filter which gives you recipes not made within the past 30 days: <br>
+`lastMade <= "$NOW-30d"`
+
+Supported offset operations include:
+
+- `-` for subtracting a time (i.e. in the past)
+- `+` for adding a time (i.e. in the future)
+
+Supported offset intervals include:
+
+- `y` for years
+- `m` for months
+- `d` for days
+- `H` for hours
+- `M` for minutes
+- `S` for seconds
+
+Note that intervals are _case sensitive_ (e.g. `s` is an invalid interval).
+
 ##### Nested Property filters
 When querying tables with relationships, you can filter properties on related tables. For instance, if you want to query all recipes owned by a particular user: <br>
 `user.username = "SousChef20220320"`
@@ -96,7 +119,7 @@ When querying tables with relationships, you can filter properties on related ta
 This timeline event filter will return all timeline events for recipes that were created after a particular date: <br>
 `recipe.createdAt >= "2023-02-25"`
 
-This recipe filter will return all recipes that contains a particular set of tags: <br>
+This recipe filter will return all recipes that contain a particular set of tags: <br>
 `tags.name CONTAINS ALL ["Easy", "Cajun"]`
 
 ##### Compound Filters

docs/docs/documentation/getting-started/authentication/oidc-v2.md

@@ -9,7 +9,7 @@
 
 Mealie supports 3rd party authentication via [OpenID Connect (OIDC)](https://openid.net/connect/), an identity layer built on top of OAuth2. OIDC is supported by many Identity Providers (IdP), including:
 
-- [Authentik](https://goauthentik.io/integrations/sources/oauth/#openid-connect)
+- [Authentik](https://integrations.goauthentik.io/documentation/mealie/)
 - [Authelia](https://www.authelia.com/integration/openid-connect/mealie/)
 - [Keycloak](https://www.keycloak.org/docs/latest/securing_apps/#_oidc)
 - [Okta](https://www.okta.com/openid-connect/)
@@ -68,7 +68,6 @@ Example configurations for several Identity Providers have been provided by the
 
 If you don't see your provider and have successfully set it up, please consider [creating your own example](https://github.com/mealie-recipes/mealie/discussions/new?category=oauth-provider-example) so that others can have a smoother setup.
 
-
 ## Migration from Mealie v1.x
 
 **High level changes**

docs/docs/documentation/getting-started/features.md

@@ -85,13 +85,13 @@ The meal planner has the concept of plan rules. These offer a flexible way to us
 
 The shopping lists feature is a great way to keep track of what you need to buy for your next meal. You can add items directly to the shopping list or link a recipe and all of it's ingredients to track meals during the week.
 
-Managing shopping lists can be done from the Sidebar > Shopping Lists. 
+Managing shopping lists can be done from the Sidebar > Shopping Lists.
 
 Here you will be able to:
 
 - See items already on the Shopping List
 - See linked recipes with ingredients
-    - Toggling via the 'Pot' icon will show you the linked recipe, allowing you to click to access it. 
+    - Toggling via the 'Pot' icon will show you the linked recipe, allowing you to click to access it.
 - Check off an item
 - Add / Change / Remove / Sort Items via the grid icon
     - Be sure if you are modifying an ingredient to click the 'Save' icon.
@@ -103,13 +103,10 @@ Here you will be able to:
 
 !!! tip
     You can use Labels to categorize your ingredients. You may want to Label by Food Type (Frozen, Fresh, etc), by Store, Tool, Recipe, or more. Play around with this to see what works best for you.
-    
-!!! tip
-    You can toggle 'Food' on items so that if you add multiple of the same food / ingredient, Mealie will automatically combine them together. Do this by editing an item in the Shopping List and clicking the 'Apple' icon. If you then have recipes that contain "1 | cup | cheese" and "2 | cup | cheese" this would be combined to show "3 cups of cheese."
 
 [See FAQ for more information](../getting-started/faq.md)
 
-    
+
 [Shopping List Demo](https://demo.mealie.io/shopping-lists){ .md-button .md-button--primary }
 
 ## Integrations
@@ -198,7 +195,7 @@ Mealie lets you fully customize how you organize your users. You can use Groups
 
 ### Groups
 
-Groups are fully isolated instances of Mealie. Think of a goup as a completely separate, fully self-contained site. There is no data shared between groups. Each group has its own users, recipes, tags, categories, etc. A user logged-in to one group cannot make any changes to another.
+Groups are fully isolated instances of Mealie. Think of a group as a completely separate, fully self-contained site. There is no data shared between groups. Each group has its own users, recipes, tags, categories, etc. A user logged-in to one group cannot make any changes to another.
 
 Common use cases for groups include:
 

docs/docs/documentation/getting-started/installation/backend-config.md

@@ -122,17 +122,18 @@ For usage, see [Usage - OpenID Connect](../authentication/oidc-v2.md)
 Mealie supports various integrations using OpenAI. For more information, check out our [OpenAI documentation](./open-ai.md).
 For custom mapping variables (e.g. OPENAI_CUSTOM_HEADERS) you should pass values as JSON encoded strings (e.g. `OPENAI_CUSTOM_PARAMS='{"k1": "v1", "k2": "v2"}'`)
 
-| Variables                                         | Default | Description                                                                                                                                                                  |
-| ------------------------------------------------- | :-----: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| OPENAI_BASE_URL<super>[&dagger;][secrets]</super> |  None   | The base URL for the OpenAI API. If you're not sure, leave this empty to use the standard OpenAI platform                                                                    |
-| OPENAI_API_KEY<super>[&dagger;][secrets]</super>  |  None   | Your OpenAI API Key. Enables OpenAI-related features                                                                                                                         |
-| OPENAI_MODEL                                      | gpt-4o  | Which OpenAI model to use. If you're not sure, leave this empty                                                                                                              |
-| OPENAI_CUSTOM_HEADERS                             |  None   | Custom HTTP headers to add to all OpenAI requests. This should generally be left empty unless your custom service requires them                                              |
-| OPENAI_CUSTOM_PARAMS                              |  None   | Custom HTTP query params to add to all OpenAI requests. This should generally be left empty unless your custom service requires them                                         |
-| OPENAI_ENABLE_IMAGE_SERVICES                      |  True   | Whether to enable OpenAI image services, such as creating recipes via image. Leave this enabled unless your custom model doesn't support it, or you want to reduce costs     |
-| OPENAI_WORKERS                                    |    2    | Number of OpenAI workers per request. Higher values may increase processing speed, but will incur additional API costs                                                       |
-| OPENAI_SEND_DATABASE_DATA                         |  True   | Whether to send Mealie data to OpenAI to improve request accuracy. This will incur additional API costs                                                                      |
-| OPENAI_REQUEST_TIMEOUT                            |   300   | The number of seconds to wait for an OpenAI request to complete before cancelling the request. Leave this empty unless you're running into timeout issues on slower hardware |
+| Variables                                         | Default | Description                                                                                                                                                                                                                                                                                                        |
+|---------------------------------------------------|:-------:|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| OPENAI_BASE_URL<super>[&dagger;][secrets]</super> |  None   | The base URL for the OpenAI API. If you're not sure, leave this empty to use the standard OpenAI platform                                                                                                                                                                                                          |
+| OPENAI_API_KEY<super>[&dagger;][secrets]</super>  |  None   | Your OpenAI API Key. Enables OpenAI-related features                                                                                                                                                                                                                                                               |
+| OPENAI_MODEL                                      | gpt-4o  | Which OpenAI model to use. If you're not sure, leave this empty                                                                                                                                                                                                                                                    |
+| OPENAI_CUSTOM_HEADERS                             |  None   | Custom HTTP headers to add to all OpenAI requests. This should generally be left empty unless your custom service requires them                                                                                                                                                                                    |
+| OPENAI_CUSTOM_PARAMS                              |  None   | Custom HTTP query params to add to all OpenAI requests. This should generally be left empty unless your custom service requires them                                                                                                                                                                               |
+| OPENAI_ENABLE_IMAGE_SERVICES                      |  True   | Whether to enable OpenAI image services, such as creating recipes via image. Leave this enabled unless your custom model doesn't support it, or you want to reduce costs                                                                                                                                           |
+| OPENAI_WORKERS                                    |    2    | Number of OpenAI workers per request. Higher values may increase processing speed, but will incur additional API costs                                                                                                                                                                                             |
+| OPENAI_SEND_DATABASE_DATA                         |  True   | Whether to send Mealie data to OpenAI to improve request accuracy. This will incur additional API costs                                                                                                                                                                                                            |
+| OPENAI_REQUEST_TIMEOUT                            |   300   | The number of seconds to wait for an OpenAI request to complete before cancelling the request. Leave this empty unless you're running into timeout issues on slower hardware                                                                                                                                       |
+| OPENAI_CUSTOM_PROMPT_DIR                          |  None   | Path to custom prompt files. Only existing files in your custom directory will override the defaults; any missing or empty custom files will automatically fall back to the system defaults. See https://github.com/mealie-recipes/mealie/tree/mealie-next/mealie/services/openai/prompts for expected file names. |
 
 ### Theming
 
@@ -145,22 +146,99 @@ Setting the following environmental variables will change the theme of the front
 
     If using YAML sequence syntax, don't include any quotes:<br>`THEME_LIGHT_PRIMARY=#E58325` or `THEME_LIGHT_PRIMARY=E58325`
 
-| Variables             | Default | Description                 |
-| --------------------- | :-----: | --------------------------- |
-| THEME_LIGHT_PRIMARY   | #E58325 | Light Theme Config Variable |
-| THEME_LIGHT_ACCENT    | #007A99 | Light Theme Config Variable |
-| THEME_LIGHT_SECONDARY | #973542 | Light Theme Config Variable |
-| THEME_LIGHT_SUCCESS   | #43A047 | Light Theme Config Variable |
-| THEME_LIGHT_INFO      | #1976D2 | Light Theme Config Variable |
-| THEME_LIGHT_WARNING   | #FF6D00 | Light Theme Config Variable |
-| THEME_LIGHT_ERROR     | #EF5350 | Light Theme Config Variable |
-| THEME_DARK_PRIMARY    | #E58325 | Dark Theme Config Variable  |
-| THEME_DARK_ACCENT     | #007A99 | Dark Theme Config Variable  |
-| THEME_DARK_SECONDARY  | #973542 | Dark Theme Config Variable  |
-| THEME_DARK_SUCCESS    | #43A047 | Dark Theme Config Variable  |
-| THEME_DARK_INFO       | #1976D2 | Dark Theme Config Variable  |
-| THEME_DARK_WARNING    | #FF6D00 | Dark Theme Config Variable  |
-| THEME_DARK_ERROR      | #EF5350 | Dark Theme Config Variable  |
+| Variables             | Default | Description                        |
+| --------------------- | :-----: | ---------------------------------- |
+| THEME_LIGHT_PRIMARY   | #E58325 | Main brand color and headers       |
+| THEME_LIGHT_ACCENT    | #007A99 | Buttons and interactive elements   |
+| THEME_LIGHT_SECONDARY | #973542 | Navigation and sidebar backgrounds |
+| THEME_LIGHT_SUCCESS   | #43A047 | Success messages and confirmations |
+| THEME_LIGHT_INFO      | #1976D2 | Information alerts and tooltips    |
+| THEME_LIGHT_WARNING   | #FF6D00 | Warning notifications              |
+| THEME_LIGHT_ERROR     | #EF5350 | Error messages and alerts          |
+| THEME_DARK_PRIMARY    | #E58325 | Main brand color and headers       |
+| THEME_DARK_ACCENT     | #007A99 | Buttons and interactive elements   |
+| THEME_DARK_SECONDARY  | #973542 | Navigation and sidebar backgrounds |
+| THEME_DARK_SUCCESS    | #43A047 | Success messages and confirmations |
+| THEME_DARK_INFO       | #1976D2 | Information alerts and tooltips    |
+| THEME_DARK_WARNING    | #FF6D00 | Warning notifications              |
+| THEME_DARK_ERROR      | #EF5350 | Error messages and alerts          |
+
+#### Theming Examples
+
+The examples below provide copy-ready Docker Compose environment configurations for three different color palettes. Copy and paste the desired theme into your `docker-compose.yml` file's environment section.
+
+!!! info
+    These themes are functional and ready to use, but they are provided primarily as examples. The color palettes can be adjusted or refined to better suit your preferences.
+
+=== "Blue Theme"
+
+    ```yaml
+    environment:
+      # Light mode colors
+      THEME_LIGHT_PRIMARY: '#5E9BD1'
+      THEME_LIGHT_ACCENT: '#A3C9E8'
+      THEME_LIGHT_SECONDARY: '#4F89BA'
+      THEME_LIGHT_SUCCESS: '#4CAF50'
+      THEME_LIGHT_INFO: '#4A9ED8'
+      THEME_LIGHT_WARNING: '#EAC46B'
+      THEME_LIGHT_ERROR: '#E57373'
+      # Dark mode colors
+      THEME_DARK_PRIMARY: '#5A8FBF'
+      THEME_DARK_ACCENT: '#90B8D9'
+      THEME_DARK_SECONDARY: '#406D96'
+      THEME_DARK_SUCCESS: '#81C784'
+      THEME_DARK_INFO: '#78B2C0'
+      THEME_DARK_WARNING: '#EBC86E'
+      THEME_DARK_ERROR: '#E57373'
+    ```
+
+=== "Green Theme"
+
+    ```yaml
+    environment:
+      # Light mode colors
+      THEME_LIGHT_PRIMARY: '#75A86C'
+      THEME_LIGHT_ACCENT: '#A8D0A6'
+      THEME_LIGHT_SECONDARY: '#638E5E'
+      THEME_LIGHT_SUCCESS: '#4CAF50'
+      THEME_LIGHT_INFO: '#4A9ED8'
+      THEME_LIGHT_WARNING: '#EAC46B'
+      THEME_LIGHT_ERROR: '#E57373'
+      # Dark mode colors
+      THEME_DARK_PRIMARY: '#739B7A'
+      THEME_DARK_ACCENT: '#9FBE9D'
+      THEME_DARK_SECONDARY: '#56775E'
+      THEME_DARK_SUCCESS: '#81C784'
+      THEME_DARK_INFO: '#78B2C0'
+      THEME_DARK_WARNING: '#EBC86E'
+      THEME_DARK_ERROR: '#E57373'
+    ```
+
+=== "Pink Theme"
+
+    ```yaml
+    environment:
+      # Light mode colors
+      THEME_LIGHT_PRIMARY: '#D97C96'
+      THEME_LIGHT_ACCENT: '#E891A7'
+      THEME_LIGHT_SECONDARY: '#C86C88'
+      THEME_LIGHT_SUCCESS: '#4CAF50'
+      THEME_LIGHT_INFO: '#2196F3'
+      THEME_LIGHT_WARNING: '#FFC107'
+      THEME_LIGHT_ERROR: '#E57373'
+      # Dark mode colors
+      THEME_DARK_PRIMARY: '#C2185B'
+      THEME_DARK_ACCENT: '#FF80AB'
+      THEME_DARK_SECONDARY: '#AD1457'
+      THEME_DARK_SUCCESS: '#81C784'
+      THEME_DARK_INFO: '#64B5F6'
+      THEME_DARK_WARNING: '#FFD54F'
+      THEME_DARK_ERROR: '#E57373'
+    ```
+
+!!! info
+    Browser cookies may cause the client to keep outdated settings.
+    Clearing the cookies can be required for the change to take effect.
 
 ### Docker Secrets
 

docs/docs/documentation/getting-started/installation/installation-checklist.md

@@ -31,7 +31,7 @@ To deploy mealie on your local network, it is highly recommended to use Docker t
 We've gone through a few versions of Mealie v1 deployment targets. We have settled on a single container deployment, and we've begun publishing the nightly container on github containers. If you're looking to move from the old nightly (split containers _or_ the omni image) to the new nightly, there are a few things you need to do:
 
 1. Take a backup just in case!
-2. Replace the image for the API container with `ghcr.io/mealie-recipes/mealie:v3.5.0`
+2. Replace the image for the API container with `ghcr.io/mealie-recipes/mealie:v3.11.0`
 3. Take the external port from the frontend container and set that as the port mapped to port `9000` on the new container. The frontend is now served on port 9000 from the new container, so it will need to be mapped for you to have access.
 4. Restart the container
 

docs/docs/documentation/getting-started/installation/postgres.md

@@ -10,7 +10,7 @@ PostgreSQL might be considered if you need to support many concurrent users. In
 ```yaml
 services:
   mealie:
-    image: ghcr.io/mealie-recipes/mealie:v3.5.0 # (3)
+    image: ghcr.io/mealie-recipes/mealie:v3.11.0 # (3)
     container_name: mealie
     restart: always
     ports:

docs/docs/documentation/getting-started/installation/sqlite.md

@@ -11,7 +11,7 @@ SQLite is a popular, open source, self-contained, zero-configuration database th
 ```yaml
 services:
   mealie:
-    image: ghcr.io/mealie-recipes/mealie:v3.5.0 # (3)
+    image: ghcr.io/mealie-recipes/mealie:v3.11.0 # (3)
     container_name: mealie
     restart: always
     ports:

docs/docs/documentation/getting-started/updating.md

@@ -9,6 +9,23 @@
      - Create a Backup and Download from the UI
      - Upgrade
 
+!!! info "Improved Image Processing"
+    Starting with :octicons-tag-24: v3.7.0, we updated our image processing algorithm to improve image quality and compression. New image processing can be up to 40%-50% smaller on disk while providing higher resolution thumbnails. To take advantage of these improvements on older recipes, you can run our image-processing script:
+
+    ```shell
+    docker exec -it mealie bash
+    python /opt/mealie/lib64/python3.12/site-packages/mealie/scripts/reprocess_images.py
+    ```
+
+    ### Options
+     - `--workers N`: Number of worker threads (default: 2, safe for low-powered devices)
+     - `--force-all`: Reprocess all recipes regardless of current image state
+
+    ### Example
+    ```shell
+    python /opt/mealie/lib64/python3.12/site-packages/mealie/scripts/reprocess_images.py --workers 8
+    ```
+
 ## Upgrading to Mealie v1 or later
 If you are upgrading from pre-v1.0.0 to v1.0.0 or later (v2.0.0, etc.), make sure you read [Migrating to Mealie v1](./migrating-to-mealie-v1.md)!
 

docs/mkdocs.yml

@@ -32,8 +32,8 @@ theme:
 
 markdown_extensions:
   - pymdownx.emoji:
-      emoji_index: !!python/name:materialx.emoji.twemoji
-      emoji_generator: !!python/name:materialx.emoji.to_svg
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
   - def_list
   - pymdownx.highlight
   - pymdownx.superfences

frontend/assets/main.css

@@ -16,6 +16,10 @@
   max-width: 950px !important;
 }
 
+.lg-container {
+  max-width: 1100px !important;
+}
+
 .theme--dark.v-application {
   background-color: rgb(var(--v-theme-background, 30, 30, 30)) !important;
 }

frontend/components/Domain/Admin/Setup/EndPageContent.vue

@@ -0,0 +1,121 @@
+<template>
+  <v-container max-width="880" class="end-page-content">
+    <div class="d-flex flex-column ga-6">
+      <div>
+        <v-card-title class="text-h4 justify-center">
+          {{ $t('admin.setup.setup-complete') }}
+        </v-card-title>
+        <v-card-subtitle class="justify-center">
+          {{ $t('admin.setup.here-are-a-few-things-to-help-you-get-started') }}
+        </v-card-subtitle>
+      </div>
+      <div
+        v-for="section, idx in sections"
+        :key="idx"
+        class="d-flex flex-column ga-3"
+      >
+        <v-card-title class="text-h6 pl-0">
+          {{ section.title }}
+        </v-card-title>
+        <div class="sections d-flex flex-column ga-2">
+          <v-card
+            v-for="link, linkIdx in section.links"
+            :key="linkIdx"
+            clas="link-card"
+            :href="link.to"
+            :title="link.text"
+            :subtitle="link.description"
+            :append-icon="$globals.icons.chevronRight"
+          >
+            <template #prepend>
+              <v-avatar :icon="link.icon || undefined" variant="tonal" :color="section.color" />
+            </template>
+          </v-card>
+        </div>
+      </div>
+    </div>
+  </v-container>
+</template>
+
+<script lang="ts">
+export default defineNuxtComponent({
+  setup() {
+    const i18n = useI18n();
+    const auth = useMealieAuth();
+    const groupSlug = computed(() => auth.user.value?.groupSlug);
+    const { $globals } = useNuxtApp();
+
+    const sections = ref([
+      {
+        title: i18n.t("profile.data-migrations"),
+        color: "info",
+        links: [
+          {
+            icon: $globals.icons.backupRestore,
+            to: "/admin/backups",
+            text: i18n.t("settings.backup.backup-restore"),
+            description: i18n.t("admin.setup.restore-from-v1-backup"),
+          },
+          {
+            icon: $globals.icons.import,
+            to: "/group/migrations",
+            text: i18n.t("migration.recipe-migration"),
+            description: i18n.t("migration.coming-from-another-application-or-an-even-older-version-of-mealie"),
+          },
+        ],
+      },
+      {
+        title: i18n.t("recipe.create-recipes"),
+        color: "success",
+        links: [
+          {
+            icon: $globals.icons.createAlt,
+            to: computed(() => `/g/${groupSlug.value || ""}/r/create/new`),
+            text: i18n.t("recipe.create-recipe"),
+            description: i18n.t("recipe.create-recipe-description"),
+          },
+          {
+            icon: $globals.icons.link,
+            to: computed(() => `/g/${groupSlug.value || ""}/r/create/url`),
+            text: i18n.t("recipe.import-with-url"),
+            description: i18n.t("recipe.scrape-recipe-description"),
+          },
+        ],
+      },
+      {
+        title: i18n.t("user.manage-users"),
+        color: "primary",
+        links: [
+          {
+            icon: $globals.icons.group,
+            to: "/admin/manage/users",
+            text: i18n.t("user.manage-users"),
+            description: i18n.t("user.manage-users-description"),
+          },
+          {
+            icon: $globals.icons.user,
+            to: "/user/profile",
+            text: i18n.t("profile.manage-user-profile"),
+            description: i18n.t("admin.setup.manage-profile-or-get-invite-link"),
+          },
+        ],
+      },
+    ]);
+    return { sections };
+  },
+});
+</script>
+
+<style>
+.v-container {
+  .v-card-title,
+  .v-card-subtitle {
+    padding: 0;
+    white-space: unset;
+  }
+
+  .v-card-item {
+    gap: 0.5rem;
+  }
+}
+</style>

frontend/components/Domain/Cookbook/CookbookEditor.vue

@@ -83,6 +83,11 @@ const fieldDefs: FieldDefinition[] = [
     label: i18n.t("household.households"),
     type: Organizer.Household,
   },
+  {
+    name: "user_id",
+    label: i18n.t("user.users"),
+    type: Organizer.User,
+  },
   {
     name: "created_at",
     label: i18n.t("general.date-created"),

frontend/components/Domain/Cookbook/CookbookPage.vue

@@ -73,11 +73,11 @@ import { useLoggedInState } from "~/composables/use-logged-in-state";
 import type { ReadCookBook } from "~/lib/api/types/cookbook";
 import CookbookEditor from "~/components/Domain/Cookbook/CookbookEditor.vue";
 
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const { isOwnGroup } = useLoggedInState();
 
 const route = useRoute();
-const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
 
 const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
 const slug = route.params.slug as string;
@@ -88,11 +88,11 @@ const router = useRouter();
 const book = getOne(slug);
 
 const isOwnHousehold = computed(() => {
-  if (!($auth.user.value && book.value?.householdId)) {
+  if (!(auth.user.value && book.value?.householdId)) {
     return false;
   }
 
-  return $auth.user.value.householdId === book.value.householdId;
+  return auth.user.value.householdId === book.value.householdId;
 });
 const canEdit = computed(() => isOwnGroup.value && isOwnHousehold.value);
 

frontend/components/Domain/Group/GroupExportData.vue

@@ -14,7 +14,7 @@
       <BaseButton
         download
         size="small"
-        :download-url="`/api/recipes/bulk-actions/export/download?path=${item.path}`"
+        :download-url="`/api/recipes/bulk-actions/export/${item.id}/download`"
       />
     </template>
   </v-data-table>

frontend/components/Domain/Household/GroupMealPlanDayContextMenu.vue

@@ -15,7 +15,6 @@
       :nudge-top="menuTop ? '5' : '0'"
       allow-overflow
       close-delay="125"
-      :open-on-hover="mdAndUp"
       content-class="d-print-none"
     >
       <template #activator="{ props: activatorProps }">
@@ -83,8 +82,6 @@ const emit = defineEmits<{
   [key: string]: [];
 }>();
 
-const { mdAndUp } = useDisplay();
-
 const i18n = useI18n();
 const { $globals } = useNuxtApp();
 const api = useUserApi();
@@ -94,7 +91,7 @@ const state = reactive({
   shoppingListDialog: false,
   menuItems: [
     {
-      title: i18n.t("recipe.add-to-list"),
+      title: i18n.t("meal-plan.add-day-to-list"),
       icon: $globals.icons.cartCheck,
       color: undefined,
       event: "shoppingList",
@@ -126,8 +123,8 @@ async function getShoppingLists() {
 
 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
 const eventHandlers: { [key: string]: () => void | Promise<any> } = {
-  shoppingList: () => {
-    getShoppingLists();
+  shoppingList: async () => {
+    await getShoppingLists();
     state.shoppingListDialog = true;
   },
 };

frontend/components/Domain/Household/GroupMealPlanRuleForm.vue

@@ -36,7 +36,7 @@
 import QueryFilterBuilder from "~/components/Domain/QueryFilterBuilder.vue";
 import type { FieldDefinition } from "~/composables/use-query-filter-builder";
 import { Organizer } from "~/lib/api/types/non-generated";
-import type { QueryFilterJSON } from "~/lib/api/types/response";
+import type { QueryFilterJSON } from "~/lib/api/types/non-generated";
 
 interface Props {
   queryFilter?: QueryFilterJSON | null;
@@ -58,6 +58,9 @@ const MEAL_TYPE_OPTIONS = [
   { title: i18n.t("meal-plan.lunch"), value: "lunch" },
   { title: i18n.t("meal-plan.dinner"), value: "dinner" },
   { title: i18n.t("meal-plan.side"), value: "side" },
+  { title: i18n.t("meal-plan.snack"), value: "snack" },
+  { title: i18n.t("meal-plan.drink"), value: "drink" },
+  { title: i18n.t("meal-plan.dessert"), value: "dessert" },
   { title: i18n.t("meal-plan.type-any"), value: "unset" },
 ];
 
@@ -73,7 +76,6 @@ const MEAL_DAY_OPTIONS = [
 ];
 
 function handleQueryFilterInput(value: string | undefined) {
-  console.warn("handleQueryFilterInput called with value:", value);
   queryFilterString.value = value || "";
 }
 
@@ -103,10 +105,15 @@ const fieldDefs: FieldDefinition[] = [
     label: i18n.t("household.households"),
     type: Organizer.Household,
   },
+  {
+    name: "user_id",
+    label: i18n.t("user.users"),
+    type: Organizer.User,
+  },
   {
     name: "last_made",
     label: i18n.t("general.last-made"),
-    type: "date",
+    type: "relativeDate",
   },
   {
     name: "created_at",

frontend/components/Domain/QueryFilterBuilder.vue

@@ -1,283 +1,315 @@
 <template>
-  <v-card class="ma-0" style="overflow-x: auto;">
+  <v-card class="ma-0" flat fluid>
     <v-card-text class="ma-0 pa-0">
-      <v-container fluid class="ma-0 pa-0">
-        <VueDraggable
-          v-model="fields"
-          handle=".handle"
-          :delay="250"
-          :delay-on-touch-only="true"
-          v-bind="{
-            animation: 200,
-            group: 'recipe-instructions',
-            ghostClass: 'ghost',
-          }"
-          @start="drag = true"
-          @end="onDragEnd"
+      <VueDraggable
+        v-model="fields"
+        handle=".handle"
+        :delay="250"
+        :delay-on-touch-only="true"
+        v-bind="{
+          animation: 200,
+          group: 'recipe-instructions',
+          ghostClass: 'ghost',
+        }"
+        @start="drag = true"
+        @end="onDragEnd"
+      >
+        <v-row
+          v-for="(field, index) in fields"
+          :key="field.id"
+          class="d-flex flex-row flex-wrap mx-auto pb-2"
+          :class="$vuetify.display.xs ? (Math.floor(index / 1) % 2 === 0 ? 'bg-dark' : 'bg-light') : ''"
+          style="max-width: 100%;"
         >
-          <v-row
-            v-for="(field, index) in fields"
-            :key="field.id"
-            class="d-flex flex-nowrap"
-            style="max-width: 100%;"
+          <!-- drag handle -->
+          <v-col
+            :cols="config.items.icon.cols(index)"
+            :sm="config.items.icon.sm(index)"
+            :class="$vuetify.display.smAndDown ? 'd-flex pa-0' : 'd-flex justify-end pr-6'"
           >
-            <!-- drag handle -->
-            <v-col
-              :cols="config.items.icon.cols"
-              :class="config.col.class"
-              :style="config.items.icon.style"
+            <v-icon class="handle my-auto" :size="28" style="cursor: move;">
+              {{ $globals.icons.arrowUpDown }}
+            </v-icon>
+          </v-col>
+
+          <!-- and / or  -->
+          <v-col
+            v-if="index != 0 || $vuetify.display.smAndUp"
+            :cols="config.items.logicalOperator.cols(index)"
+            :sm="config.items.logicalOperator.sm(index)"
+            :class="config.col.class"
+          >
+            <v-select
+              v-if="index"
+              :model-value="field.logicalOperator"
+              :items="[logOps.AND, logOps.OR]"
+              item-title="label"
+              item-value="value"
+              variant="underlined"
+              @update:model-value="setLogicalOperatorValue(field, index, $event as unknown as LogicalOperator)"
             >
-              <v-icon
-                class="handle"
-                :size="24"
-                style="cursor: move;margin: auto;"
-              >
-                {{ $globals.icons.arrowUpDown }}
-              </v-icon>
-            </v-col>
-            <!-- and / or  -->
-            <v-col
-              :cols="config.items.logicalOperator.cols"
-              :class="config.col.class"
-              :style="config.items.logicalOperator.style"
+              <template #chip="{ item }">
+                <span :class="config.select.textClass" style="width: 100%;">
+                  {{ item.raw.label }}
+                </span>
+              </template>
+            </v-select>
+          </v-col>
+
+          <!-- left parenthesis -->
+          <v-col
+            v-if="showAdvanced"
+            :cols="config.items.leftParens.cols(index)"
+            :sm="config.items.leftParens.sm(index)"
+            :class="config.col.class"
+          >
+            <v-select
+              :model-value="field.leftParenthesis"
+              :items="['', '(', '((', '(((']"
+              variant="underlined"
+              @update:model-value="setLeftParenthesisValue(field, index, $event)"
             >
-              <v-select
-                v-if="index"
-                :model-value="field.logicalOperator"
-                :items="[logOps.AND, logOps.OR]"
-                item-title="label"
-                item-value="value"
-                variant="underlined"
-                @update:model-value="setLogicalOperatorValue(field, index, $event as unknown as LogicalOperator)"
-              >
-                <template #chip="{ item }">
-                  <span :class="config.select.textClass" style="width: 100%;">
-                    {{ item.raw.label }}
-                  </span>
-                </template>
-              </v-select>
-            </v-col>
-            <!-- left parenthesis -->
-            <v-col
-              v-if="showAdvanced"
-              :cols="config.items.leftParens.cols"
-              :class="config.col.class"
-              :style="config.items.leftParens.style"
+              <template #chip="{ item }">
+                <span :class="config.select.textClass" style="width: 100%;">
+                  {{ item.raw }}
+                </span>
+              </template>
+            </v-select>
+          </v-col>
+
+          <!-- field name -->
+          <v-col
+            :cols="config.items.fieldName.cols(index)"
+            :sm="config.items.fieldName.sm(index)"
+            :class="config.col.class"
+          >
+            <v-select
+              chips
+              :model-value="field.label"
+              :items="fieldDefs"
+              variant="underlined"
+              item-title="label"
+              @update:model-value="setField(index, $event)"
             >
-              <v-select
-                :model-value="field.leftParenthesis"
-                :items="['', '(', '((', '(((']"
-                variant="underlined"
-                @update:model-value="setLeftParenthesisValue(field, index, $event)"
-              >
-                <template #chip="{ item }">
-                  <span :class="config.select.textClass" style="width: 100%;">
-                    {{ item.raw }}
-                  </span>
-                </template>
-              </v-select>
-            </v-col>
-            <!-- field name -->
-            <v-col
-              :cols="config.items.fieldName.cols"
-              :class="config.col.class"
-              :style="config.items.fieldName.style"
+              <template #chip="{ item }">
+                <span :class="config.select.textClass" style="width: 100%;">
+                  {{ item.raw.label }}
+                </span>
+              </template>
+            </v-select>
+          </v-col>
+
+          <!-- relational operator -->
+          <v-col
+            :cols="config.items.relationalOperator.cols(index)"
+            :sm="config.items.relationalOperator.sm(index)"
+            :class="config.col.class"
+          >
+            <v-select
+              v-if="field.type !== 'boolean'"
+              :model-value="field.relationalOperatorValue"
+              :items="field.relationalOperatorChoices"
+              item-title="label"
+              item-value="value"
+              variant="underlined"
+              @update:model-value="setRelationalOperatorValue(field, index, $event as unknown as RelationalKeyword | RelationalOperator)"
             >
-              <v-select
-                chips
-                :model-value="field.label"
-                :items="fieldDefs"
-                variant="underlined"
-                item-title="label"
-                @update:model-value="setField(index, $event)"
-              >
-                <template #chip="{ item }">
-                  <span :class="config.select.textClass" style="width: 100%;">
-                    {{ item.raw.label }}
-                  </span>
-                </template>
-              </v-select>
-            </v-col>
-            <!-- relational operator -->
-            <v-col
-              :cols="config.items.relationalOperator.cols"
-              :class="config.col.class"
-              :style="config.items.relationalOperator.style"
+              <template #chip="{ item }">
+                <span :class="config.select.textClass" style="width: 100%;">
+                  {{ item.raw.label }}
+                </span>
+              </template>
+            </v-select>
+          </v-col>
+
+          <!-- field value -->
+          <v-col
+            :cols="config.items.fieldValue.cols(index)"
+            :sm="config.items.fieldValue.sm(index)"
+            :class="config.col.class"
+          >
+            <v-select
+              v-if="field.fieldChoices"
+              :model-value="field.values"
+              :items="field.fieldChoices"
+              item-title="label"
+              item-value="value"
+              multiple
+              variant="underlined"
+              @update:model-value="setFieldValues(field, index, $event)"
+            />
+            <v-text-field
+              v-else-if="field.type === 'string'"
+              :model-value="field.value"
+              variant="underlined"
+              @update:model-value="setFieldValue(field, index, $event)"
+            />
+            <v-number-input
+              v-else-if="field.type === 'number'"
+              :model-value="field.value"
+              variant="underlined"
+              control-variant="stacked"
+              inset
+              :precision="null"
+              @update:model-value="setFieldValue(field, index, $event)"
+            />
+            <v-checkbox
+              v-else-if="field.type === 'boolean'"
+              :model-value="field.value"
+              @update:model-value="setFieldValue(field, index, $event!)"
+            />
+            <v-menu
+              v-else-if="field.type === 'date'"
+              v-model="datePickers[index]"
+              :close-on-content-click="false"
+              transition="scale-transition"
+              offset-y
+              max-width="290px"
+              min-width="auto"
             >
-              <v-select
-                v-if="field.type !== 'boolean'"
-                :model-value="field.relationalOperatorValue"
-                :items="field.relationalOperatorOptions"
-                item-title="label"
-                item-value="value"
-                variant="underlined"
-                @update:model-value="setRelationalOperatorValue(field, index, $event as unknown as RelationalKeyword | RelationalOperator)"
-              >
-                <template #chip="{ item }">
-                  <span :class="config.select.textClass" style="width: 100%;">
-                    {{ item.raw.label }}
-                  </span>
-                </template>
-              </v-select>
-            </v-col>
-            <!-- field value -->
-            <v-col
-              :cols="config.items.fieldValue.cols"
-              :class="config.col.class"
-              :style="config.items.fieldValue.style"
-            >
-              <v-select
-                v-if="field.fieldOptions"
-                :model-value="field.values"
-                :items="field.fieldOptions"
-                item-title="label"
-                item-value="value"
-                multiple
-                variant="underlined"
-                @update:model-value="setFieldValues(field, index, $event)"
-              />
-              <v-text-field
-                v-else-if="field.type === 'string'"
-                :model-value="field.value"
-                variant="underlined"
-                @update:model-value="setFieldValue(field, index, $event)"
-              />
-              <v-text-field
-                v-else-if="field.type === 'number'"
-                :model-value="field.value"
-                type="number"
-                variant="underlined"
-                @update:model-value="setFieldValue(field, index, $event)"
-              />
-              <v-checkbox
-                v-else-if="field.type === 'boolean'"
-                :model-value="field.value"
-                @update:model-value="setFieldValue(field, index, $event!)"
-              />
-              <v-menu
-                v-else-if="field.type === 'date'"
-                v-model="datePickers[index]"
-                :close-on-content-click="false"
-                transition="scale-transition"
-                offset-y
-                max-width="290px"
-                min-width="auto"
-              >
-                <template #activator="{ props: activatorProps }">
-                  <v-text-field
-                    :model-value="field.value ? $d(new Date(field.value + 'T00:00:00')) : null"
-                    persistent-hint
-                    :prepend-icon="$globals.icons.calendar"
-                    variant="underlined"
-                    color="primary"
-                    v-bind="activatorProps"
-                    readonly
-                  />
-                </template>
-                <v-date-picker
-                  :model-value="field.value ? new Date(field.value + 'T00:00:00') : null"
-                  hide-header
-                  :first-day-of-week="firstDayOfWeek"
-                  :local="$i18n.locale"
-                  @update:model-value="val => setFieldValue(field, index, val ? val.toISOString().slice(0, 10) : '')"
+              <template #activator="{ props: activatorProps }">
+                <v-text-field
+                  :model-value="$d(safeNewDate(field.value + 'T00:00:00'))"
+                  variant="underlined"
+                  color="primary"
+                  class="date-input"
+                  v-bind="activatorProps"
+                  readonly
                 />
-              </v-menu>
-              <RecipeOrganizerSelector
-                v-else-if="field.type === Organizer.Category"
-                v-model="field.organizers"
-                :selector-type="Organizer.Category"
-                :show-add="false"
-                :show-label="false"
-                :show-icon="false"
-                variant="underlined"
-                @update:model-value="setFieldOrganizers(field, index, $event)"
+              </template>
+              <v-date-picker
+                :model-value="safeNewDate(field.value + 'T00:00:00')"
+                hide-header
+                :first-day-of-week="firstDayOfWeek"
+                :local="$i18n.locale"
+                @update:model-value="val => setFieldValue(field, index, val ? val.toISOString().slice(0, 10) : '')"
               />
-              <RecipeOrganizerSelector
-                v-else-if="field.type === Organizer.Tag"
-                v-model="field.organizers"
-                :selector-type="Organizer.Tag"
-                :show-add="false"
-                :show-label="false"
-                :show-icon="false"
-                variant="underlined"
-                @update:model-value="setFieldOrganizers(field, index, $event)"
-              />
-              <RecipeOrganizerSelector
-                v-else-if="field.type === Organizer.Tool"
-                v-model="field.organizers"
-                :selector-type="Organizer.Tool"
-                :show-add="false"
-                :show-label="false"
-                :show-icon="false"
-                variant="underlined"
-                @update:model-value="setFieldOrganizers(field, index, $event)"
-              />
-              <RecipeOrganizerSelector
-                v-else-if="field.type === Organizer.Food"
-                v-model="field.organizers"
-                :selector-type="Organizer.Food"
-                :show-add="false"
-                :show-label="false"
-                :show-icon="false"
-                variant="underlined"
-                @update:model-value="setFieldOrganizers(field, index, $event)"
-              />
-              <RecipeOrganizerSelector
-                v-else-if="field.type === Organizer.Household"
-                v-model="field.organizers"
-                :selector-type="Organizer.Household"
-                :show-add="false"
-                :show-label="false"
-                :show-icon="false"
-                variant="underlined"
-                @update:model-value="setFieldOrganizers(field, index, $event)"
-              />
-            </v-col>
-            <!-- right parenthesis -->
-            <v-col
-              v-if="showAdvanced"
-              :cols="config.items.rightParens.cols"
-              :class="config.col.class"
-              :style="config.items.rightParens.style"
+            </v-menu>
+            <!--
+              Relative dates are assumed to be negative intervals with a unit of days.
+              The input is a *positive*, interpreted internally as a *negative* offset.
+            -->
+            <v-number-input
+              v-else-if="field.type === 'relativeDate'"
+              :model-value="parseRelativeDateOffset(field.value)"
+              :suffix="$t('query-filter.dates.days-ago', parseRelativeDateOffset(field.value))"
+              variant="underlined"
+              control-variant="stacked"
+              density="compact"
+              inset
+              :min="0"
+              :precision="0"
+              class="date-input"
+              @update:model-value="setFieldValue(field, index, $event)"
+            />
+            <RecipeOrganizerSelector
+              v-else-if="field.type === Organizer.Category"
+              v-model="field.organizers"
+              :selector-type="Organizer.Category"
+              :show-add="false"
+              :show-label="false"
+              :show-icon="false"
+              variant="underlined"
+              @update:model-value="val => setFieldOrganizers(field, index, (val || []) as OrganizerBase[])"
+            />
+            <RecipeOrganizerSelector
+              v-else-if="field.type === Organizer.Tag"
+              v-model="field.organizers"
+              :selector-type="Organizer.Tag"
+              :show-add="false"
+              :show-label="false"
+              :show-icon="false"
+              variant="underlined"
+              @update:model-value="val => setFieldOrganizers(field, index, (val || []) as OrganizerBase[])"
+            />
+            <RecipeOrganizerSelector
+              v-else-if="field.type === Organizer.Tool"
+              v-model="field.organizers"
+              :selector-type="Organizer.Tool"
+              :show-add="false"
+              :show-label="false"
+              :show-icon="false"
+              variant="underlined"
+              @update:model-value="val => setFieldOrganizers(field, index, (val || []) as OrganizerBase[])"
+            />
+            <RecipeOrganizerSelector
+              v-else-if="field.type === Organizer.Food"
+              v-model="field.organizers"
+              :selector-type="Organizer.Food"
+              :show-add="false"
+              :show-label="false"
+              :show-icon="false"
+              variant="underlined"
+              @update:model-value="val => setFieldOrganizers(field, index, (val || []) as OrganizerBase[])"
+            />
+            <RecipeOrganizerSelector
+              v-else-if="field.type === Organizer.Household"
+              v-model="field.organizers"
+              :selector-type="Organizer.Household"
+              :show-add="false"
+              :show-label="false"
+              :show-icon="false"
+              variant="underlined"
+              @update:model-value="val => setFieldOrganizers(field, index, (val || []) as OrganizerBase[])"
+            />
+            <RecipeOrganizerSelector
+              v-else-if="field.type === Organizer.User"
+              v-model="field.organizers"
+              :selector-type="Organizer.User"
+              :show-add="false"
+              :show-label="false"
+              :show-icon="false"
+              variant="underlined"
+              @update:model-value="val => setFieldOrganizers(field, index, (val || []) as OrganizerBase[])"
+            />
+          </v-col>
+
+          <!-- right parenthesis -->
+          <v-col
+            v-if="showAdvanced"
+            :cols="config.items.rightParens.cols(index)"
+            :sm="config.items.rightParens.sm(index)"
+            :class="config.col.class"
+          >
+            <v-select
+              :model-value="field.rightParenthesis"
+              :items="['', ')', '))', ')))']"
+              variant="underlined"
+              @update:model-value="setRightParenthesisValue(field, index, $event)"
             >
-              <v-select
-                :model-value="field.rightParenthesis"
-                :items="['', ')', '))', ')))']"
-                variant="underlined"
-                @update:model-value="setRightParenthesisValue(field, index, $event)"
-              >
-                <template #chip="{ item }">
-                  <span :class="config.select.textClass" style="width: 100%;">
-                    {{ item.raw }}
-                  </span>
-                </template>
-              </v-select>
-            </v-col>
-            <!-- field actions -->
-            <v-col
-              :cols="config.items.fieldActions.cols"
-              :class="config.col.class"
-              :style="config.items.fieldActions.style"
-            >
-              <BaseButtonGroup
-                :buttons="[
-                  {
-                    icon: $globals.icons.delete,
-                    text: $t('general.delete'),
-                    event: 'delete',
-                    disabled: fields.length === 1,
-                  },
-                ]"
-                class="my-auto"
-                @delete="removeField(index)"
-              />
-            </v-col>
-          </v-row>
-        </VueDraggable>
-      </v-container>
+              <template #chip="{ item }">
+                <span :class="config.select.textClass" style="width: 100%;">
+                  {{ item.raw }}
+                </span>
+              </template>
+            </v-select>
+          </v-col>
+
+          <!-- field actions -->
+          <v-col
+            v-if="!$vuetify.display.smAndDown || index === fields.length - 1"
+            :cols="config.items.fieldActions.cols(index)"
+            :sm="config.items.fieldActions.sm(index)"
+            :class="config.col.class"
+          >
+            <BaseButtonGroup
+              :buttons="[
+                {
+                  icon: $globals.icons.delete,
+                  text: $t('general.delete'),
+                  event: 'delete',
+                  disabled: fields.length === 1,
+                },
+              ]"
+              class="my-auto"
+              @delete="removeField(index)"
+            />
+          </v-col>
+        </v-row>
+      </VueDraggable>
     </v-card-text>
     <v-card-actions>
-      <v-row fluid class="d-flex justify-end pa-0 mx-2">
+      <v-row fluid class="d-flex justify-end ma-2">
         <v-spacer />
         <v-checkbox
           v-model="showAdvanced"
@@ -303,8 +335,15 @@ import { useDebounceFn } from "@vueuse/core";
 import { useHouseholdSelf } from "~/composables/use-households";
 import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
 import { Organizer } from "~/lib/api/types/non-generated";
-import type { LogicalOperator, QueryFilterJSON, QueryFilterJSONPart, RelationalKeyword, RelationalOperator } from "~/lib/api/types/response";
+import type {
+  LogicalOperator,
+  QueryFilterJSON,
+  QueryFilterJSONPart,
+  RelationalKeyword,
+  RelationalOperator,
+} from "~/lib/api/types/non-generated";
 import { useCategoryStore, useFoodStore, useHouseholdStore, useTagStore, useToolStore } from "~/composables/store";
+import { useUserStore } from "~/composables/store/use-user-store";
 import { type Field, type FieldDefinition, type FieldValue, type OrganizerBase, useQueryFilterBuilder } from "~/composables/use-query-filter-builder";
 
 const props = defineProps({
@@ -324,7 +363,14 @@ const emit = defineEmits<{
 }>();
 
 const { household } = useHouseholdSelf();
-const { logOps, relOps, buildQueryFilterString, getFieldFromFieldDef, isOrganizerType } = useQueryFilterBuilder();
+const {
+  logOps,
+  placeholderKeywords,
+  getRelOps,
+  buildQueryFilterString,
+  getFieldFromFieldDef,
+  isOrganizerType,
+} = useQueryFilterBuilder();
 
 const firstDayOfWeek = computed(() => {
   return household.value?.preferences?.firstDayOfWeek || 0;
@@ -344,6 +390,7 @@ const storeMap = {
   [Organizer.Tool]: useToolStore(),
   [Organizer.Food]: useFoodStore(),
   [Organizer.Household]: useHouseholdStore(),
+  [Organizer.User]: useUserStore(),
 };
 
 function onDragEnd(event: any) {
@@ -378,16 +425,29 @@ function setField(index: number, fieldLabel: string) {
     return;
   }
 
-  const resetValue = (fieldDef.type !== fields.value[index].type) || (fieldDef.fieldOptions !== fields.value[index].fieldOptions);
+  const resetValue = (fieldDef.type !== fields.value[index].type) || (fieldDef.fieldChoices !== fields.value[index].fieldChoices);
   const updatedField = { ...fields.value[index], ...fieldDef };
 
   // we have to set this explicitly since it might be undefined
-  updatedField.fieldOptions = fieldDef.fieldOptions;
+  updatedField.fieldChoices = fieldDef.fieldChoices;
 
   fields.value[index] = {
     ...getFieldFromFieldDef(updatedField, resetValue),
     id: fields.value[index].id, // keep the id
   };
+
+  // Defaults
+  switch (fields.value[index].type) {
+    case "date":
+      fields.value[index].value = safeNewDate("");
+      break;
+    case "relativeDate":
+      fields.value[index].value = "$NOW-30d";
+      break;
+
+    default:
+      break;
+  }
 }
 
 function setLeftParenthesisValue(field: FieldWithId, index: number, value: string) {
@@ -407,12 +467,21 @@ function setLogicalOperatorValue(field: FieldWithId, index: number, value: Logic
 }
 
 function setRelationalOperatorValue(field: FieldWithId, index: number, value: RelationalKeyword | RelationalOperator) {
+  const relOps = getRelOps(field.type);
   fields.value[index].relationalOperatorValue = relOps.value[value];
 }
 
 function setFieldValue(field: FieldWithId, index: number, value: FieldValue) {
   state.datePickers[index] = false;
-  fields.value[index].value = value;
+
+  if (field.type === "relativeDate") {
+    // Value is set to an int representing the offset from $NOW
+    // Values are assumed to be negative offsets ('-') with a unit of days ('d')
+    fields.value[index].value = `$NOW-${Math.abs(value)}d`;
+  }
+  else {
+    fields.value[index].value = value;
+  }
 }
 
 function setFieldValues(field: FieldWithId, index: number, values: FieldValue[]) {
@@ -430,12 +499,7 @@ function removeField(index: number) {
   state.datePickers.splice(index, 1);
 }
 
-const fieldsUpdater = useDebounceFn((/* newFields: typeof fields.value */) => {
-  /* newFields.forEach((field, index) => {
-    const updatedField = getFieldFromFieldDef(field);
-    fields.value[index] = updatedField; // recursive!!!
-  }); */
-
+const fieldsUpdater = useDebounceFn(() => {
   const qf = buildQueryFilterString(fields.value, state.showAdvanced);
   if (qf) {
     console.debug(`Set query filter: ${qf}`);
@@ -501,6 +565,9 @@ async function initializeFields() {
       ...getFieldFromFieldDef(fieldDef),
       id: useUid(),
     };
+
+    const relOps = getRelOps(field.type);
+
     field.leftParenthesis = part.leftParenthesis || field.leftParenthesis;
     field.rightParenthesis = part.rightParenthesis || field.rightParenthesis;
     field.logicalOperator = part.logicalOperator
@@ -509,12 +576,15 @@ async function initializeFields() {
     field.relationalOperatorValue = part.relationalOperator
       ? relOps.value[part.relationalOperator]
       : field.relationalOperatorValue;
+    field.relationalOperatorValue = part.relationalOperator
+      ? relOps.value[part.relationalOperator]
+      : field.relationalOperatorValue;
 
     if (field.leftParenthesis || field.rightParenthesis) {
       state.showAdvanced = true;
     }
 
-    if (field.fieldOptions?.length || isOrganizerType(field.type)) {
+    if (field.fieldChoices?.length || isOrganizerType(field.type)) {
       if (typeof part.value === "string") {
         field.values = part.value ? [part.value] : [];
       }
@@ -583,7 +653,7 @@ function buildQueryFilterJSON(): QueryFilterJSON {
       relationalOperator: field.relationalOperatorValue?.value,
     };
 
-    if (field.fieldOptions?.length || isOrganizerType(field.type)) {
+    if (field.fieldChoices?.length || isOrganizerType(field.type)) {
       part.value = field.values.map(value => value.toString());
     }
     else if (field.type === "boolean") {
@@ -601,47 +671,101 @@ function buildQueryFilterJSON(): QueryFilterJSON {
   return qfJSON;
 }
 
+function safeNewDate(input: string): Date {
+  const date = new Date(input);
+  if (isNaN(date.getTime())) {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    return today;
+  }
+  return date;
+}
+
+/**
+ * Parse a relative date string offset (e.g. $NOW-30d --> 30)
+ *
+ * Currently only values with a negative offset ('-') and a unit of days ('d') are supported
+ */
+function parseRelativeDateOffset(value: string): number {
+  const defaultVal = 30;
+  if (!value) {
+    return defaultVal;
+  }
+
+  try {
+    if (!value.startsWith(placeholderKeywords.value["$NOW"].value)) {
+      return defaultVal;
+    }
+
+    const remainder = value.slice(placeholderKeywords.value["$NOW"].value.length);
+    if (!remainder.startsWith("-")) {
+      throw new Error("Invalid operator (not '-')");
+    }
+
+    if (remainder.slice(-1) !== "d") {
+      throw new Error("Invalid unit (not 'd')");
+    }
+
+    // Slice off sign and unit
+    return parseInt(remainder.slice(1, -1));
+  }
+  catch (error) {
+    console.warn(`Unable to parse relative date offset from '${value}': ${error}`);
+    return defaultVal;
+  }
+}
+
 const config = computed(() => {
-  const baseColMaxWidth = 55;
+  const multiple = fields.value.length > 1;
+  const adv = state.showAdvanced;
+
   return {
     col: {
-      class: "d-flex justify-center align-end field-col pa-1",
+      class: "d-flex justify-center align-end py-0",
     },
     select: {
       textClass: "d-flex justify-center text-center",
     },
     items: {
       icon: {
-        cols: 1,
+        cols: (_index: number) => 2,
+        sm: (_index: number) => 1,
         style: "width: fit-content;",
       },
       leftParens: {
-        cols: state.showAdvanced ? 1 : 0,
-        style: `min-width: ${state.showAdvanced ? baseColMaxWidth : 0}px;`,
+        cols: (index: number) => (adv ? (index === 0 ? 2 : 0) : 0),
+        sm: (_index: number) => (adv ? 1 : 0),
       },
       logicalOperator: {
-        cols: 1,
-        style: `min-width: ${baseColMaxWidth}px;`,
+        cols: (_index: number) => 0,
+        sm: (_index: number) => (multiple ? 1 : 0),
       },
       fieldName: {
-        cols: state.showAdvanced ? 2 : 3,
-        style: `min-width: ${state.showAdvanced ? baseColMaxWidth * 2 : baseColMaxWidth * 3}px;`,
+        cols: (index: number) => {
+          if (adv) return index === 0 ? 8 : 12;
+          return index === 0 ? 10 : 12;
+        },
+        sm: (_index: number) => (adv ? 2 : 3),
       },
       relationalOperator: {
-        cols: 2,
-        style: `min-width: ${baseColMaxWidth * 2}px;`,
+        cols: (_index: number) => 12,
+        sm: (_index: number) => 2,
       },
       fieldValue: {
-        cols: state.showAdvanced ? 3 : 4,
-        style: `min-width: ${state.showAdvanced ? baseColMaxWidth * 2 : baseColMaxWidth * 3}px;`,
+        cols: (index: number) => {
+          const last = index === fields.value.length - 1;
+          if (adv) return last ? 8 : 10;
+          return last ? 10 : 12;
+        },
+        sm: (_index: number) => (adv ? 3 : 4),
       },
       rightParens: {
-        cols: state.showAdvanced ? 1 : 0,
-        style: `min-width: ${state.showAdvanced ? baseColMaxWidth : 0}px;`,
+        cols: (index: number) => (adv ? (index === fields.value.length - 1 ? 2 : 0) : 0),
+        sm: (_index: number) => (adv ? 1 : 0),
       },
       fieldActions: {
-        cols: 1,
-        style: `min-width: ${baseColMaxWidth}px;`,
+        cols: (index: number) => (index === fields.value.length - 1 ? 2 : 0),
+        sm: (_index: number) => 1,
       },
     },
   };
@@ -651,5 +775,23 @@ const config = computed(() => {
 <style scoped>
 * {
   font-size: 1em;
+  --bg-opactity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
+}
+
+.bg-dark {
+  background-color: rgba(0, 0, 0, var(--bg-opactity));
+}
+
+.bg-light {
+  background-color: rgba(255, 255, 255, var(--bg-opactity));
+}
+
+:deep(.date-input input) {
+  text-align: end;
+  padding-right: 6px;
+}
+
+:deep(.date-input .v-field__field) {
+  align-items: center;
 }
 </style>

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -79,7 +79,7 @@
         @print="$emit('print')"
       />
     </div>
-    <div v-if="open" class="custom-btn-group gapped">
+    <div v-if="open" class="custom-btn-group gapped ma-1">
       <v-btn
         v-for="(btn, index) in editorButtons"
         :key="index"
@@ -126,7 +126,7 @@ withDefaults(defineProps<Props>(), {
   canEdit: false,
 });
 
-const emit = defineEmits(["print", "input", "delete", "close", "edit"]);
+const emit = defineEmits(["print", "input", "save", "delete", "close", "json", "edit"]);
 
 const deleteDialog = ref(false);
 

frontend/components/Domain/Recipe/RecipeAssets.vue

@@ -1,60 +1,97 @@
 <template>
   <div v-if="model.length > 0 || edit">
     <v-card class="mt-4">
-      <v-card-title class="py-2">
-        {{ $t("asset.assets") }}
-      </v-card-title>
+      <v-list-item class="pr-2 pl-0">
+        <v-card-title>
+          {{ $t("asset.assets") }}
+        </v-card-title>
+        <template #append>
+          <v-btn
+            v-if="edit"
+            variant="plain"
+            :icon="$globals.icons.create"
+            @click="state.newAssetDialog = true"
+          />
+        </template>
+      </v-list-item>
       <v-divider class="mx-2" />
       <v-list
         v-if="model.length > 0"
+        lines="two"
         :flat="!edit"
       >
         <v-list-item
           v-for="(item, i) in model"
           :key="i"
+          :href="!edit ? assetURL(item.fileName ?? '') : ''"
+          target="_blank"
+          class="pr-2"
         >
           <template #prepend>
-            <div class="ma-auto">
-              <v-tooltip location="bottom">
-                <template #activator="{ props: tooltipProps }">
-                  <v-icon v-bind="tooltipProps">
-                    {{ getIconDefinition(item.icon).icon }}
-                  </v-icon>
-                </template>
-                <span>{{ getIconDefinition(item.icon).title }}</span>
-              </v-tooltip>
-            </div>
+            <v-avatar size="48" rounded="lg" class="elevation-1">
+              <v-img
+                v-if="isImage(item.fileName)"
+                :src="assetURL(item.fileName ?? '')"
+                :alt="item.name"
+                loading="lazy"
+                cover
+              />
+              <v-icon v-else size="large">
+                {{ getIconDefinition(item.icon).icon }}
+              </v-icon>
+            </v-avatar>
           </template>
-          <v-list-item-title class="pl-2">
+
+          <v-list-item-title>
             {{ item.name }}
           </v-list-item-title>
           <template #append>
+            <v-menu v-if="edit" location="bottom end">
+              <template #activator="{ props: menuProps }">
+                <v-btn
+                  v-bind="menuProps"
+                  icon
+                  variant="plain"
+                >
+                  <v-icon :icon="$globals.icons.dotsVertical" />
+                </v-btn>
+              </template>
+              <v-list density="compact" min-width="220">
+                <v-list-item
+                  :href="assetURL(item.fileName ?? '')"
+                  :prepend-icon="$globals.icons.eye"
+                  :title="$t('general.view')"
+                  target="_blank"
+                />
+                <v-list-item
+                  :href="assetURL(item.fileName ?? '')"
+                  :prepend-icon="$globals.icons.download"
+                  :title="$t('general.download')"
+                  download
+                />
+                <v-list-item
+                  v-if="edit"
+                  :prepend-icon="$globals.icons.contentCopy"
+                  :title="$t('general.copy')"
+                  @click="copyText(assetEmbed(item.fileName ?? ''))"
+                />
+                <v-list-item
+                  v-if="edit"
+                  :prepend-icon="$globals.icons.delete"
+                  :title="$t('general.delete')"
+                  @click="model.splice(i, 1)"
+                />
+              </v-list>
+            </v-menu>
             <v-btn
               v-if="!edit"
-              color="primary"
               icon
-              size="small"
+              variant="plain"
               :href="assetURL(item.fileName ?? '')"
-              target="_blank"
-              top
+              download
             >
               <v-icon> {{ $globals.icons.download }} </v-icon>
             </v-btn>
-            <div v-else>
-              <v-btn
-                color="error"
-                icon
-                size="small"
-                top
-                @click="model.splice(i, 1)"
-              >
-                <v-icon>{{ $globals.icons.delete }}</v-icon>
-              </v-btn>
-              <AppButtonCopy
-                color=""
-                :copy-text="assetEmbed(item.fileName ?? '')"
-              />
-            </div>
           </template>
         </v-list-item>
       </v-list>
@@ -68,18 +105,9 @@
         can-submit
         @submit="addAsset"
       >
-        <template #activator>
-          <BaseButton
-            v-if="edit"
-            size="small"
-            create
-            @click="state.newAssetDialog = true"
-          />
-        </template>
         <v-card-text class="pt-4">
           <v-text-field
             v-model="state.newAsset.name"
-            density="compact"
             :label="$t('general.name')"
           />
           <div class="d-flex justify-space-between">
@@ -92,10 +120,14 @@
               item-value="name"
               class="mr-2"
             >
-              <template #item="{ item, props: itemProps }">
+              <template #item="{ props: itemProps, item }">
                 <v-list-item v-bind="itemProps">
                   <template #prepend>
-                    <v-icon>{{ item.raw.icon }}</v-icon>
+                    <v-avatar>
+                      <v-icon>
+                        {{ item.raw.icon }}
+                      </v-icon>
+                    </v-avatar>
                   </template>
                 </v-list-item>
               </template>
@@ -107,7 +139,6 @@
               @uploaded="setFileObject"
             />
           </div>
-          {{ state.fileObject.name }}
         </v-card-text>
       </BaseDialog>
     </div>
@@ -118,6 +149,7 @@
 import { useStaticRoutes, useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import type { RecipeAsset } from "~/lib/api/types/recipe";
+import { useCopy } from "~/composables/use-copy";
 
 const props = defineProps({
   slug: {
@@ -149,6 +181,7 @@ const state = reactive({
 
 const i18n = useI18n();
 const { $globals } = useNuxtApp();
+const { copyText } = useCopy();
 
 const iconOptions = [
   {
@@ -184,21 +217,31 @@ function getIconDefinition(icon: string) {
   return iconOptions.find(item => item.name === icon) || iconOptions[0];
 }
 
+function isImage(fileName?: string | null) {
+  if (!fileName) return false;
+  return /\.(png|jpe?g|gif|webp|bmp|avif)$/i.test(fileName);
+}
+
 const { recipeAssetPath } = useStaticRoutes();
 function assetURL(assetName: string) {
   return recipeAssetPath(props.recipeId, assetName);
 }
 
 function assetEmbed(name: string) {
-  return `<img src="${serverBase}${assetURL(name)}" height="100%" width="100%"> </img>`;
+  return `<img src="${serverBase}${assetURL(name)}" height="100%" width="100%" />`;
 }
 
 function setFileObject(fileObject: File) {
   state.fileObject = fileObject;
+  // If the user didn't provide a name, default to the file base name
+  if (!state.newAsset.name?.trim()) {
+    state.newAsset.name = fileObject.name.substring(0, fileObject.name.lastIndexOf("."));
+  }
 }
 
 function validFields() {
-  return state.newAsset.name.length > 0 && state.fileObject.name.length > 0;
+  // Only require a file; name will fall back to the file name if empty
+  return Boolean(state.fileObject?.name);
 }
 
 async function addAsset() {
@@ -207,8 +250,10 @@ async function addAsset() {
     return;
   }
 
+  const nameToUse = state.newAsset.name?.trim() || state.fileObject.name;
+
   const { data } = await api.recipes.createAsset(props.slug, {
-    name: state.newAsset.name,
+    name: nameToUse,
     icon: state.newAsset.icon,
     file: state.fileObject,
     extension: state.fileObject.name.split(".").pop() || "",

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -15,11 +15,11 @@
         @click.self="$emit('click')"
       >
         <RecipeCardImage
+          small
           :icon-size="imageHeight"
           :height="imageHeight"
           :slug="slug"
           :recipe-id="recipeId"
-          size="small"
           :image-version="image"
         >
           <v-expand-transition v-if="description">
@@ -130,11 +130,11 @@ defineEmits<{
   delete: [slug: string];
 }>();
 
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const { isOwnGroup } = useLoggedInState();
 
 const route = useRoute();
-const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug || auth.user.value?.groupSlug || "");
 const showRecipeContent = computed(() => props.recipeId && props.slug);
 const recipeRoute = computed<string>(() => {
   return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -19,10 +19,10 @@
           cover
         >
           <RecipeCardImage
+            tiny
             :icon-size="100"
             :slug="slug"
             :recipe-id="recipeId"
-            size="small"
             :image-version="image"
             :height="height"
           />
@@ -41,11 +41,11 @@
               name="avatar"
             >
               <RecipeCardImage
+                tiny
                 :icon-size="100"
                 :slug="slug"
                 :recipe-id="recipeId"
                 :image-version="image"
-                size="small"
                 width="125"
                 :height="height"
               />
@@ -160,11 +160,11 @@ defineEmits<{
   delete: [slug: string];
 }>();
 
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const { isOwnGroup } = useLoggedInState();
 
 const route = useRoute();
-const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug || auth.user.value?.groupSlug || "");
 const showRecipeContent = computed(() => props.recipeId && props.slug);
 const recipeRoute = computed<string>(() => {
   return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -219,7 +219,7 @@ const EVENTS = {
   shuffle: "shuffle",
 };
 
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const { $globals } = useNuxtApp();
 const { isOwnGroup } = useLoggedInState();
 const useMobileCards = computed(() => {
@@ -234,7 +234,7 @@ const sortLoading = ref(false);
 const randomSeed = ref(Date.now().toString());
 
 const route = useRoute();
-const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
 
 const page = ref(1);
 const perPage = 32;

frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenu.vue

@@ -10,7 +10,6 @@
       :nudge-top="menuTop ? '5' : '0'"
       allow-overflow
       close-delay="125"
-      :open-on-hover="$vuetify.display.mdAndUp"
       content-class="d-print-none"
       @update:model-value="onMenuToggle"
     >
@@ -24,7 +23,6 @@
           :fab="fab"
           v-bind="activatorProps"
           @click.prevent
-          @mouseenter="onHover"
         >
           <v-icon
             :size="!fab ? undefined : 'x-large'"
@@ -127,12 +125,6 @@ const contentProps = computed(() => {
   return rest;
 });
 
-function onHover() {
-  if (!isMenuContentLoaded.value) {
-    isMenuContentLoaded.value = true;
-  }
-}
-
 function onMenuToggle(isOpen: boolean) {
   if (isOpen && !isMenuContentLoaded.value) {
     isMenuContentLoaded.value = true;

frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenuContent.vue

@@ -45,31 +45,15 @@
     @confirm="addRecipeToPlan()"
   >
     <v-card-text>
-      <v-menu
-        v-model="pickerMenu"
-        :close-on-content-click="false"
-        transition="scale-transition"
-        offset-y
-        max-width="290px"
-        min-width="auto"
-      >
-        <template #activator="{ props: activatorProps }">
-          <v-text-field
-            :model-value="$d(newMealdate)"
-            :label="$t('general.date')"
-            :prepend-icon="$globals.icons.calendar"
-            v-bind="activatorProps"
-            readonly
-          />
-        </template>
-        <v-date-picker
-          v-model="newMealdate"
-          hide-header
-          :first-day-of-week="firstDayOfWeek"
-          :local="$i18n.locale"
-          @update:model-value="pickerMenu = false"
-        />
-      </v-menu>
+      <v-date-picker
+        v-model="newMealdate"
+        class="mx-auto mb-3"
+        hide-header
+        show-adjacent-months
+        color="primary"
+        :first-day-of-week="firstDayOfWeek"
+        :local="$i18n.locale"
+      />
       <v-select
         v-model="newMealType"
         :return-object="false"
@@ -192,6 +176,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   [key: string]: any;
   deleted: [slug: string];
+  print: [];
 }>();
 
 const api = useUserApi();
@@ -207,7 +192,6 @@ const loading = ref(false);
 const menuItems = ref<ContextMenuItem[]>([]);
 const newMealdate = ref(new Date());
 const newMealType = ref<PlanEntryType>("dinner");
-const pickerMenu = ref(false);
 
 const newMealdateString = computed(() => {
   // Format the date to YYYY-MM-DD in the same timezone as newMealdate
@@ -218,13 +202,13 @@ const newMealdateString = computed(() => {
 });
 
 const i18n = useI18n();
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const { $globals } = useNuxtApp();
 const { household } = useHouseholdSelf();
 const { isOwnGroup } = useLoggedInState();
 
 const route = useRoute();
-const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug || auth.user.value?.groupSlug || "");
 
 const firstDayOfWeek = computed(() => {
   return household.value?.preferences?.firstDayOfWeek || 0;
@@ -312,12 +296,12 @@ const recipeRefWithScale = computed(() =>
 );
 const isAdminAndNotOwner = computed(() => {
   return (
-    $auth.user.value?.admin
-    && $auth.user.value?.id !== recipeRef.value?.userId
+    auth.user.value?.admin
+    && auth.user.value?.id !== recipeRef.value?.userId
   );
 });
 const canDelete = computed(() => {
-  const user = $auth.user.value;
+  const user = auth.user.value;
   const recipe = recipeRef.value;
   return user && recipe && (user.admin || user.id === recipe.userId);
 });

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -110,8 +110,8 @@ defineEmits<{
 const selected = defineModel<Recipe[]>({ default: () => [] });
 
 const i18n = useI18n();
-const $auth = useMealieAuth();
-const groupSlug = $auth.user.value?.groupSlug;
+const auth = useMealieAuth();
+const groupSlug = auth.user.value?.groupSlug;
 const router = useRouter();
 
 // Initialize sort state with default sorting by dateAdded descending

frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue

@@ -6,7 +6,7 @@
       :title="$t('recipe.add-to-list')"
       :icon="$globals.icons.cartCheck"
     >
-      <v-container v-if="!shoppingListChoices.length">
+      <v-container v-if="!filteredShoppingLists.length">
         <BasePageTitle>
           <template #title>
             {{ $t('shopping-list.no-shopping-lists-found') }}
@@ -15,7 +15,7 @@
       </v-container>
       <v-card-text>
         <v-card
-          v-for="list in shoppingListChoices"
+          v-for="list in filteredShoppingLists"
           :key="list.id"
           hover
           class="my-2 left-border"
@@ -217,44 +217,43 @@ const props = withDefaults(defineProps<Props>(), {
 const dialog = defineModel<boolean>({ default: false });
 
 const i18n = useI18n();
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const api = useUserApi();
 const preferences = useShoppingListPreferences();
 const ready = ref(false);
 
+// Capture values at initialization to avoid reactive updates
+const currentHouseholdSlug = ref("");
+const filteredShoppingLists = ref<ShoppingListSummary[]>([]);
+
 const state = reactive({
-  shoppingListDialog: true,
+  shoppingListDialog: false,
   shoppingListIngredientDialog: false,
   shoppingListShowAllToggled: false,
 });
 
 const { shoppingListDialog, shoppingListIngredientDialog, shoppingListShowAllToggled: _shoppingListShowAllToggled } = toRefs(state);
 
-const userHousehold = computed(() => {
-  return $auth.user.value?.householdSlug || "";
-});
-
-const shoppingListChoices = computed(() => {
-  return props.shoppingLists.filter(list => preferences.value.viewAllLists || list.userId === $auth.user.value?.id);
-});
-
 const recipeIngredientSections = ref<ShoppingListRecipeIngredientSection[]>([]);
 const selectedShoppingList = ref<ShoppingListSummary | null>(null);
 
-watchEffect(
-  () => {
-    if (shoppingListChoices.value.length === 1 && !state.shoppingListShowAllToggled) {
-      selectedShoppingList.value = shoppingListChoices.value[0];
+watch([dialog, () => preferences.value.viewAllLists], () => {
+  if (dialog.value) {
+    currentHouseholdSlug.value = auth.user.value?.householdSlug || "";
+    filteredShoppingLists.value = props.shoppingLists.filter(
+      list => preferences.value.viewAllLists || list.userId === auth.user.value?.id,
+    );
+
+    if (filteredShoppingLists.value.length === 1 && !state.shoppingListShowAllToggled) {
+      selectedShoppingList.value = filteredShoppingLists.value[0];
       openShoppingListIngredientDialog(selectedShoppingList.value);
     }
     else {
+      state.shoppingListDialog = true;
       ready.value = true;
     }
-  },
-);
-
-watch(dialog, (val) => {
-  if (!val) {
+  }
+  else if (!dialog.value) {
     initState();
   }
 });
@@ -274,22 +273,26 @@ async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
       continue;
     }
 
-    if (!(recipe.id && recipe.name && recipe.recipeIngredient)) {
-      const { data } = await api.recipes.getOne(recipe.slug);
+    // Create a local copy to avoid mutating props
+    let recipeData = { ...recipe };
+    if (!(recipeData.id && recipeData.name && recipeData.recipeIngredient)) {
+      const { data } = await api.recipes.getOne(recipeData.slug);
       if (!data?.recipeIngredient?.length) {
         continue;
       }
-      recipe.id = data.id || "";
-      recipe.name = data.name || "";
-      recipe.recipeIngredient = data.recipeIngredient;
+      recipeData = {
+        ...recipeData,
+        id: data.id || "",
+        name: data.name || "",
+        recipeIngredient: data.recipeIngredient,
+      };
     }
-    else if (!recipe.recipeIngredient.length) {
+    else if (!recipeData.recipeIngredient.length) {
       continue;
     }
 
     const shoppingListIngredients: ShoppingListIngredient[] = [];
     function flattenRecipeIngredients(ing: RecipeIngredient, parentTitle = ""): ShoppingListIngredient[] {
-      const householdsWithFood = ing.food?.householdsWithIngredientFood || [];
       if (ing.referencedRecipe) {
         // Recursively flatten all ingredients in the referenced recipe
         return (ing.referencedRecipe.recipeIngredient ?? []).flatMap((subIng) => {
@@ -303,8 +306,9 @@ async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
       }
       else {
         // Regular ingredient
+        const householdsWithFood = ing.food?.householdsWithIngredientFood || [];
         return [{
-          checked: !householdsWithFood.includes(userHousehold.value),
+          checked: !householdsWithFood.includes(currentHouseholdSlug.value),
           ingredient: {
             ...ing,
             title: ing.title || parentTitle,
@@ -313,7 +317,7 @@ async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
       }
     }
 
-    recipe.recipeIngredient.forEach((ing) => {
+    recipeData.recipeIngredient.forEach((ing) => {
       const flattened = flattenRecipeIngredients(ing, "");
       shoppingListIngredients.push(...flattened);
     });
@@ -343,7 +347,7 @@ async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
 
       // Store the on-hand ingredients for later
       const householdsWithFood = (ing.ingredient?.food?.householdsWithIngredientFood || []);
-      if (householdsWithFood.includes(userHousehold.value)) {
+      if (householdsWithFood.includes(currentHouseholdSlug.value)) {
         onHandIngs.push(ing);
         return sections;
       }
@@ -357,9 +361,9 @@ async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
     shoppingListIngredientSections[shoppingListIngredientSections.length - 1].ingredients.push(...onHandIngs);
 
     recipeSectionMap.set(recipe.slug, {
-      recipeId: recipe.id,
-      recipeName: recipe.name,
-      recipeScale: recipe.scale,
+      recipeId: recipeData.id,
+      recipeName: recipeData.name,
+      recipeScale: recipeData.scale,
       ingredientSections: shoppingListIngredientSections,
     });
   }
@@ -368,7 +372,7 @@ async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
 }
 
 function initState() {
-  state.shoppingListDialog = true;
+  state.shoppingListDialog = false;
   state.shoppingListIngredientDialog = false;
   state.shoppingListShowAllToggled = false;
   recipeIngredientSections.value = [];

frontend/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -12,6 +12,7 @@
         dark
         color="primary-lighten-1 top-0 position-relative left-0"
         :rounded="!$vuetify.display.xs"
+        style="width: 100%;"
       >
         <v-text-field
           id="arrow-search"
@@ -32,9 +33,8 @@
 
         <v-btn
           v-if="$vuetify.display.xs"
+          icon
           size="x-small"
-          class="rounded-circle"
-          light
           @click="dialog = false"
         >
           <v-icon>
@@ -87,7 +87,7 @@ const emit = defineEmits<{
   selected: [recipe: RecipeSummary];
 }>();
 
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const loading = ref(false);
 const selectedIndex = ref(-1);
 
@@ -153,7 +153,7 @@ watch(dialog, (val) => {
 });
 
 const route = useRoute();
-const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
 watch(route, close);
 
 function open() {

frontend/components/Domain/Recipe/RecipeDialogShare.vue

@@ -119,10 +119,10 @@ whenever(
 );
 
 const i18n = useI18n();
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const { household } = useHouseholdSelf();
 const route = useRoute();
-const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
 
 const firstDayOfWeek = computed(() => {
   return household.value?.preferences?.firstDayOfWeek || 0;

frontend/components/Domain/Recipe/RecipeExplorerPage/RecipeExplorerPage.vue

@@ -34,11 +34,11 @@ import { useLazyRecipes } from "~/composables/recipes";
 export default defineNuxtComponent({
   components: { RecipeCardSection, RecipeExplorerPageSearch },
   setup() {
-    const $auth = useMealieAuth();
+    const auth = useMealieAuth();
     const route = useRoute();
 
     const { isOwnGroup } = useLoggedInState();
-    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+    const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
 
     const { recipes, appendRecipes, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
 

frontend/components/Domain/Recipe/RecipeExplorerPage/RecipeExplorerPageParts/RecipeExplorerPageSearch.vue

@@ -100,6 +100,7 @@
                 v-model="state.auto"
                 :label="$t('search.auto-search')"
                 single-line
+                color="primary"
               />
               <v-btn
                 block
@@ -140,13 +141,13 @@ const emit = defineEmits<{
   ready: [];
 }>();
 
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const route = useRoute();
 const { $globals } = useNuxtApp();
 const i18n = useI18n();
 const showRandomLoading = ref(false);
 
-const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
 
 const {
   state,

frontend/components/Domain/Recipe/RecipeExplorerPage/RecipeExplorerPageParts/RecipeExplorerPageSearchFilters.vue

@@ -81,11 +81,11 @@ import {
   usePublicToolStore,
 } from "~/composables/store";
 
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const route = useRoute();
 
 const { isOwnGroup } = useLoggedInState();
-const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
 
 const {
   state,
@@ -101,4 +101,14 @@ const { store: tags } = isOwnGroup.value ? useTagStore() : usePublicTagStore(gro
 const { store: tools } = isOwnGroup.value ? useToolStore() : usePublicToolStore(groupSlug.value);
 const { store: foods } = isOwnGroup.value ? useFoodStore() : usePublicFoodStore(groupSlug.value);
 const { store: households } = isOwnGroup.value ? useHouseholdStore() : usePublicHouseholdStore(groupSlug.value);
+
+watch(
+  households,
+  () => {
+    // if exactly one household exists, then we shouldn't be filtering by household
+    if (households.value.length == 1) {
+      selectedHouseholds.value = [];
+    }
+  },
+);
 </script>

frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue

@@ -52,14 +52,14 @@ const isFavorite = computed(() => {
 
 async function toggleFavorite() {
   const api = useUserApi();
-  const $auth = useMealieAuth();
+  const auth = useMealieAuth();
 
-  if (!$auth.user.value) return;
+  if (!auth.user.value) return;
   if (!isFavorite.value) {
-    await api.users.addFavorite($auth.user.value?.id, props.recipeId);
+    await api.users.addFavorite(auth.user.value?.id, props.recipeId);
   }
   else {
-    await api.users.removeFavorite($auth.user.value?.id, props.recipeId);
+    await api.users.removeFavorite(auth.user.value?.id, props.recipeId);
   }
   await refreshUserRatings();
 }

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -22,12 +22,15 @@
         cols="12"
         class="flex-grow-0 flex-shrink-0"
       >
-        <v-text-field
+        <v-number-input
           v-model="model.quantity"
           variant="solo"
+          :precision="null"
+          :min="0"
           hide-details
+          control-variant="stacked"
+          inset
           density="compact"
-          type="number"
           :placeholder="$t('recipe.quantity')"
           @keypress="quantityFilter"
         >
@@ -38,7 +41,7 @@
               {{ $globals.icons.arrowUpDown }}
             </v-icon>
           </template>
-        </v-text-field>
+        </v-number-input>
       </v-col>
       <v-col
         v-if="!state.isRecipe"
@@ -55,7 +58,8 @@
           density="compact"
           variant="solo"
           return-object
-          :items="units || []"
+          :items="filteredUnits"
+          :custom-filter="() => true"
           item-title="name"
           class="mx-1"
           :placeholder="$t('recipe.choose-unit')"
@@ -113,7 +117,8 @@
           density="compact"
           variant="solo"
           return-object
-          :items="foods || []"
+          :items="filteredFoods"
+          :custom-filter="() => true"
           item-title="name"
           class="mx-1 py-0"
           :placeholder="$t('recipe.choose-food')"
@@ -221,10 +226,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, reactive, toRefs } from "vue";
+import { ref, computed, reactive, toRefs, watch } from "vue";
 import { useDisplay } from "vuetify";
 import { useI18n } from "vue-i18n";
 import { useFoodStore, useFoodData, useUnitStore, useUnitData } from "~/composables/store";
+import { useSearch } from "~/composables/use-search";
 import { useNuxtApp } from "#app";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
 import { usePublicExploreApi, useUserApi } from "~/composables/api";
@@ -336,8 +342,8 @@ const btns = computed(() => {
 // Foods
 const foodStore = useFoodStore();
 const foodData = useFoodData();
-const foodSearch = ref("");
 const foodAutocomplete = ref<HTMLInputElement>();
+const { search: foodSearch, filtered: filteredFoods } = useSearch(foodStore.store);
 
 async function createAssignFood() {
   foodData.data.name = foodSearch.value;
@@ -348,8 +354,8 @@ async function createAssignFood() {
 
 // Recipes
 const route = useRoute();
-const $auth = useMealieAuth();
-const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+const auth = useMealieAuth();
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
 
 const { isOwnGroup } = useLoggedInState();
 const api = isOwnGroup.value ? useUserApi() : usePublicExploreApi(groupSlug.value).explore;
@@ -368,8 +374,8 @@ watch(loading, (val) => {
 // Units
 const unitStore = useUnitStore();
 const unitsData = useUnitData();
-const unitSearch = ref("");
 const unitAutocomplete = ref<HTMLInputElement>();
+const { search: unitSearch, filtered: filteredUnits } = useSearch(unitStore.store);
 
 async function createAssignUnit() {
   unitsData.data.name = unitSearch.value;
@@ -423,9 +429,6 @@ function quantityFilter(e: KeyboardEvent) {
 }
 
 const { showTitle } = toRefs(state);
-
-const foods = foodStore.store;
-const units = unitStore.store;
 </script>
 
 <style>

frontend/components/Domain/Recipe/RecipeIngredientHtml.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
-import { useParsedIngredientText } from "~/composables/recipes";
+import { useIngredientTextParser } from "~/composables/recipes";
 
 interface Props {
   ingredient?: RecipeIngredient;
@@ -20,6 +20,7 @@ interface Props {
 }
 
 const { ingredient, scale = 1 } = defineProps<Props>();
+const { useParsedIngredientText } = useIngredientTextParser();
 
 const baseText = computed(() => {
   if (!ingredient) return "";

frontend/components/Domain/Recipe/RecipeIngredientListItem.vue

@@ -34,7 +34,7 @@
 
 <script setup lang="ts">
 import type { RecipeIngredient } from "~/lib/api/types/household";
-import { useParsedIngredientText } from "~/composables/recipes";
+import { useIngredientTextParser } from "~/composables/recipes";
 
 interface Props {
   ingredient: RecipeIngredient;
@@ -44,8 +44,9 @@ const props = withDefaults(defineProps<Props>(), {
   scale: 1,
 });
 const route = useRoute();
-const $auth = useMealieAuth();
-const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
+const auth = useMealieAuth();
+const groupSlug = computed(() => route.params.groupSlug || auth.user?.value?.groupSlug || "");
+const { useParsedIngredientText } = useIngredientTextParser();
 
 const parsedIng = computed(() => {
   return useParsedIngredientText(props.ingredient, props.scale, true, groupSlug.value.toString());

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -17,15 +17,13 @@
         v-for="(ingredient, index) in value"
         :key="'ingredient' + index"
       >
-        <template v-if="!isCookMode">
-          <h3
-            v-if="showTitleEditor[index]"
-            class="mt-2"
-          >
-            {{ ingredient.title }}
-          </h3>
-          <v-divider v-if="showTitleEditor[index]" />
-        </template>
+        <h3
+          v-if="showTitleEditor[index]"
+          class="mt-2"
+        >
+          {{ ingredient.title }}
+        </h3>
+        <v-divider v-if="showTitleEditor[index]" />
         <v-list-item
           density="compact"
           class="pa-0"
@@ -54,7 +52,7 @@
 
 <script setup lang="ts">
 import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
-import { parseIngredientText } from "~/composables/recipes";
+import { useIngredientTextParser } from "~/composables/recipes";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
 
 interface Props {
@@ -68,6 +66,8 @@ const props = withDefaults(defineProps<Props>(), {
   isCookMode: false,
 });
 
+const { parseIngredientText } = useIngredientTextParser();
+
 function validateTitle(title?: string | null) {
   return !(title === undefined || title === "" || title === null);
 }

frontend/components/Domain/Recipe/RecipeLastMade.vue

@@ -159,7 +159,7 @@ const madeThisDialog = ref(false);
 const userApi = useUserApi();
 const { household } = useHouseholdSelf();
 const i18n = useI18n();
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const domMadeThisForm = ref<VForm>();
 const newTimelineEvent = ref<RecipeTimelineEventIn>({
   subject: "",
@@ -179,7 +179,7 @@ const newTimelineEventTimestampString = computed(() => {
 const lastMade = ref(props.recipe.lastMade);
 const lastMadeReady = ref(false);
 onMounted(async () => {
-  if (!$auth.user?.value?.householdSlug) {
+  if (!auth.user?.value?.householdSlug) {
     lastMade.value = props.recipe.lastMade;
   }
   else {
@@ -255,8 +255,8 @@ async function createTimelineEvent() {
   madeThisFormLoading.value = true;
 
   newTimelineEvent.value.recipeId = props.recipe.id;
-  // Note: $auth.user is now a ref
-  newTimelineEvent.value.subject = i18n.t("recipe.user-made-this", { user: $auth.user.value?.fullName });
+  // Note: auth.user is now a ref
+  newTimelineEvent.value.subject = i18n.t("recipe.user-made-this", { user: auth.user.value?.fullName });
 
   // the user only selects the date, so we set the time to end of day local time
   // we choose the end of day so it always comes after "new recipe" events

frontend/components/Domain/Recipe/RecipeList.vue

@@ -73,10 +73,10 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
 });
 
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const { frac } = useFraction();
 const route = useRoute();
-const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug || auth.user?.value?.groupSlug || "");
 
 const attrs = computed(() => {
   return props.small

frontend/components/Domain/Recipe/RecipeNutrition.vue

@@ -10,14 +10,17 @@
           v-for="(item, key, index) in modelValue"
           :key="index"
         >
-          <v-text-field
-            density="compact"
+          <v-number-input
             :model-value="modelValue[key]"
             :label="labels[key].label"
             :suffix="labels[key].suffix"
-            type="number"
+            density="compact"
             autocomplete="off"
             variant="underlined"
+            control-variant="stacked"
+            inset
+            :precision="null"
+            :min="0"
             @update:model-value="updateValue(key, $event)"
           />
         </div>

frontend/components/Domain/Recipe/RecipeOrganizerPage.vue

@@ -162,9 +162,9 @@ const state = reactive({
   },
 });
 
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const route = useRoute();
-const groupSlug = computed(() => route.params.groupSlug as string || $auth.user?.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user?.value?.groupSlug || "");
 
 // =================================================================
 // Context Menu

frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue

@@ -4,17 +4,19 @@
     v-bind="inputAttrs"
     v-model:search="searchInput"
     :items="items"
+    :custom-filter="normalizeFilter"
     :label="label"
     chips
     closable-chips
-    item-title="name"
+    :item-title="itemTitle"
+    item-value="name"
     multiple
     :variant="variant"
     :prepend-inner-icon="icon"
     :append-icon="showAdd ? $globals.icons.create : undefined"
     return-object
     auto-select-first
-    class="pa-0"
+    class="pa-0 ma-0"
     @update:model-value="resetSearchInput"
     @click:append="dialog = true"
   >
@@ -32,7 +34,6 @@
         {{ item.value }}
       </v-chip>
     </template>
-
     <template
       v-if="showAdd"
       #append
@@ -47,16 +48,17 @@
 </template>
 
 <script setup lang="ts">
-import type { IngredientFood, RecipeCategory, RecipeTag } from "~/lib/api/types/recipe";
-import type { RecipeTool } from "~/lib/api/types/admin";
+import type { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
 import { Organizer, type RecipeOrganizer } from "~/lib/api/types/non-generated";
 import type { HouseholdSummary } from "~/lib/api/types/household";
 import { useCategoryStore, useFoodStore, useHouseholdStore, useTagStore, useToolStore } from "~/composables/store";
+import { useUserStore } from "~/composables/store/use-user-store";
+import { normalizeFilter } from "~/composables/use-utils";
+import type { UserSummary } from "~/lib/api/types/user";
 
 interface Props {
   selectorType: RecipeOrganizer;
   inputAttrs?: Record<string, any>;
-  returnObject?: boolean;
   showAdd?: boolean;
   showLabel?: boolean;
   showIcon?: boolean;
@@ -65,7 +67,6 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   inputAttrs: () => ({}),
-  returnObject: true,
   showAdd: true,
   showLabel: true,
   showIcon: true,
@@ -78,7 +79,7 @@ const selected = defineModel<(
   | RecipeCategory
   | RecipeTool
   | IngredientFood
-  | string
+  | UserSummary
 )[] | undefined>({ required: true });
 
 onMounted(() => {
@@ -106,6 +107,8 @@ const label = computed(() => {
       return i18n.t("general.foods");
     case Organizer.Household:
       return i18n.t("household.households");
+    case Organizer.User:
+      return i18n.t("user.users");
     default:
       return i18n.t("general.organizer");
   }
@@ -127,11 +130,19 @@ const icon = computed(() => {
       return $globals.icons.foods;
     case Organizer.Household:
       return $globals.icons.household;
+    case Organizer.User:
+      return $globals.icons.user;
     default:
       return $globals.icons.tags;
   }
 });
 
+const itemTitle = computed(() =>
+  props.selectorType === Organizer.User
+    ? (i: any) => i?.fullName ?? i?.name ?? ""
+    : "name",
+);
+
 // ===========================================================================
 // Store & Items Setup
 
@@ -141,24 +152,24 @@ const storeMap = {
   [Organizer.Tool]: useToolStore(),
   [Organizer.Food]: useFoodStore(),
   [Organizer.Household]: useHouseholdStore(),
+  [Organizer.User]: useUserStore(),
 };
 
-const store = computed(() => {
+const activeStore = computed(() => {
   const { store } = storeMap[props.selectorType];
   return store.value;
 });
 
-const items = computed(() => {
-  if (!props.returnObject) {
-    return store.value.map(item => item.name);
-  }
-  return store.value;
+const items = computed<any[]>(() => {
+  const list = (activeStore.value as unknown as any[]) ?? [];
+  return list;
 });
 
 function removeByIndex(index: number) {
   if (selected.value === undefined) {
     return;
   }
+
   const newSelected = selected.value.filter((_, i) => i !== index);
   selected.value = [...newSelected];
 }

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -1,5 +1,18 @@
 <template>
   <div>
+    <BaseDialog
+      v-model="discardDialog"
+      :title="$t('general.discard-changes')"
+      color="warning"
+      :icon="$globals.icons.alertCircle"
+      can-confirm
+      @confirm="confirmDiscard"
+      @cancel="cancelDiscard"
+    >
+      <v-card-text>
+        {{ $t("general.discard-changes-description") }}
+      </v-card-text>
+    </BaseDialog>
     <RecipePageParseDialog
       :model-value="isParsing"
       :ingredients="recipe.recipeIngredient"
@@ -15,6 +28,7 @@
           :landscape="landscape"
           @save="saveRecipe"
           @delete="deleteRecipe"
+          @close="closeEditor"
         />
         <RecipeJsonEditor
           v-if="isEditJSON"
@@ -174,6 +188,7 @@
 
 <script setup lang="ts">
 import { invoke, until } from "@vueuse/core";
+import type { RouteLocationNormalized } from "vue-router";
 import RecipeIngredients from "../RecipeIngredients.vue";
 import RecipePageEditorToolbar from "./RecipePageParts/RecipePageEditorToolbar.vue";
 import RecipePageFooter from "./RecipePageParts/RecipePageFooter.vue";
@@ -205,12 +220,11 @@ import { useNavigationWarning } from "~/composables/use-navigation-warning";
 const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
 
 const display = useDisplay();
-const i18n = useI18n();
-const $auth = useMealieAuth();
+const auth = useMealieAuth();
 const route = useRoute();
 const { isOwnGroup } = useLoggedInState();
 
-const groupSlug = computed(() => (route.params.groupSlug as string) || $auth.user?.value?.groupSlug || "");
+const groupSlug = computed(() => (route.params.groupSlug as string) || auth.user?.value?.groupSlug || "");
 
 const router = useRouter();
 const api = useUserApi();
@@ -231,26 +245,68 @@ const notLinkedIngredients = computed(() => {
  * and prompts the user to save if they have unsaved changes.
  */
 const originalRecipe = ref<Recipe | null>(null);
+const discardDialog = ref(false);
+const pendingRoute = ref<RouteLocationNormalized | null>(null);
 
 invoke(async () => {
   await until(recipe.value).not.toBeNull();
   originalRecipe.value = deepCopy(recipe.value);
 });
 
-onUnmounted(async () => {
-  const isSame = JSON.stringify(recipe.value) === JSON.stringify(originalRecipe.value);
-  if (isEditMode.value && !isSame && recipe.value?.slug !== undefined) {
-    const save = window.confirm(i18n.t("general.unsaved-changes"));
-
-    if (save) {
-      await api.recipes.updateOne(recipe.value.slug, recipe.value);
-    }
+function hasUnsavedChanges(): boolean {
+  if (originalRecipe.value === null) {
+    return false;
   }
+  return JSON.stringify(recipe.value) !== JSON.stringify(originalRecipe.value);
+}
+
+function restoreOriginalRecipe() {
+  if (originalRecipe.value) {
+    recipe.value = deepCopy(originalRecipe.value) as NoUndefinedField<Recipe>;
+  }
+}
+
+function closeEditor() {
+  if (hasUnsavedChanges()) {
+    pendingRoute.value = null;
+    discardDialog.value = true;
+  }
+  else {
+    setMode(PageMode.VIEW);
+  }
+}
+
+function confirmDiscard() {
+  restoreOriginalRecipe();
+  discardDialog.value = false;
+
+  if (pendingRoute.value) {
+    const destination = pendingRoute.value;
+    pendingRoute.value = null;
+    router.push(destination);
+  }
+  else {
+    setMode(PageMode.VIEW);
+  }
+}
+
+function cancelDiscard() {
+  discardDialog.value = false;
+  pendingRoute.value = null;
+}
+
+onBeforeRouteLeave((to) => {
+  if (isEditMode.value && hasUnsavedChanges()) {
+    pendingRoute.value = to;
+    discardDialog.value = true;
+    return false;
+  }
+});
+
+onUnmounted(() => {
   deactivateNavigationWarning();
   toggleCookMode();
-
   clearPageState(recipe.value.slug || "");
-  console.debug("reset RecipePage state during unmount");
 });
 const hasLinkedIngredients = computed(() => {
   return recipe.value.recipeInstructions.some(
@@ -300,6 +356,8 @@ async function saveRecipe() {
   if (data?.slug) {
     router.push(`/g/${groupSlug.value}/r/` + data.slug);
     recipe.value = data as NoUndefinedField<Recipe>;
+    // Update the snapshot after successful save
+    originalRecipe.value = deepCopy(recipe.value);
   }
 }
 

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue

@@ -16,7 +16,7 @@
       :open="isEditMode"
       :recipe-id="recipe.id"
       class="ml-auto mt-n7 pb-4"
-      @close="setMode(PageMode.VIEW)"
+      @close="$emit('close')"
       @json="toggleEditMode()"
       @edit="setMode(PageMode.EDIT)"
       @save="$emit('save')"
@@ -47,7 +47,7 @@ const props = withDefaults(defineProps<Props>(), {
   landscape: false,
 });
 
-defineEmits(["save", "delete"]);
+defineEmits(["save", "delete", "print", "close"]);
 
 const { recipeImage } = useStaticRoutes();
 const { imageKey, setMode, toggleEditMode, isEditMode } = usePageState(props.recipe.slug);

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCardImage.vue

@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const display = useDisplay();
-const { recipeImage } = useStaticRoutes();
+const { recipeImage, recipeSmallImage } = useStaticRoutes();
 const { imageKey } = usePageState(props.recipe.slug);
 const { user } = usePageUser();
 
@@ -46,7 +46,9 @@ const imageHeight = computed(() => {
 });
 
 const recipeImageUrl = computed(() => {
-  return recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
+  return display.smAndDown.value
+    ? recipeSmallImage(props.recipe.id, props.recipe.image, imageKey.value)
+    : recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
 });
 
 watch(

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoEditor.vue

@@ -11,27 +11,27 @@
     <v-container class="ma-0 pa-0">
       <v-row>
         <v-col cols="3">
-          <v-text-field
-            :model-value="recipeServings"
-            type="number"
+          <v-number-input
+            :model-value="recipe.recipeServings"
             :min="0"
-            hide-spin-buttons
+            :precision="null"
             density="compact"
             :label="$t('recipe.servings')"
             variant="underlined"
-            @update:model-value="validateInput($event, 'recipeServings')"
+            control-variant="hidden"
+            @update:model-value="recipe.recipeServings = $event"
           />
         </v-col>
         <v-col cols="3">
-          <v-text-field
-            :model-value="recipeYieldQuantity"
-            type="number"
+          <v-number-input
+            :model-value="recipe.recipeYieldQuantity"
             :min="0"
-            hide-spin-buttons
+            :precision="null"
             density="compact"
             :label="$t('recipe.yield')"
             variant="underlined"
-            @update:model-value="validateInput($event, 'recipeYieldQuantity')"
+            control-variant="hidden"
+            @update:model-value="recipe.recipeYieldQuantity = $event"
           />
         </v-col>
         <v-col cols="6">
@@ -85,37 +85,4 @@ import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import type { Recipe } from "~/lib/api/types/recipe";
 
 const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
-
-const recipeServings = computed<number>({
-  get() {
-    return recipe.value.recipeServings;
-  },
-  set(val) {
-    validateInput(val.toString(), "recipeServings");
-  },
-});
-
-const recipeYieldQuantity = computed<number>({
-  get() {
-    return recipe.value.recipeYieldQuantity;
-  },
-  set(val) {
-    validateInput(val.toString(), "recipeYieldQuantity");
-  },
-});
-
-function validateInput(value: string | null, property: "recipeServings" | "recipeYieldQuantity") {
-  if (!value) {
-    recipe.value[property] = 0;
-    return;
-  }
-
-  const number = parseFloat(value.replace(/[^0-9.]/g, ""));
-  if (isNaN(number) || number <= 0) {
-    recipe.value[property] = 0;
-    return;
-  }
-
-  recipe.value[property] = number;
-}
 </script>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue

@@ -431,6 +431,7 @@ const props = defineProps({
 const emit = defineEmits(["click-instruction-field", "update:assets"]);
 
 const { isCookMode, toggleCookMode, isEditForm } = usePageState(props.recipe.slug);
+const { extractIngredientReferences } = useExtractIngredientReferences();
 
 const dialog = ref(false);
 const disabledSteps = ref<number[]>([]);
@@ -581,7 +582,7 @@ function setUsedIngredients() {
 watch(activeRefs, () => setUsedIngredients());
 
 function autoSetReferences() {
-  useExtractIngredientReferences(
+  extractIngredientReferences(
     props.recipe.recipeIngredient,
     activeRefs.value,
     activeText.value,

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageParseDialog.vue

@@ -197,7 +197,7 @@ import type { IngredientFood, IngredientUnit, ParsedIngredient, RecipeIngredient
 import type { Parser } from "~/lib/api/user/recipes/recipe";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { useUserApi } from "~/composables/api";
-import { parseIngredientText } from "~/composables/recipes";
+import { useIngredientTextParser } from "~/composables/recipes";
 import { useFoodData, useFoodStore, useUnitData, useUnitStore } from "~/composables/store";
 import { useGlobalI18n } from "~/composables/use-global-i18n";
 import { alert } from "~/composables/use-toast";
@@ -208,6 +208,8 @@ const props = defineProps<{
   ingredients: NoUndefinedField<RecipeIngredient[]>;
 }>();
 
+const { parseIngredientText } = useIngredientTextParser();
+
 const emit = defineEmits<{
   (e: "update:modelValue", value: boolean): void;
   (e: "save", value: NoUndefinedField<RecipeIngredient[]>): void;

frontend/components/Domain/Recipe/RecipePrintView.vue

@@ -192,7 +192,7 @@ import { useStaticRoutes } from "~/composables/api";
 import type { Recipe, RecipeIngredient, RecipeStep } from "~/lib/api/types/recipe";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { ImagePosition, useUserPrintPreferences } from "~/composables/use-users/preferences";
-import { parseIngredientText, useNutritionLabels } from "~/composables/recipes";
+import { useIngredientTextParser, useNutritionLabels } from "~/composables/recipes";
 import { usePageState } from "~/composables/recipe-page/shared-state";
 import { useScaledAmount } from "~/composables/recipes/use-scaled-amount";
 
@@ -362,6 +362,8 @@ const hasNotes = computed(() => {
   return props.recipe.notes && props.recipe.notes.length > 0;
 });
 
+const { parseIngredientText } = useIngredientTextParser();
+
 function parseText(ingredient: RecipeIngredient) {
   return parseIngredientText(ingredient, props.scale);
 }

frontend/components/Domain/Recipe/RecipeScaleEditButton.vue

@@ -65,13 +65,13 @@
             </v-card-title>
             <v-card-text class="mt-n5">
               <div class="mt-4 d-flex align-center">
-                <v-text-field
+                <v-number-input
                   :model-value="yieldQuantity"
-                  type="number"
+                  :precision="null"
                   :min="0"
                   variant="underlined"
-                  hide-spin-buttons
-                  @update:model-value="recalculateScale(parseFloat($event) || 0)"
+                  control-variant="hidden"
+                  @update:model-value="recalculateScale($event || 0)"
                 />
                 <v-tooltip
                   location="end"

frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue

@@ -5,6 +5,7 @@
       :title="$t('recipe.edit-timeline-event')"
       :icon="$globals.icons.edit"
       can-submit
+      disable-submit-on-enter
       :submit-text="$t('general.save')"
       @submit="submitEdit"
     >
@@ -38,7 +39,6 @@
       :nudge-top="props.menuTop ? '5' : '0'"
       allow-overflow
       close-delay="125"
-      :open-on-hover="!props.useMobileFormat"
       content-class="d-print-none"
     >
       <template #activator="{ props: btnProps }">
@@ -98,7 +98,6 @@ const props = defineProps<{
   color?: string;
   event: RecipeTimelineEventOut;
   menuIcon?: string | null;
-  useMobileFormat?: boolean;
 }>();
 
 const emit = defineEmits(["delete", "update"]);

frontend/components/Domain/Recipe/RecipeTimelineItem.vue

@@ -35,7 +35,6 @@
               :menu-top="false"
               :event="event"
               :menu-icon="$globals.icons.dotsVertical"
-              :use-mobile-format="useMobileFormat"
               color="transparent"
               :elevation="0"
               :card-menu="false"
@@ -119,7 +118,7 @@ defineEmits<{
 
 const { $globals } = useNuxtApp();
 const display = useDisplay();
-const { recipeTimelineEventImage } = useStaticRoutes();
+const { recipeTimelineEventSmallImage } = useStaticRoutes();
 const { eventTypeOptions } = useTimelineEventTypes();
 
 const { user: currentUser } = useMealieAuth();
@@ -173,7 +172,7 @@ const eventImageUrl = computed<string>(() => {
     return "";
   }
 
-  return recipeTimelineEventImage(props.event.recipeId, props.event.id);
+  return recipeTimelineEventSmallImage(props.event.recipeId, props.event.id);
 });
 </script>
 

frontend/components/Domain/SearchFilter.vue

@@ -28,8 +28,8 @@
       <v-card width="400">
         <v-card-text>
           <v-text-field
-            v-model="state.search"
-            v-memo="[state.search]"
+            v-model="searchInput"
+            v-memo="[searchInput]"
             class="mb-2"
             hide-details
             density="comfortable"
@@ -37,21 +37,29 @@
             :label="$t('search.search')"
             clearable
           />
-          <div class="d-flex py-4 px-1">
-            <v-switch
+          <div />
+          <div class="d-flex flex-wrap py-4 px-1 align-center">
+            <v-btn-toggle
               v-if="requireAll != undefined"
-              v-model="requireAllValue"
+              v-model="combinator"
+              mandatory
               density="compact"
-              hide-details
-              class="my-auto"
+              variant="outlined"
               color="primary"
-              :label="requireAllValue ? $t('search.has-all') : $t('search.has-any')"
-            />
+              class="my-1"
+            >
+              <v-btn value="hasAll">
+                {{ $t('search.has-all') }}
+              </v-btn>
+              <v-btn value="hasAny">
+                {{ $t('search.has-any') }}
+              </v-btn>
+            </v-btn-toggle>
             <v-spacer />
             <v-btn
               size="small"
               color="accent"
-              class="mr-2 my-auto"
+              class="my-1"
               @click="clearSelection"
             >
               {{ $t("search.clear-selection") }}
@@ -138,17 +146,13 @@
 </template>
 
 <script lang="ts">
-import { watchDebounced } from "@vueuse/core";
-
-export interface SelectableItem {
-  id: string;
-  name: string;
-}
+import type { ISearchableItem } from "~/composables/use-search";
+import { useSearch } from "~/composables/use-search";
 
 export default defineNuxtComponent({
   props: {
     items: {
-      type: Array as () => SelectableItem[],
+      type: Array as () => ISearchableItem[],
       required: true,
     },
     modelValue: {
@@ -167,23 +171,22 @@ export default defineNuxtComponent({
   emits: ["update:requireAll", "update:modelValue"],
   setup(props, context) {
     const state = reactive({
-      search: "",
       menu: false,
     });
 
-    // Use shallowRef for better performance with arrays
-    const debouncedSearch = shallowRef("");
+    // Use the search composable
+    const { search: searchInput, filtered } = useSearch(computed(() => props.items));
 
-    const requireAllValue = computed({
-      get: () => props.requireAll,
+    const combinator = computed({
+      get: () => (props.requireAll ? "hasAll" : "hasAny"),
       set: (value) => {
-        context.emit("update:requireAll", value);
+        context.emit("update:requireAll", value === "hasAll");
       },
     });
 
     // Use shallowRef to prevent deep reactivity on large arrays
     const selected = computed({
-      get: () => props.modelValue as SelectableItem[],
+      get: () => props.modelValue as ISearchableItem[],
       set: (value) => {
         context.emit("update:modelValue", value);
       },
@@ -196,44 +199,12 @@ export default defineNuxtComponent({
       },
     });
 
-    watchDebounced(
-      () => state.search,
-      (newSearch) => {
-        debouncedSearch.value = newSearch;
-      },
-      { debounce: 500, maxWait: 1500, immediate: false }, // Increased debounce time
-    );
-
-    const filtered = computed(() => {
-      const items = props.items;
-      const search = debouncedSearch.value;
-
-      if (!search || search.length < 2) { // Only filter after 2 characters
-        return items;
-      }
-
-      const searchLower = search.toLowerCase();
-      return items.filter(item => item.name.toLowerCase().includes(searchLower));
-    });
-
     const selectedCount = computed(() => selected.value.length);
     const selectedIds = computed(() => {
       return new Set(selected.value.map(item => item.id));
     });
 
-    const handleCheckboxClick = (item: SelectableItem) => {
-      const currentSelection = selected.value;
-      const isSelected = selectedIds.value.has(item.id);
-
-      if (isSelected) {
-        selected.value = currentSelection.filter(i => i.id !== item.id);
-      }
-      else {
-        selected.value = [...currentSelection, item];
-      }
-    };
-
-    const handleRadioClick = (item: SelectableItem) => {
+    const handleRadioClick = (item: ISearchableItem) => {
       if (selectedRadio.value === item) {
         selectedRadio.value = null;
       }
@@ -242,18 +213,18 @@ export default defineNuxtComponent({
     function clearSelection() {
       selected.value = [];
       selectedRadio.value = null;
-      state.search = "";
+      searchInput.value = "";
     }
 
     return {
-      requireAllValue,
+      combinator,
       state,
+      searchInput,
       selected,
       selectedRadio,
       selectedCount,
       selectedIds,
       filtered,
-      handleCheckboxClick,
       handleRadioClick,
       clearSelection,
     };

frontend/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -15,7 +15,10 @@
             density="compact"
             class="mt-0 flex-shrink-0"
             color="null"
-            @change="$emit('checked', listItem)"
+            @click="() => {
+              listItem.checked = !listItem.checked
+              $emit('checked', listItem)
+            }"
           />
           <div
             class="ml-2 text-truncate"

frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue

@@ -4,7 +4,16 @@
       <v-card-text class="pb-3 pt-1">
         <div class="d-md-flex align-center mb-2" style="gap: 20px">
           <div>
-            <InputQuantity v-model="listItem.quantity" />
+            <v-number-input
+              v-model="listItem.quantity"
+              hide-details
+              :label="$t('form.quantity-label-abbreviated')"
+              :min="0"
+              :precision="null"
+              control-variant="stacked"
+              inset
+              style="width: 100px;"
+            />
           </div>
           <InputLabelType
             v-model="listItem.unit"
@@ -47,25 +56,6 @@
                 width="250"
               />
             </div>
-
-            <v-menu
-              v-if="listItem.recipeReferences && listItem.recipeReferences.length > 0"
-              open-on-hover
-              offset-y
-              start
-              top
-            >
-              <template #activator="{ props }">
-                <v-icon class="mt-auto" :icon="$globals.icons.alert" v-bind="props" color="warning">
-                  {{ $globals.icons.alert }}
-                </v-icon>
-              </template>
-              <v-card max-width="350px" class="left-warning-border">
-                <v-card-text>
-                  {{ $t("shopping-list.linked-item-warning") }}
-                </v-card-text>
-              </v-card>
-            </v-menu>
           </div>
           <BaseButton
             v-if="listItem.labelId && listItem.food && listItem.labelId !== listItem.food.labelId"
@@ -158,6 +148,15 @@ export default defineNuxtComponent({
       },
     });
 
+    watch(
+      () => props.modelValue.quantity,
+      () => {
+        if (!props.modelValue.quantity) {
+          listItem.value.quantity = 0;
+        }
+      },
+    );
+
     watch(
       () => props.modelValue.food,
       (newFood) => {

frontend/components/Domain/User/UserAvatar.vue

@@ -62,15 +62,15 @@ export default defineNuxtComponent({
       error: false,
     });
 
-    const $auth = useMealieAuth();
+    const auth = useMealieAuth();
     const { store: users } = useUserStore();
     const user = computed(() => {
       return users.value.find(user => user.id === props.userId);
     });
 
     const imageURL = computed(() => {
-      // Note: $auth.user is a ref now
-      const authUser = $auth.user.value;
+      // Note: auth.user is a ref now
+      const authUser = auth.user.value;
       const key = authUser?.cacheKey ?? "";
       return `/api/media/users/${props.userId}/profile.webp?cacheKey=${key}`;
     });

frontend/components/Domain/User/UserInviteDialog.vue

@@ -102,9 +102,9 @@ export default defineNuxtComponent({
   emits: ["update:modelValue"],
   setup(props, context) {
     const i18n = useI18n();
-    const $auth = useMealieAuth();
+    const auth = useMealieAuth();
 
-    const isAdmin = computed(() => $auth.user.value?.admin);
+    const isAdmin = computed(() => auth.user.value?.admin);
     const token = ref("");
     const selectedGroup = ref<string | null>(null);
     const selectedHousehold = ref<string | null>(null);

frontend/components/Layout/DefaultLayout.vue

@@ -106,11 +106,11 @@ export default defineNuxtComponent({
     const i18n = useI18n();
     const { $appInfo, $globals } = useNuxtApp();
     const display = useDisplay();
-    const $auth = useMealieAuth();
+    const auth = useMealieAuth();
     const { isOwnGroup } = useLoggedInState();
 
     const route = useRoute();
-    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+    const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
 
     const cookbookPreferences = useCookbookPreferences();
     const ownCookbookStore = useCookbookStore(i18n);
@@ -152,7 +152,7 @@ export default defineNuxtComponent({
       };
     }
 
-    const currentUserHouseholdId = computed(() => $auth.user.value?.householdId);
+    const currentUserHouseholdId = computed(() => auth.user.value?.householdId);
     const cookbookLinks = computed<SideBarLink[]>(() => {
       if (!cookbooks.value?.length) {
         return [];
@@ -187,7 +187,7 @@ export default defineNuxtComponent({
       });
 
       links.sort((a, b) => a.title.localeCompare(b.title));
-      if ($auth.user.value && cookbookPreferences.value.hideOtherHouseholds) {
+      if (auth.user.value && cookbookPreferences.value.hideOtherHouseholds) {
         return ownLinks;
       }
       else {

frontend/components/Layout/LayoutParts/AppHeader.vue

@@ -97,10 +97,10 @@ export default defineNuxtComponent({
     },
   },
   setup() {
-    const $auth = useMealieAuth();
+    const auth = useMealieAuth();
     const { loggedIn } = useLoggedInState();
     const route = useRoute();
-    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+    const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
     const { xs, smAndUp } = useDisplay();
 
     const routerLink = computed(() => groupSlug.value ? `/g/${groupSlug.value}` : "/");
@@ -128,7 +128,7 @@ export default defineNuxtComponent({
 
     async function logout() {
       try {
-        await $auth.signOut("/login?direct=1");
+        await auth.signOut("/login?direct=1");
       }
       catch (e) {
         console.error(e);
@@ -149,6 +149,6 @@ export default defineNuxtComponent({
 
 <style scoped>
 .v-toolbar {
-  z-index: 1010 !important;
+  z-index: 2010 !important;
 }
 </style>

frontend/components/Layout/LayoutParts/AppSidebar.vue

@@ -168,13 +168,13 @@ export default defineNuxtComponent({
   },
   emits: ["update:modelValue"],
   setup(props, context) {
-    const $auth = useMealieAuth();
+    const auth = useMealieAuth();
     const { loggedIn, isOwnGroup } = useLoggedInState();
-    const isAdmin = computed(() => $auth.user.value?.admin);
-    const canManage = computed(() => $auth.user.value?.canManage);
+    const isAdmin = computed(() => auth.user.value?.admin);
+    const canManage = computed(() => auth.user.value?.canManage);
 
-    const userFavoritesLink = computed(() => $auth.user.value ? `/user/${$auth.user.value.id}/favorites` : undefined);
-    const userProfileLink = computed(() => $auth.user.value ? "/user/profile" : undefined);
+    const userFavoritesLink = computed(() => auth.user.value ? `/user/${auth.user.value.id}/favorites` : undefined);
+    const userProfileLink = computed(() => auth.user.value ? "/user/profile" : undefined);
 
     const toggleDark = useToggleDarkMode();
 
@@ -217,7 +217,7 @@ export default defineNuxtComponent({
       isAdmin,
       canManage,
       isOwnGroup,
-      sessionUser: $auth.user,
+      sessionUser: auth.user,
       toggleDark,
     };
   },

frontend/components/global/AdvancedOnly.vue

@@ -9,9 +9,9 @@
  */
 export default defineNuxtComponent({
   setup(_, ctx) {
-    const $auth = useMealieAuth();
+    const auth = useMealieAuth();
 
-    const r = $auth.user.value?.advanced || false;
+    const r = auth.user.value?.advanced || false;
 
     return () => {
       return r ? ctx.slots.default?.() : null;

frontend/components/global/ContextMenu.vue

@@ -8,7 +8,6 @@
     :nudge-top="menuTop ? '5' : '0'"
     allow-overflow
     close-delay="125"
-    open-on-hover
     content-class="d-print-none"
   >
     <template #activator="{ props }">

frontend/components/global/InputLabelType.vue

@@ -6,12 +6,13 @@
     v-model:search="searchInput"
     item-title="name"
     return-object
-    :items="items"
+    :items="filteredItems"
     :prepend-icon="icon || $globals.icons.tags"
     auto-select-first
     clearable
     color="primary"
     hide-details
+    :custom-filter="() => true"
     @keyup.enter="emitCreate"
   >
     <template
@@ -52,6 +53,7 @@
 
 import type { MultiPurposeLabelSummary } from "~/lib/api/types/labels";
 import type { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
+import { useSearch } from "~/composables/use-search";
 
 export default defineNuxtComponent({
   props: {
@@ -83,7 +85,10 @@ export default defineNuxtComponent({
   emits: ["update:modelValue", "update:item-id", "create"],
   setup(props, context) {
     const autocompleteRef = ref<HTMLInputElement>();
-    const searchInput = ref("");
+
+    // Use the search composable
+    const { search: searchInput, filtered: filteredItems } = useSearch(computed(() => props.items));
+
     const itemIdVal = computed({
       get: () => {
         return props.itemId || undefined;
@@ -121,6 +126,7 @@ export default defineNuxtComponent({
       itemVal,
       itemIdVal,
       searchInput,
+      filteredItems,
       emitCreate,
     };
   },

frontend/components/global/InputQuantity.vue

@@ -1,61 +0,0 @@
-<template>
-  <div
-    class="d-flex align-center"
-    style="max-width: 60px"
-  >
-    <v-text-field
-      v-model.number="quantity"
-      hide-details
-      :label="$t('form.quantity-label-abbreviated')"
-      :min="min"
-      :max="max"
-      type="number"
-      variant="plain"
-      density="compact"
-      style="width: 60px;"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-export default defineNuxtComponent({
-  name: "VInputNumber",
-  props: {
-    min: {
-      type: Number,
-      default: 0,
-    },
-    max: {
-      type: Number,
-      default: 9999,
-    },
-    rules: {
-      type: Array,
-      default: () => [],
-    },
-    step: {
-      type: Number,
-      default: 1,
-    },
-    modelValue: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, context) {
-    const quantity = computed({
-      get: () => {
-        return Number(props.modelValue);
-      },
-      set: (val) => {
-        context.emit("update:modelValue", val);
-      },
-    });
-
-    return {
-      quantity,
-    };
-  },
-});
-</script>

frontend/components/global/LanguageDialog.vue

@@ -9,6 +9,7 @@
       <v-autocomplete
         v-model="selectedLocale"
         :items="locales"
+        :custom-filter="normalizeFilter"
         item-title="name"
         item-value="value"
         class="my-3"
@@ -44,6 +45,7 @@
 
 <script lang="ts">
 import { useLocales } from "~/composables/use-locales";
+import { normalizeFilter } from "~/composables/use-utils";
 
 export default defineNuxtComponent({
   props: {
@@ -83,6 +85,7 @@ export default defineNuxtComponent({
       locale,
       selectedLocale,
       onLocaleSelect,
+      normalizeFilter,
     };
   },
 });

frontend/components/global/SafeMarkdown.vue

@@ -7,6 +7,10 @@
 import DOMPurify from "isomorphic-dompurify";
 import { marked } from "marked";
 
+enum DOMPurifyHook {
+  UponSanitizeAttribute = "uponSanitizeAttribute",
+}
+
 export default defineNuxtComponent({
   props: {
     source: {
@@ -15,26 +19,42 @@ export default defineNuxtComponent({
     },
   },
   setup(props) {
+    const ALLOWED_STYLE_TAGS = [
+      "background-color", "color", "font-style", "font-weight", "text-decoration", "text-align",
+    ];
+
     function sanitizeMarkdown(rawHtml: string | null | undefined): string {
       if (!rawHtml) {
         return "";
       }
 
+      DOMPurify.addHook(DOMPurifyHook.UponSanitizeAttribute, (node, data) => {
+        if (data.attrName === "style") {
+          const styles = data.attrValue.split(";").filter((style) => {
+            const [property] = style.split(":");
+            return ALLOWED_STYLE_TAGS.includes(property.trim().toLowerCase());
+          });
+          data.attrValue = styles.join(";");
+        }
+      });
+
       const sanitized = DOMPurify.sanitize(rawHtml, {
-        // List based on
-        // https://support.zendesk.com/hc/en-us/articles/4408824584602-Allowing-unsafe-HTML-in-help-center-articles
         ALLOWED_TAGS: [
           "strong", "em", "b", "i", "u", "p", "code", "pre", "samp", "kbd", "var", "sub", "sup", "dfn", "cite",
           "small", "address", "hr", "br", "id", "div", "span", "h1", "h2", "h3", "h4", "h5", "h6",
           "ul", "ol", "li", "dl", "dt", "dd", "abbr", "a", "img", "blockquote", "iframe",
           "del", "ins", "table", "thead", "tbody", "tfoot", "tr", "th", "td", "colgroup",
         ],
-        ADD_ATTR: [
+        ALLOWED_ATTR: [
           "href", "src", "alt", "height", "width", "class", "allow", "title", "allowfullscreen", "frameborder",
-          "scrolling", "cite", "datetime", "name", "abbr", "target", "border",
+          "scrolling", "cite", "datetime", "name", "abbr", "target", "border", "start", "style",
         ],
       });
 
+      Object.values(DOMPurifyHook).forEach((hook) => {
+        DOMPurify.removeHook(hook);
+      });
+
       return sanitized;
     }
 

frontend/composables/partials/use-actions-factory.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, test, vi } from "vitest";
+import { ref } from "vue";
+import { useStoreActions } from "./use-actions-factory";
+import type { BaseCRUDAPI } from "~/lib/api/base/base-clients";
+
+describe("useStoreActions", () => {
+  const mockApi = {
+    getAll: vi.fn(),
+    createOne: vi.fn(),
+    updateOne: vi.fn(),
+    deleteOne: vi.fn(),
+  } as unknown as BaseCRUDAPI<unknown, unknown, unknown>;
+
+  const mockStore = ref([]);
+  const mockLoading = ref(false);
+
+  test("deleteMany calls deleteOne for each ID and refreshes once", async () => {
+    const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading);
+
+    mockApi.deleteOne = vi.fn().mockResolvedValue({ response: { data: {} } });
+    mockApi.getAll = vi.fn().mockResolvedValue({ data: { items: [] } });
+
+    const ids = ["1", "2", "3"];
+    await actions.deleteMany(ids);
+
+    expect(mockApi.deleteOne).toHaveBeenCalledTimes(3);
+    expect(mockApi.deleteOne).toHaveBeenCalledWith("1");
+    expect(mockApi.deleteOne).toHaveBeenCalledWith("2");
+    expect(mockApi.deleteOne).toHaveBeenCalledWith("3");
+
+    expect(mockApi.getAll).toHaveBeenCalledTimes(1);
+  });
+
+  test("deleteMany handles empty array", async () => {
+    const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading);
+
+    mockApi.deleteOne = vi.fn();
+    mockApi.getAll = vi.fn().mockResolvedValue({ data: { items: [] } });
+
+    await actions.deleteMany([]);
+
+    expect(mockApi.deleteOne).not.toHaveBeenCalled();
+    expect(mockApi.getAll).toHaveBeenCalledTimes(1);
+  });
+
+  test("deleteMany sets loading state", async () => {
+    const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading);
+
+    mockApi.deleteOne = vi.fn().mockResolvedValue({});
+    mockApi.getAll = vi.fn().mockResolvedValue({ data: { items: [] } });
+
+    const promise = actions.deleteMany(["1"]);
+    expect(mockLoading.value).toBe(true);
+
+    await promise;
+    expect(mockLoading.value).toBe(false);
+  });
+});

frontend/composables/partials/use-actions-factory.ts

@@ -12,6 +12,7 @@ interface StoreActions<T extends BoundT> extends ReadOnlyStoreActions<T> {
   createOne(createData: T): Promise<T | null>;
   updateOne(updateData: T): Promise<T | null>;
   deleteOne(id: string | number): Promise<T | null>;
+  deleteMany(ids: (string | number)[]): Promise<void>;
 }
 
 /**
@@ -165,11 +166,23 @@ export function useStoreActions<T extends BoundT>(
     return response?.data || null;
   }
 
+  async function deleteMany(ids: (string | number)[]) {
+    loading.value = true;
+    for (const id of ids) {
+      await api.deleteOne(id);
+    }
+    if (allRef?.value) {
+      await refresh();
+    }
+    loading.value = false;
+  }
+
   return {
     getAll,
     refresh,
     createOne,
     updateOne,
     deleteOne,
+    deleteMany,
   };
 }

frontend/composables/partials/use-store-factory.ts

@@ -52,7 +52,7 @@ export const useStore = function <T extends BoundT>(
       return await storeActions.refresh(1, -1, params);
     },
     flushStore() {
-      store = ref([]);
+      store.value = [];
     },
   };
 

frontend/composables/recipe-page/shared-state.ts

@@ -165,14 +165,14 @@ export function clearPageState(slug: string) {
 }
 
 /**
- * usePageUser provides a wrapper around $auth that provides a type-safe way to
+ * usePageUser provides a wrapper around auth that provides a type-safe way to
  * access the UserOut type from the context. If no user is logged in then an empty
  * object with all properties set to their zero value is returned.
  */
 export function usePageUser(): { user: UserOut } {
-  const $auth = useMealieAuth();
+  const auth = useMealieAuth();
 
-  if (!$auth.user.value) {
+  if (!auth.user.value) {
     return {
       user: {
         id: "",
@@ -188,5 +188,5 @@ export function usePageUser(): { user: UserOut } {
     };
   }
 
-  return { user: $auth.user.value };
+  return { user: auth.user.value };
 }

frontend/composables/recipe-page/use-extract-ingredient-references.test.ts

@@ -1,60 +1,82 @@
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, vi, beforeEach } from "vitest";
 import { useExtractIngredientReferences } from "./use-extract-ingredient-references";
+import { useLocales } from "../use-locales";
+
+vi.mock("../use-locales");
 
 const punctuationMarks = ["*", "?", "/", "!", "**", "&", "."];
 
 describe("test use extract ingredient references", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useLocales).mockReturnValue({
+      locales: [{ value: "en-US", pluralFoodHandling: "without-unit" }],
+      locale: { value: "en-US", pluralFoodHandling: "without-unit" },
+    } as any);
+  });
+
   test("when text empty return empty", () => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "", true);
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "");
     expect(result).toStrictEqual(new Set());
   });
 
   test("when and ingredient matches exactly and has a reference id, return the referenceId", () => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onion", true);
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onion");
 
     expect(result).toEqual(new Set(["123"]));
   });
 
   test.each(punctuationMarks)("when ingredient is suffixed by punctuation, return the referenceId", (suffix) => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onion" + suffix, true);
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onion" + suffix);
 
     expect(result).toEqual(new Set(["123"]));
   });
 
   test.each(punctuationMarks)("when ingredient is prefixed by punctuation, return the referenceId", (prefix) => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing " + prefix + "Onion", true);
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing " + prefix + "Onion");
     expect(result).toEqual(new Set(["123"]));
   });
 
   test("when ingredient is first on a multiline, return the referenceId", () => {
     const multilineSting = "lksjdlk\nOnion";
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], multilineSting, true);
+
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], multilineSting);
     expect(result).toEqual(new Set(["123"]));
   });
 
   test("when the ingredient matches partially exactly and has a reference id, return the referenceId", () => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onions", true);
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onions");
     expect(result).toEqual(new Set(["123"]));
   });
 
   test("when the ingredient matches with different casing and has a reference id, return the referenceId", () => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing oNions", true);
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing oNions");
     expect(result).toEqual(new Set(["123"]));
   });
 
   test("when no ingredients, return empty", () => {
-    const result = useExtractIngredientReferences([], [], "A sentence containing oNions", true);
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([], [], "A sentence containing oNions");
     expect(result).toEqual(new Set());
   });
 
   test("when and ingredient matches but in the existing referenceIds, do not return the referenceId", () => {
-    const result = useExtractIngredientReferences([{ note: "Onion", referenceId: "123" }], ["123"], "A sentence containing Onion", true);
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onion", referenceId: "123" }], ["123"], "A sentence containing Onion");
 
     expect(result).toEqual(new Set());
   });
 
   test("when an word is 2 letter of shorter, it is ignored", () => {
-    const result = useExtractIngredientReferences([{ note: "Onion", referenceId: "123" }], [], "A sentence containing On", true);
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onion", referenceId: "123" }], [], "A sentence containing On");
 
     expect(result).toEqual(new Set());
   });

frontend/composables/recipe-page/use-extract-ingredient-references.ts

@@ -1,5 +1,5 @@
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
-import { parseIngredientText } from "~/composables/recipes";
+import { useIngredientTextParser } from "~/composables/recipes";
 
 function normalize(word: string): string {
   let normalizing = word;
@@ -18,11 +18,6 @@ function removeStartingPunctuation(word: string): string {
   return word.replace(punctuationAtBeginning, "");
 }
 
-function ingredientMatchesWord(ingredient: RecipeIngredient, word: string) {
-  const searchText = parseIngredientText(ingredient);
-  return searchText.toLowerCase().includes(word.toLowerCase());
-}
-
 function isBlackListedWord(word: string) {
   // Ignore matching blacklisted words when auto-linking - This is kind of a cludgey implementation. We're blacklisting common words but
   // other common phrases trigger false positives and I'm not sure how else to approach this. In the future I maybe look at looking directly
@@ -39,20 +34,33 @@ function isBlackListedWord(word: string) {
   return blackListedText.includes(word) || word.match(blackListedRegexMatch);
 }
 
-export function useExtractIngredientReferences(recipeIngredients: RecipeIngredient[], activeRefs: string[], text: string): Set<string> {
-  const availableIngredients = recipeIngredients
-    .filter(ingredient => ingredient.referenceId !== undefined)
-    .filter(ingredient => !activeRefs.includes(ingredient.referenceId as string));
+export function useExtractIngredientReferences() {
+  const { parseIngredientText } = useIngredientTextParser();
 
-  const allMatchedIngredientIds: string[] = text
-    .toLowerCase()
-    .split(/\s/)
-    .map(normalize)
-    .filter(word => word.length > 2)
-    .filter(word => !isBlackListedWord(word))
-    .flatMap(word => availableIngredients.filter(ingredient => ingredientMatchesWord(ingredient, word)))
-    .map(ingredient => ingredient.referenceId as string);
-  //  deduplicate
+  function extractIngredientReferences(recipeIngredients: RecipeIngredient[], activeRefs: string[], text: string): Set<string> {
+    function ingredientMatchesWord(ingredient: RecipeIngredient, word: string) {
+      const searchText = parseIngredientText(ingredient);
+      return searchText.toLowerCase().includes(word.toLowerCase());
+    }
 
-  return new Set<string>(allMatchedIngredientIds);
+    const availableIngredients = recipeIngredients
+      .filter(ingredient => ingredient.referenceId !== undefined)
+      .filter(ingredient => !activeRefs.includes(ingredient.referenceId as string));
+
+    const allMatchedIngredientIds: string[] = text
+      .toLowerCase()
+      .split(/\s/)
+      .map(normalize)
+      .filter(word => word.length > 2)
+      .filter(word => !isBlackListedWord(word))
+      .flatMap(word => availableIngredients.filter(ingredient => ingredientMatchesWord(ingredient, word)))
+      .map(ingredient => ingredient.referenceId as string);
+    //  deduplicate
+
+    return new Set<string>(allMatchedIngredientIds);
+  }
+
+  return {
+    extractIngredientReferences,
+  };
 }

frontend/composables/recipes/index.ts

@@ -1,7 +1,7 @@
 export { useFraction } from "./use-fraction";
 export { useRecipe } from "./use-recipe";
 export { useRecipes, recentRecipes, allRecipes, useLazyRecipes } from "./use-recipes";
-export { parseIngredientText, useParsedIngredientText } from "./use-recipe-ingredients";
+export { useIngredientTextParser } from "./use-recipe-ingredients";
 export { useNutritionLabels } from "./use-recipe-nutrition";
 export { useTools } from "./use-recipe-tools";
 export { useRecipePermissions } from "./use-recipe-permissions";

frontend/composables/recipes/use-recipe-ingredients.test.ts

@@ -1,8 +1,21 @@
-import { describe, test, expect } from "vitest";
-import { parseIngredientText } from "./use-recipe-ingredients";
+import { describe, test, expect, vi, beforeEach } from "vitest";
+import { useIngredientTextParser } from "./use-recipe-ingredients";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
+import { useLocales } from "../use-locales";
+
+vi.mock("../use-locales");
+
+let parseIngredientText: (ingredient: RecipeIngredient, scale?: number, includeFormating?: boolean) => string;
+
+describe("parseIngredientText", () => {
+  beforeEach(() => {
+    vi.mocked(useLocales).mockReturnValue({
+      locales: [{ value: "en-US", pluralFoodHandling: "always" }],
+      locale: { value: "en-US", pluralFoodHandling: "always" },
+    } as any);
+    ({ parseIngredientText } = useIngredientTextParser());
+  });
 
-describe(parseIngredientText.name, () => {
   const createRecipeIngredient = (overrides: Partial<RecipeIngredient>): RecipeIngredient => ({
     quantity: 1,
     food: {
@@ -128,4 +141,98 @@ describe(parseIngredientText.name, () => {
 
     expect(parseIngredientText(ingredient, 2)).toEqual("2 tablespoons diced onions");
   });
+
+  test("plural handling: 'always' strategy uses plural food with unit", () => {
+    vi.mocked(useLocales).mockReturnValue({
+      locales: [{ value: "en-US", pluralFoodHandling: "always" }],
+      locale: { value: "en-US", pluralFoodHandling: "always" },
+    } as any);
+    const { parseIngredientText } = useIngredientTextParser();
+
+    const ingredient = createRecipeIngredient({
+      quantity: 2,
+      unit: { id: "1", name: "tablespoon", pluralName: "tablespoons", useAbbreviation: false },
+      food: { id: "1", name: "diced onion", pluralName: "diced onions" },
+    });
+
+    expect(parseIngredientText(ingredient)).toEqual("2 tablespoons diced onions");
+  });
+
+  test("plural handling: 'never' strategy never uses plural food", () => {
+    vi.mocked(useLocales).mockReturnValue({
+      locales: [{ value: "en-US", pluralFoodHandling: "never" }],
+      locale: { value: "en-US", pluralFoodHandling: "never" },
+    } as any);
+    const { parseIngredientText } = useIngredientTextParser();
+
+    const ingredient = createRecipeIngredient({
+      quantity: 2,
+      unit: { id: "1", name: "tablespoon", pluralName: "tablespoons", useAbbreviation: false },
+      food: { id: "1", name: "diced onion", pluralName: "diced onions" },
+    });
+
+    expect(parseIngredientText(ingredient)).toEqual("2 tablespoons diced onion");
+  });
+
+  test("plural handling: 'without-unit' strategy uses plural food without unit", () => {
+    vi.mocked(useLocales).mockReturnValue({
+      locales: [{ value: "en-US", pluralFoodHandling: "without-unit" }],
+      locale: { value: "en-US", pluralFoodHandling: "without-unit" },
+    } as any);
+    const { parseIngredientText } = useIngredientTextParser();
+
+    const ingredient = createRecipeIngredient({
+      quantity: 2,
+      food: { id: "1", name: "diced onion", pluralName: "diced onions" },
+      unit: undefined,
+    });
+
+    expect(parseIngredientText(ingredient)).toEqual("2 diced onions");
+  });
+
+  test("plural handling: 'without-unit' strategy uses singular food with unit", () => {
+    vi.mocked(useLocales).mockReturnValue({
+      locales: [{ value: "en-US", pluralFoodHandling: "without-unit" }],
+      locale: { value: "en-US", pluralFoodHandling: "without-unit" },
+    } as any);
+    const { parseIngredientText } = useIngredientTextParser();
+
+    const ingredient = createRecipeIngredient({
+      quantity: 2,
+      unit: { id: "1", name: "tablespoon", pluralName: "tablespoons", useAbbreviation: false },
+      food: { id: "1", name: "diced onion", pluralName: "diced onions" },
+    });
+
+    expect(parseIngredientText(ingredient)).toEqual("2 tablespoons diced onion");
+  });
+
+  test("decimal below minimum precision shows < 0.001", () => {
+    const ingredient = createRecipeIngredient({
+      quantity: 0.0001,
+      unit: { id: "1", name: "cup", useAbbreviation: false },
+      food: { id: "1", name: "salt" },
+    });
+
+    expect(parseIngredientText(ingredient)).toEqual("&lt; 0.001 cup salt");
+  });
+
+  test("fraction below minimum denominator shows < 1/10", () => {
+    const ingredient = createRecipeIngredient({
+      quantity: 0.05,
+      unit: { id: "1", name: "cup", fraction: true, useAbbreviation: false },
+      food: { id: "1", name: "salt" },
+    });
+
+    expect(parseIngredientText(ingredient)).toEqual("&lt; <sup>1</sup><span>⁄</span><sub>10</sub> cup salt");
+  });
+
+  test("fraction below minimum denominator without formatting shows < 1/10", () => {
+    const ingredient = createRecipeIngredient({
+      quantity: 0.05,
+      unit: { id: "1", name: "cup", fraction: true, useAbbreviation: false },
+      food: { id: "1", name: "salt" },
+    });
+
+    expect(parseIngredientText(ingredient, 1, false)).toEqual("&lt; 1/10 cup salt");
+  });
 });

frontend/composables/recipes/use-recipe-ingredients.ts

@@ -1,9 +1,13 @@
 import DOMPurify from "isomorphic-dompurify";
 import { useFraction } from "./use-fraction";
+import { useLocales } from "../use-locales";
 import type { CreateIngredientFood, CreateIngredientUnit, IngredientFood, IngredientUnit, Recipe, RecipeIngredient } from "~/lib/api/types/recipe";
 
 const { frac } = useFraction();
 
+const FRAC_MIN_DENOM = 10;
+const DECIMAL_PRECISION = 3;
+
 export function sanitizeIngredientHTML(rawHtml: string) {
   return DOMPurify.sanitize(rawHtml, {
     USE_PROFILES: { html: true },
@@ -56,47 +60,90 @@ type ParsedIngredientText = {
   recipeLink?: string;
 };
 
-export function useParsedIngredientText(ingredient: RecipeIngredient, scale = 1, includeFormating = true, groupSlug?: string): ParsedIngredientText {
-  const { quantity, food, unit, note, referencedRecipe } = ingredient;
-  const usePluralUnit = quantity !== undefined && ((quantity || 0) * scale > 1 || (quantity || 0) * scale === 0);
-  const usePluralFood = (!quantity) || quantity * scale > 1;
-
-  let returnQty = "";
-
-  // casting to number is required as sometimes quantity is a string
-  if (quantity && Number(quantity) !== 0) {
-    if (unit && !unit.fraction) {
-      returnQty = Number((quantity * scale).toPrecision(3)).toString();
-    }
-    else {
-      const fraction = frac(quantity * scale, 10, true);
-      if (fraction[0] !== undefined && fraction[0] > 0) {
-        returnQty += fraction[0];
-      }
-
-      if (fraction[1] > 0) {
-        returnQty += includeFormating
-          ? `<sup>${fraction[1]}</sup><span>&frasl;</span><sub>${fraction[2]}</sub>`
-          : ` ${fraction[1]}/${fraction[2]}`;
-      }
-    }
+function shouldUsePluralFood(quantity: number, hasUnit: boolean, pluralFoodHandling: string): boolean {
+  if (quantity && quantity <= 1) {
+    return false;
   }
 
-  const unitName = useUnitName(unit || undefined, usePluralUnit);
-  const ingName = referencedRecipe ? referencedRecipe.name || "" : useFoodName(food || undefined, usePluralFood);
+  switch (pluralFoodHandling) {
+    case "always":
+      return true;
+    case "without-unit":
+      return !(quantity && hasUnit);
+    case "never":
+      return false;
+
+    default:
+      // same as without-unit
+      return !(quantity && hasUnit);
+  }
+}
+
+export function useIngredientTextParser() {
+  const { locales, locale } = useLocales();
+
+  function useParsedIngredientText(ingredient: RecipeIngredient, scale = 1, includeFormating = true, groupSlug?: string): ParsedIngredientText {
+    const filteredLocales = locales.filter(lc => lc.value === locale.value);
+    const pluralFoodHandling = filteredLocales.length ? filteredLocales[0].pluralFoodHandling : "without-unit";
+
+    const { quantity, food, unit, note, referencedRecipe } = ingredient;
+    const usePluralUnit = quantity !== undefined && ((quantity || 0) * scale > 1 || (quantity || 0) * scale === 0);
+    const usePluralFood = shouldUsePluralFood((quantity || 0) * scale, !!unit, pluralFoodHandling);
+
+    let returnQty = "";
+
+    // casting to number is required as sometimes quantity is a string
+    if (quantity && Number(quantity) !== 0) {
+      const scaledQuantity = Number((quantity * scale));
+
+      if (unit && !unit.fraction) {
+        const minVal = 10 ** -DECIMAL_PRECISION;
+        returnQty = scaledQuantity >= minVal
+          ? Number(scaledQuantity.toPrecision(DECIMAL_PRECISION)).toString()
+          : `< ${minVal}`;
+      }
+      else {
+        const minVal = 1 / FRAC_MIN_DENOM;
+        const isUnderMinVal = !(scaledQuantity >= minVal);
+
+        const fraction = !isUnderMinVal ? frac(scaledQuantity, FRAC_MIN_DENOM, true) : [0, 1, FRAC_MIN_DENOM];
+        if (fraction[0] !== undefined && fraction[0] > 0) {
+          returnQty += fraction[0];
+        }
+
+        if (fraction[1] > 0) {
+          returnQty += includeFormating
+            ? `<sup>${fraction[1]}</sup><span>&frasl;</span><sub>${fraction[2]}</sub>`
+            : ` ${fraction[1]}/${fraction[2]}`;
+        }
+
+        if (isUnderMinVal) {
+          returnQty = `< ${returnQty}`;
+        }
+      }
+    }
+
+    const unitName = useUnitName(unit || undefined, usePluralUnit);
+    const ingName = referencedRecipe ? referencedRecipe.name || "" : useFoodName(food || undefined, usePluralFood);
+
+    return {
+      quantity: returnQty ? sanitizeIngredientHTML(returnQty) : undefined,
+      unit: unitName && quantity ? sanitizeIngredientHTML(unitName) : undefined,
+      name: ingName ? sanitizeIngredientHTML(ingName) : undefined,
+      note: note ? sanitizeIngredientHTML(note) : undefined,
+      recipeLink: useRecipeLink(referencedRecipe || undefined, groupSlug),
+    };
+  };
+
+  function parseIngredientText(ingredient: RecipeIngredient, scale = 1, includeFormating = true): string {
+    const { quantity, unit, name, note } = useParsedIngredientText(ingredient, scale, includeFormating);
+
+    const text = `${quantity || ""} ${unit || ""} ${name || ""} ${note || ""}`.replace(/ {2,}/g, " ").trim();
+    return sanitizeIngredientHTML(text);
+  };
 
   return {
-    quantity: returnQty ? sanitizeIngredientHTML(returnQty) : undefined,
-    unit: unitName && quantity ? sanitizeIngredientHTML(unitName) : undefined,
-    name: ingName ? sanitizeIngredientHTML(ingName) : undefined,
-    note: note ? sanitizeIngredientHTML(note) : undefined,
-    recipeLink: useRecipeLink(referencedRecipe || undefined, groupSlug),
+    useParsedIngredientText,
+    parseIngredientText,
   };
 }
-
-export function parseIngredientText(ingredient: RecipeIngredient, scale = 1, includeFormating = true): string {
-  const { quantity, unit, name, note } = useParsedIngredientText(ingredient, scale, includeFormating);
-
-  const text = `${quantity || ""} ${unit || ""} ${name || ""} ${note || ""}`.replace(/ {2,}/g, " ").trim();
-  return sanitizeIngredientHTML(text);
-}

frontend/composables/store/index.ts

@@ -1,7 +1,31 @@
-export { useCategoryStore, usePublicCategoryStore, useCategoryData } from "./use-category-store";
-export { useFoodStore, usePublicFoodStore, useFoodData } from "./use-food-store";
-export { useHouseholdStore, usePublicHouseholdStore } from "./use-household-store";
-export { useLabelStore, useLabelData } from "./use-label-store";
-export { useTagStore, usePublicTagStore, useTagData } from "./use-tag-store";
-export { useToolStore, usePublicToolStore, useToolData } from "./use-tool-store";
-export { useUnitStore, useUnitData } from "./use-unit-store";
+import { resetCategoryStore } from "./use-category-store";
+import { resetFoodStore } from "./use-food-store";
+import { resetHouseholdStore } from "./use-household-store";
+import { resetLabelStore } from "./use-label-store";
+import { resetTagStore } from "./use-tag-store";
+import { resetToolStore } from "./use-tool-store";
+import { resetUnitStore } from "./use-unit-store";
+import { resetCookbookStore } from "./use-cookbook-store";
+import { resetUserStore } from "./use-user-store";
+
+export { useCategoryStore, usePublicCategoryStore, useCategoryData, resetCategoryStore } from "./use-category-store";
+export { useFoodStore, usePublicFoodStore, useFoodData, resetFoodStore } from "./use-food-store";
+export { useHouseholdStore, usePublicHouseholdStore, resetHouseholdStore } from "./use-household-store";
+export { useLabelStore, useLabelData, resetLabelStore } from "./use-label-store";
+export { useTagStore, usePublicTagStore, useTagData, resetTagStore } from "./use-tag-store";
+export { useToolStore, usePublicToolStore, useToolData, resetToolStore } from "./use-tool-store";
+export { useUnitStore, useUnitData, resetUnitStore } from "./use-unit-store";
+export { useCookbookStore, usePublicCookbookStore, resetCookbookStore } from "./use-cookbook-store";
+export { useUserStore, resetUserStore } from "./use-user-store";
+
+export function clearAllStores() {
+  resetCategoryStore();
+  resetFoodStore();
+  resetHouseholdStore();
+  resetLabelStore();
+  resetTagStore();
+  resetToolStore();
+  resetUnitStore();
+  resetCookbookStore();
+  resetUserStore();
+}

frontend/composables/store/use-category-store.ts

@@ -7,6 +7,12 @@ const store: Ref<RecipeCategory[]> = ref([]);
 const loading = ref(false);
 const publicLoading = ref(false);
 
+export function resetCategoryStore() {
+  store.value = [];
+  loading.value = false;
+  publicLoading.value = false;
+}
+
 export const useCategoryData = function () {
   return useData<RecipeCategory>({
     id: "",

frontend/composables/store/use-cookbook-store.ts

@@ -7,6 +7,12 @@ const cookbooks: Ref<ReadCookBook[]> = ref([]);
 const loading = ref(false);
 const publicLoading = ref(false);
 
+export function resetCookbookStore() {
+  cookbooks.value = [];
+  loading.value = false;
+  publicLoading.value = false;
+}
+
 export const useCookbookStore = function (i18n?: Composer) {
   const api = useUserApi(i18n);
   const store = useStore<ReadCookBook>("cookbook", cookbooks, loading, api.cookbooks);

frontend/composables/store/use-food-store.ts

@@ -7,6 +7,12 @@ const store: Ref<IngredientFood[]> = ref([]);
 const loading = ref(false);
 const publicLoading = ref(false);
 
+export function resetFoodStore() {
+  store.value = [];
+  loading.value = false;
+  publicLoading.value = false;
+}
+
 export const useFoodData = function () {
   return useData<IngredientFood>({
     id: "",

frontend/composables/store/use-household-store.ts

@@ -7,6 +7,12 @@ const store: Ref<HouseholdSummary[]> = ref([]);
 const loading = ref(false);
 const publicLoading = ref(false);
 
+export function resetHouseholdStore() {
+  store.value = [];
+  loading.value = false;
+  publicLoading.value = false;
+}
+
 export const useHouseholdStore = function (i18n?: Composer) {
   const api = useUserApi(i18n);
   return useReadOnlyStore<HouseholdSummary>("household", store, loading, api.households);

frontend/composables/store/use-label-store.ts

@@ -6,6 +6,11 @@ import { useUserApi } from "~/composables/api";
 const store: Ref<MultiPurposeLabelOut[]> = ref([]);
 const loading = ref(false);
 
+export function resetLabelStore() {
+  store.value = [];
+  loading.value = false;
+}
+
 export const useLabelData = function () {
   return useData<MultiPurposeLabelOut>({
     groupId: "",

frontend/composables/store/use-tag-store.ts

@@ -7,6 +7,12 @@ const store: Ref<RecipeTag[]> = ref([]);
 const loading = ref(false);
 const publicLoading = ref(false);
 
+export function resetTagStore() {
+  store.value = [];
+  loading.value = false;
+  publicLoading.value = false;
+}
+
 export const useTagData = function () {
   return useData<RecipeTag>({
     id: "",

frontend/composables/store/use-tool-store.ts

@@ -11,6 +11,12 @@ const store: Ref<RecipeTool[]> = ref([]);
 const loading = ref(false);
 const publicLoading = ref(false);
 
+export function resetToolStore() {
+  store.value = [];
+  loading.value = false;
+  publicLoading.value = false;
+}
+
 export const useToolData = function () {
   return useData<RecipeToolWithOnHand>({
     id: "",

frontend/composables/store/use-unit-store.ts

@@ -6,6 +6,11 @@ import { useUserApi } from "~/composables/api";
 const store: Ref<IngredientUnit[]> = ref([]);
 const loading = ref(false);
 
+export function resetUnitStore() {
+  store.value = [];
+  loading.value = false;
+}
+
 export const useUnitData = function () {
   return useData<IngredientUnit>({
     id: "",