fix(deps): Bump various frontend deps (#6774)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Michael Genson <genson.michael@gmail.com>

.devcontainer/Dockerfile

@@ -8,28 +8,14 @@ FROM mcr.microsoft.com/devcontainers/python:${VARIANT}
 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
 
-# install poetry - respects $POETRY_VERSION & $POETRY_HOME
-
 RUN echo "export PROMPT_COMMAND='history -a'" >> /home/vscode/.bashrc \
     && echo "export HISTFILE=~/commandhistory/.bash_history" >> /home/vscode/.bashrc \
     && chown vscode:vscode -R /home/vscode/
 
 RUN npm install -g @go-task/cli
+RUN npm install -g json-schema-to-typescript
 
-ENV PYTHONUNBUFFERED=1 \
-    PYTHONDONTWRITEBYTECODE=1 \
-    PIP_NO_CACHE_DIR=off \
-    PIP_DISABLE_PIP_VERSION_CHECK=on \
-    PIP_DEFAULT_TIMEOUT=100 \
-    POETRY_HOME="/opt/poetry" \
-    POETRY_VIRTUALENVS_IN_PROJECT=true
-
-# prepend poetry and venv to path
-ENV PATH="$POETRY_HOME/bin:$PATH"
-
-RUN curl -sSL https://install.python-poetry.org | python3 -
-# RUN poetry config virtualenvs.create false
-
+# Install additional OS packages
 RUN apt-get update \
     && apt-get install --no-install-recommends -y \
     curl \
@@ -39,5 +25,9 @@ RUN apt-get update \
     libsasl2-dev libldap2-dev libssl-dev \
     gnupg gnupg2 gnupg1
 
-# create directory used for Docker Secrets
+# Install uv
+RUN pip install uv
+ENV UV_LINK_MODE=copy
+
+# Create directory for Docker Secrets
 RUN mkdir -p /run/secrets

.devcontainer/devcontainer.json

@@ -11,7 +11,7 @@
       // Use -bullseye variants on local on arm64/Apple Silicon.
       "VARIANT": "3.12-bullseye",
       // Options
-      "NODE_VERSION": "20"
+      "NODE_VERSION": "22"
     }
   },
   "mounts": [
@@ -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,13 +41,14 @@
   // 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
   ],
   // Use 'onCreateCommand' to run commands at the end of container creation.
   // Use 'postCreateCommand' to run commands after the container is created.
-  "onCreateCommand": "sudo chown -R vscode:vscode /workspaces/mealie/frontend/node_modules /home/vscode/commandhistory && task setup",
+  "onCreateCommand": "sudo chown -R vscode:vscode /workspaces/mealie/frontend/node_modules /home/vscode/commandhistory && task setup --force",
   // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
   "remoteUser": "vscode",
   "features": {
@@ -56,5 +56,8 @@
       "dockerDashComposeVersion": "v2"
     }
   },
-  "appPort": 3000
+  "appPort": [
+    "3000:3000",
+    "9000:9000"
+  ]
 }

.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/build-package.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup node env 🏗
         uses: actions/setup-node@v4.0.0
         with:
-          node-version: 20
+          node-version: 22
           check-latest: true
 
       - name: Get yarn cache directory path 🛠
@@ -70,13 +70,8 @@ jobs:
         with:
           python-version: "3.12"
 
-      - name: Install Poetry
-        uses: snok/install-poetry@v1
-        with:
-          virtualenvs-create: true
-          virtualenvs-in-project: true
-          plugins: |
-            poetry-plugin-export
+      - name: Install uv
+        run: pip install uv
 
       - name: Retrieve built frontend
         uses: actions/download-artifact@v4

.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/e2e.yml

@@ -13,7 +13,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
         cache-dependency-path: ./tests/e2e/yarn.lock
     - name: Set up Docker Buildx

.github/workflows/locale-sync.yml

@@ -25,24 +25,21 @@ jobs:
         with:
           python-version: "3.12"
 
-      - name: Install Poetry
-        uses: snok/install-poetry@v1
-        with:
-          virtualenvs-create: true
-          virtualenvs-in-project: true
+      - name: Install uv
+        run: pip install uv
 
       - name: Load cached venv
-        id: cached-poetry-dependencies
+        id: cached-python-dependencies
         uses: actions/cache@v4
         with:
           path: .venv
-          key: venv-${{ runner.os }}-${{ hashFiles('**/poetry.lock') }}
+          key: venv-${{ runner.os }}-${{ hashFiles('**/uv.lock') }}
 
       - name: Check venv cache
         id: cache-validate
-        if: steps.cached-poetry-dependencies.outputs.cache-hit == 'true'
+        if: steps.cached-python-dependencies.outputs.cache-hit == 'true'
         run: |
-          echo "import fastapi;print('venv good?')" > test.py && poetry run python test.py && echo "cache-hit-success=true" >> $GITHUB_OUTPUT
+          echo "import fastapi;print('venv good?')" > test.py && uv run python test.py && echo "cache-hit-success=true" >> $GITHUB_OUTPUT
           rm test.py
         continue-on-error: true
 
@@ -50,13 +47,13 @@ jobs:
         run: |
           sudo apt-get update
           sudo apt-get install libsasl2-dev libldap2-dev libssl-dev
-          poetry install
-        if: steps.cached-poetry-dependencies.outputs.cache-hit != 'true'
+          uv sync --group dev
+        if: steps.cached-python-dependencies.outputs.cache-hit != 'true'
 
       - name: Run locale generation
         run: |
           cd dev/code-generation
-          poetry run python main.py locales
+          uv run python main.py locales
         env:
           CROWDIN_API_KEY: ${{ secrets.CROWDIN_API_KEY }}
 
@@ -86,7 +83,7 @@ jobs:
 
           # Add and commit changes
           git add .
-          git commit -m "chore: automatic locale sync"
+          git commit -m "chore: crowdin locale sync"
 
           # Push the branch
           git push origin "$BRANCH_NAME"
@@ -96,9 +93,10 @@ jobs:
           # Create PR using GitHub CLI with explicit repository
           gh pr create \
             --repo "${{ github.repository }}" \
-            --title "chore: automatic locale sync" \
+            --title "chore(l10n): Crowdin locale sync" \
             --base "$BASE_BRANCH" \
             --head "$BRANCH_NAME" \
+            --label "l10n" \
             --body "## Summary
 
           Automatically generated locale updates from the weekly sync job.

.github/workflows/pull-request-lint.yml

@@ -31,6 +31,7 @@ jobs:
             deps
             auto
             l10n
+            config
           # Configure that a scope must always be provided.
           requireScope: false
           # If the PR contains one of these newline-delimited labels, the

.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/^\s*"version": "[^"]*"/"version": "${{ 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/test-backend.yml

@@ -49,24 +49,21 @@ jobs:
         with:
           python-version: "3.12"
 
-      - name: Install Poetry
-        uses: snok/install-poetry@v1
-        with:
-          virtualenvs-create: true
-          virtualenvs-in-project: true
+      - name: Install uv
+        run: pip install uv
 
       - name: Load cached venv
-        id: cached-poetry-dependencies
+        id: cached-python-dependencies
         uses: actions/cache@v4
         with:
           path: .venv
-          key: venv-${{ runner.os }}-${{ hashFiles('**/poetry.lock') }}
+          key: venv-${{ runner.os }}-${{ hashFiles('**/uv.lock') }}
 
       - name: Check venv cache
         id: cache-validate
-        if: steps.cached-poetry-dependencies.outputs.cache-hit == 'true'
+        if: steps.cached-python-dependencies.outputs.cache-hit == 'true'
         run: |
-          echo "import fastapi;print('venv good?')" > test.py && poetry run python test.py && echo "cache-hit-success=true" >> $GITHUB_OUTPUT
+          echo "import fastapi;print('venv good?')" > test.py && uv run python test.py && echo "cache-hit-success=true" >> $GITHUB_OUTPUT
           rm test.py
         continue-on-error: true
 
@@ -74,13 +71,12 @@ jobs:
         run: |
           sudo apt-get update
           sudo apt-get install libsasl2-dev libldap2-dev libssl-dev
-          poetry install
-          poetry add "psycopg2-binary==2.9.9"
-        if: steps.cached-poetry-dependencies.outputs.cache-hit != 'true' || steps.cache-validate.outputs.cache-hit-success != 'true'
+          uv sync --group dev --extra pgsql
+        if: steps.cached-python-dependencies.outputs.cache-hit != 'true' || steps.cache-validate.outputs.cache-hit-success != 'true'
 
       - name: Formatting (Ruff)
         run: |
-          poetry run ruff format . --check
+          uv run ruff format . --check
 
       - name: Lint (Ruff)
         run: |

.github/workflows/test-frontend.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Setup node env 🏗
         uses: actions/setup-node@v4.0.0
         with:
-          node-version: 20
+          node-version: 22
           check-latest: true
 
       - name: Get yarn cache directory path 🛠
@@ -39,7 +39,7 @@ jobs:
         working-directory: "frontend"
 
       - name: Run linter 👀
-        run: yarn lint
+        run: yarn lint --max-warnings=0
         working-directory: "frontend"
 
       - name: Run tests 🧪

.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/*
 

.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.12.9
+    rev: v0.14.10
     hooks:
       - id: ruff
       - id: ruff-format

.vscode/settings.json

@@ -55,12 +55,15 @@
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {
     "package.json": "package-lock.json, yarn.lock, .eslintrc.js, tsconfig.json, .prettierrc, .editorconfig",
-    "pyproject.toml": "poetry.lock, alembic.ini, .pylintrc",
+    "pyproject.toml": "uv.lock, alembic.ini, .pylintrc",
     "netlify.toml": "runtime.txt",
     "README.md": "LICENSE, SECURITY.md"
   },
+  "[typescript]": {
+    "editor.formatOnSave": true
+  },
   "[vue]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   "[python]": {
     "editor.formatOnSave": true,

Taskfile.yml

@@ -28,7 +28,7 @@ tasks:
   docs:gen:
     desc: runs the API documentation generator
     cmds:
-      - poetry run python dev/code-generation/gen_docs_api.py
+      - uv run python dev/code-generation/gen_docs_api.py
 
   docs:
     desc: runs the documentation server
@@ -36,7 +36,7 @@ tasks:
     deps:
       - docs:gen
     cmds:
-      - poetry run python -m mkdocs serve
+      - uv run python -m mkdocs serve
 
   setup:ui:
     desc: setup frontend dependencies
@@ -54,10 +54,10 @@ tasks:
     desc: setup python dependencies
     run: once
     cmds:
-      - poetry install --with main,dev,postgres
-      - poetry run pre-commit install
+      - uv sync --extra pgsql --group dev
+      - uv run pre-commit install
     sources:
-      - poetry.lock
+      - uv.lock
       - pyproject.toml
       - .pre-commit-config.yaml
 
@@ -70,7 +70,7 @@ tasks:
   dev:generate:
     desc: run code generators
     cmds:
-      - poetry run python dev/code-generation/main.py {{ .CLI_ARGS }}
+      - uv run python dev/code-generation/main.py {{ .CLI_ARGS }}
       - task: docs:gen
       - task: py:format
 
@@ -88,28 +88,30 @@ tasks:
       - rm -r ./dev/data/recipes/
       - rm -r ./dev/data/users/
       - rm -f ./dev/data/mealie*.db
+      - rm -f ./dev/data/mealie*.db-shm
+      - rm -f ./dev/data/mealie*.db-wal
       - rm -f ./dev/data/mealie.log
       - rm -f ./dev/data/.secret
 
   py:mypy:
     desc: runs python type checking
     cmds:
-      - poetry run mypy mealie
+      - uv run mypy mealie
 
   py:test:
     desc: runs python tests (support args after '--')
     cmds:
-      - poetry run pytest {{ .CLI_ARGS }}
+      - uv run pytest {{ .CLI_ARGS }}
 
   py:format:
     desc: runs python code formatter
     cmds:
-      - poetry run ruff format .
+      - uv run ruff format .
 
   py:lint:
     desc: runs python linter
     cmds:
-      - poetry run ruff check mealie
+      - uv run ruff check mealie
 
   py:check:
     desc: runs all linters, type checkers, and formatters
@@ -122,10 +124,10 @@ tasks:
   py:coverage:
     desc: runs python coverage and generates html report
     cmds:
-      - poetry run pytest
-      - poetry run coverage report -m
-      - poetry run coveragepy-lcov
-      - poetry run coverage html
+      - uv run pytest
+      - uv run coverage report -m
+      - uv run coveragepy-lcov
+      - uv run coverage html
       - open htmlcov/index.html
 
   py:package:copy-frontend:
@@ -145,17 +147,17 @@ tasks:
     desc: Generate requirements file to pin all packages, effectively a "pip freeze" before installation begins
     internal: true
     cmds:
-      - poetry export -n --only=main --extras=pgsql --output=dist/requirements.txt
+      - uv export --no-editable --no-emit-project --extra pgsql --format requirements-txt --output-file dist/requirements.txt
       # Include mealie in the requirements, hashing the package that was just built to ensure it's the one installed
       - echo "mealie[pgsql]=={{.MEALIE_VERSION}} \\" >> dist/requirements.txt
-      - poetry run pip hash dist/mealie-{{.MEALIE_VERSION}}-py3-none-any.whl | tail -n1 | tr -d '\n' >> dist/requirements.txt
+      - pip hash dist/mealie-{{.MEALIE_VERSION}}-py3-none-any.whl | tail -n1 | tr -d '\n' >> dist/requirements.txt
       - echo " \\" >> dist/requirements.txt
-      - poetry run pip hash dist/mealie-{{.MEALIE_VERSION}}.tar.gz | tail -n1 >> dist/requirements.txt
+      - pip hash dist/mealie-{{.MEALIE_VERSION}}.tar.gz | tail -n1 >> dist/requirements.txt
     vars:
       MEALIE_VERSION:
-         sh: poetry version --short
+         sh: python -c "import tomllib; print(tomllib.load(open('pyproject.toml', 'rb'))['project']['version'])"
     sources:
-      - poetry.lock
+      - uv.lock
       - pyproject.toml
       - dist/mealie-*.whl
       - dist/mealie-*.tar.gz
@@ -182,13 +184,13 @@ tasks:
     deps:
       - py:package:deps
     cmds:
-      - poetry build -n --output=dist
+      - uv build --out-dir dist
       - task: py:package:generate-requirements
 
   py:
     desc: runs the backend server
     cmds:
-      - poetry run python mealie/app.py
+      - uv run python mealie/app.py
 
   py:postgres:
     desc: runs the backend server configured for containerized postgres
@@ -200,12 +202,12 @@ tasks:
       POSTGRES_PORT: 5432
       POSTGRES_DB: mealie
     cmds:
-      - poetry run python mealie/app.py
+      - uv run python mealie/app.py
 
   py:migrate:
     desc: generates a new database migration file e.g. task py:migrate -- "add new column"
     cmds:
-      - poetry run alembic --config mealie/alembic/alembic.ini revision --autogenerate -m "{{ .CLI_ARGS }}"
+      - uv run alembic --config mealie/alembic/alembic.ini revision --autogenerate -m "{{ .CLI_ARGS }}"
       - task: py:format
 
   ui:build:
@@ -226,7 +228,7 @@ tasks:
     desc: runs the frontend linter
     dir: frontend
     cmds:
-      - yarn lint
+      - yarn lint --max-warnings=0
 
   ui:test:
     desc: runs the frontend tests

dev/code-generation/gen_docs_api.py

@@ -1,7 +1,8 @@
 import json
+from datetime import UTC, datetime
+from typing import Any
 
 from fastapi import FastAPI
-from freezegun import freeze_time
 
 from mealie.app import app
 from mealie.core.config import determine_data_dir
@@ -37,14 +38,43 @@ HTML_TEMPLATE = """<!-- Custom HTML site displayed as the Home chapter -->
 """
 
 HTML_PATH = DATA_DIR.parent.parent.joinpath("docs/docs/overrides/api.html")
+CONSTANT_DT = datetime(2025, 10, 24, 15, 53, 0, 0, tzinfo=UTC)
+
+
+def normalize_timestamps(s: dict[str, Any]) -> dict[str, Any]:
+    field_format = s.get("format")
+    is_timestamp = field_format in ["date-time", "date", "time"]
+    has_default = s.get("default")
+
+    if not is_timestamp:
+        for k, v in s.items():
+            if isinstance(v, dict):
+                s[k] = normalize_timestamps(v)
+            elif isinstance(v, list):
+                s[k] = [normalize_timestamps(i) if isinstance(i, dict) else i for i in v]
+
+        return s
+    elif not has_default:
+        return s
+
+    if field_format == "date-time":
+        s["default"] = CONSTANT_DT.isoformat()
+    elif field_format == "date":
+        s["default"] = CONSTANT_DT.date().isoformat()
+    elif field_format == "time":
+        s["default"] = CONSTANT_DT.time().isoformat()
+
+    return s
 
 
 def generate_api_docs(my_app: FastAPI):
+    openapi_schema = my_app.openapi()
+    openapi_schema = normalize_timestamps(openapi_schema)
+
     with open(HTML_PATH, "w") as fd:
-        text = HTML_TEMPLATE.replace("MY_SPECIFIC_TEXT", json.dumps(my_app.openapi()))
+        text = HTML_TEMPLATE.replace("MY_SPECIFIC_TEXT", json.dumps(openapi_schema))
         fd.write(text)
 
 
 if __name__ == "__main__":
-    with freeze_time("2024-01-20T17:00:55Z"):
-        generate_api_docs(app)
+    generate_api_docs(app)

dev/code-generation/gen_py_pytest_data_paths.py

@@ -1,3 +1,4 @@
+import subprocess
 from dataclasses import dataclass
 from pathlib import Path
 
@@ -105,12 +106,16 @@ def main():
     # Flatten list of lists
     all_children = [item for sublist in all_children for item in sublist]
 
+    out_path = GENERATED / "__init__.py"
     render_python_template(
         TEMPLATE,
-        GENERATED / "__init__.py",
+        out_path,
         {"children": all_children},
     )
 
+    subprocess.run(["uv", "run", "ruff", "check", str(out_path), "--fix"])
+    subprocess.run(["uv", "run", "ruff", "format", str(out_path)])
+
 
 if __name__ == "__main__":
     main()

dev/code-generation/gen_py_schema_exports.py

@@ -1,5 +1,6 @@
 import pathlib
 import re
+import subprocess
 from dataclasses import dataclass, field
 
 from utils import PROJECT_DIR, log, render_python_template
@@ -84,16 +85,23 @@ def find_modules(root: pathlib.Path) -> list[Modules]:
     return modules
 
 
-def main():
+def main() -> None:
     modules = find_modules(SCHEMA_PATH)
 
+    template_paths: list[pathlib.Path] = []
     for module in modules:
         log.debug(f"Module: {module.directory.name}")
         for file in module.files:
             log.debug(f"  File: {file.import_path}")
             log.debug(f"    Classes: [{', '.join(file.classes)}]")
 
-        render_python_template(template, module.directory / "__init__.py", {"module": module})
+        template_path = module.directory / "__init__.py"
+        template_paths.append(template_path)
+        render_python_template(template, template_path, {"module": module})
+
+    path_args = (str(p) for p in template_paths)
+    subprocess.run(["uv", "run", "ruff", "check", *path_args, "--fix"])
+    subprocess.run(["uv", "run", "ruff", "format", *path_args])
 
 
 if __name__ == "__main__":

dev/code-generation/gen_ts_locales.py

@@ -173,9 +173,25 @@ the code generation ID is hardcoded into the script and required in the nuxt con
 
 
 def inject_nuxt_values():
-    all_date_locales = [
-        f'"{match.stem}": require("./lang/dateTimeFormats/{match.name}"),' for match in datetime_dir.glob("*.json")
-    ]
+    datetime_files = list(datetime_dir.glob("*.json"))
+    datetime_files.sort()
+
+    datetime_imports = []
+    datetime_object_entries = []
+
+    for match in datetime_files:
+        # Convert locale name to camelCase variable name (e.g., "en-US" -> "enUS")
+        var_name = match.stem.replace("-", "")
+
+        # Generate import statement
+        import_line = f'import * as {var_name} from "./lang/dateTimeFormats/{match.name}";'
+        datetime_imports.append(import_line)
+
+        # Generate object entry
+        object_entry = f'  "{match.stem}": {var_name},'
+        datetime_object_entries.append(object_entry)
+
+    all_date_locales = datetime_imports + ["", "const datetimeFormats = {"] + datetime_object_entries + ["};"]
 
     all_langs = []
     for match in locales_dir.glob("*.json"):
@@ -186,7 +202,6 @@ def inject_nuxt_values():
         all_langs.append(lang_string)
 
     all_langs.sort()
-    all_date_locales.sort()
 
     log.debug(f"injecting locales into nuxt config -> {nuxt_config}")
     inject_inline(nuxt_config, CodeKeys.nuxt_local_messages, all_langs)

dev/code-generation/gen_ts_types.py

@@ -1,4 +1,5 @@
 import re
+import subprocess
 from pathlib import Path
 
 from jinja2 import Template
@@ -189,6 +190,7 @@ def generate_typescript_types() -> None:  # noqa: C901
     skipped_dirs: list[Path] = []
     failed_modules: list[Path] = []
 
+    out_paths: list[Path] = []
     for module in schema_path.iterdir():
         if module.is_dir() and module.stem in ignore_dirs:
             skipped_dirs.append(module)
@@ -205,10 +207,18 @@ def generate_typescript_types() -> None:  # noqa: C901
             path_as_module = path_to_module(module)
             generate_typescript_defs(path_as_module, str(out_path), exclude=("MealieModel"))  # type: ignore
             clean_output_file(out_path)
+            out_paths.append(out_path)
         except Exception:
             failed_modules.append(module)
             log.exception(f"Module Error: {module}")
 
+    # Run ESLint --fix on the files to clean up any formatting issues
+    subprocess.run(
+        ["yarn", "lint", "--fix", *(str(path) for path in out_paths)],
+        check=True,
+        cwd=PROJECT_DIR / "frontend",
+    )
+
     log.debug("\n📁 Skipped Directories:")
     for skipped_dir in skipped_dirs:
         log.debug(f"   📁 {skipped_dir.name}")

dev/code-generation/utils/template.py

@@ -1,5 +1,4 @@
 import logging
-import subprocess
 from dataclasses import dataclass
 from pathlib import Path
 
@@ -23,11 +22,6 @@ def render_python_template(template_file: Path | str, dest: Path, data: dict):
 
     dest.write_text(text)
 
-    # lint/format file with Ruff
-    log.info(f"Formatting {dest}")
-    subprocess.run(["poetry", "run", "ruff", "check", str(dest), "--fix"])
-    subprocess.run(["poetry", "run", "ruff", "format", str(dest)])
-
 
 @dataclass
 class CodeSlicer:
@@ -37,7 +31,7 @@ class CodeSlicer:
     indentation: str | None
     text: list[str]
 
-    _next_line = None
+    _next_line: int | None = None
 
     def purge_lines(self) -> None:
         start = self.start + 1

docker/Dockerfile

@@ -1,7 +1,7 @@
 ###############################################
 # Frontend Build
 ###############################################
-FROM node:20@sha256:572a90df10a58ebb7d3f223d661d964a6c2383a9c2b5763162b4f631c53dc56a \
+FROM node:24@sha256:20988bcdc6dc76690023eb2505dd273bdeefddcd0bde4bfd1efe4ebf8707f747 \
     AS frontend-builder
 
 WORKDIR /frontend
@@ -50,40 +50,29 @@ RUN apt-get update \
     curl \
     && rm -rf /var/lib/apt/lists/*
 
-ENV POETRY_HOME="/opt/poetry" \
-    POETRY_NO_INTERACTION=1
-
-# prepend poetry to path
-ENV PATH="$POETRY_HOME/bin:$PATH"
-
-# install poetry - respects $POETRY_VERSION & $POETRY_HOME
-ENV POETRY_VERSION=2.0.1
-RUN curl -sSL https://install.python-poetry.org | python3 -
-
-# install poetry plugins needed to build the package
-RUN poetry self add "poetry-plugin-export>=1.9"
+RUN pip install uv
 
 WORKDIR /mealie
 
 # copy project files here to ensure they will be cached.
-COPY poetry.lock pyproject.toml ./
+COPY uv.lock pyproject.toml ./
 COPY mealie ./mealie
 
 # Copy frontend to package it into the wheel
 COPY --from=frontend-builder /frontend/dist ./mealie/frontend
 
 # Build the source and binary package
-RUN poetry build --output=dist
+RUN uv build --out-dir dist
 
 # Create the requirements file, which is used to install the built package and
 # its pinned dependencies later. mealie is included to ensure the built one is
 # what's installed.
-RUN export MEALIE_VERSION=$(poetry version --short) \
-    && poetry export --only=main --extras=pgsql --output=dist/requirements.txt \
-    && echo "mealie[pgsql]==$MEALIE_VERSION \\" >> dist/requirements.txt \
-    && poetry run pip hash dist/mealie-$MEALIE_VERSION-py3-none-any.whl | tail -n1 | tr -d '\n' >> dist/requirements.txt \
+RUN uv export --no-editable --no-emit-project --extra pgsql --format requirements-txt --output-file dist/requirements.txt \
+    && MEALIE_VERSION=$(python -c "import tomllib; print(tomllib.load(open('pyproject.toml', 'rb'))['project']['version'])") \
+    && echo "mealie[pgsql]==${MEALIE_VERSION} \\" >> dist/requirements.txt \
+    && pip hash dist/mealie-${MEALIE_VERSION}-py3-none-any.whl | tail -n1 | tr -d '\n' >> dist/requirements.txt \
     && echo " \\" >> dist/requirements.txt \
-    && poetry run pip hash dist/mealie-$MEALIE_VERSION.tar.gz | tail -n1 >> dist/requirements.txt
+    && pip hash dist/mealie-${MEALIE_VERSION}.tar.gz | tail -n1 >> dist/requirements.txt
 
 ###############################################
 # Package Container

docs/docs/contributors/developers-guide/building-packages.md

@@ -12,13 +12,13 @@ yarnpkg generate
 popd
 rm -r mealie/frontend
 cp -a frontend/dist mealie/frontend
-poetry build
-poetry export -n --only=main --extras=pgsql --output=dist/requirements.txt
-MEALIE_VERSION=$(poetry version --short)
+uv build --out-dir dist
+uv export --no-editable --no-emit-project --extra pgsql --format requirements-txt --output-file dist/requirements.txt
+MEALIE_VERSION=$(python -c "import tomllib; print(tomllib.load(open('pyproject.toml', 'rb'))['project']['version'])")
 echo "mealie[pgsql]==${MEALIE_VERSION} \\" >> dist/requirements.txt
-poetry run pip hash dist/mealie-${MEALIE_VERSION}-py3-none-any.whl | tail -n1 | tr -d '\n' >> dist/requirements.txt
+pip hash dist/mealie-${MEALIE_VERSION}-py3-none-any.whl | tail -n1 | tr -d '\n' >> dist/requirements.txt
 echo " \\" >> dist/requirements.txt
-poetry run pip hash dist/mealie-${MEALIE_VERSION}.tar.gz | tail -n1 >> dist/requirements.txt
+pip hash dist/mealie-${MEALIE_VERSION}.tar.gz | tail -n1 >> dist/requirements.txt
 ```
 
 The Python package can be installed with all of its dependencies pinned to the versions tested by the developers with:

docs/docs/contributors/developers-guide/starting-dev-server.md

@@ -33,8 +33,8 @@ Make sure the VSCode Dev Containers extension is installed, then select "Dev Con
 ### Prerequisites
 
 - [Python 3.12](https://www.python.org/downloads/)
-- [Poetry](https://python-poetry.org/docs/#installation)
-- [Node v16.x](https://nodejs.org/en/)
+- [uv](https://docs.astral.sh/uv/)
+- [Node](https://nodejs.org/en/)
 - [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable)
 - [task](https://taskfile.dev/#/installation)
 
@@ -45,7 +45,7 @@ Once the prerequisites are installed you can cd into the project base directory
 === "Linux / macOS"
 
     ```bash
-    # Naviate To The Root Directory
+    # Navigate To The Root Directory
     cd /path/to/project
 
     # Utilize the Taskfile to Install Dependencies

docs/docs/documentation/community-guide/bring-api.md

@@ -1,5 +1,5 @@
 !!! info
-This guide was submitted by a community member. Find something wrong? Submit a PR to get it fixed!
+    This guide was submitted by a community member. Find something wrong? Submit a PR to get it fixed!
 
 Mealie supports adding the ingredients of a recipe to your [Bring](https://www.getbring.com/) shopping list, as you can
 see [here](https://docs.mealie.io/documentation/getting-started/features/#recipe-actions).

docs/docs/documentation/community-guide/home-assistant.md

@@ -1,21 +1,21 @@
 !!! info
-  This guide was submitted by a community member. Find something wrong? Submit a PR to get it fixed!
+    This guide was submitted by a community member. Find something wrong? Submit a PR to get it fixed!
 
 In a lot of ways, Home Assistant is why this project exists! Since Mealie has a robust API it makes it a great fit for interacting with Home Assistant and pulling information into your dashboard.
 
-### Display Today's Meal in Lovelace
+## Display Today's Meal in Lovelace
 
 You can use the Mealie API to get access to meal plans in Home Assistant like in the image below.
 
 ![api-extras-gif](../../assets/img/home-assistant-card.png)
 
-Steps:
+## Steps:
 
-#### 1. Get your API Token
+### 1. Get your API Token
 
-Create an API token from Mealie's User Settings page (https://docs.mealie.io/documentation/getting-started/api-usage/#getting-a-token)
+Create an API token from Mealie's User Settings page (see [this page](https://docs.mealie.io/documentation/getting-started/api-usage/#getting-a-token) to learn how).
 
-#### 2. Create Home Assistant Sensors
+### 2. Create Home Assistant Sensors
 
 Create REST sensors in home assistant to get the details of today's meal.
 We will create sensors to get the name and ID of the first meal in today's meal plan (note that this may not be what is wanted if there is more than one meal planned for the day). We need the ID as well as the name to be able to retrieve the image for the meal.
@@ -40,7 +40,7 @@ rest:
         unique_id: mealie_todays_meal_id
 ```
 
-#### 3. Create a Camera Entity
+### 3. Create a Camera Entity
 
 We will create a camera entity to display the image of today's meal in Lovelace.
 
@@ -52,7 +52,7 @@ In the still image url field put in:
 Under the entity page for the new camera, rename it.
 e.g. `camera.mealie_todays_meal_image`
 
-#### 4. Create a Lovelace Card
+### 4. Create a Lovelace Card
 
 Create a picture entity card and set the entity to `mealie_todays_meal` and the camera entity to `camera.mealie_todays_meal_image` or set in the yaml directly.
 
@@ -76,4 +76,4 @@ card_mod:
 ```
 
 !!! tip
-Due to how Home Assistant works with images, I had to include the additional styling to get the images to not appear distorted. This requires an [additional installation](https://github.com/thomasloven/lovelace-card-mod) from HACS.
+    Due to how Home Assistant works with images, I had to include the additional styling to get the images to not appear distorted. This requires an [additional installation](https://github.com/thomasloven/lovelace-card-mod) from HACS.

docs/docs/documentation/community-guide/import-recipe-bookmarklet.md

@@ -12,12 +12,10 @@ var url = document.URL.endsWith('/') ?
     document.URL;
 var mealie = "http://localhost:8080";
 var group_slug = "home" // Change this to your group slug. You can obtain this from your URL after logging-in to Mealie
-var use_keywords= "&use_keywords=1" // Optional - use keywords from recipe - update to "" if you don't want that
-var edity = "&edit=1" // Optional - keep in edit mode - update to "" if you don't want that
 
 if (mealie.slice(-1) === "/") {
     mealie = mealie.slice(0, -1)
 }
-var dest = mealie + "/g/" + group_slug + "/r/create/url?recipe_import_url=" + url + use_keywords + edity;
+var dest = mealie + "/g/" + group_slug + "/r/create/url?recipe_import_url=" + url;
 window.open(dest, "_blank");
 ```

docs/docs/documentation/community-guide/ios-shortcut.md

@@ -1,9 +1,10 @@
 !!! info
-  This guide was submitted by a community member. Find something wrong? Submit a PR to get it fixed!
+    This guide was submitted by a community member. Find something wrong? Submit a PR to get it fixed!
 
 An easy way to add recipes to Mealie from an Apple device is via an Apple Shortcut. This is a short guide to install an configure a shortcut able to add recipes via a link or image(s). 
 
-*Note: if adding via images make sure to enable [Mealie's openai integration](https://docs.mealie.io/documentation/getting-started/installation/open-ai/)*
+!!! note
+    If adding via images make sure to enable [Mealie's OpenAI Integration](https://docs.mealie.io/documentation/getting-started/installation/open-ai/)
 
 ## Javascript can only be run via Shortcuts on the Safari browser on MacOS and iOS. If you do not use Safari you may skip this section
 Some sites have begun blocking AI scraping bots, inadvertently blocking the recipe scraping library Mealie uses as well. To circumvent this, the shortcut uses javascript to capture the raw html loaded in the browser and sends that to mealie when possible.
@@ -16,12 +17,13 @@ Settings app -> apps -> Shortcuts -> Advanced -> Allow Running Scripts
 
 Shortcuts app -> Settings (CMD ,) -> Advanced -> Allow Running Scripts
 
-## Initial setup
+## Initial Setup
 An API key is needed to authenticate with mealie. To create an api key for a user, navigate to http://YOUR_MEALIE_URL/user/profile/api-tokens. Alternatively you can create a key via the mealie home page by clicking the user's profile pic in the top left -> Api Tokens
 
 The shortcut can be installed via **[This link](https://www.icloud.com/shortcuts/52834724050b42aebe0f2efd8d067360)**. Upon install, replace "MEALIE_API_KEY" with the API key generated previously and "MEALIE_URI" with the full URL used to access your mealie instance e.g. "http://10.0.0.5:9000" or "https://mealie.domain.com".
 
-## Using the shortcut
+## Using the Shortcut
 Once installed, the shortcut will automatically appear as an option when sharing an image or webpage. It can also be useful to add the shortcut to the home screen of your device. If selected from the home screen or shortcuts app, a menu will appear with prompts to import via **taking photo(s)**, **selecting photo(s)**, **scanning a URL**, or **pasting a URL**. 
 
-*Note: despite the mealie API being able to accept multiple recipe images for import it is currently impossible to send multiple files in 1 web request via Shortcuts. Instead, the shortcut combines the images into a singular, vertically-concatenated image to send to mealie. This can result in slightly less-accurate text recognition.*
+!!! note
+    Despite the Mealie API being able to accept multiple recipe images for import it is currently impossible to send multiple files in 1 web request via Shortcuts. Instead, the shortcut combines the images into a singular, vertically-concatenated image to send to mealie. This can result in slightly less-accurate text recognition.

docs/docs/documentation/community-guide/n8n-backup-automation.md

@@ -1,71 +1,77 @@
 # Automating Backups with n8n
 
 !!! info
-This guide was submitted by a community member. Find something wrong? Submit a PR to get it fixed!
+    This guide was submitted by a community member. Find something wrong? Submit a PR to get it fixed!
 
-> [n8n](https://github.com/n8n-io/n8n) is a free and source-available fair-code licensed workflow automation tool. Alternative to Zapier or Make, allowing you to use a UI to create automated workflows.
+[n8n](https://github.com/n8n-io/n8n) is a free and source-available fair-code licensed workflow automation tool. It's an alternative to tools like Zapier or Make, allowing you to use a UI to create automated workflows.
 
 This example workflow:
 
-1. Backups Mealie every morning via an API call
-2. Deletes all but the last 7 backups
+1. Creates a Mealie backup every morning via an API call
+2. Keeps the last 7 backups, deleting older ones
 
-> [!CAUTION]
-> This only automates the backup function, this does not backup your data to anywhere except your local instance. Please make sure you are backing up your data to an external source.
+!!! warning "Important"
+    This only automates the backup function, this does not backup your data to anywhere except your local instance. Please make sure you are backing up your data to an external source.
 
----
 
 ![screenshot](../../assets/img/n8n/n8n-mealie-backup.png)
 
-# Setup
+## Setup
 
-## Deploying n8n
+### Deploying n8n
 
 Follow the relevant guide in the [n8n Documentation](https://docs.n8n.io/)
 
-## Importing n8n workflow
+### Importing n8n workflow
 
 1. In n8n, add a new workflow
 2. In the top right hit the 3 dot menu and select 'Import from URL...'
 
-![screenshot](../../assets/img/n8n/n8n-workflow-import.png)
+    ![screenshot](../../assets/img/n8n/n8n-workflow-import.png)
 
-3. Paste `https://github.com/mealie-recipes/mealie/blob/mealie-next/docs/docs/assets/other/n8n/n8n-mealie-backup.json` and click Import
+3. Paste `https://github.com/mealie-recipes/mealie/blob/mealie-next/docs/docs/assets/other/n8n/n8n-mealie-backup.json` and click 'Import'
 4. Click through the nodes and update the URLs for your environment
 
-## API Credentials
+### API Credentials
 
 #### Generate Mealie API Token
 
-1. Head to https://mealie.example.com/user/profile/api-tokens
-   > If you dont see this screen make sure that "Show advanced features" is checked under https://mealie.example.com/user/profile/edit
-2. Under token name, enter the name of the token i.e. 'n8n' and hit Generate
+1. Head to `<YOUR MEALIE INSTANCE>/user/profile/api-tokens`
+
+    !!! tip
+        If you dont see this screen make sure that "Show advanced features" is checked under `<YOUR MEALIE INSTANCE>/user/profile/edit`
+
+2. Under token name, enter the name of the token (for example, 'n8n') and hit 'Generate'
+
 3. Copy and keep this API Token somewhere safe, this is like your password!
 
-> You can use your normal user for this, but assuming you're an admin you could also choose to create a user named n8n and generate the API key against that user.
+!!! tip
+    You can use your normal user for this, but assuming you're an admin you could also choose to create a user named n8n and generate the API key against that user.
 
 #### Setup Credentials in n8n
 
-> [n8n Docs](https://docs.n8n.io/credentials/add-edit-credentials/)
+See also [n8n Docs](https://docs.n8n.io/credentials/add-edit-credentials/).
 
 1. Create a new "Header Auth" Credential
 
-![screenshot](../../assets/img/n8n/n8n-cred-app.png)
+    ![screenshot](../../assets/img/n8n/n8n-cred-app.png)
 
 2. In the connection screen set - Name as `Authorization` - Value as `Bearer {INSERT MEALIE API KEY}`
 
-![screenshot](../../assets/img/n8n/n8n-cred-connection.png)
+    ![screenshot](../../assets/img/n8n/n8n-cred-connection.png)
 
 3. In the workflow you created, for the "Run Backup", "Get All backups", and "Delete Oldies" nodes, update:
-   - Authentication to `Generic Credential Type`
-   - Generic Auth Type to `Header Auth`
-   - Header Auth to `Mealie API` or whatever you named your credentials
 
-![screenshot](../../assets/img/n8n/n8n-workflow-auth.png)
+    - Authentication to `Generic Credential Type`
+    - Generic Auth Type to `Header Auth`
+    - Header Auth to `Mealie API` or whatever you named your credentials
 
-## Notification Node
+    ![screenshot](../../assets/img/n8n/n8n-workflow-auth.png)
 
-> Please use error notifications of some kind. It's very easy to set and forget an automation, then have the worst happen and lose data.
+### Notification Node
+
+!!! warning "Important"
+    Please use error notifications of some kind. It's very easy to set and forget an automation, then have the worst happen and lose data.
 
 [ntfy](https://github.com/binwiederhier/ntfy) is a great open source, self-hostable tool for sending notifications.
 

docs/docs/documentation/community-guide/swag.md

@@ -1,11 +1,10 @@
 # Using SWAG as Reverse Proxy
 
 !!! info
-	This guide was submitted by a community member. Find something wrong? Submit a PR to get it fixed!
+    This guide was submitted by a community member. Find something wrong? Submit a PR to get it fixed!
 
+To make the setup of a Reverse Proxy much easier, Linuxserver.io developed [SWAG](https://github.com/linuxserver/docker-swag).
 
-
-To make the setup of a Reverse Proxy much easier, Linuxserver.io developed [SWAG](https://github.com/linuxserver/docker-swag)
 SWAG - Secure Web Application Gateway (formerly known as letsencrypt, no relation to Let's Encrypt™) sets up an Nginx web server and reverse proxy with PHP support and a built-in certbot client that automates free SSL server certificate generation and renewal processes (Let's Encrypt and ZeroSSL). It also contains fail2ban for intrusion prevention.
 
 ## Step 1: Get a domain

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

@@ -72,7 +72,7 @@
     Mealie allows you to link ingredients to specific steps in a recipe, ensuring you know exactly when to add each ingredient during the cooking process.
 
     **Link Ingredients to Steps in a Recipe**
-    
+
     1. Go to a recipe
     2. Click the Edit button/icon
     3. Scroll down to the step you want to link ingredients to
@@ -82,7 +82,7 @@
     7. Click 'Save' on the Recipe
 
     You can optionally link the same ingredient to multiple steps, which is useful for prepping an ingredient in one step and using it in another.
-    
+
 ??? question "What is fuzzy search and how do I use it?"
 
     ### What is fuzzy search and how do I use it?
@@ -111,7 +111,7 @@
 
     You can change the theme by settings the environment variables.
 
-    - [Backend Config - Themeing](./installation/backend-config.md#themeing)
+    - [Backend Config - Theming](./installation/backend-config.md#theming)
 
 
 ??? question "How can I change the login session timeout?"
@@ -233,7 +233,7 @@
 
     ### How can I use Mealie externally
 
-    Exposing Mealie or any service to the internet can pose significant security risks. Before proceeding, carefully evaluate the potential impacts on your system. Due to the unique nature of each network, we cannot provide specific steps for your setup. 
+    Exposing Mealie or any service to the internet can pose significant security risks. Before proceeding, carefully evaluate the potential impacts on your system. Due to the unique nature of each network, we cannot provide specific steps for your setup.
 
     There is a community guide available for one way to potentially set this up, and you could reach out on Discord for further discussion on what may be best for your network.
 
@@ -267,7 +267,7 @@
 
     ### Why setup Email?
 
-    Mealie uses email to send account invites and password resets. If you don't use these features, you don't need to set up email. There are also other methods to perform these actions that do not require the setup of Email. 
+    Mealie uses email to send account invites and password resets. If you don't use these features, you don't need to set up email. There are also other methods to perform these actions that do not require the setup of Email.
 
     Email settings can be adjusted via environment variables on the backend container:
 

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

@@ -22,6 +22,7 @@ Mealie supports importing recipes from a few other sources besides websites. Cur
 - Recipe Keeper
 - Copy Me That
 - My Recipe Box
+- DVO Cook'n X3
 
 You can access these options on your installation at the `/group/migrations` page on your installation. If you'd like to see another source added, feel free to request so on Github.
 
@@ -87,6 +88,7 @@ The shopping lists feature is a great way to keep track of what you need to buy
 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. 
@@ -117,6 +119,7 @@ Mealie is designed to integrate with many different external services. There are
 ### Notifiers
 
 Notifiers are event-driven notifications sent when specific actions are performed within Mealie. Some actions include:
+
 - Creating / Updating a recipe
 - Adding items to a shopping list
 - Creating a new mealplan
@@ -198,6 +201,7 @@ Mealie lets you fully customize how you organize your users. You can use 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.
 
 Common use cases for groups include:
+
 - Hosting multiple instances of Mealie for others who want to keep their data private and secure
 - Creating completely isolated recipe pools
 
@@ -206,6 +210,7 @@ Common use cases for groups include:
 Households are subdivisions within a single Group. Households maintain their own users and settings, while sharing their recipes with other households. Households also share organizers (tags, categories, etc.) with the entire group. Meal Plans, Shopping Lists, and Integrations are only accessible within a household.
 
 Common use cases for households include:
+
 - Sharing a common recipe pool amongst families
 - Maintaining separate meal plans and shopping lists from other households
 - Maintaining separate integrations and customizations from other households

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

@@ -4,22 +4,22 @@
 
 ### General
 
-| Variables                     |        Default        | Description                                                                                        |
-| ----------------------------- | :-------------------: | -------------------------------------------------------------------------------------------------- |
-| PUID                          |          911          | UserID permissions between host OS and container                                                   |
-| PGID                          |          911          | GroupID permissions between host OS and container                                                  |
-| DEFAULT_GROUP                 |         Home          | The default group for users                                                                        |
-| DEFAULT_HOUSEHOLD             |        Family         | The default household for users in each group                                                      |
-| BASE_URL                      | http://localhost:8080 | Used for Notifications                                                                             |
-| TOKEN_TIME                    |          48           | The time in hours that a login/auth token is valid                                                 |
-| API_PORT                      |         9000          | The port exposed by backend API. **Do not change this if you're running in Docker**                |
-| API_DOCS                      |         True          | Turns on/off access to the API documentation locally                                               |
-| TZ                            |          UTC          | Must be set to get correct date/time on the server                                                 |
-| ALLOW_SIGNUP<super>\*</super> |         false         | Allow user sign-up without token                                                                   |
-| ALLOW_PASSWORD_LOGIN          |         true          | Whether or not to display the username+password input fields. Keep set to true unless you use OIDC authentication |
-| LOG_CONFIG_OVERRIDE           |                       | Override the config for logging with a custom path                                                 |
-| LOG_LEVEL                     |         info          | Logging level (e.g. critical, error, warning, info, debug)                                         |
-| DAILY_SCHEDULE_TIME           |         23:45         | The time of day to run daily server tasks, in HH:MM format. Use the server's local time, *not* UTC |
+| Variables                     |        Default        | Description                                                                                                                                             |
+| ----------------------------- | :-------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| PUID                          |          911          | UserID permissions between host OS and container                                                                                                        |
+| PGID                          |          911          | GroupID permissions between host OS and container                                                                                                       |
+| DEFAULT_GROUP                 |         Home          | The default group for users                                                                                                                             |
+| DEFAULT_HOUSEHOLD             |        Family         | The default household for users in each group                                                                                                           |
+| BASE_URL                      | http://localhost:8080 | Used for Notifications                                                                                                                                  |
+| TOKEN_TIME                    |          48           | The time in hours that a login/auth token is valid. Must be <= 9600 (400 days, in hours).                                                               |
+| API_PORT                      |         9000          | The port exposed by backend API. **Do not change this if you're running in Docker**                                                                     |
+| API_DOCS                      |         True          | Turns on/off access to the API documentation locally                                                                                                    |
+| TZ                            |          UTC          | Must be set to get correct date/time on the server                                                                                                      |
+| ALLOW_SIGNUP<super>\*</super> |         false         | Allow user sign-up without token                                                                                                                        |
+| ALLOW_PASSWORD_LOGIN          |         true          | Whether or not to display the username+password input fields. Keep set to true unless you use OIDC authentication                                       |
+| LOG_CONFIG_OVERRIDE           |                       | Override the config for logging with a custom path                                                                                                      |
+| LOG_LEVEL                     |         info          | Logging level (e.g. critical, error, warning, info, debug)                                                                                              |
+| DAILY_SCHEDULE_TIME           |         23:45         | The time of day to run daily server tasks, in HH:MM format. Use the server's local time, *not* UTC                                                      |
 
 <super>\*</super> Starting in v1.4.0 this was changed to default to `false` as part of a security review of the application.
 
@@ -32,15 +32,16 @@
 
 ### Database
 
- | Variables                                               | Default  | Description                                                             |
- | ------------------------------------------------------- | :------: | ----------------------------------------------------------------------- |
- | DB_ENGINE                                               |  sqlite  | Optional: 'sqlite', 'postgres'                                          |
- | POSTGRES_USER<super>[&dagger;][secrets]</super>         |  mealie  | Postgres database user                                                  |
- | POSTGRES_PASSWORD<super>[&dagger;][secrets]</super>     |  mealie  | Postgres database password                                              |
- | POSTGRES_SERVER<super>[&dagger;][secrets]</super>       | postgres | Postgres database server address                                        |
- | POSTGRES_PORT<super>[&dagger;][secrets]</super>         |   5432   | Postgres database port                                                  |
- | POSTGRES_DB<super>[&dagger;][secrets]</super>           |  mealie  | Postgres database name                                                  |
- | POSTGRES_URL_OVERRIDE<super>[&dagger;][secrets]</super> |   None   | Optional Postgres URL override to use instead of POSTGRES\_\* variables |
+ | Variables                                               | Default  | Description                                                                                                                                                                                                                      |
+ |---------------------------------------------------------|:--------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+ | DB_ENGINE                                               |  sqlite  | Optional: 'sqlite', 'postgres'                                                                                                                                                                                                   |
+ | SQLITE_MIGRATE_JOURNAL_WAL                              |  False   | If set to true, switches SQLite's journal mode to WAL, which allows for multiple concurrent accesses. This can be useful when you have a decent amount of concurrency or when using certain remote storage systems such as Ceph. |
+ | POSTGRES_USER<super>[&dagger;][secrets]</super>         |  mealie  | Postgres database user                                                                                                                                                                                                           |
+ | POSTGRES_PASSWORD<super>[&dagger;][secrets]</super>     |  mealie  | Postgres database password                                                                                                                                                                                                       |
+ | POSTGRES_SERVER<super>[&dagger;][secrets]</super>       | postgres | Postgres database server address                                                                                                                                                                                                 |
+ | POSTGRES_PORT<super>[&dagger;][secrets]</super>         |   5432   | Postgres database port                                                                                                                                                                                                           |
+ | POSTGRES_DB<super>[&dagger;][secrets]</super>           |  mealie  | Postgres database name                                                                                                                                                                                                           |
+ | POSTGRES_URL_OVERRIDE<super>[&dagger;][secrets]</super> |   None   | Optional Postgres URL override to use instead of POSTGRES\_\* variables                                                                                                                                                          |
 
 ### Email
 
@@ -131,28 +132,108 @@ For custom mapping variables (e.g. OPENAI_CUSTOM_HEADERS) you should pass values
 | 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                            |   60    | 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_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 |
 
 ### Theming
 
 Setting the following environmental variables will change the theme of the frontend. Note that the themes are the same for all users. This is a break-change when migration from v0.x.x -> 1.x.x.
 
-| 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  |
+!!! info
+    If you're setting these variables but not seeing these changes persist, try removing the `#` character. Also, depending on which syntax you're using, double-check you're using quotes correctly.
+
+    If using YAML mapping syntax, be sure to include quotes around these values, otherwise they will be treated as comments in your YAML file:<br>`THEME_LIGHT_PRIMARY: '#E58325'` or  `THEME_LIGHT_PRIMARY: 'E58325'`
+
+    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 | 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'
+    ```
 
 ### 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.0.2`
+2. Replace the image for the API container with `ghcr.io/mealie-recipes/mealie:v3.8.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
 
@@ -60,7 +60,7 @@ The following steps were tested on a Ubuntu 20.04 server, but should work for mo
 
 ## Step 3: Customizing The `docker-compose.yaml` files.
 
-After you've decided setup the files it's important to set a few ENV variables to ensure that you can use all the features of Mealie. I recommend that you verify and check that:
+After you've decided how to set up your files, it's important to set a few ENV variables to ensure that you can use all the features of Mealie. Verify that:
 
 - [x] You've configured the relevant ENV variables for your database selection in the `docker-compose.yaml` files.
 - [x] You've configured the [SMTP server settings](./backend-config.md#email) (used for invitations, password resets, etc). You can setup a [google app password](https://support.google.com/accounts/answer/185833?hl=en) if you want to send email via gmail.
@@ -117,7 +117,7 @@ The latest tag provides the latest released image of Mealie.
 
 ---
 
-**These tags no are long updated**
+**These tags are no longer updated**
 
 `mealie:frontend-v1.0.0beta-x` **and** `mealie:api-v1.0.0beta-x`
 

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.0.2 # (3)
+    image: ghcr.io/mealie-recipes/mealie:v3.8.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.0.2 # (3)
+    image: ghcr.io/mealie-recipes/mealie:v3.8.0 # (3)
     container_name: mealie
     restart: always
     ports:

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

@@ -28,6 +28,7 @@ Mealie is a self hosted recipe manager and meal planner with a RestAPI backend a
     - Copy Me That
     - Paprika
     - Tandoor Recipes
+    - DVO Cook'n X3
   - Random Meal Plan generation
     - Advanced rule configuration to fine tune random recipes
 

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

@@ -4,11 +4,28 @@
     You MUST read the release notes prior to upgrading your container. Mealie has a robust backup and restore system for managing your data. Pre-v1.0.0 versions of Mealie use a different database structure, so if you are upgrading from pre-v1.0.0 to v1.0.0, you MUST backup your data and then re-import it. Even if you are already on v1.0.0, it is strongly recommended to backup all data before updating.
 
     ### Before Upgrading
-     - Read The Release Notes
+     - [Read The Release Notes](https://github.com/mealie-recipes/mealie/releases)
      - Identify Breaking Changes
      - 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/docs/documentation/getting-started/usage/backups-and-restoring.md

@@ -1,10 +1,10 @@
 # Backups and Restores
 
-Mealie provides an integrated mechanic for doing full installation backups of the database. 
+Mealie provides an integrated mechanic for doing full installation backups of the database.
 
-Navigate to Settings > Backups or manually by adding `/admin/backups` to your instance URL.
+Navigate to Settings > Admin Settings > Backups or manually by adding `/admin/backups` to your instance URL.
 
-From this page, you will be able to: 
+From this page, you will be able to:
 
 - See a list of available backups
 - Create a backup
@@ -39,7 +39,7 @@ Restoring the Database when using Postgres requires Mealie to be configured with
 ```sql
 ALTER USER mealie WITH SUPERUSER;
 
-# Run restore from Mealie
+-- Run restore from Mealie
 
 ALTER USER mealie WITH NOSUPERUSER;
 ```

docs/docs/documentation/getting-started/usage/permissions-and-public-access.md

@@ -1,6 +1,7 @@
 # Permissions and Public Access
 
 Mealie provides various levels of user access and permissions. This includes:
+
 - Authentication and registration ([LDAP](../authentication/ldap.md) and [OpenID Connect](../authentication/oidc.md) are both supported)
 - Customizable user permissions
 - Fine-tuned public access for non-users
@@ -8,12 +9,12 @@ Mealie provides various levels of user access and permissions. This includes:
 ## Customizable User Permissions
 
 Each user can be configured to have varying levels of access. Some of these permissions include:
+
 - Access to Administrator tools
 - Access to inviting other users
 - Access to manage their group and group data
 
-Administrators can navigate to the Settings page and access the User Management page to configure these settings.
-
+Administrators can configure these settings on the User Management page (navigate to Settings > Admin Settings > Users or append `/admin/manage/users` to your instance URL).
 
 [User Management Demo](https://demo.mealie.io/admin/manage/users){ .md-button .md-button--primary }
 
@@ -22,8 +23,8 @@ Administrators can navigate to the Settings page and access the User Management
 By default, groups and households are set to private, meaning only logged-in users may access the group/household. In order for a recipe to be viewable by public (not logged-in) users, three criteria must be met:
 
 1. The group must not be private
-2. The household must not be private, *and* the household setting for allowing users outside of your group to see your recipes must be enabled. These can be toggled on the Household Settings page
-2. The recipe must be set to public. This can be toggled for each recipe individually, or in bulk using the Recipe Data Management page
+2. The household must not be private, _and_ the household setting for allowing users outside of your group to see your recipes must be enabled. These can be toggled on the Household Management page (navigate to Settings > Admin Settings > Households or append `/admin/manage/households` to your instance URL)
+3. The recipe must be set to public. This can be toggled for each recipe individually, or in bulk using the Recipe Data Management page
 
 Additionally, if the group is not private, public users can view all public group data (public recipes, public cookbooks, etc.) from the home page ([e.g. the demo home page](https://demo.mealie.io/g/home)).
 

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
@@ -86,7 +86,7 @@ nav:
 
       - Community Guides:
           - Bring API without internet exposure: "documentation/community-guide/bring-api.md"
-          - Automate Backups with n8n: "documentation/community-guide/n8n-backup-automation.md"
+          - Automating Backups with n8n: "documentation/community-guide/n8n-backup-automation.md"
           - Bulk Url Import: "documentation/community-guide/bulk-url-import.md"
           - Home Assistant: "documentation/community-guide/home-assistant.md"
           - Import Bookmarklet: "documentation/community-guide/import-recipe-bookmarklet.md"

frontend/assets/main.css

@@ -37,7 +37,7 @@
 }
 
 .handle {
-  cursor: grab;
+  cursor: grab !important;
 }
 
 .hidden {

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

@@ -32,9 +32,9 @@
       >
         <div class="d-flex align-center w-100 mb-2">
           <v-toolbar-title class="headline mb-0">
-          <v-icon size="large" class="mr-3">
-            {{ $globals.icons.pages }}
-          </v-icon>
+            <v-icon size="large" class="mr-3">
+              {{ $globals.icons.pages }}
+            </v-icon>
             {{ book.name }}
           </v-toolbar-title>
           <BaseButton

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/GroupMealPlanRuleForm.vue

@@ -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" },
 ];
 
@@ -103,6 +106,11 @@ 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"),

frontend/components/Domain/Household/HouseholdPreferencesEditor.vue

@@ -1,44 +1,44 @@
 <template>
-	<div v-if="preferences">
-		<BaseCardSectionTitle :title="$t('household.household-preferences')" />
-		<div class="mb-6">
-			<v-checkbox v-model="preferences.privateHousehold" hide-details density="compact" :label="$t('household.private-household')" color="primary" />
-			<div class="ml-8">
-				<p class="text-subtitle-2 my-0 py-0">
-					{{ $t("household.private-household-description") }}
-				</p>
-				<DocLink class="mt-2" link="/documentation/getting-started/faq/#how-do-private-groups-and-recipes-work" />
-			</div>
-		</div>
-		<div class="mb-6">
-			<v-checkbox v-model="preferences.lockRecipeEditsFromOtherHouseholds" hide-details density="compact" :label="$t('household.lock-recipe-edits-from-other-households')" color="primary" />
-			<div class="ml-8">
-				<p class="text-subtitle-2 my-0 py-0">
-					{{ $t("household.lock-recipe-edits-from-other-households-description") }}
-				</p>
-			</div>
-		</div>
-		<v-select
-			v-model="preferences.firstDayOfWeek"
-			:prepend-icon="$globals.icons.calendarWeekBegin"
-			:items="allDays"
-			item-title="name"
-			item-value="value"
-			:label="$t('settings.first-day-of-week')"
-			variant="underlined"
-			flat
-		/>
+  <div v-if="preferences">
+    <BaseCardSectionTitle :title="$t('household.household-preferences')" />
+    <div class="mb-6">
+      <v-checkbox v-model="preferences.privateHousehold" hide-details density="compact" :label="$t('household.private-household')" color="primary" />
+      <div class="ml-8">
+        <p class="text-subtitle-2 my-0 py-0">
+          {{ $t("household.private-household-description") }}
+        </p>
+        <DocLink class="mt-2" link="/documentation/getting-started/faq/#how-do-private-groups-and-recipes-work" />
+      </div>
+    </div>
+    <div class="mb-6">
+      <v-checkbox v-model="preferences.lockRecipeEditsFromOtherHouseholds" hide-details density="compact" :label="$t('household.lock-recipe-edits-from-other-households')" color="primary" />
+      <div class="ml-8">
+        <p class="text-subtitle-2 my-0 py-0">
+          {{ $t("household.lock-recipe-edits-from-other-households-description") }}
+        </p>
+      </div>
+    </div>
+    <v-select
+      v-model="preferences.firstDayOfWeek"
+      :prepend-icon="$globals.icons.calendarWeekBegin"
+      :items="allDays"
+      item-title="name"
+      item-value="value"
+      :label="$t('settings.first-day-of-week')"
+      variant="underlined"
+      flat
+    />
 
-		<BaseCardSectionTitle class="mt-5" :title="$t('household.household-recipe-preferences')" />
-		<div class="preference-container">
-			<div v-for="p in recipePreferences" :key="p.key">
-				<v-checkbox v-model="preferences[p.key]" hide-details density="compact" :label="p.label" color="primary" />
-				<p class="ml-8 text-subtitle-2 my-0 py-0">
-					{{ p.description }}
-				</p>
-			</div>
-		</div>
-	</div>
+    <BaseCardSectionTitle class="mt-5" :title="$t('household.household-recipe-preferences')" />
+    <div class="preference-container">
+      <div v-for="p in recipePreferences" :key="p.key">
+        <v-checkbox v-model="preferences[p.key]" hide-details density="compact" :label="p.label" color="primary" />
+        <p class="ml-8 text-subtitle-2 my-0 py-0">
+          {{ p.description }}
+        </p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">

frontend/components/Domain/QueryFilterBuilder.vue

@@ -1,283 +1,299 @@
 <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.relationalOperatorOptions"
+              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.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-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
-                    v-model="field.value"
-                    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="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
                 />
-              </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="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) : '')"
               />
-              <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>
+            <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"
@@ -305,6 +321,7 @@ import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerS
 import { Organizer } from "~/lib/api/types/non-generated";
 import type { LogicalOperator, QueryFilterJSON, QueryFilterJSONPart, RelationalKeyword, RelationalOperator } from "~/lib/api/types/response";
 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({
@@ -344,6 +361,7 @@ const storeMap = {
   [Organizer.Tool]: useToolStore(),
   [Organizer.Food]: useFoodStore(),
   [Organizer.Household]: useHouseholdStore(),
+  [Organizer.User]: useUserStore(),
 };
 
 function onDragEnd(event: any) {
@@ -432,9 +450,9 @@ function removeField(index: number) {
 
 const fieldsUpdater = useDebounceFn((/* newFields: typeof fields.value */) => {
   /* newFields.forEach((field, index) => {
-		const updatedField = getFieldFromFieldDef(field);
-		fields.value[index] = updatedField; // recursive!!!
-	}); */
+    const updatedField = getFieldFromFieldDef(field);
+    fields.value[index] = updatedField; // recursive!!!
+  }); */
 
   const qf = buildQueryFilterString(fields.value, state.showAdvanced);
   if (qf) {
@@ -602,46 +620,56 @@ function buildQueryFilterJSON(): QueryFilterJSON {
 }
 
 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 +679,14 @@ 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));
 }
 </style>

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -5,8 +5,14 @@
     density="compact"
     elevation="0"
   >
-    <BaseDialog v-model="deleteDialog" :title="$t('recipe.delete-recipe')" color="error"
-      :icon="$globals.icons.alertCircle" can-confirm @confirm="emitDelete()">
+    <BaseDialog
+      v-model="deleteDialog"
+      :title="$t('recipe.delete-recipe')"
+      color="error"
+      :icon="$globals.icons.alertCircle"
+      can-confirm
+      @confirm="emitDelete()"
+    >
       <v-card-text>
         {{ $t("recipe.delete-confirmation") }}
       </v-card-text>
@@ -15,7 +21,14 @@
     <v-spacer />
     <div v-if="!open" class="custom-btn-group ma-1">
       <RecipeFavoriteBadge v-if="loggedIn" color="info" button-style :recipe-id="recipe.id!" show-always />
-      <RecipeTimelineBadge v-if="loggedIn" class="ml-1" color="info" button-style :slug="recipe.slug" :recipe-name="recipe.name!" />
+      <RecipeTimelineBadge
+        v-if="loggedIn"
+        class="ml-1"
+        color="info"
+        button-style
+        :slug="recipe.slug"
+        :recipe-name="recipe.name!"
+      />
       <div v-if="loggedIn">
         <v-tooltip v-if="canEdit" location="bottom" color="info">
           <template #activator="{ props: tooltipProps }">
@@ -87,7 +100,7 @@
 </template>
 
 <script setup lang="ts">
-import RecipeContextMenu from "./RecipeContextMenu.vue";
+import RecipeContextMenu from "./RecipeContextMenu/RecipeContextMenu.vue";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeTimelineBadge from "./RecipeTimelineBadge.vue";
 import type { Recipe } from "~/lib/api/types/recipe";
@@ -113,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

@@ -28,11 +28,12 @@
           <v-list-item-title class="pl-2">
             {{ item.name }}
           </v-list-item-title>
-          <v-list-item-action>
+          <template #append>
             <v-btn
               v-if="!edit"
               color="primary"
               icon
+              size="small"
               :href="assetURL(item.fileName ?? '')"
               target="_blank"
               top
@@ -43,6 +44,7 @@
               <v-btn
                 color="error"
                 icon
+                size="small"
                 top
                 @click="model.splice(i, 1)"
               >
@@ -53,7 +55,7 @@
                 :copy-text="assetEmbed(item.fileName ?? '')"
               />
             </div>
-          </v-list-item-action>
+          </template>
         </v-list-item>
       </v-list>
     </v-card>
@@ -90,13 +92,12 @@
               item-value="name"
               class="mr-2"
             >
-              <template #item="{ item }">
-                <v-avatar>
-                  <v-icon class="mr-auto">
-                    {{ item.raw.icon }}
-                  </v-icon>
-                </v-avatar>
-                {{ item.title }}
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps">
+                  <template #prepend>
+                    <v-icon>{{ item.raw.icon }}</v-icon>
+                  </template>
+                </v-list-item>
               </template>
             </v-select>
             <AppButtonUpload

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -1,111 +1,108 @@
 <template>
   <!-- Wrap v-hover with a div to provide a proper DOM element for the transition -->
-    <div>
-      <v-hover
-        v-slot="{ isHovering, props: hoverProps }"
-        :open-delay="50"
+  <div>
+    <v-hover
+      v-slot="{ isHovering, props: hoverProps }"
+      :open-delay="50"
+    >
+      <v-card
+        v-bind="hoverProps"
+        :class="{ 'on-hover': isHovering }"
+        :style="{ cursor }"
+        :elevation="isHovering ? 12 : 2"
+        :to="recipeRoute"
+        :min-height="imageHeight + 75"
+        @click.self="$emit('click')"
       >
-        <v-card
-          v-bind="hoverProps"
-          :class="{ 'on-hover': isHovering }"
-          :style="{ cursor }"
-          :elevation="isHovering ? 12 : 2"
-          :to="recipeRoute"
-          :min-height="imageHeight + 75"
-          @click.self="$emit('click')"
+        <RecipeCardImage
+          small
+          :icon-size="imageHeight"
+          :height="imageHeight"
+          :slug="slug"
+          :recipe-id="recipeId"
+          :image-version="image"
         >
-          <RecipeCardImage
-            :icon-size="imageHeight"
-            :height="imageHeight"
-            :slug="slug"
-            :recipe-id="recipeId"
-            size="small"
-            :image-version="image"
-          >
-            <v-expand-transition v-if="description">
-              <div
-                v-if="isHovering"
-                class="d-flex transition-fast-in-fast-out bg-secondary v-card--reveal"
-                style="height: 100%"
-              >
-                <v-card-text class="v-card--text-show white--text">
-                  <div class="descriptionWrapper">
-                    <SafeMarkdown :source="description" />
-                  </div>
-                </v-card-text>
-              </div>
-            </v-expand-transition>
-          </RecipeCardImage>
-          <v-card-title class="mb-n3 px-4">
-            <div class="headerClass">
-              {{ name }}
-            </div>
-          </v-card-title>
-
-          <slot name="actions">
-            <v-card-actions
-              v-if="showRecipeContent"
-              class="px-1"
+          <v-expand-transition v-if="description">
+            <div
+              v-if="isHovering"
+              class="d-flex transition-fast-in-fast-out bg-secondary v-card--reveal"
+              style="height: 100%"
             >
-              <RecipeFavoriteBadge
-                v-if="isOwnGroup"
-                class="absolute"
-                :recipe-id="recipeId"
-                show-always
-              />
-              <div v-else class="px-1" /> <!-- Empty div to keep the layout consistent -->
+              <v-card-text class="v-card--text-show white--text">
+                <div class="descriptionWrapper">
+                  <SafeMarkdown :source="description" />
+                </div>
+              </v-card-text>
+            </div>
+          </v-expand-transition>
+        </RecipeCardImage>
+        <v-card-title class="mb-n3 px-4">
+          <div class="headerClass">
+            {{ name }}
+          </div>
+        </v-card-title>
 
-              <RecipeRating
-                class="ml-n2"
-                :model-value="rating"
-                :recipe-id="recipeId"
-                :slug="slug"
-                small
-              />
-              <v-spacer />
-              <RecipeChips
-                :truncate="true"
-                :items="tags"
-                :title="false"
-                :limit="2"
-                small
-                url-prefix="tags"
-                v-bind="$attrs"
-              />
+        <slot name="actions">
+          <v-card-actions
+            v-if="showRecipeContent"
+            class="px-1"
+          >
+            <RecipeFavoriteBadge
+              v-if="isOwnGroup"
+              :recipe-id="recipeId"
+              show-always
+            />
+            <div v-else class="px-1" /> <!-- Empty div to keep the layout consistent -->
 
-              <!-- If we're not logged-in, no items display, so we hide this menu -->
-              <RecipeContextMenu
-                v-if="isOwnGroup"
-                color="grey-darken-2"
-                :slug="slug"
-                :name="name"
-                :recipe-id="recipeId"
-                :use-items="{
-                  delete: false,
-                  edit: false,
-                  download: true,
-                  mealplanner: true,
-                  shoppingList: true,
-                  print: false,
-                  printPreferences: false,
-                  share: true,
-                }"
-                @delete="$emit('delete', slug)"
-              />
-            </v-card-actions>
-          </slot>
-          <slot />
-        </v-card>
-      </v-hover>
-    </div>
+            <RecipeCardRating
+              :model-value="rating"
+              :recipe-id="recipeId"
+            />
+            <v-spacer />
+            <RecipeChips
+              :truncate="true"
+              :items="tags"
+              :title="false"
+              :limit="2"
+              small
+              url-prefix="tags"
+              v-bind="$attrs"
+            />
+
+            <!-- If we're not logged-in, no items display, so we hide this menu -->
+            <RecipeContextMenu
+              v-if="isOwnGroup && showRecipeContent"
+              color="grey-darken-2"
+              :slug="slug"
+              :menu-icon="$globals.icons.dotsVertical"
+              :name="name"
+              :recipe-id="recipeId"
+              :use-items="{
+                delete: false,
+                edit: false,
+                download: true,
+                mealplanner: true,
+                shoppingList: true,
+                print: false,
+                printPreferences: false,
+                share: true,
+              }"
+              @deleted="$emit('delete', slug)"
+            />
+          </v-card-actions>
+        </slot>
+        <slot />
+      </v-card>
+    </v-hover>
+  </div>
 </template>
 
 <script setup lang="ts">
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeChips from "./RecipeChips.vue";
-import RecipeContextMenu from "./RecipeContextMenu.vue";
+import RecipeContextMenu from "./RecipeContextMenu/RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
-import RecipeRating from "./RecipeRating.vue";
+import RecipeCardRating from "./RecipeCardRating.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 interface Props {

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"
               />
@@ -87,13 +87,11 @@
                 class="ma-0 pa-0"
               />
               <div v-else class="my-0 px-1 py-0" /> <!-- Empty div to keep the layout consistent -->
-              <RecipeRating
+              <RecipeCardRating
                 v-if="showRecipeContent"
                 :class="[{ 'pb-2': !isOwnGroup }, 'ml-n2']"
-                :value="rating"
+                :model-value="rating"
                 :recipe-id="recipeId"
-                :slug="slug"
-                small
               />
 
               <!-- If we're not logged-in, no items display, so we hide this menu -->
@@ -118,7 +116,7 @@
                 @deleted="$emit('delete', slug)"
               />
             </v-card-actions>
-            </slot>
+          </slot>
         </v-list-item>
         <slot />
       </v-card>
@@ -128,9 +126,9 @@
 
 <script setup lang="ts">
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
-import RecipeContextMenu from "./RecipeContextMenu.vue";
+import RecipeContextMenu from "./RecipeContextMenu/RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
-import RecipeRating from "./RecipeRating.vue";
+import RecipeCardRating from "./RecipeCardRating.vue";
 import RecipeChips from "./RecipeChips.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 

frontend/components/Domain/Recipe/RecipeCardRating.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="rating-display">
+    <span
+      v-for="(star, index) in ratingDisplay"
+      :key="index"
+      class="star"
+      :class="{
+        'star-half': star === 'half',
+        'text-secondary': !useGroupStyle,
+        'text-grey-darken-1': useGroupStyle,
+      }"
+    >
+      <!-- We render both the full and empty stars for "half" stars because they're layered over each other -->
+      <span
+        v-if="star === 'empty' || star === 'half'"
+        class="star-empty"
+      >
+        ☆
+      </span>
+      <span
+        v-if="star === 'full' || star === 'half'"
+        class="star-full"
+      >
+        ★
+      </span>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import { useUserSelfRatings } from "~/composables/use-users";
+
+type Star = "full" | "half" | "empty";
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  recipeId: {
+    type: String,
+    default: "",
+  },
+});
+
+const { isOwnGroup } = useLoggedInState();
+const { userRatings } = useUserSelfRatings();
+
+const userRating = computed(() => {
+  return userRatings.value.find(r => r.recipeId === props.recipeId)?.rating ?? undefined;
+});
+
+const ratingValue = computed(() => userRating.value || props.modelValue || 0);
+const useGroupStyle = computed(() => isOwnGroup.value && !userRating.value && props.modelValue);
+const ratingDisplay = computed<Star[]>(
+  () => {
+    const stars: Star[] = [];
+
+    for (let i = 0; i < 5; i++) {
+      const diff = ratingValue.value - i;
+      if (diff >= 1) {
+        stars.push("full");
+      }
+      else if (diff >= 0.25) { // round to half star if rating is at least 0.25 but not quite a full star
+        stars.push("half");
+      }
+      else {
+        stars.push("empty");
+      }
+    }
+
+    return stars;
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+.rating-display {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+
+  .star {
+    font-size: 18px;
+    transition: color 0.2s ease;
+    user-select: none;
+    position: relative;
+    display: inline-block;
+    &.star-half {
+      .star-full {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 50%;
+        overflow: hidden;
+      }
+    }
+  }
+}
+</style>

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -90,6 +90,14 @@
               <v-list-item-title>{{ $t("general.last-made") }}</v-list-item-title>
             </div>
           </v-list-item>
+          <v-list-item @click="sortRecipes(EVENTS.shuffle)">
+            <div class="d-flex align-center flex-nowrap">
+              <v-icon class="mr-2" inline>
+                {{ $globals.icons.diceMultiple }}
+              </v-icon>
+              <v-list-item-title>{{ $t("general.random") }}</v-list-item-title>
+            </div>
+          </v-list-item>
         </v-list>
       </v-menu>
       <ContextMenu
@@ -199,7 +207,7 @@ const emit = defineEmits<{
   appendRecipes: [recipes: Recipe[]];
 }>();
 
-const { $vuetify } = useNuxtApp();
+const display = useDisplay();
 const preferences = useUserSortPreferences();
 
 const EVENTS = {
@@ -215,7 +223,7 @@ const $auth = useMealieAuth();
 const { $globals } = useNuxtApp();
 const { isOwnGroup } = useLoggedInState();
 const useMobileCards = computed(() => {
-  return $vuetify.display.smAndDown.value || preferences.value.useMobileCards;
+  return display.smAndDown.value || preferences.value.useMobileCards;
 });
 
 const displayTitleIcon = computed(() => {
@@ -223,6 +231,7 @@ const displayTitleIcon = computed(() => {
 });
 
 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 || "");
@@ -256,13 +265,18 @@ const queryFilter = computed(() => {
 async function fetchRecipes(pageCount = 1) {
   const orderDir = props.query?.orderDirection || preferences.value.orderDirection;
   const orderByNullPosition = props.query?.orderByNullPosition || orderDir === "asc" ? "first" : "last";
+  const orderBy = props.query?.orderBy || preferences.value.orderBy;
+  const localQuery = { ...props.query };
+  if (orderBy === "random") {
+    localQuery._searchSeed = randomSeed.value;
+  }
   return await fetchMore(
     page.value,
     perPage * pageCount,
-    props.query?.orderBy || preferences.value.orderBy,
+    orderBy,
     orderDir,
     orderByNullPosition,
-    props.query,
+    localQuery,
     // we use a computed queryFilter to filter out recipes that have a null value for the property we're sorting by
     queryFilter.value,
   );
@@ -288,6 +302,9 @@ watch(
 );
 
 async function initRecipes() {
+  if (preferences.value.orderBy === "random") {
+    randomSeed.value = Date.now().toString();
+  }
   page.value = 1;
   hasMore.value = true;
 
@@ -380,6 +397,15 @@ async function sortRecipes(sortType: string) {
         true,
       );
       break;
+    case EVENTS.shuffle:
+      setter(
+        "random",
+        $globals.icons.diceMultiple,
+        $globals.icons.diceMultiple, // icon in asc and desc is the same for random
+      );
+      // We update the seed value to have a different order
+      randomSeed.value = Date.now().toString();
+      break;
     default:
       console.log("Unknown Event", sortType);
       return;

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="text-center">
+    <v-menu
+      offset-y
+      start
+      :eager="isMenuContentLoaded"
+      :bottom="!menuTop"
+      :nudge-bottom="!menuTop ? '5' : '0'"
+      :top="menuTop"
+      :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"
+    >
+      <template #activator="{ props: activatorProps }">
+        <v-btn
+          icon
+          :variant="fab ? 'flat' : undefined"
+          :rounded="fab ? 'circle' : undefined"
+          :size="fab ? 'small' : undefined"
+          :color="fab ? 'info' : 'secondary'"
+          :fab="fab"
+          v-bind="activatorProps"
+          @click.prevent
+          @mouseenter="onHover"
+        >
+          <v-icon
+            :size="!fab ? undefined : 'x-large'"
+            :color="fab ? 'white' : 'secondary'"
+          >
+            {{ icon }}
+          </v-icon>
+        </v-btn>
+      </template>
+
+      <RecipeContextMenuContent
+        v-if="isMenuContentLoaded"
+        v-bind="contentProps"
+        @print="$emit('print')"
+        @deleted="$emit('deleted', $event)"
+      />
+    </v-menu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Recipe } from "~/lib/api/types/recipe";
+
+interface ContextMenuIncludes {
+  delete?: boolean;
+  edit?: boolean;
+  download?: boolean;
+  duplicate?: boolean;
+  mealplanner?: boolean;
+  shoppingList?: boolean;
+  print?: boolean;
+  printPreferences?: boolean;
+  share?: boolean;
+  recipeActions?: boolean;
+}
+
+interface ContextMenuItem {
+  title: string;
+  icon: string;
+  color?: string;
+  event: string;
+  isPublic: boolean;
+}
+
+interface Props {
+  useItems?: ContextMenuIncludes;
+  appendItems?: ContextMenuItem[];
+  leadingItems?: ContextMenuItem[];
+  menuTop?: boolean;
+  fab?: boolean;
+  color?: string;
+  slug: string;
+  menuIcon?: string | null;
+  name: string;
+  recipe?: Recipe;
+  recipeId: string;
+  recipeScale?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  useItems: () => ({
+    delete: true,
+    edit: true,
+    download: true,
+    duplicate: false,
+    mealplanner: true,
+    shoppingList: true,
+    print: true,
+    printPreferences: true,
+    share: true,
+    recipeActions: true,
+  }),
+  appendItems: () => [],
+  leadingItems: () => [],
+  menuTop: true,
+  fab: false,
+  color: "primary",
+  menuIcon: null,
+  recipe: undefined,
+  recipeScale: 1,
+});
+
+defineEmits<{
+  [key: string]: any;
+  print: [];
+  deleted: [slug: string];
+}>();
+
+const { $globals } = useNuxtApp();
+
+const isMenuContentLoaded = ref(false);
+
+const icon = computed(() => {
+  return props.menuIcon || $globals.icons.dotsVertical;
+});
+
+// Props to pass to the content component (excluding internal wrapper props)
+const contentProps = computed(() => {
+  const { ...rest } = props;
+  return rest;
+});
+
+function onHover() {
+  if (!isMenuContentLoaded.value) {
+    isMenuContentLoaded.value = true;
+  }
+}
+
+function onMenuToggle(isOpen: boolean) {
+  if (isOpen && !isMenuContentLoaded.value) {
+    isMenuContentLoaded.value = true;
+  }
+}
+
+const RecipeContextMenuContent = defineAsyncComponent(
+  () => import("./RecipeContextMenuContent.vue"),
+);
+</script>

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

@@ -1,159 +1,109 @@
 <template>
-  <div class="text-center">
-    <!-- Recipe Share Dialog -->
-    <RecipeDialogShare v-model="shareDialog" :recipe-id="recipeId" :name="name" />
-    <RecipeDialogPrintPreferences v-model="printPreferencesDialog" :recipe="recipeRef" />
-    <BaseDialog
-      v-model="recipeDeleteDialog"
-      :title="$t('recipe.delete-recipe')"
-      color="error"
-      :icon="$globals.icons.alertCircle"
-      can-confirm
-      @confirm="deleteRecipe()"
-    >
-      <v-card-text>
-        <template v-if="isAdminAndNotOwner">
-          {{ $t("recipe.admin-delete-confirmation") }}
-        </template>
-        <template v-else>
-          {{ $t("recipe.delete-confirmation") }}
-        </template>
-      </v-card-text>
-    </BaseDialog>
-    <BaseDialog
-      v-model="recipeDuplicateDialog"
-      :title="$t('recipe.duplicate')"
-      color="primary"
-      :icon="$globals.icons.duplicate"
-      can-confirm
-      @confirm="duplicateRecipe()"
-    >
-      <v-card-text>
-        <v-text-field
-          v-model="recipeName"
-          density="compact"
-          :label="$t('recipe.recipe-name')"
-          autofocus
-          @keyup.enter="duplicateRecipe()"
-        />
-      </v-card-text>
-    </BaseDialog>
-    <BaseDialog
-      v-model="mealplannerDialog"
-      :title="$t('recipe.add-recipe-to-mealplan')"
-      color="primary"
-      :icon="$globals.icons.calendar"
-      can-confirm
-      @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
-              v-model="newMealdateString"
-              :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-select
-          v-model="newMealType"
-          :return-object="false"
-          :items="planTypeOptions"
-          :label="$t('recipe.entry-type')"
-          item-title="text"
-          item-value="value"
-        />
-      </v-card-text>
-    </BaseDialog>
-    <RecipeDialogAddToShoppingList
-      v-if="shoppingLists && recipeRefWithScale"
-      v-model="shoppingListDialog"
-      :recipes="[recipeRefWithScale]"
-      :shopping-lists="shoppingLists"
-    />
-    <v-menu
-      offset-y
-      start
-      :bottom="!menuTop"
-      :nudge-bottom="!menuTop ? '5' : '0'"
-      :top="menuTop"
-      :nudge-top="menuTop ? '5' : '0'"
-      allow-overflow
-      close-delay="125"
-      :open-on-hover="$vuetify.display.mdAndUp"
-      content-class="d-print-none"
-    >
-      <template #activator="{ props: activatorProps }">
-        <v-btn
-          icon
-          :variant="fab ? 'flat' : undefined"
-          :rounded="fab ? 'circle' : undefined"
-          :size="fab ? 'small' : undefined"
-          :color="fab ? 'info' : 'secondary'"
-          :fab="fab"
-          v-bind="activatorProps"
-          @click.prevent
-        >
-          <v-icon
-          :size="!fab ? undefined : 'x-large'"
-          :color="fab ? 'white' : 'secondary'"
-        >
-          {{ icon }}
-        </v-icon>
-        </v-btn>
+  <RecipeDialogShare v-model="shareDialog" :recipe-id="recipeId" :name="name" />
+  <RecipeDialogPrintPreferences v-model="printPreferencesDialog" :recipe="recipeRef" />
+  <BaseDialog
+    v-model="recipeDeleteDialog"
+    :title="$t('recipe.delete-recipe')"
+    color="error"
+    :icon="$globals.icons.alertCircle"
+    can-confirm
+    @confirm="deleteRecipe()"
+  >
+    <v-card-text>
+      <template v-if="isAdminAndNotOwner">
+        {{ $t("recipe.admin-delete-confirmation") }}
       </template>
-      <v-list density="compact">
-        <v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
-          <template #prepend>
-            <v-icon :color="item.color">
-              {{ item.icon }}
-            </v-icon>
-          </template>
-          <v-list-item-title>{{ item.title }}</v-list-item-title>
-        </v-list-item>
-        <div v-if="useItems.recipeActions && recipeActions && recipeActions.length">
-          <v-divider />
-          <v-list-item
-            v-for="(action, index) in recipeActions"
-            :key="index"
-            @click="executeRecipeAction(action)"
-          >
-            <template #prepend>
-              <v-icon color="undefined">
-                {{ $globals.icons.linkVariantPlus }}
-              </v-icon>
-            </template>
-            <v-list-item-title>
-              {{ action.title }}
-            </v-list-item-title>
-          </v-list-item>
-        </div>
-      </v-list>
-    </v-menu>
-  </div>
+      <template v-else>
+        {{ $t("recipe.delete-confirmation") }}
+      </template>
+    </v-card-text>
+  </BaseDialog>
+  <BaseDialog
+    v-model="recipeDuplicateDialog"
+    :title="$t('recipe.duplicate')"
+    color="primary"
+    :icon="$globals.icons.duplicate"
+    can-confirm
+    @confirm="duplicateRecipe()"
+  >
+    <v-card-text>
+      <v-text-field
+        v-model="recipeName"
+        density="compact"
+        :label="$t('recipe.recipe-name')"
+        autofocus
+        @keyup.enter="duplicateRecipe()"
+      />
+    </v-card-text>
+  </BaseDialog>
+  <BaseDialog
+    v-model="mealplannerDialog"
+    :title="$t('recipe.add-recipe-to-mealplan')"
+    color="primary"
+    :icon="$globals.icons.calendar"
+    can-confirm
+    @confirm="addRecipeToPlan()"
+  >
+    <v-card-text>
+      <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"
+        :items="planTypeOptions"
+        :label="$t('recipe.entry-type')"
+        item-title="text"
+        item-value="value"
+      />
+    </v-card-text>
+  </BaseDialog>
+  <RecipeDialogAddToShoppingList
+    v-if="shoppingLists && recipeRefWithScale"
+    v-model="shoppingListDialog"
+    :recipes="[recipeRefWithScale]"
+    :shopping-lists="shoppingLists"
+  />
+
+  <v-list density="compact">
+    <v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
+      <template #prepend>
+        <v-icon :color="item.color">
+          {{ item.icon }}
+        </v-icon>
+      </template>
+      <v-list-item-title>{{ item.title }}</v-list-item-title>
+    </v-list-item>
+    <div v-if="useItems.recipeActions && recipeActions && recipeActions.length">
+      <v-divider />
+      <v-list-item
+        v-for="(action, index) in recipeActions"
+        :key="index"
+        @click="executeRecipeAction(action)"
+      >
+        <template #prepend>
+          <v-icon color="undefined">
+            {{ $globals.icons.linkVariantPlus }}
+          </v-icon>
+        </template>
+        <v-list-item-title>
+          {{ action.title }}
+        </v-list-item-title>
+      </v-list-item>
+    </div>
+  </v-list>
 </template>
 
 <script setup lang="ts">
-import RecipeDialogAddToShoppingList from "./RecipeDialogAddToShoppingList.vue";
-import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
-import RecipeDialogShare from "./RecipeDialogShare.vue";
+import RecipeDialogAddToShoppingList from "~/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue";
+import RecipeDialogPrintPreferences from "~/components/Domain/Recipe/RecipeDialogPrintPreferences.vue";
+import RecipeDialogShare from "~/components/Domain/Recipe/RecipeDialogShare.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserApi } from "~/composables/api";
 import { useGroupRecipeActions } from "~/composables/use-group-recipe-actions";
@@ -225,7 +175,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   [key: string]: any;
-  delete: [slug: string];
+  deleted: [slug: string];
 }>();
 
 const api = useUserApi();
@@ -241,7 +191,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
@@ -336,8 +285,6 @@ const defaultItems: { [key: string]: ContextMenuItem } = {
 // Add leading and Appending Items
 menuItems.value = [...menuItems.value, ...props.leadingItems, ...props.appendItems];
 
-const icon = props.menuIcon || $globals.icons.dotsVertical;
-
 // ===========================================================================
 // Context Menu Event Handler
 
@@ -407,17 +354,20 @@ async function deleteRecipe() {
   if (data?.slug) {
     router.push(`/g/${groupSlug.value}`);
   }
-  emit("delete", props.slug);
+  emit("deleted", props.slug);
 }
 
 const download = useDownloader();
 
 async function handleDownloadEvent() {
-  const { data } = await api.recipes.getZipToken(props.slug);
-
-  if (data) {
-    download(api.recipes.getZipRedirectUrl(props.slug, data.token), `${props.slug}.zip`);
+  const { data: shareToken } = await api.recipes.share.createOne({ recipeId: props.recipeId });
+  if (!shareToken) {
+    console.error("No share token received");
+    alert.error(i18n.t("events.something-went-wrong"));
+    return;
   }
+
+  download(api.recipes.share.getZipRedirectUrl(shareToken.id), `${props.slug}.zip`);
 }
 
 async function addRecipeToPlan() {

frontend/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue

@@ -1,8 +1,15 @@
 <template>
   <div>
-    <BaseDialog v-model="dialog" :title="$t('data-pages.manage-aliases')" :icon="$globals.icons.edit"
-      :submit-icon="$globals.icons.check" :submit-text="$t('general.confirm')" can-submit @submit="saveAliases"
-      @cancel="$emit('cancel')">
+    <BaseDialog
+      v-model="dialog"
+      :title="$t('data-pages.manage-aliases')"
+      :icon="$globals.icons.edit"
+      :submit-icon="$globals.icons.check"
+      :submit-text="$t('general.confirm')"
+      can-submit
+      @submit="saveAliases"
+      @cancel="$emit('cancel')"
+    >
       <v-card-text>
         <v-container>
           <v-row v-for="alias, i in aliases" :key="i">
@@ -10,13 +17,16 @@
               <v-text-field v-model="alias.name" :label="$t('general.name')" :rules="[validators.required]" />
             </v-col>
             <v-col cols="2">
-              <BaseButtonGroup :buttons="[
-                {
-                  icon: $globals.icons.delete,
-                  text: $t('general.delete'),
-                  event: 'delete',
-                },
-              ]" @delete="deleteAlias(i)" />
+              <BaseButtonGroup
+                :buttons="[
+                  {
+                    icon: $globals.icons.delete,
+                    text: $t('general.delete'),
+                    event: 'delete',
+                  },
+                ]"
+                @delete="deleteAlias(i)"
+              />
             </v-col>
           </v-row>
         </v-container>

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -57,7 +57,7 @@
       </div>
     </template>
     <template #[`item.dateAdded`]="{ item }">
-      {{ formatDate(item.dateAdded!) }}
+      {{ item.dateAdded ? $d(new Date(item.dateAdded)) : '' }}
     </template>
   </v-data-table>
 </template>
@@ -153,15 +153,6 @@ const headers = computed(() => {
   return hdrs;
 });
 
-function formatDate(date: string) {
-  try {
-    return i18n.d(Date.parse(date), "medium");
-  }
-  catch {
-    return "";
-  }
-}
-
 // ============
 // Group Members
 const api = useUserApi();

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"
@@ -139,7 +139,7 @@
                         color="secondary"
                         density="compact"
                       />
-                      <div :key="`${ingredientData.ingredient.quantity || 'no-qty'}-${i}`" class="pa-auto my-auto">
+                      <div :key="`${ingredientData.ingredient?.quantity || 'no-qty'}-${i}`" class="pa-auto my-auto">
                         <RecipeIngredientListItem
                           :ingredient="ingredientData.ingredient"
                           :scale="recipeSection.recipeScale"
@@ -222,6 +222,10 @@ 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,
   shoppingListIngredientDialog: false,
@@ -230,31 +234,25 @@ const state = reactive({
 
 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, (newVal, oldVal) => {
+  if (newVal && !oldVal) {
+    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 {
       ready.value = true;
     }
-  },
-);
-
-watch(dialog, (val) => {
-  if (!val) {
+  }
+  else if (!newVal) {
     initState();
   }
 });
@@ -274,25 +272,53 @@ 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[] = recipe.recipeIngredient.map((ing) => {
-      const householdsWithFood = (ing.food?.householdsWithIngredientFood || []);
-      return {
-        checked: !householdsWithFood.includes(userHousehold.value),
-        ingredient: ing,
-      };
+    const shoppingListIngredients: ShoppingListIngredient[] = [];
+    function flattenRecipeIngredients(ing: RecipeIngredient, parentTitle = ""): ShoppingListIngredient[] {
+      if (ing.referencedRecipe) {
+        // Recursively flatten all ingredients in the referenced recipe
+        return (ing.referencedRecipe.recipeIngredient ?? []).flatMap((subIng) => {
+          const calculatedQty = (ing.quantity || 1) * (subIng.quantity || 1);
+          // Pass the referenced recipe name as the section title
+          return flattenRecipeIngredients(
+            { ...subIng, quantity: calculatedQty },
+            "",
+          );
+        });
+      }
+      else {
+        // Regular ingredient
+        const householdsWithFood = ing.food?.householdsWithIngredientFood || [];
+        return [{
+          checked: !householdsWithFood.includes(currentHouseholdSlug.value),
+          ingredient: {
+            ...ing,
+            title: ing.title || parentTitle,
+          },
+        }];
+      }
+    }
+
+    recipeData.recipeIngredient.forEach((ing) => {
+      const flattened = flattenRecipeIngredients(ing, "");
+      shoppingListIngredients.push(...flattened);
     });
 
     let currentTitle = "";
@@ -301,6 +327,9 @@ async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
       if (ing.ingredient.title) {
         currentTitle = ing.ingredient.title;
       }
+      else if (ing.ingredient.referencedRecipe?.name) {
+        currentTitle = ing.ingredient.referencedRecipe.name;
+      }
 
       // If this is the first item in the section, create a new section
       if (sections.length === 0 || currentTitle !== sections[sections.length - 1].sectionName) {
@@ -316,8 +345,8 @@ async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
       }
 
       // Store the on-hand ingredients for later
-      const householdsWithFood = (ing.ingredient.food?.householdsWithIngredientFood || []);
-      if (householdsWithFood.includes(userHousehold.value)) {
+      const householdsWithFood = (ing.ingredient?.food?.householdsWithIngredientFood || []);
+      if (householdsWithFood.includes(currentHouseholdSlug.value)) {
         onHandIngs.push(ing);
         return sections;
       }
@@ -331,9 +360,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,
     });
   }

frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue

@@ -141,6 +141,13 @@ function save() {
   dialog.value = false;
 }
 
+function open() {
+  dialog.value = true;
+}
+function close() {
+  dialog.value = false;
+}
+
 const i18n = useI18n();
 
 const utilities = [
@@ -160,4 +167,10 @@ const utilities = [
     action: splitByNumberedLine,
   },
 ];
+
+// Expose functions to parent components
+defineExpose({
+  open,
+  close,
+});
 </script>

frontend/components/Domain/Recipe/RecipeDialogPrintPreferences.vue

@@ -69,7 +69,14 @@
                 :label="$t('recipe.nutrition')"
               />
             </v-row>
-            <v-row no-gutters />
+            <v-row no-gutters>
+              <v-switch
+                v-model="preferences.expandChildRecipes"
+                hide-details
+                color="primary"
+                :label="$t('recipe.include-linked-recipe-ingredients')"
+              />
+            </v-row>
           </v-col>
         </v-row>
       </v-container>

frontend/components/Domain/Recipe/RecipeDialogShare.vue

@@ -16,7 +16,7 @@
         >
           <template #activator="{ props: activatorProps }">
             <v-text-field
-              v-model="expirationDateString"
+              :model-value="$d(expirationDate)"
               :label="$t('recipe-share.expiration-date')"
               :hint="$t('recipe-share.default-30-days')"
               persistent-hint
@@ -59,11 +59,8 @@
 
           <div class="pl-3 flex-grow-1">
             <v-list-item-title>
-              {{ $t("recipe-share.expires-at") }}
+              {{ $t("recipe-share.expires-at") + ' ' + $d(new Date(token.expiresAt!), "short") }}
             </v-list-item-title>
-            <v-list-item-subtitle>
-              {{ $d(new Date(token.expiresAt!), "long") }}
-            </v-list-item-subtitle>
           </div>
 
           <v-btn
@@ -111,10 +108,6 @@ const datePickerMenu = ref(false);
 const expirationDate = ref(new Date(Date.now() - new Date().getTimezoneOffset() * 60000));
 const tokens = ref<RecipeShareToken[]>([]);
 
-const expirationDateString = computed(() => {
-  return expirationDate.value.toISOString().substring(0, 10);
-});
-
 whenever(
   () => dialog.value,
   () => {

frontend/components/Domain/Recipe/RecipeExplorerPage.vue

@@ -1,715 +0,0 @@
-<template>
-  <v-container
-    fluid
-    class="px-0"
-  >
-    <div class="search-container pb-8">
-      <form
-        class="search-box pa-2"
-        @submit.prevent="search"
-      >
-        <div class="d-flex justify-center mb-2">
-          <v-text-field
-            ref="input"
-            v-model="state.search"
-            variant="outlined"
-            hide-details
-            clearable
-            color="primary"
-            :placeholder="$t('search.search-placeholder')"
-            :prepend-inner-icon="$globals.icons.search"
-            @keyup.enter="hideKeyboard"
-          />
-        </div>
-        <div class="search-row">
-          <!-- Category Filter -->
-          <SearchFilter
-            v-if="categories"
-            v-model="selectedCategories"
-            v-model:require-all="state.requireAllCategories"
-            :items="categories"
-          >
-            <v-icon start>
-              {{ $globals.icons.categories }}
-            </v-icon>
-            {{ $t("category.categories") }}
-          </SearchFilter>
-
-          <!-- Tag Filter -->
-          <SearchFilter
-            v-if="tags"
-            v-model="selectedTags"
-            v-model:require-all="state.requireAllTags"
-            :items="tags"
-          >
-            <v-icon start>
-              {{ $globals.icons.tags }}
-            </v-icon>
-            {{ $t("tag.tags") }}
-          </SearchFilter>
-
-          <!-- Tool Filter -->
-          <SearchFilter
-            v-if="tools"
-            v-model="selectedTools"
-            v-model:require-all="state.requireAllTools"
-            :items="tools"
-          >
-            <v-icon start>
-              {{ $globals.icons.potSteam }}
-            </v-icon>
-            {{ $t("tool.tools") }}
-          </SearchFilter>
-
-          <!-- Food Filter -->
-          <SearchFilter
-            v-if="foods"
-            v-model="selectedFoods"
-            v-model:require-all="state.requireAllFoods"
-            :items="foods"
-          >
-            <v-icon start>
-              {{ $globals.icons.foods }}
-            </v-icon>
-            {{ $t("general.foods") }}
-          </SearchFilter>
-
-          <!-- Household Filter -->
-          <SearchFilter
-            v-if="households.length > 1"
-            v-model="selectedHouseholds"
-            :items="households"
-            radio
-          >
-            <v-icon start>
-              {{ $globals.icons.household }}
-            </v-icon>
-            {{ $t("household.households") }}
-          </SearchFilter>
-
-          <!-- Sort Options -->
-          <v-menu
-            offset-y
-            nudge-bottom="3"
-          >
-            <template #activator="{ props }">
-              <v-btn
-                class="ml-auto"
-                size="small"
-                color="accent"
-                v-bind="props"
-              >
-                <v-icon :start="!$vuetify.display.xs">
-                  {{ state.orderDirection === "asc" ? $globals.icons.sortAscending : $globals.icons.sortDescending }}
-                </v-icon>
-                {{ $vuetify.display.xs ? null : sortText }}
-              </v-btn>
-            </template>
-            <v-card>
-              <v-list>
-                <v-list-item
-                  slim
-                  density="comfortable"
-                  :prepend-icon="state.orderDirection === 'asc' ? $globals.icons.sortDescending : $globals.icons.sortAscending"
-                  :title="state.orderDirection === 'asc' ? $t('general.sort-descending') : $t('general.sort-ascending')"
-                  @click="toggleOrderDirection()"
-                />
-                <v-divider />
-                <v-list-item
-                  v-for="v in sortable"
-                  :key="v.name"
-                  :active="state.orderBy === v.value"
-                  slim
-                  density="comfortable"
-                  :prepend-icon="v.icon"
-                  :title="v.name"
-                  @click="setOrderBy(v.value)"
-                />
-              </v-list>
-            </v-card>
-          </v-menu>
-
-          <!-- Settings -->
-          <v-menu
-            offset-y
-            bottom
-            start
-            nudge-bottom="3"
-            :close-on-content-click="false"
-          >
-            <template #activator="{ props }">
-              <v-btn
-                size="small"
-                color="accent"
-                dark
-                v-bind="props"
-              >
-                <v-icon size="small">
-                  {{ $globals.icons.cog }}
-                </v-icon>
-              </v-btn>
-            </template>
-            <v-card>
-              <v-card-text>
-                <v-switch
-                  v-model="state.auto"
-                  :label="$t('search.auto-search')"
-                  single-line
-                />
-                <v-btn
-                  block
-                  color="primary"
-                  @click="reset"
-                >
-                  {{ $t("general.reset") }}
-                </v-btn>
-              </v-card-text>
-            </v-card>
-          </v-menu>
-        </div>
-        <div
-          v-if="!state.auto"
-          class="search-button-container"
-        >
-          <v-btn
-            size="x-large"
-            color="primary"
-            type="submit"
-            block
-          >
-            <v-icon start>
-              {{ $globals.icons.search }}
-            </v-icon>
-            {{ $t("search.search") }}
-          </v-btn>
-        </div>
-      </form>
-    </div>
-    <v-divider />
-    <v-container class="mt-6 px-md-6">
-      <RecipeCardSection
-        v-if="state.ready"
-        class="mt-n5"
-        :icon="$globals.icons.silverwareForkKnife"
-        :title="$t('general.recipes')"
-        :recipes="recipes"
-        :query="passedQueryWithSeed"
-        disable-sort
-        @item-selected="filterItems"
-        @replace-recipes="replaceRecipes"
-        @append-recipes="appendRecipes"
-      />
-    </v-container>
-  </v-container>
-</template>
-
-<script lang="ts">
-import { watchDebounced } from "@vueuse/shared";
-import SearchFilter from "~/components/Domain/SearchFilter.vue";
-import { useLoggedInState } from "~/composables/use-logged-in-state";
-import {
-  useCategoryStore,
-  usePublicCategoryStore,
-  useFoodStore,
-  usePublicFoodStore,
-  useHouseholdStore,
-  usePublicHouseholdStore,
-  useTagStore,
-  usePublicTagStore,
-  useToolStore,
-  usePublicToolStore,
-} from "~/composables/store";
-import { useUserSearchQuerySession, useUserSortPreferences } from "~/composables/use-users/preferences";
-import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
-import type { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
-import type { NoUndefinedField } from "~/lib/api/types/non-generated";
-import { useLazyRecipes } from "~/composables/recipes";
-import type { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
-import type { HouseholdSummary } from "~/lib/api/types/household";
-
-export default defineNuxtComponent({
-  components: { SearchFilter, RecipeCardSection },
-  setup() {
-    const router = useRouter();
-    const i18n = useI18n();
-    const $auth = useMealieAuth();
-    const { $globals } = useNuxtApp();
-
-    const { isOwnGroup } = useLoggedInState();
-    const state = ref({
-      auto: true,
-      ready: false,
-      search: "",
-      orderBy: "created_at",
-      orderDirection: "desc" as "asc" | "desc",
-
-      // and/or
-      requireAllCategories: false,
-      requireAllTags: false,
-      requireAllTools: false,
-      requireAllFoods: false,
-    });
-
-    const route = useRoute();
-    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
-    const searchQuerySession = useUserSearchQuerySession();
-    const sortPreferences = useUserSortPreferences();
-
-    watch(() => state.value.orderBy, (newValue) => {
-      sortPreferences.value.orderBy = newValue;
-    });
-
-    watch(() => state.value.orderDirection, (newValue) => {
-      sortPreferences.value.orderDirection = newValue;
-    });
-
-    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
-    const categories = isOwnGroup.value ? useCategoryStore() : usePublicCategoryStore(groupSlug.value);
-    const selectedCategories = ref<NoUndefinedField<RecipeCategory>[]>([]);
-
-    const foods = isOwnGroup.value ? useFoodStore() : usePublicFoodStore(groupSlug.value);
-    const selectedFoods = ref<IngredientFood[]>([]);
-
-    const households = isOwnGroup.value ? useHouseholdStore() : usePublicHouseholdStore(groupSlug.value);
-    const selectedHouseholds = ref([] as NoUndefinedField<HouseholdSummary>[]);
-
-    const tags = isOwnGroup.value ? useTagStore() : usePublicTagStore(groupSlug.value);
-    const selectedTags = ref<NoUndefinedField<RecipeTag>[]>([]);
-
-    const tools = isOwnGroup.value ? useToolStore() : usePublicToolStore(groupSlug.value);
-    const selectedTools = ref<NoUndefinedField<RecipeTool>[]>([]);
-
-    function calcPassedQuery(): RecipeSearchQuery {
-      return {
-        // the search clear button sets search to null, which still renders the query param for a moment,
-        // whereas an empty string is not rendered
-        search: state.value.search ? state.value.search : "",
-        categories: toIDArray(selectedCategories.value),
-        foods: toIDArray(selectedFoods.value),
-        households: toIDArray(selectedHouseholds.value),
-        tags: toIDArray(selectedTags.value),
-        tools: toIDArray(selectedTools.value),
-        requireAllCategories: state.value.requireAllCategories,
-        requireAllTags: state.value.requireAllTags,
-        requireAllTools: state.value.requireAllTools,
-        requireAllFoods: state.value.requireAllFoods,
-        orderBy: state.value.orderBy,
-        orderDirection: state.value.orderDirection,
-      };
-    }
-    const passedQuery = ref<RecipeSearchQuery>(calcPassedQuery());
-
-    // we calculate this separately because otherwise we can't check for query changes
-    const passedQueryWithSeed = computed(() => {
-      return {
-        ...passedQuery.value,
-        _searchSeed: Date.now().toString(),
-      };
-    });
-
-    const queryDefaults = {
-      search: "",
-      orderBy: "created_at",
-      orderDirection: "desc" as "asc" | "desc",
-      requireAllCategories: false,
-      requireAllTags: false,
-      requireAllTools: false,
-      requireAllFoods: false,
-    };
-
-    function reset() {
-      state.value.search = queryDefaults.search;
-      state.value.orderBy = queryDefaults.orderBy;
-      state.value.orderDirection = queryDefaults.orderDirection;
-      sortPreferences.value.orderBy = queryDefaults.orderBy;
-      sortPreferences.value.orderDirection = queryDefaults.orderDirection;
-      state.value.requireAllCategories = queryDefaults.requireAllCategories;
-      state.value.requireAllTags = queryDefaults.requireAllTags;
-      state.value.requireAllTools = queryDefaults.requireAllTools;
-      state.value.requireAllFoods = queryDefaults.requireAllFoods;
-      selectedCategories.value = [];
-      selectedFoods.value = [];
-      selectedHouseholds.value = [];
-      selectedTags.value = [];
-      selectedTools.value = [];
-    }
-
-    function toggleOrderDirection() {
-      state.value.orderDirection = state.value.orderDirection === "asc" ? "desc" : "asc";
-      sortPreferences.value.orderDirection = state.value.orderDirection;
-    }
-
-    function setOrderBy(value: string) {
-      state.value.orderBy = value;
-      sortPreferences.value.orderBy = value;
-    }
-
-    function toIDArray(array: { id: string }[]) {
-      // we sort the array to make sure the query is always the same
-      return array.map(item => item.id).sort();
-    }
-
-    function hideKeyboard() {
-      input.value.blur();
-    }
-
-    const input: Ref<any> = ref(null);
-
-    async function search() {
-      const oldQueryValueString = JSON.stringify(passedQuery.value);
-      const newQueryValue = calcPassedQuery();
-      const newQueryValueString = JSON.stringify(newQueryValue);
-      if (oldQueryValueString === newQueryValueString) {
-        return;
-      }
-
-      passedQuery.value = newQueryValue;
-      const query = {
-        categories: passedQuery.value.categories,
-        foods: passedQuery.value.foods,
-        tags: passedQuery.value.tags,
-        tools: passedQuery.value.tools,
-        // Only add the query param if it's not the default value
-        ...{
-          auto: state.value.auto ? undefined : "false",
-          search: passedQuery.value.search === queryDefaults.search ? undefined : passedQuery.value.search,
-          households: !passedQuery.value.households?.length || passedQuery.value.households?.length === households.store.value.length ? undefined : passedQuery.value.households,
-          requireAllCategories: passedQuery.value.requireAllCategories ? "true" : undefined,
-          requireAllTags: passedQuery.value.requireAllTags ? "true" : undefined,
-          requireAllTools: passedQuery.value.requireAllTools ? "true" : undefined,
-          requireAllFoods: passedQuery.value.requireAllFoods ? "true" : undefined,
-        },
-      };
-      await router.push({ query });
-      searchQuerySession.value.recipe = JSON.stringify(query);
-    }
-
-    function waitUntilAndExecute(
-      condition: () => boolean,
-      callback: () => void,
-      opts = { timeout: 2000, interval: 500 },
-    ): Promise<void> {
-      return new Promise((resolve, reject) => {
-        const state = {
-          timeout: undefined as number | undefined,
-          interval: undefined as number | undefined,
-        };
-
-        const check = () => {
-          if (condition()) {
-            clearInterval(state.interval);
-            clearTimeout(state.timeout);
-            callback();
-            resolve();
-          }
-        };
-
-        // For some reason these were returning NodeJS.Timeout
-        state.interval = setInterval(check, opts.interval) as unknown as number;
-        state.timeout = setTimeout(() => {
-          clearInterval(state.interval);
-          reject(new Error("Timeout"));
-        }, opts.timeout) as unknown as number;
-      });
-    }
-
-    const sortText = computed(() => {
-      const sort = sortable.find(s => s.value === state.value.orderBy);
-      if (!sort) return "";
-      return `${sort.name}`;
-    });
-
-    const sortable = [
-      {
-        icon: $globals.icons.orderAlphabeticalAscending,
-        name: i18n.t("general.sort-alphabetically"),
-        value: "name",
-      },
-      {
-        icon: $globals.icons.newBox,
-        name: i18n.t("general.created"),
-        value: "created_at",
-      },
-      {
-        icon: $globals.icons.chefHat,
-        name: i18n.t("general.last-made"),
-        value: "last_made",
-      },
-      {
-        icon: $globals.icons.star,
-        name: i18n.t("general.rating"),
-        value: "rating",
-      },
-      {
-        icon: $globals.icons.update,
-        name: i18n.t("general.updated"),
-        value: "updated_at",
-      },
-      {
-        icon: $globals.icons.diceMultiple,
-        name: i18n.t("general.random"),
-        value: "random",
-      },
-    ];
-
-    watch(
-      () => route.query,
-      () => {
-        if (!Object.keys(route.query).length) {
-          reset();
-        }
-      },
-    );
-
-    function filterItems(item: RecipeCategory | RecipeTag | RecipeTool, urlPrefix: string) {
-      if (urlPrefix === "categories") {
-        const result = categories.store.value.filter(category => (category.id as string).includes(item.id as string));
-        selectedCategories.value = result as NoUndefinedField<RecipeTag>[];
-      }
-      else if (urlPrefix === "tags") {
-        const result = tags.store.value.filter(tag => (tag.id as string).includes(item.id as string));
-        selectedTags.value = result as NoUndefinedField<RecipeTag>[];
-      }
-      else if (urlPrefix === "tools") {
-        const result = tools.store.value.filter(tool => (tool.id).includes(item.id || ""));
-        selectedTags.value = result as NoUndefinedField<RecipeTag>[];
-      }
-    }
-
-    async function hydrateSearch() {
-      const query = router.currentRoute.value.query;
-      if (query.auto?.length) {
-        state.value.auto = query.auto === "true";
-      }
-
-      if (query.search?.length) {
-        state.value.search = query.search as string;
-      }
-      else {
-        state.value.search = queryDefaults.search;
-      }
-
-      state.value.orderBy = sortPreferences.value.orderBy;
-      state.value.orderDirection = sortPreferences.value.orderDirection as "asc" | "desc";
-
-      if (query.requireAllCategories?.length) {
-        state.value.requireAllCategories = query.requireAllCategories === "true";
-      }
-      else {
-        state.value.requireAllCategories = queryDefaults.requireAllCategories;
-      }
-
-      if (query.requireAllTags?.length) {
-        state.value.requireAllTags = query.requireAllTags === "true";
-      }
-      else {
-        state.value.requireAllTags = queryDefaults.requireAllTags;
-      }
-
-      if (query.requireAllTools?.length) {
-        state.value.requireAllTools = query.requireAllTools === "true";
-      }
-      else {
-        state.value.requireAllTools = queryDefaults.requireAllTools;
-      }
-
-      if (query.requireAllFoods?.length) {
-        state.value.requireAllFoods = query.requireAllFoods === "true";
-      }
-      else {
-        state.value.requireAllFoods = queryDefaults.requireAllFoods;
-      }
-
-      const promises: Promise<void>[] = [];
-
-      if (query.categories?.length) {
-        promises.push(
-          waitUntilAndExecute(
-            () => categories.store.value.length > 0,
-            () => {
-              const result = categories.store.value.filter(item =>
-                (query.categories as string[]).includes(item.id as string),
-              );
-
-              selectedCategories.value = result as NoUndefinedField<RecipeCategory>[];
-            },
-          ),
-        );
-      }
-      else {
-        selectedCategories.value = [];
-      }
-
-      if (query.tags?.length) {
-        promises.push(
-          waitUntilAndExecute(
-            () => tags.store.value.length > 0,
-            () => {
-              const result = tags.store.value.filter(item => (query.tags as string[]).includes(item.id as string));
-              selectedTags.value = result as NoUndefinedField<RecipeTag>[];
-            },
-          ),
-        );
-      }
-      else {
-        selectedTags.value = [];
-      }
-
-      if (query.tools?.length) {
-        promises.push(
-          waitUntilAndExecute(
-            () => tools.store.value.length > 0,
-            () => {
-              const result = tools.store.value.filter(item => (query.tools as string[]).includes(item.id));
-              selectedTools.value = result as NoUndefinedField<RecipeTool>[];
-            },
-          ),
-        );
-      }
-      else {
-        selectedTools.value = [];
-      }
-
-      if (query.foods?.length) {
-        promises.push(
-          waitUntilAndExecute(
-            () => {
-              if (foods.store.value) {
-                return foods.store.value.length > 0;
-              }
-              return false;
-            },
-            () => {
-              const result = foods.store.value?.filter(item => (query.foods as string[]).includes(item.id));
-              selectedFoods.value = result ?? [];
-            },
-          ),
-        );
-      }
-      else {
-        selectedFoods.value = [];
-      }
-
-      if (query.households?.length) {
-        promises.push(
-          waitUntilAndExecute(
-            () => {
-              if (households.store.value) {
-                return households.store.value.length > 0;
-              }
-              return false;
-            },
-            () => {
-              const result = households.store.value?.filter(item => (query.households as string[]).includes(item.id));
-              selectedHouseholds.value = result as NoUndefinedField<HouseholdSummary>[] ?? [];
-            },
-          ),
-        );
-      }
-      else {
-        selectedHouseholds.value = [];
-      }
-
-      await Promise.allSettled(promises);
-    };
-
-    onMounted(async () => {
-      // restore the user's last search query
-      if (searchQuerySession.value.recipe && !(Object.keys(route.query).length > 0)) {
-        try {
-          const query = JSON.parse(searchQuerySession.value.recipe);
-          await router.replace({ query });
-        }
-        catch {
-          searchQuerySession.value.recipe = "";
-          router.replace({ query: {} });
-        }
-      }
-
-      await hydrateSearch();
-      await search();
-      state.value.ready = true;
-    });
-
-    watchDebounced(
-      [
-        () => state.value.search,
-        () => state.value.requireAllCategories,
-        () => state.value.requireAllTags,
-        () => state.value.requireAllTools,
-        () => state.value.requireAllFoods,
-        () => state.value.orderBy,
-        () => state.value.orderDirection,
-        selectedCategories,
-        selectedFoods,
-        selectedHouseholds,
-        selectedTags,
-        selectedTools,
-      ],
-      async () => {
-        if (state.value.ready && state.value.auto) {
-          await search();
-        }
-      },
-      {
-        debounce: 500,
-      },
-    );
-
-    return {
-      sortText,
-      search,
-      reset,
-      state,
-      categories: categories.store as unknown as NoUndefinedField<RecipeCategory>[],
-      tags: tags.store as unknown as NoUndefinedField<RecipeTag>[],
-      foods: foods.store,
-      tools: tools.store as unknown as NoUndefinedField<RecipeTool>[],
-      households: households.store as unknown as NoUndefinedField<HouseholdSummary>[],
-
-      sortable,
-      toggleOrderDirection,
-      setOrderBy,
-      hideKeyboard,
-      input,
-
-      selectedCategories,
-      selectedFoods,
-      selectedHouseholds,
-      selectedTags,
-      selectedTools,
-      appendRecipes,
-      assignSorted,
-      recipes,
-      removeRecipe,
-      replaceRecipes,
-      passedQueryWithSeed,
-
-      filterItems,
-    };
-  },
-});
-</script>
-
-<style lang="css">
-.search-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.65rem;
-  margin-top: 1rem;
-}
-
-.search-container {
-  display: flex;
-  justify-content: center;
-}
-
-.search-box {
-  width: 950px;
-}
-
-.search-button-container {
-  margin: 3rem auto 0 auto;
-  max-width: 500px;
-}
-</style>

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

@@ -0,0 +1,72 @@
+<template>
+  <v-container
+    fluid
+    class="px-0"
+  >
+    <RecipeExplorerPageSearch
+      ref="searchComponent"
+      @ready="onSearchReady"
+    />
+    <v-divider />
+    <v-container class="mt-6 px-md-6">
+      <RecipeCardSection
+        v-if="ready"
+        class="mt-n5"
+        :icon="$globals.icons.silverwareForkKnife"
+        :title="$t('general.recipes')"
+        :recipes="recipes"
+        :query="searchQuery"
+        disable-sort
+        @item-selected="onItemSelected"
+        @replace-recipes="replaceRecipes"
+        @append-recipes="appendRecipes"
+      />
+    </v-container>
+  </v-container>
+</template>
+
+<script lang="ts">
+import RecipeExplorerPageSearch from "./RecipeExplorerPageParts/RecipeExplorerPageSearch.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
+import { useLazyRecipes } from "~/composables/recipes";
+
+export default defineNuxtComponent({
+  components: { RecipeCardSection, RecipeExplorerPageSearch },
+  setup() {
+    const $auth = useMealieAuth();
+    const route = useRoute();
+
+    const { isOwnGroup } = useLoggedInState();
+    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+
+    const { recipes, appendRecipes, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
+
+    const ready = ref(false);
+    const searchComponent = ref<InstanceType<typeof RecipeExplorerPageSearch>>();
+
+    const searchQuery = computed(() => {
+      return searchComponent.value?.passedQueryWithSeed || {};
+    });
+
+    function onSearchReady() {
+      ready.value = true;
+    }
+
+    function onItemSelected(item: any, urlPrefix: string) {
+      searchComponent.value?.filterItems(item, urlPrefix);
+    }
+
+    return {
+      ready,
+      searchComponent,
+      searchQuery,
+      recipes,
+      appendRecipes,
+      replaceRecipes,
+      onSearchReady,
+      onItemSelected,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,254 @@
+<template>
+  <div class="search-container pb-8">
+    <form
+      class="search-box pa-2"
+      @submit.prevent="search"
+    >
+      <div class="d-flex justify-center mb-2">
+        <v-text-field
+          ref="input"
+          v-model="state.search"
+          variant="outlined"
+          hide-details
+          clearable
+          color="primary"
+          :placeholder="$t('search.search-placeholder')"
+          :prepend-inner-icon="$globals.icons.search"
+          @keyup.enter="hideKeyboard"
+        />
+      </div>
+      <div class="search-row">
+        <RecipeExplorerPageSearchFilters />
+        <!-- Sort Options -->
+        <v-menu
+          offset-y
+          nudge-bottom="3"
+        >
+          <template #activator="{ props }">
+            <v-btn
+              class="ml-auto"
+              size="small"
+              color="accent"
+              v-bind="props"
+            >
+              <v-icon :start="!$vuetify.display.xs">
+                {{ state.orderDirection === "asc" ? $globals.icons.sortDescending : $globals.icons.sortAscending }}
+              </v-icon>
+              {{ $vuetify.display.xs ? null : sortText }}
+            </v-btn>
+          </template>
+          <v-card>
+            <v-list>
+              <v-list-item
+                slim
+                density="comfortable"
+                :prepend-icon="state.orderDirection === 'asc' ? $globals.icons.sortAscending : $globals.icons.sortDescending"
+                :title="state.orderDirection === 'asc' ? $t('general.sort-descending') : $t('general.sort-ascending')"
+                @click="toggleOrderDirection"
+              />
+              <v-divider />
+              <v-list-item
+                v-for="v in sortable"
+                :key="v.name"
+                :active="state.orderBy === v.value"
+                slim
+                density="comfortable"
+                @click="v.value === 'random' ? setRandomOrderByWrapper() : setOrderBy(v.value)"
+              >
+                <template #prepend>
+                  <v-icon>{{ v.icon }}</v-icon>
+                </template>
+
+                <template #title>
+                  <span>{{ v.name }}</span>
+                  <v-icon
+                    v-if="v.value === 'random' && showRandomLoading"
+                    size="small"
+                    class="ml-3"
+                  >
+                    {{ $globals.icons.refreshCircle }}
+                  </v-icon>
+                </template>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+
+        <!-- Settings -->
+        <v-menu
+          offset-y
+          bottom
+          start
+          nudge-bottom="3"
+          :close-on-content-click="false"
+        >
+          <template #activator="{ props }">
+            <v-btn
+              size="small"
+              color="accent"
+              dark
+              v-bind="props"
+            >
+              <v-icon size="small">
+                {{ $globals.icons.cog }}
+              </v-icon>
+            </v-btn>
+          </template>
+          <v-card>
+            <v-card-text>
+              <v-switch
+                v-model="state.auto"
+                :label="$t('search.auto-search')"
+                single-line
+              />
+              <v-btn
+                block
+                color="primary"
+                @click="reset"
+              >
+                {{ $t("general.reset") }}
+              </v-btn>
+            </v-card-text>
+          </v-card>
+        </v-menu>
+      </div>
+      <div
+        v-if="!state.auto"
+        class="search-button-container"
+      >
+        <v-btn
+          size="x-large"
+          color="primary"
+          type="submit"
+          block
+        >
+          <v-icon start>
+            {{ $globals.icons.search }}
+          </v-icon>
+          {{ $t("search.search") }}
+        </v-btn>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import RecipeExplorerPageSearchFilters from "./RecipeExplorerPageSearchFilters.vue";
+import { useRecipeExplorerSearch, clearRecipeExplorerSearchState } from "~/composables/use-recipe-explorer-search";
+
+const emit = defineEmits<{
+  ready: [];
+}>();
+
+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 {
+  state,
+  passedQueryWithSeed,
+  search,
+  reset,
+  toggleOrderDirection,
+  setOrderBy,
+  setRandomOrderBy,
+  filterItems,
+  initialize,
+} = useRecipeExplorerSearch(groupSlug);
+
+defineExpose({
+  passedQueryWithSeed,
+  filterItems,
+});
+
+onMounted(async () => {
+  await initialize();
+  emit("ready");
+});
+
+onUnmounted(() => {
+  // Clear the cache when component unmounts to ensure fresh state on remount
+  clearRecipeExplorerSearchState(groupSlug.value);
+});
+
+const sortText = computed(() => {
+  const sort = sortable.value.find(s => s.value === state.value.orderBy);
+  if (!sort) return "";
+  return `${sort.name}`;
+});
+
+const sortable = computed(() => [
+  {
+    icon: $globals.icons.orderAlphabeticalAscending,
+    name: i18n.t("general.sort-alphabetically"),
+    value: "name",
+  },
+  {
+    icon: $globals.icons.newBox,
+    name: i18n.t("general.created"),
+    value: "created_at",
+  },
+  {
+    icon: $globals.icons.chefHat,
+    name: i18n.t("general.last-made"),
+    value: "last_made",
+  },
+  {
+    icon: $globals.icons.star,
+    name: i18n.t("general.rating"),
+    value: "rating",
+  },
+  {
+    icon: $globals.icons.update,
+    name: i18n.t("general.updated"),
+    value: "updated_at",
+  },
+  {
+    icon: $globals.icons.diceMultiple,
+    name: i18n.t("general.random"),
+    value: "random",
+  },
+]);
+
+// Methods
+const input: Ref<any> = ref(null);
+
+function hideKeyboard() {
+  input.value?.blur();
+}
+
+// function to show refresh icon
+async function setRandomOrderByWrapper() {
+  if (!showRandomLoading.value) {
+    showRandomLoading.value = true;
+  }
+  await setRandomOrderBy();
+}
+</script>
+
+<style scoped>
+.search-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  margin-top: 1rem;
+}
+
+.search-container {
+  display: flex;
+  justify-content: center;
+}
+
+.search-box {
+  width: 950px;
+}
+
+.search-button-container {
+  margin: 3rem auto 0 auto;
+  max-width: 500px;
+}
+</style>

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

@@ -0,0 +1,114 @@
+<template>
+  <!-- Category Filter -->
+  <SearchFilter
+    v-if="categories"
+    v-model="selectedCategories"
+    v-model:require-all="state.requireAllCategories"
+    :items="categories"
+  >
+    <v-icon start>
+      {{ $globals.icons.categories }}
+    </v-icon>
+    {{ $t("category.categories") }}
+  </SearchFilter>
+
+  <!-- Tag Filter -->
+  <SearchFilter
+    v-if="tags"
+    v-model="selectedTags"
+    v-model:require-all="state.requireAllTags"
+    :items="tags"
+  >
+    <v-icon start>
+      {{ $globals.icons.tags }}
+    </v-icon>
+    {{ $t("tag.tags") }}
+  </SearchFilter>
+
+  <!-- Tool Filter -->
+  <SearchFilter
+    v-if="tools"
+    v-model="selectedTools"
+    v-model:require-all="state.requireAllTools"
+    :items="tools"
+  >
+    <v-icon start>
+      {{ $globals.icons.potSteam }}
+    </v-icon>
+    {{ $t("tool.tools") }}
+  </SearchFilter>
+
+  <!-- Food Filter -->
+  <SearchFilter
+    v-if="foods"
+    v-model="selectedFoods"
+    v-model:require-all="state.requireAllFoods"
+    :items="foods"
+  >
+    <v-icon start>
+      {{ $globals.icons.foods }}
+    </v-icon>
+    {{ $t("general.foods") }}
+  </SearchFilter>
+
+  <!-- Household Filter -->
+  <SearchFilter
+    v-if="households.length > 1"
+    v-model="selectedHouseholds"
+    :items="households"
+    radio
+  >
+    <v-icon start>
+      {{ $globals.icons.household }}
+    </v-icon>
+    {{ $t("household.households") }}
+  </SearchFilter>
+</template>
+
+<script setup lang="ts">
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import { useRecipeExplorerSearch } from "~/composables/use-recipe-explorer-search";
+import {
+  useCategoryStore,
+  usePublicCategoryStore,
+  useFoodStore,
+  usePublicFoodStore,
+  useHouseholdStore,
+  usePublicHouseholdStore,
+  useTagStore,
+  usePublicTagStore,
+  useToolStore,
+  usePublicToolStore,
+} from "~/composables/store";
+
+const $auth = useMealieAuth();
+const route = useRoute();
+
+const { isOwnGroup } = useLoggedInState();
+const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+
+const {
+  state,
+  selectedCategories,
+  selectedFoods,
+  selectedHouseholds,
+  selectedTags,
+  selectedTools,
+} = useRecipeExplorerSearch(groupSlug);
+
+const { store: categories } = isOwnGroup.value ? useCategoryStore() : usePublicCategoryStore(groupSlug.value);
+const { store: tags } = isOwnGroup.value ? useTagStore() : usePublicTagStore(groupSlug.value);
+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

@@ -43,8 +43,6 @@ const props = withDefaults(defineProps<Props>(), {
   buttonStyle: false,
 });
 
-const api = useUserApi();
-const $auth = useMealieAuth();
 const { userRatings, refreshUserRatings } = useUserSelfRatings();
 
 const isFavorite = computed(() => {
@@ -53,6 +51,9 @@ const isFavorite = computed(() => {
 });
 
 async function toggleFavorite() {
+  const api = useUserApi();
+  const $auth = useMealieAuth();
+
   if (!$auth.user.value) return;
   if (!isFavorite.value) {
     await api.users.addFavorite($auth.user.value?.id, props.recipeId);

frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue

@@ -20,18 +20,36 @@
         </v-btn>
       </template>
       <v-card width="400">
-        <v-card-title class="headline flex mb-0">
+        <v-card-title class="headline flex-wrap mb-0">
           <div>
             {{ $t("recipe.recipe-image") }}
           </div>
-          <AppButtonUpload
-            class="ml-auto"
-            url="none"
-            file-name="image"
-            :text-btn="false"
-            :post="false"
-            @uploaded="uploadImage"
-          />
+          <div class="d-flex gap-2">
+            <AppButtonUpload
+              url="none"
+              file-name="image"
+              :text-btn="false"
+              :post="false"
+              @uploaded="uploadImage"
+            />
+            <BaseButton
+              class="ml-2"
+              delete
+              @click="dialogDeleteImage = true"
+            />
+            <BaseDialog
+              v-model="dialogDeleteImage"
+              :title="$t('recipe.delete-image')"
+              :icon="$globals.icons.alertCircle"
+              color="error"
+              can-delete
+              @delete="deleteImage"
+            >
+              <v-card-text>
+                {{ $t("recipe.delete-image-confirmation") }}
+              </v-card-text>
+            </BaseDialog>
+          </div>
         </v-card-title>
         <v-card-text class="mt-n5">
           <div>
@@ -62,38 +80,58 @@
 </template>
 
 <script setup lang="ts">
+import { alert } from "~/composables/use-toast";
 import { useUserApi } from "~/composables/api";
 
-const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
+const DELETE_EVENT = "delete";
 
 const props = defineProps<{ slug: string }>();
 
 const emit = defineEmits<{
   refresh: [];
   upload: [fileObject: File];
+  delete: [];
 }>();
 
+const i18n = useI18n();
+const api = useUserApi();
+
 const url = ref("");
 const loading = ref(false);
 const menu = ref(false);
+const dialogDeleteImage = ref(false);
 
 function uploadImage(fileObject: File) {
   emit(UPLOAD_EVENT, fileObject);
   menu.value = false;
 }
 
-const api = useUserApi();
+async function deleteImage() {
+  loading.value = true;
+  try {
+    await api.recipes.deleteImage(props.slug);
+    emit(DELETE_EVENT);
+    menu.value = false;
+  }
+  catch (e) {
+    alert.error(i18n.t("events.something-went-wrong"));
+    console.error("Failed to delete image", e);
+  }
+  finally {
+    loading.value = false;
+  }
+}
+
 async function getImageFromURL() {
   loading.value = true;
   if (await api.recipes.updateImagebyURL(props.slug, url.value)) {
-    emit(REFRESH_EVENT);
+    emit(DELETE_EVENT);
   }
   loading.value = false;
   menu.value = false;
 }
 
-const i18n = useI18n();
 const messages = computed(() =>
   props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")],
 );

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -22,25 +22,29 @@
         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"
         >
-          <template #prepend>
+          <template v-if="enableDragHandle" #prepend>
             <v-icon
               class="mr-n1 handle"
             >
               {{ $globals.icons.arrowUpDown }}
             </v-icon>
           </template>
-        </v-text-field>
+        </v-number-input>
       </v-col>
       <v-col
+        v-if="!state.isRecipe"
         sm="12"
         md="3"
         cols="12"
@@ -55,10 +59,12 @@
           variant="solo"
           return-object
           :items="units || []"
+          :custom-filter="normalizeFilter"
           item-title="name"
           class="mx-1"
           :placeholder="$t('recipe.choose-unit')"
           clearable
+          :menu-props="{ attach: props.menuAttachTarget, maxHeight: '250px' }"
           @keyup.enter="handleUnitEnter"
         >
           <template #prepend>
@@ -96,6 +102,7 @@
 
       <!-- Foods Input -->
       <v-col
+        v-if="!state.isRecipe"
         m="12"
         md="3"
         cols="12"
@@ -111,10 +118,12 @@
           variant="solo"
           return-object
           :items="foods || []"
+          :custom-filter="normalizeFilter"
           item-title="name"
           class="mx-1 py-0"
           :placeholder="$t('recipe.choose-food')"
           clearable
+          :menu-props="{ attach: props.menuAttachTarget, maxHeight: '250px' }"
           @keyup.enter="handleFoodEnter"
         >
           <template #prepend>
@@ -149,6 +158,36 @@
           </template>
         </v-autocomplete>
       </v-col>
+      <!-- Recipe Input -->
+      <v-col
+        v-if="state.isRecipe"
+        m="12"
+        md="6"
+        cols="12"
+        class=""
+      >
+        <v-autocomplete
+          ref="search.query"
+          v-model="model.referencedRecipe"
+          v-model:search="search.query.value"
+          auto-select-first
+          hide-details
+          density="compact"
+          variant="solo"
+          return-object
+          :items="search.data.value || []"
+          :custom-filter="normalizeFilter"
+          item-title="name"
+          class="mx-1 py-0"
+          :placeholder="$t('search.type-to-search')"
+          clearable
+          :label="!model.referencedRecipe ? $t('recipe.choose-recipe') : ''"
+          @click="search.trigger()"
+          @focus="search.trigger()"
+        >
+          <template #prepend />
+        </v-autocomplete>
+      </v-col>
       <v-col
         sm="12"
         md=""
@@ -165,12 +204,13 @@
             @click="$emit('clickIngredientField', 'note')"
           />
           <BaseButtonGroup
+            v-if="enableContextMenu"
             hover
             :large="false"
             class="my-auto d-flex"
             :buttons="btns"
             @toggle-section="toggleTitle"
-            @toggle-original="toggleOriginalText"
+            @toggle-subrecipe="toggleIsRecipe"
             @insert-above="$emit('insert-above')"
             @insert-below="$emit('insert-below')"
             @delete="$emit('delete')"
@@ -178,13 +218,7 @@
         </div>
       </v-col>
     </v-row>
-    <p
-      v-if="showOriginalText"
-      class="text-caption"
-    >
-      {{ $t("recipe.original-text-with-value", { originalText: model.originalText }) }}
-    </p>
-
+    <slot name="before-divider" />
     <v-divider
       v-if="!mdAndUp"
       class="my-4"
@@ -197,13 +231,24 @@ import { ref, computed, reactive, toRefs } from "vue";
 import { useDisplay } from "vuetify";
 import { useI18n } from "vue-i18n";
 import { useFoodStore, useFoodData, useUnitStore, useUnitData } from "~/composables/store";
+import { normalizeFilter } from "~/composables/use-utils";
 import { useNuxtApp } from "#app";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
+import { usePublicExploreApi, useUserApi } from "~/composables/api";
+import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
 
 // defineModel replaces modelValue prop
 const model = defineModel<RecipeIngredient>({ required: true });
 
-defineProps({
+const props = defineProps({
+  menuAttachTarget: {
+    type: String,
+    default: "body",
+  },
+  isRecipe: {
+    type: Boolean,
+    default: false,
+  },
   unitError: {
     type: Boolean,
     default: false,
@@ -220,6 +265,18 @@ defineProps({
     type: String,
     default: "",
   },
+  enableContextMenu: {
+    type: Boolean,
+    default: false,
+  },
+  enableDragHandle: {
+    type: Boolean,
+    default: false,
+  },
+  deleteDisabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 defineEmits([
@@ -235,7 +292,7 @@ const { $globals } = useNuxtApp();
 
 const state = reactive({
   showTitle: false,
-  showOriginalText: false,
+  isRecipe: props.isRecipe,
 });
 
 const contextMenuOptions = computed(() => {
@@ -244,6 +301,10 @@ const contextMenuOptions = computed(() => {
       text: i18n.t("recipe.toggle-section"),
       event: "toggle-section",
     },
+    {
+      text: i18n.t("recipe.toggle-recipe"),
+      event: "toggle-subrecipe",
+    },
     {
       text: i18n.t("recipe.insert-above"),
       event: "insert-above",
@@ -254,13 +315,6 @@ const contextMenuOptions = computed(() => {
     },
   ];
 
-  if (model.value.originalText) {
-    options.push({
-      text: i18n.t("recipe.see-original-text"),
-      event: "toggle-original",
-    });
-  }
-
   return options;
 });
 
@@ -281,8 +335,8 @@ const btns = computed(() => {
     text: i18n.t("general.delete"),
     event: "delete",
     children: undefined,
+    disabled: props.deleteDisabled,
   });
-
   return out;
 });
 
@@ -299,6 +353,25 @@ async function createAssignFood() {
   foodAutocomplete.value?.blur();
 }
 
+// Recipes
+const route = useRoute();
+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;
+const search = useRecipeSearch(api);
+const loading = ref(false);
+const selectedIndex = ref(-1);
+// Reset or Grab Recipes on Change
+watch(loading, (val) => {
+  if (!val) {
+    search.query.value = "";
+    selectedIndex.value = -1;
+    search.data.value = [];
+  }
+});
+
 // Units
 const unitStore = useUnitStore();
 const unitsData = useUnitData();
@@ -319,8 +392,15 @@ function toggleTitle() {
   state.showTitle = !state.showTitle;
 }
 
-function toggleOriginalText() {
-  state.showOriginalText = !state.showOriginalText;
+function toggleIsRecipe() {
+  if (state.isRecipe) {
+    model.value.referencedRecipe = undefined;
+  }
+  else {
+    model.value.unit = undefined;
+    model.value.food = undefined;
+  }
+  state.isRecipe = !state.isRecipe;
 }
 
 function handleUnitEnter() {
@@ -349,7 +429,7 @@ function quantityFilter(e: KeyboardEvent) {
   }
 }
 
-const { showTitle, showOriginalText } = toRefs(state);
+const { showTitle } = toRefs(state);
 
 const foods = foodStore.store;
 const units = unitStore.store;

frontend/components/Domain/Recipe/RecipeIngredientHtml.vue

@@ -1,15 +1,44 @@
 <template>
-  <!-- eslint-disable-next-line vue/no-v-html -->
-  <div v-html="safeMarkup" />
+  <div class="ingredient-link-label links-disabled">
+    <SafeMarkdown v-if="baseText" :source="baseText" />
+    <SafeMarkdown
+      v-if="ingredient?.note"
+      class="d-inline"
+      :source="` ${ingredient.note}`"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { sanitizeIngredientHTML } from "~/composables/recipes/use-recipe-ingredients";
+import { computed } from "vue";
+import type { RecipeIngredient } from "~/lib/api/types/recipe";
+import { useParsedIngredientText } from "~/composables/recipes";
 
 interface Props {
-  markup: string;
+  ingredient?: RecipeIngredient;
+  scale?: number;
 }
-const props = defineProps<Props>();
 
-const safeMarkup = computed(() => sanitizeIngredientHTML(props.markup));
+const { ingredient, scale = 1 } = defineProps<Props>();
+
+const baseText = computed(() => {
+  if (!ingredient) return "";
+  const parsed = useParsedIngredientText(ingredient, scale);
+  return [parsed.quantity, parsed.unit, parsed.name].filter(Boolean).join(" ").trim();
+});
 </script>
+
+<style scoped>
+.ingredient-link-label {
+  display: block;
+  line-height: 1.25;
+  word-break: break-word;
+  font-size: 0.95rem;
+}
+.links-disabled :deep(a) {
+  pointer-events: none;
+  cursor: default;
+  color: var(--v-theme-primary);
+  text-decoration: none;
+}
+</style>

frontend/components/Domain/Recipe/RecipeIngredientListItem.vue

@@ -13,6 +13,10 @@
       class="text-bold d-inline"
       :source="parsedIng.note"
     />
+    <template v-else-if="parsedIng.recipeLink">
+      <SafeMarkdown v-if="parsedIng.recipeLink" class="text-bold d-inline" :source="parsedIng.recipeLink" />
+      <SafeMarkdown v-if="parsedIng.note" class="note" :source="parsedIng.note" />
+    </template>
     <template v-else>
       <SafeMarkdown
         v-if="parsedIng.name"
@@ -39,9 +43,12 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   scale: 1,
 });
+const route = useRoute();
+const $auth = useMealieAuth();
+const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
 
 const parsedIng = computed(() => {
-  return useParsedIngredientText(props.ingredient, props.scale);
+  return useParsedIngredientText(props.ingredient, props.scale, true, groupSlug.value.toString());
 });
 </script>
 

frontend/components/Domain/Recipe/RecipeLastMade.vue

@@ -8,6 +8,7 @@
         :title="$t('recipe.made-this')"
         :submit-text="$t('recipe.add-to-timeline')"
         can-submit
+        disable-submit-on-enter
         @submit="createTimelineEvent"
       >
         <v-card-text>
@@ -20,6 +21,29 @@
               persistent-hint
               rows="4"
             />
+            <div v-if="childRecipes?.length">
+              <v-card-text class="pt-6 pb-0">
+                {{ $t('recipe.include-linked-recipes') }}
+              </v-card-text>
+              <v-list>
+                <v-list-item
+                  v-for="(childRecipe, i) in childRecipes"
+                  :key="childRecipe.recipeId + i"
+                  density="compact"
+                  class="my-0 py-0"
+                  @click="childRecipe.checked = !childRecipe.checked"
+                >
+                  <v-checkbox
+                    hide-details
+                    density="compact"
+                    :input-value="childRecipe.checked"
+                    :label="childRecipe.name"
+                    class="my-0 py-0"
+                    color="secondary"
+                  />
+                </v-list-item>
+              </v-list>
+            </div>
             <v-container>
               <v-row>
                 <v-col cols="6">
@@ -32,7 +56,7 @@
                   >
                     <template #activator="{ props: activatorProps }">
                       <v-text-field
-                        v-model="newTimelineEventTimestampString"
+                        :model-value="$d(newTimelineEventTimestamp)"
                         :prepend-icon="$globals.icons.calendar"
                         v-bind="activatorProps"
                         readonly
@@ -102,7 +126,7 @@
                 <span class="text-body-1 opacity-80">
                   <b>{{ $t("general.last-made") }}</b>
                   <br>
-                  {{ lastMade ? new Date(lastMade).toLocaleDateString($i18n.locale) : $t("general.never") }}
+                  {{ lastMade ? $d(new Date(lastMade)) : $t("general.never") }}
                 </span>
                 <v-icon end size="large" color="primary">
                   {{ $globals.icons.createAlt }}
@@ -119,6 +143,7 @@
 
 <script setup lang="ts">
 import { whenever } from "@vueuse/core";
+import { formatISO } from "date-fns";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { useHouseholdSelf } from "~/composables/use-households";
@@ -148,7 +173,7 @@ const newTimelineEventImageName = ref<string>("");
 const newTimelineEventImagePreviewUrl = ref<string>();
 const newTimelineEventTimestamp = ref<Date>(new Date());
 const newTimelineEventTimestampString = computed(() => {
-  return newTimelineEventTimestamp.value.toISOString().substring(0, 10);
+  return formatISO(newTimelineEventTimestamp.value, { representation: "date" });
 });
 
 const lastMade = ref(props.recipe.lastMade);
@@ -165,11 +190,26 @@ onMounted(async () => {
   lastMadeReady.value = true;
 });
 
+const childRecipes = computed(() => {
+  return props.recipe.recipeIngredient?.map((ingredient) => {
+    if (ingredient.referencedRecipe) {
+      return {
+        checked: false, // Default value for checked
+        recipeId: ingredient.referencedRecipe.id || "", // Non-nullable recipeId
+        ...ingredient.referencedRecipe, // Spread the rest of the referencedRecipe properties
+      };
+    }
+    else {
+      return undefined;
+    }
+  }).filter(recipe => recipe !== undefined); // Filter out undefined values
+});
+
 whenever(
   () => madeThisDialog.value,
   () => {
     // Set timestamp to now
-    newTimelineEventTimestamp.value = new Date(Date.now() - new Date().getTimezoneOffset() * 60000);
+    newTimelineEventTimestamp.value = new Date();
   },
 );
 
@@ -249,6 +289,37 @@ async function createTimelineEvent() {
     }
   }
 
+  for (const childRecipe of childRecipes.value || []) {
+    if (!childRecipe.checked) {
+      continue;
+    }
+
+    const childTimelineEvent = {
+      ...newTimelineEvent.value,
+      recipeId: childRecipe.recipeId,
+      eventMessage: i18n.t("recipe.made-for-recipe", { recipe: childRecipe.name }),
+      image: undefined,
+    };
+    try {
+      await userApi.recipes.createTimelineEvent(childTimelineEvent);
+    }
+    catch (error) {
+      console.error(`Failed to create timeline event for child recipe ${childRecipe.slug}:`, error);
+    }
+
+    if (
+      newTimelineEvent.value.timestamp
+      && (!childRecipe.lastMade || newTimelineEvent.value.timestamp > childRecipe.lastMade)
+    ) {
+      try {
+        await userApi.recipes.updateLastMade(childRecipe.slug || "", newTimelineEvent.value.timestamp);
+      }
+      catch (error) {
+        console.error(`Failed to update last made date for child recipe ${childRecipe.slug}:`, error);
+      }
+    }
+  }
+
   // update the image, if provided
   let imageError = false;
   if (newTimelineEventImage.value) {
@@ -267,7 +338,6 @@ async function createTimelineEvent() {
       console.error("Failed to upload image for timeline event:", error);
     }
   }
-
   if (imageError) {
     alert.error(i18n.t("recipe.added-to-timeline-but-failed-to-add-image"));
   }

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

@@ -105,10 +105,9 @@
               <v-icon>
                 {{ icon }}
               </v-icon>
-              <v-card-title class="py-1">
+              <v-card-title class="py-1 text-truncate flex-shrink-1 flex-grow-1">
                 {{ item.name }}
               </v-card-title>
-              <v-spacer />
               <ContextMenu
                 :items="[presets.delete, presets.edit]"
                 @delete="confirmDelete(item)"

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,7 +1,14 @@
 <template>
   <div>
-    <v-container v-show="!isCookMode" key="recipe-page" class="px-0" :class="{ 'pa-0': $vuetify.display.smAndDown.value }">
-      <v-card :flat="$vuetify.display.smAndDown.value" class="d-print-none">
+    <RecipePageParseDialog
+      :model-value="isParsing"
+      :ingredients="recipe.recipeIngredient"
+      :width="$vuetify.display.smAndDown ? '100%' : '80%'"
+      @update:model-value="toggleIsParsing"
+      @save="saveParsedIngredients"
+    />
+    <v-container v-show="!isCookMode" key="recipe-page" class="px-0" :class="{ 'pa-0': $vuetify.display.smAndDown }">
+      <v-card :flat="$vuetify.display.smAndDown" class="d-print-none">
         <RecipePageHeader
           :recipe="recipe"
           :recipe-scale="scale"
@@ -88,9 +95,12 @@
       <RecipePrintContainer :recipe="recipe" :scale="scale" />
     </v-container>
     <!-- Cook mode displayes two columns with ingredients and instructions side by side, each being scrolled individually, allowing to view both at the same time -->
+    <!-- The calc is to account for the navabar height (48px) -->
     <v-sheet
       v-show="isCookMode && !hasLinkedIngredients"
       key="cookmode"
+      :height="$vuetify.display.smAndUp ? 'calc(100vh - 48px)' : 'auto'"
+      class-name="overflow-hidden"
     >
       <!-- the calc is to account for the toolbar a more dynamic solution could be needed  -->
       <v-row style="height: 100%" no-gutters class="overflow-hidden">
@@ -106,9 +116,13 @@
           />
           <v-divider />
         </v-col>
-        <v-col class="overflow-y-auto"
-        :class="$vuetify.display.smAndDown.value ? 'py-2': 'py-6'"
-        style="height: 100%" cols="12" sm="7">
+        <v-col
+          class="overflow-y-auto"
+          :class="$vuetify.display.smAndDown ? 'py-2': 'py-6'"
+          style="height: 100%"
+          cols="12"
+          sm="7"
+        >
           <h2 class="text-h5 px-4 font-weight-medium opacity-80">
             {{ $t('recipe.instructions') }}
           </h2>
@@ -168,6 +182,7 @@ import RecipePageIngredientEditor from "./RecipePageParts/RecipePageIngredientEd
 import RecipePageIngredientToolsView from "./RecipePageParts/RecipePageIngredientToolsView.vue";
 import RecipePageInstructions from "./RecipePageParts/RecipePageInstructions.vue";
 import RecipePageOrganizers from "./RecipePageParts/RecipePageOrganizers.vue";
+import RecipePageParseDialog from "./RecipePageParts/RecipePageParseDialog.vue";
 import RecipePageScale from "./RecipePageParts/RecipePageScale.vue";
 import RecipePageInfoEditor from "./RecipePageParts/RecipePageInfoEditor.vue";
 import RecipePageComments from "./RecipePageParts/RecipePageComments.vue";
@@ -178,26 +193,28 @@ import {
   usePageState,
 } from "~/composables/recipe-page/shared-state";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
-import type { Recipe, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
+import type { Recipe, RecipeCategory, RecipeIngredient, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
 import { useRouteQuery } from "~/composables/use-router";
 import { useUserApi } from "~/composables/api";
 import { uuid4, deepCopy } from "~/composables/use-utils";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
 import RecipeNotes from "~/components/Domain/Recipe/RecipeNotes.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useNavigationWarning } from "~/composables/use-navigation-warning";
 
 const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
 
-const { $vuetify } = useNuxtApp();
+const display = useDisplay();
 const i18n = useI18n();
 const $auth = useMealieAuth();
 const route = useRoute();
+const { isOwnGroup } = useLoggedInState();
 
 const groupSlug = computed(() => (route.params.groupSlug as string) || $auth.user?.value?.groupSlug || "");
 
 const router = useRouter();
 const api = useUserApi();
-const { setMode, isEditForm, isEditJSON, isCookMode, isEditMode, toggleCookMode }
+const { setMode, isEditForm, isEditJSON, isCookMode, isEditMode, isParsing, toggleCookMode, toggleIsParsing }
   = usePageState(recipe.value.slug);
 const { deactivateNavigationWarning } = useNavigationWarning();
 const notLinkedIngredients = computed(() => {
@@ -246,12 +263,29 @@ const hasLinkedIngredients = computed(() => {
 
 type BooleanString = "true" | "false" | "";
 
-const edit = useRouteQuery<BooleanString>("edit", "");
+const paramsEdit = useRouteQuery<BooleanString>("edit", "");
+const paramsParse = useRouteQuery<BooleanString>("parse", "");
 
 onMounted(() => {
-  if (edit.value === "true") {
+  if (paramsEdit.value === "true" && isOwnGroup.value) {
     setMode(PageMode.EDIT);
   }
+
+  if (paramsParse.value === "true" && isOwnGroup.value) {
+    toggleIsParsing(true);
+  }
+});
+
+watch(isEditMode, (newVal) => {
+  if (!newVal) {
+    paramsEdit.value = undefined;
+  }
+});
+
+watch(isParsing, () => {
+  if (!isParsing.value) {
+    paramsParse.value = undefined;
+  }
 });
 
 /** =============================================================
@@ -259,13 +293,22 @@ onMounted(() => {
  */
 
 async function saveRecipe() {
-  const { data } = await api.recipes.updateOne(recipe.value.slug, recipe.value);
-  setMode(PageMode.VIEW);
+  const { data, error } = await api.recipes.updateOne(recipe.value.slug, recipe.value);
+  if (!error) {
+    setMode(PageMode.VIEW);
+  }
   if (data?.slug) {
     router.push(`/g/${groupSlug.value}/r/` + data.slug);
+    recipe.value = data as NoUndefinedField<Recipe>;
   }
 }
 
+async function saveParsedIngredients(ingredients: NoUndefinedField<RecipeIngredient[]>) {
+  recipe.value.recipeIngredient = ingredients;
+  await saveRecipe();
+  toggleIsParsing(false);
+}
+
 async function deleteRecipe() {
   const { data } = await api.recipes.deleteOne(recipe.value.slug);
   if (data?.slug) {
@@ -278,7 +321,7 @@ async function deleteRecipe() {
  */
 const landscape = computed(() => {
   const preferLandscape = recipe.value.settings?.landscapeView;
-  const smallScreen = !$vuetify.display.smAndUp.value;
+  const smallScreen = !display.smAndUp.value;
 
   if (preferLandscape) {
     return true;
@@ -302,7 +345,7 @@ function addStep(steps: Array<string> | null = null) {
 
   if (steps) {
     const cleanedSteps = steps.map((step) => {
-      return { id: uuid4(), text: step, title: "", ingredientReferences: [] };
+      return { id: uuid4(), text: step, title: "", summary: "", ingredientReferences: [] };
     });
 
     recipe.value.recipeInstructions.push(...cleanedSteps);

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

@@ -5,6 +5,7 @@
       :slug="recipe.slug"
       @upload="uploadImage"
       @refresh="imageKey++"
+      @delete="deleteImage"
     />
     <RecipeSettingsMenu
       v-model="recipe.settings"
@@ -13,25 +14,25 @@
       @upload="uploadImage"
     />
     <v-spacer />
-      <v-select
-        v-model="recipe.userId"
-        class="my-2"
-        max-width="300"
-        :items="allUsers"
-        :item-props="itemsProps"
-        :label="$t('general.owner')"
-        :disabled="!canEditOwner"
-        variant="outlined"
-        density="compact"
-      >
-        <template #prepend>
-          <UserAvatar
-            :user-id="recipe.userId"
-            :tooltip="false"
-          />
-        </template>
-      </v-select>
-</div>
+    <v-select
+      v-model="recipe.userId"
+      class="my-2"
+      max-width="300"
+      :items="allUsers"
+      :item-props="itemsProps"
+      :label="$t('general.owner')"
+      :disabled="!canEditOwner"
+      variant="outlined"
+      density="compact"
+    >
+      <template #prepend>
+        <UserAvatar
+          :user-id="recipe.userId"
+          :tooltip="false"
+        />
+      </template>
+    </v-select>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -78,4 +79,10 @@ async function uploadImage(fileObject: File) {
   }
   imageKey.value++;
 }
+
+async function deleteImage() {
+  // The image is already deleted on the backend, just need to update the UI
+  recipe.value.image = "";
+  imageKey.value++;
+}
 </script>

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

@@ -29,8 +29,8 @@
         class="mb-2 mx-n2"
       >
         <v-card-title class="text-h5 font-weight-medium opacity-80">
-{{ $t('recipe.api-extras') }}
-</v-card-title>
+          {{ $t('recipe.api-extras') }}
+        </v-card-title>
         <v-divider class="ml-4" />
         <v-card-text>
           {{ $t('recipe.api-extras-description') }}

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

@@ -47,7 +47,7 @@ const props = withDefaults(defineProps<Props>(), {
   landscape: false,
 });
 
-defineEmits(["save", "delete"]);
+defineEmits(["save", "delete", "print"]);
 
 const { recipeImage } = useStaticRoutes();
 const { imageKey, setMode, toggleEditMode, isEditMode } = usePageState(props.recipe.slug);

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

@@ -12,10 +12,10 @@
       >
         <v-card-text class="w-100">
           <div class="d-flex flex-column align-center">
-          <v-card-title class="text-h5 font-weight-regular pa-0 text-wrap text-center opacity-80">
-            {{ recipe.name }}
-          </v-card-title>
-          <RecipeRating
+            <v-card-title class="text-h5 font-weight-regular pa-0 text-wrap text-center opacity-80">
+              {{ recipe.name }}
+            </v-card-title>
+            <RecipeRating
               :key="recipe.slug"
               :value="recipe.rating"
               :recipe-id="recipe.id"

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

@@ -27,8 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
   maxWidth: undefined,
 });
 
-const { $vuetify } = useNuxtApp();
-const { recipeImage } = useStaticRoutes();
+const display = useDisplay();
+const { recipeImage, recipeSmallImage } = useStaticRoutes();
 const { imageKey } = usePageState(props.recipe.slug);
 const { user } = usePageUser();
 
@@ -42,11 +42,13 @@ if (user) {
 
 const hideImage = ref(false);
 const imageHeight = computed(() => {
-  return $vuetify.display.xs.value ? "200" : "400";
+  return display.xs.value ? "200" : "400";
 });
 
 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/RecipePageIngredientEditor.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div>
     <div class="mb-4">
@@ -31,6 +30,9 @@
           v-for="(ingredient, index) in recipe.recipeIngredient"
           :key="ingredient.referenceId"
           v-model="recipe.recipeIngredient[index]"
+          :is-recipe="ingredientIsRecipe(ingredient)"
+          enable-drag-handle
+          enable-context-menu
           class="list-group-item"
           @delete="recipe.recipeIngredient.splice(index, 1)"
           @insert-above="insertNewIngredient(index)"
@@ -55,8 +57,8 @@
               class="mb-1"
               :disabled="hasFoodOrUnit"
               color="accent"
-              :to="`/g/${groupSlug}/r/${recipe.slug}/ingredient-parser`"
               v-bind="props"
+              @click="toggleIsParsing(true)"
             >
               <template #icon>
                 {{ $globals.icons.foods }}
@@ -68,15 +70,59 @@
         <span>{{ parserToolTip }}</span>
       </v-tooltip>
       <RecipeDialogBulkAdd
+        ref="domBulkAddDialog"
         class="mx-1 mb-1"
+        style="display: none"
         @bulk-data="addIngredient"
       />
-      <BaseButton
-        class="mb-1"
-        @click="addIngredient"
-      >
-        {{ $t("general.add") }}
-      </BaseButton>
+      <div class="d-inline-flex">
+        <!-- Main button: Add Food -->
+        <v-btn
+          color="success"
+          class="split-main ml-2"
+          @click="addIngredient"
+        >
+          <v-icon start>
+            {{ $globals.icons.createAlt }}
+          </v-icon>
+          {{ $t('general.add') || 'Add Food' }}
+        </v-btn>
+        <!-- Dropdown button -->
+        <v-menu>
+          <template #activator="{ props }">
+            <v-btn
+              color="success"
+              class="split-dropdown"
+              v-bind="props"
+            >
+              <v-icon>{{ $globals.icons.chevronDown }}</v-icon>
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-item
+              slim
+              density="comfortable"
+              :prepend-icon="$globals.icons.foods"
+              :title="$t('new-recipe.add-food')"
+              @click="addIngredient"
+            />
+            <v-list-item
+              slim
+              density="comfortable"
+              :prepend-icon="$globals.icons.silverwareForkKnife"
+              :title="$t('new-recipe.add-recipe')"
+              @click="addRecipe"
+            />
+            <v-list-item
+              slim
+              density="comfortable"
+              :prepend-icon="$globals.icons.create"
+              :title="$t('new-recipe.bulk-add')"
+              @click="showBulkAdd"
+            />
+          </v-list>
+        </v-menu>
+      </div>
     </div>
   </div>
 </template>
@@ -84,19 +130,19 @@
 <script setup lang="ts">
 import { VueDraggable } from "vue-draggable-plus";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
-import type { Recipe } from "~/lib/api/types/recipe";
+import type { Recipe, RecipeIngredient } from "~/lib/api/types/recipe";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
+import { usePageState } from "~/composables/recipe-page/shared-state";
 import { uuid4 } from "~/composables/use-utils";
 
 const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
+const ingredientsWithRecipe = new Map<string, boolean>();
 const i18n = useI18n();
-const $auth = useMealieAuth();
 
 const drag = ref(false);
-
-const route = useRoute();
-const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+const domBulkAddDialog = ref<InstanceType<typeof RecipeDialogBulkAdd> | null>(null);
+const { toggleIsParsing } = usePageState(recipe.value.slug);
 
 const hasFoodOrUnit = computed(() => {
   if (!recipe.value) {
@@ -119,6 +165,22 @@ const parserToolTip = computed(() => {
   return i18n.t("recipe.parse-ingredients");
 });
 
+function showBulkAdd() {
+  domBulkAddDialog.value?.open();
+}
+
+function ingredientIsRecipe(ingredient: RecipeIngredient): boolean {
+  if (ingredient.referencedRecipe) {
+    return true;
+  }
+
+  if (ingredient.referenceId) {
+    return !!ingredientsWithRecipe.get(ingredient.referenceId);
+  }
+
+  return false;
+}
+
 function addIngredient(ingredients: Array<string> | null = null) {
   if (ingredients?.length) {
     const newIngredients = ingredients.map((x) => {
@@ -128,7 +190,7 @@ function addIngredient(ingredients: Array<string> | null = null) {
         note: x,
         unit: undefined,
         food: undefined,
-        quantity: 1,
+        quantity: 0,
       };
     });
 
@@ -146,6 +208,41 @@ function addIngredient(ingredients: Array<string> | null = null) {
       unit: undefined,
       // @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
       food: undefined,
+      quantity: 0,
+    });
+  }
+}
+
+function addRecipe(recipes: Array<string> | null = null) {
+  const refId = uuid4();
+  ingredientsWithRecipe.set(refId, true);
+
+  if (recipes?.length) {
+    const newRecipes = recipes.map((x) => {
+      return {
+        referenceId: refId,
+        title: "",
+        note: x,
+        unit: undefined,
+        referencedRecipe: undefined,
+        quantity: 1,
+      };
+    });
+
+    if (newRecipes) {
+      // @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
+      recipe.value.recipeIngredient.push(...newRecipes);
+    }
+  }
+  else {
+    recipe.value.recipeIngredient.push({
+      referenceId: refId,
+      title: "",
+      note: "",
+      // @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
+      unit: undefined,
+      // @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
+      referencedRecipe: undefined,
       quantity: 1,
     });
   }
@@ -160,7 +257,21 @@ function insertNewIngredient(dest: number) {
     unit: undefined,
     // @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
     food: undefined,
-    quantity: 1,
+    quantity: 0,
   });
 }
 </script>
+
+<style scoped>
+.split-main {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.split-dropdown {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  min-width: 30px;
+  padding-left: 0;
+  padding-right: 0;
+}
+</style>

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

@@ -29,31 +29,48 @@
             {{ activeText }}
           </p>
           <v-divider class="mb-4" />
-          <v-checkbox-btn
-            v-for="ing in unusedIngredients"
-            :key="ing.referenceId"
-            v-model="activeRefs"
-            :value="ing.referenceId"
-          >
-            <template #label>
-              <RecipeIngredientHtml :markup="parseIngredientText(ing)" />
+          <template v-if="Object.keys(groupedUnusedIngredients).length > 0">
+            <h4 class="py-3 ml-1">
+              {{ $t("recipe.unlinked") }}
+            </h4>
+            <template v-for="(ingredients, title) in groupedUnusedIngredients" :key="title">
+              <h4 v-if="title" class="py-3 ml-1 pl-4">
+                {{ title }}
+              </h4>
+              <v-checkbox-btn
+                v-for="ing in ingredients"
+                :key="ing.referenceId"
+                v-model="activeRefs"
+                :value="ing.referenceId"
+                class="ml-4"
+              >
+                <template #label>
+                  <RecipeIngredientHtml :ingredient="ing" :scale="scale" />
+                </template>
+              </v-checkbox-btn>
             </template>
-          </v-checkbox-btn>
+          </template>
 
-          <template v-if="usedIngredients.length > 0">
+          <template v-if="Object.keys(groupedUsedIngredients).length > 0">
             <h4 class="py-3 ml-1">
               {{ $t("recipe.linked-to-other-step") }}
             </h4>
-            <v-checkbox-btn
-              v-for="ing in usedIngredients"
-              :key="ing.referenceId"
-              v-model="activeRefs"
-              :value="ing.referenceId"
-            >
-              <template #label>
-                <RecipeIngredientHtml :markup="parseIngredientText(ing)" />
-              </template>
-            </v-checkbox-btn>
+            <template v-for="(ingredients, title) in groupedUsedIngredients" :key="title">
+              <h4 v-if="title" class="py-3 ml-1 pl-4">
+                {{ title }}
+              </h4>
+              <v-checkbox-btn
+                v-for="ing in ingredients"
+                :key="ing.referenceId"
+                v-model="activeRefs"
+                :value="ing.referenceId"
+                class="ml-4"
+              >
+                <template #label>
+                  <RecipeIngredientHtml :ingredient="ing" :scale="scale" />
+                </template>
+              </v-checkbox-btn>
+            </template>
           </template>
         </v-card-text>
 
@@ -167,17 +184,17 @@
           <v-hover v-slot="{ isHovering }">
             <v-card
               class="my-3"
-              :class="[{ 'on-hover': isHovering }, isChecked(index)]"
+              :class="[{ 'on-hover': isHovering }, { 'cursor-default': isEditForm }, isChecked(index)]"
               :elevation="isHovering ? 12 : 2"
               :ripple="false"
               @click="toggleDisabled(index)"
             >
-              <v-card-title :class="{ 'pb-0': !isChecked(index) }">
-                <div class="d-flex align-center">
+              <v-card-title class="recipe-step-title pt-3" :class="!isChecked(index) ? 'pb-0' : 'pb-3'">
+                <div class="d-flex align-center w-100">
                   <v-text-field
                     v-if="isEditForm"
                     v-model="step.summary"
-                    class="headline handle"
+                    class="headline"
                     hide-details
                     density="compact"
                     variant="solo"
@@ -185,14 +202,27 @@
                     :placeholder="$t('recipe.step-index', { step: index + 1 })"
                   >
                     <template #prepend>
-                      <v-icon size="26">
+                      <v-icon size="26" class="handle">
                         {{ $globals.icons.arrowUpDown }}
                       </v-icon>
                     </template>
                   </v-text-field>
-                  <span v-else>
-                    {{ step.summary ? step.summary : $t("recipe.step-index", { step: index + 1 }) }}
-                  </span>
+                  <div
+                    v-else
+                    class="summary-wrapper"
+                  >
+                    <template v-if="step.summary">
+                      <SafeMarkdown
+                        class="pr-2"
+                        :source="step.summary"
+                      />
+                    </template>
+                    <template v-else>
+                      <span>
+                        {{ $t('recipe.step-index', { step: index + 1 }) }}
+                      </span>
+                    </template>
+                  </div>
                   <template v-if="isEditForm">
                     <div class="ml-auto">
                       <BaseButtonGroup
@@ -297,11 +327,22 @@
                       persistentHint: true,
                     }"
                   />
-                  <RecipeIngredientHtml
-                    v-for="ing in step.ingredientReferences"
-                    :key="ing.referenceId!"
-                    :markup="getIngredientByRefId(ing.referenceId!)"
-                  />
+                  <div
+                    v-if="step.ingredientReferences && step.ingredientReferences.length"
+                    class="linked-ingredients-editor"
+                  >
+                    <div
+                      v-for="(linkRef, i) in step.ingredientReferences"
+                      :key="linkRef.referenceId ?? i"
+                      class="mb-1"
+                    >
+                      <RecipeIngredientHtml
+                        v-if="linkRef.referenceId && ingredientLookup[linkRef.referenceId]"
+                        :ingredient="ingredientLookup[linkRef.referenceId]"
+                        :scale="scale"
+                      />
+                    </div>
+                  </div>
                 </v-card-text>
               </DropZone>
               <v-expand-transition>
@@ -356,9 +397,7 @@
 <script setup lang="ts">
 import { VueDraggable } from "vue-draggable-plus";
 import { computed, nextTick, onMounted, ref, watch } from "vue";
-import RecipeIngredientHtml from "../../RecipeIngredientHtml.vue";
 import type { RecipeStep, IngredientReferences, RecipeIngredient, RecipeAsset, Recipe } from "~/lib/api/types/recipe";
-import { parseIngredientText } from "~/composables/recipes";
 import { uuid4 } from "~/composables/use-utils";
 import { useUserApi, useStaticRoutes } from "~/composables/api";
 import { usePageState } from "~/composables/recipe-page/shared-state";
@@ -366,6 +405,7 @@ import { useExtractIngredientReferences } from "~/composables/recipe-page/use-ex
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import DropZone from "~/components/global/DropZone.vue";
 import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
+import RecipeIngredientHtml from "~/components/Domain/Recipe/RecipeIngredientHtml.vue";
 
 interface MergerHistory {
   target: number;
@@ -483,10 +523,9 @@ function openDialog(idx: number, text: string, refs?: IngredientReferences[]) {
     instructionList.value[idx].ingredientReferences = [];
     refs = instructionList.value[idx].ingredientReferences as IngredientReferences[];
   }
-
-  setUsedIngredients();
-  activeText.value = text;
   activeIndex.value = idx;
+  activeText.value = text;
+  setUsedIngredients();
   dialog.value = true;
   activeRefs.value = refs.map(ref => ref.referenceId ?? "");
 }
@@ -527,29 +566,26 @@ function saveAndOpenNextLinkIngredients() {
 function setUsedIngredients() {
   const usedRefs: { [key: string]: boolean } = {};
 
-  instructionList.value.forEach((element) => {
+  instructionList.value.forEach((element, idx) => {
+    if (idx === activeIndex.value) return;
     element.ingredientReferences?.forEach((ref) => {
-      if (ref.referenceId !== undefined) {
-        usedRefs[ref.referenceId!] = true;
-      }
+      if (ref.referenceId) usedRefs[ref.referenceId] = true;
     });
   });
 
-  usedIngredients.value = props.recipe.recipeIngredient.filter((ing) => {
-    return ing.referenceId !== undefined && ing.referenceId in usedRefs;
-  });
+  usedIngredients.value = props.recipe.recipeIngredient.filter(ing => !!ing.referenceId && ing.referenceId in usedRefs);
 
-  unusedIngredients.value = props.recipe.recipeIngredient.filter((ing) => {
-    return !(ing.referenceId !== undefined && ing.referenceId in usedRefs);
-  });
+  unusedIngredients.value = props.recipe.recipeIngredient.filter(ing => !!ing.referenceId && !(ing.referenceId in usedRefs));
 }
 
+watch(activeRefs, () => setUsedIngredients());
+
 function autoSetReferences() {
   useExtractIngredientReferences(
     props.recipe.recipeIngredient,
     activeRefs.value,
     activeText.value,
-  ).forEach((ingredient: string) => activeRefs.value.push(ingredient));
+  ).forEach(ingredient => activeRefs.value.push(ingredient));
 }
 
 const ingredientLookup = computed(() => {
@@ -563,15 +599,60 @@ const ingredientLookup = computed(() => {
   }, results);
 });
 
-function getIngredientByRefId(refId: string | undefined) {
-  if (refId === undefined) {
-    return "";
-  }
+// Map each ingredient's referenceId to its section title
+const ingredientSectionTitles = computed(() => {
+  const titleMap: { [key: string]: string } = {};
+  let currentTitle = "";
 
-  const ing = ingredientLookup.value[refId];
-  if (!ing) return "";
-  return parseIngredientText(ing, props.scale);
-}
+  // Go through all ingredients in order
+  props.recipe.recipeIngredient.forEach((ingredient) => {
+    if (ingredient.referenceId === undefined) {
+      return;
+    }
+
+    // If this ingredient has a title, update the current title
+    if (ingredient.title) {
+      currentTitle = ingredient.title;
+    }
+
+    // Assign the current title to this ingredient
+    titleMap[ingredient.referenceId] = currentTitle;
+  });
+
+  return titleMap;
+});
+
+const groupedUnusedIngredients = computed((): Record<string, RecipeIngredient[]> => {
+  const groups: Record<string, RecipeIngredient[]> = {};
+
+  // Group ingredients by section title
+  unusedIngredients.value.forEach((ingredient) => {
+    if (ingredient.referenceId === undefined) {
+      return;
+    }
+
+    // Use the section title from the mapping, or fallback to the ingredient's own title
+    const title = ingredientSectionTitles.value[ingredient.referenceId] || ingredient.title || "";
+    (groups[title] ||= []).push(ingredient);
+  });
+
+  return groups;
+});
+
+const groupedUsedIngredients = computed((): Record<string, RecipeIngredient[]> => {
+  const groups: Record<string, RecipeIngredient[]> = {};
+  usedIngredients.value.forEach((ingredient) => {
+    if (ingredient.referenceId === undefined) {
+      return;
+    }
+
+    // Use the section title from the mapping, or fallback to the ingredient's own title
+    const title = ingredientSectionTitles.value[ingredient.referenceId] || ingredient.title || "";
+    (groups[title] ||= []).push(ingredient);
+  });
+
+  return groups;
+});
 
 // ===============================================================
 // Instruction Merger
@@ -765,7 +846,21 @@ function openImageUpload(index: number) {
   z-index: 1;
 }
 
-.v-text-field >>> input {
+.v-text-field :deep(input) {
   font-size: 1.5rem;
 }
+
+.recipe-step-title {
+  /* Multiline display */
+  white-space: normal;
+  line-height: 1.25;
+  word-break: break-word;
+}
+.summary-wrapper {
+  flex: 1 1 auto;
+  min-width: 0; /* wrapping in flex container */
+  white-space: normal;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
 </style>

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

@@ -0,0 +1,552 @@
+<template>
+  <BaseDialog
+    :model-value="modelValue"
+    :title="$t('recipe.parse-ingredients')"
+    :icon="$globals.icons.fileSign"
+    disable-submit-on-enter
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <v-container fluid class="pa-2 ma-0" style="background-color: rgb(var(--v-theme-background));">
+      <div v-if="state.loading.parser" class="my-6">
+        <AppLoader waiting-text="" class="my-6" />
+      </div>
+      <div v-else>
+        <BaseCardSectionTitle :title="$t('recipe.parser.ingredient-parser')">
+          <div v-if="!state.allReviewed" class="mb-4">
+            <p>{{ $t("recipe.parser.ingredient-parser-description") }}</p>
+            <p>{{ $t("recipe.parser.ingredient-parser-final-review-description") }}</p>
+          </div>
+          <div class="d-flex flex-wrap align-center">
+            <div class="text-body-2 mr-2">
+              {{ $t("recipe.parser.select-parser") }}
+            </div>
+            <div class="d-flex align-center">
+              <BaseOverflowButton
+                v-model="parser"
+                :disabled="state.loading.parser"
+                btn-class="mx-2"
+                :items="availableParsers"
+              />
+              <v-btn
+                icon
+                size="40"
+                color="info"
+                :disabled="state.loading.parser"
+                @click="parseIngredients"
+              >
+                <v-icon>{{ $globals.icons.refresh }}</v-icon>
+              </v-btn>
+            </div>
+          </div>
+        </BaseCardSectionTitle>
+        <v-card v-if="!state.allReviewed && currentIng">
+          <v-card-text class="pb-0 mb-0">
+            <div class="text-center px-8 py-4 mb-6">
+              <p class="text-h5 font-italic">
+                {{ currentIng.input }}
+              </p>
+            </div>
+            <div class="d-flex align-center pa-0 ma-0">
+              <v-icon
+                :color="(currentIng.confidence?.average || 0) < confidenceThreshold ? 'error' : 'success'"
+              >
+                {{ (currentIng.confidence?.average || 0) < confidenceThreshold ? $globals.icons.alert : $globals.icons.check }}
+              </v-icon>
+              <span
+                class="ml-2"
+                :color="currentIngHasError ? 'error-text' : 'success-text'"
+              >
+                {{ $t("recipe.parser.confidence-score") }}: {{ currentIng.confidence ? asPercentage(currentIng.confidence?.average!) : "" }}
+              </span>
+            </div>
+            <RecipeIngredientEditor
+              v-model="currentIng.ingredient"
+              :unit-error="!!currentMissingUnit"
+              :unit-error-tooltip="$t('recipe.parser.this-unit-could-not-be-parsed-automatically')"
+              :food-error="!!currentMissingFood"
+              :food-error-tooltip="$t('recipe.parser.this-food-could-not-be-parsed-automatically')"
+            />
+            <v-card-actions>
+              <v-spacer />
+              <BaseButton
+                v-if="currentMissingUnit && !currentIng.ingredient.unit?.id"
+                color="warning"
+                size="small"
+                @click="createMissingUnit"
+              >
+                {{ i18n.t("recipe.parser.missing-unit", { unit: currentMissingUnit }) }}
+              </BaseButton>
+              <BaseButton
+                v-if="
+                  currentMissingUnit
+                    && currentIng.ingredient.unit?.id
+                    && currentMissingUnit.toLowerCase() != currentIng.ingredient.unit?.name.toLowerCase()
+                "
+                color="warning"
+                size="small"
+                @click="addMissingUnitAsAlias"
+              >
+                {{ i18n.t("recipe.parser.add-text-as-alias-for-item", { text: currentMissingUnit, item: currentIng.ingredient.unit.name }) }}
+              </BaseButton>
+              <BaseButton
+                v-if="currentMissingFood && !currentIng.ingredient.food?.id"
+                color="warning"
+                size="small"
+                @click="createMissingFood"
+              >
+                {{ i18n.t("recipe.parser.missing-food", { food: currentMissingFood }) }}
+              </BaseButton>
+              <BaseButton
+                v-if="
+                  currentMissingFood
+                    && currentIng.ingredient.food?.id
+                    && currentMissingFood.toLowerCase() != currentIng.ingredient.food?.name.toLowerCase()
+                "
+                color="warning"
+                size="small"
+                @click="addMissingFoodAsAlias"
+              >
+                {{ i18n.t("recipe.parser.add-text-as-alias-for-item", { text: currentMissingFood, item: currentIng.ingredient.food.name }) }}
+              </BaseButton>
+            </v-card-actions>
+          </v-card-text>
+        </v-card>
+        <div v-else>
+          <v-card-title class="text-center pt-0 pb-8">
+            {{ $t("recipe.parser.review-parsed-ingredients") }}
+          </v-card-title>
+          <v-card-text style="max-height: 60vh; overflow-y: auto;">
+            <VueDraggable
+              v-model="parsedIngs"
+              handle=".handle"
+              :delay="250"
+              :delay-on-touch-only="true"
+              v-bind="{
+                animation: 200,
+                group: 'recipe-ingredients',
+                disabled: false,
+                ghostClass: 'ghost',
+              }"
+              class="px-6"
+              @start="drag = true"
+              @end="drag = false"
+            >
+              <TransitionGroup
+                type="transition"
+              >
+                <v-lazy v-for="(ingredient, index) in parsedIngs" :key="index">
+                  <RecipeIngredientEditor
+                    v-model="ingredient.ingredient"
+                    enable-drag-handle
+                    enable-context-menu
+                    class="list-group-item pb-8"
+                    :delete-disabled="parsedIngs.length <= 1"
+                    @delete="parsedIngs.splice(index, 1)"
+                    @insert-above="insertNewIngredient(index)"
+                    @insert-below="insertNewIngredient(index + 1)"
+                  >
+                    <template #before-divider>
+                      <p v-if="ingredient.input" class="py-0 my-0 text-caption">
+                        {{ $t("recipe.original-text-with-value", { originalText: ingredient.input }) }}
+                      </p>
+                    </template>
+                  </RecipeIngredientEditor>
+                </v-lazy>
+              </TransitionGroup>
+            </VueDraggable>
+          </v-card-text>
+        </div>
+      </div>
+    </v-container>
+    <template v-if="!state.loading.parser" #custom-card-action>
+      <!-- Parse -->
+      <div v-if="!state.allReviewed" class="d-flex justify-space-between align-center">
+        <v-checkbox
+          v-model="currentIngShouldDelete"
+          color="error"
+          hide-details
+          density="compact"
+          :label="i18n.t('recipe.parser.delete-item')"
+          class="mr-4"
+        />
+        <BaseButton
+          :color="currentIngShouldDelete ? 'error' : 'info'"
+          :icon="currentIngShouldDelete ? $globals.icons.delete : $globals.icons.arrowRightBold"
+          :icon-right="!currentIngShouldDelete"
+          :text="$t(currentIngShouldDelete ? 'recipe.parser.delete-item' : 'general.next')"
+          @click="nextIngredient"
+        />
+      </div>
+      <!-- Review -->
+      <div v-else>
+        <BaseButton
+          create
+          :text="$t('general.save')"
+          :icon="$globals.icons.save"
+          :loading="state.loading.save"
+          @click="saveIngs"
+        />
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { VueDraggable } from "vue-draggable-plus";
+import type { IngredientFood, IngredientUnit, ParsedIngredient, RecipeIngredient } from "~/lib/api/types/recipe";
+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 { useFoodData, useFoodStore, useUnitData, useUnitStore } from "~/composables/store";
+import { useGlobalI18n } from "~/composables/use-global-i18n";
+import { alert } from "~/composables/use-toast";
+import { useParsingPreferences } from "~/composables/use-users/preferences";
+
+const props = defineProps<{
+  modelValue: boolean;
+  ingredients: NoUndefinedField<RecipeIngredient[]>;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "save", value: NoUndefinedField<RecipeIngredient[]>): void;
+}>();
+
+const { $appInfo } = useNuxtApp();
+const i18n = useGlobalI18n();
+const api = useUserApi();
+const drag = ref(false);
+
+const unitStore = useUnitStore();
+const unitData = useUnitData();
+const foodStore = useFoodStore();
+const foodData = useFoodData();
+
+const parserPreferences = useParsingPreferences();
+const parser = ref<Parser>(parserPreferences.value.parser || "nlp");
+const availableParsers = computed(() => {
+  return [
+    {
+      text: i18n.t("recipe.parser.natural-language-processor"),
+      value: "nlp",
+    },
+    {
+      text: i18n.t("recipe.parser.brute-parser"),
+      value: "brute",
+    },
+    {
+      text: i18n.t("recipe.parser.openai-parser"),
+      value: "openai",
+      hide: !$appInfo.enableOpenai,
+    },
+  ];
+});
+
+/**
+ * If confidence of parsing is below this threshold,
+ * we will prompt the user to review the parsed ingredient.
+ */
+const confidenceThreshold = 0.85;
+const parsedIngs = ref<ParsedIngredient[]>([]);
+
+const currentIng = ref<ParsedIngredient | null>(null);
+const currentMissingUnit = ref("");
+const currentMissingFood = ref("");
+const currentIngHasError = computed(() => currentMissingUnit.value || currentMissingFood.value);
+const currentIngShouldDelete = ref(false);
+
+const state = reactive({
+  currentParsedIndex: -1,
+  allReviewed: false,
+  loading: {
+    parser: false,
+    save: false,
+  },
+});
+
+function shouldReview(ing: ParsedIngredient): boolean {
+  console.debug(`Checking if ingredient needs review (input="${ing.input})":`, ing);
+
+  if (ing.ingredient.referencedRecipe) {
+    console.debug("No review needed for sub-recipe ingredient");
+    return false;
+  }
+
+  if ((ing.confidence?.average || 0) < confidenceThreshold) {
+    console.debug("Needs review due to low confidence:", ing.confidence?.average);
+    return true;
+  }
+
+  const food = ing.ingredient.food;
+  if (food && !food.id) {
+    console.debug("Needs review due to missing food ID:", food);
+    return true;
+  }
+
+  const unit = ing.ingredient.unit;
+  if (unit && !unit.id) {
+    console.debug("Needs review due to missing unit ID:", unit);
+    return true;
+  }
+
+  console.debug("No review needed");
+  return false;
+}
+
+function checkUnit(ing: ParsedIngredient) {
+  const unit = ing.ingredient.unit?.name;
+  if (!unit || ing.ingredient.unit?.id) {
+    currentMissingUnit.value = "";
+    return;
+  }
+
+  const potentialMatch = createdUnits.get(unit.toLowerCase());
+  if (potentialMatch) {
+    ing.ingredient.unit = potentialMatch;
+    currentMissingUnit.value = "";
+    return;
+  }
+
+  currentMissingUnit.value = unit;
+  ing.ingredient.unit = undefined;
+}
+
+function checkFood(ing: ParsedIngredient) {
+  const food = ing.ingredient.food?.name;
+  if (!food || ing.ingredient.food?.id) {
+    currentMissingFood.value = "";
+    return;
+  }
+
+  const potentialMatch = createdFoods.get(food.toLowerCase());
+  if (potentialMatch) {
+    ing.ingredient.food = potentialMatch;
+    currentMissingFood.value = "";
+    return;
+  }
+
+  currentMissingFood.value = food;
+  ing.ingredient.food = undefined;
+}
+
+function nextIngredient() {
+  let nextIndex = state.currentParsedIndex;
+  if (currentIngShouldDelete.value) {
+    parsedIngs.value.splice(state.currentParsedIndex, 1);
+    currentIngShouldDelete.value = false;
+  }
+  else {
+    nextIndex += 1;
+  }
+
+  while (nextIndex < parsedIngs.value.length) {
+    const current = parsedIngs.value[nextIndex];
+    if (shouldReview(current)) {
+      state.currentParsedIndex = nextIndex;
+      currentIng.value = current;
+      currentIngShouldDelete.value = false;
+      checkUnit(current);
+      checkFood(current);
+      return;
+    }
+
+    nextIndex += 1;
+  }
+
+  // No more to review
+  state.allReviewed = true;
+}
+
+async function parseIngredients() {
+  if (state.loading.parser) {
+    return;
+  }
+
+  if (!props.ingredients || props.ingredients.length === 0) {
+    state.loading.parser = false;
+    return;
+  }
+  state.loading.parser = true;
+  try {
+    const ingsAsString = props.ingredients
+      .filter(ing => !ing.referencedRecipe)
+      .map(ing => parseIngredientText(ing, 1, false) ?? "");
+    const { data, error } = await api.recipes.parseIngredients(parser.value, ingsAsString);
+    if (error || !data) {
+      throw new Error("Failed to parse ingredients");
+    }
+    parsedIngs.value = data;
+    const parsed = data ?? [];
+    const recipeRefs = props.ingredients.filter(ing => ing.referencedRecipe).map(ing => ({
+      input: ing.note || "",
+      confidence: {},
+      ingredient: ing,
+    }));
+    parsedIngs.value = [...parsed, ...recipeRefs];
+    state.currentParsedIndex = -1;
+    state.allReviewed = false;
+    createdUnits.clear();
+    createdFoods.clear();
+    currentIngShouldDelete.value = false;
+    nextIngredient();
+  }
+  catch (error) {
+    console.error("Error parsing ingredients:", error);
+    alert.error(i18n.t("events.something-went-wrong"));
+  }
+  finally {
+    state.loading.parser = false;
+  }
+}
+
+/** Cache of lowercased created units to avoid duplicate creations */
+const createdUnits = new Map<string, IngredientUnit>();
+/** Cache of lowercased created foods to avoid duplicate creations */
+const createdFoods = new Map<string, IngredientFood>();
+
+async function createMissingUnit() {
+  if (!currentMissingUnit.value) {
+    return;
+  }
+
+  unitData.reset();
+  unitData.data.name = currentMissingUnit.value;
+
+  let newUnit: IngredientUnit | null = null;
+  if (createdUnits.has(unitData.data.name)) {
+    newUnit = createdUnits.get(unitData.data.name)!;
+  }
+  else {
+    newUnit = await unitStore.actions.createOne(unitData.data);
+  }
+
+  if (!newUnit) {
+    alert.error(i18n.t("events.something-went-wrong"));
+    return;
+  }
+
+  currentIng.value!.ingredient.unit = newUnit;
+  createdUnits.set(newUnit.name.toLowerCase(), newUnit);
+  currentMissingUnit.value = "";
+}
+
+async function createMissingFood() {
+  if (!currentMissingFood.value) {
+    return;
+  }
+
+  foodData.reset();
+  foodData.data.name = currentMissingFood.value;
+
+  let newFood: IngredientFood | null = null;
+  if (createdFoods.has(foodData.data.name)) {
+    newFood = createdFoods.get(foodData.data.name)!;
+  }
+  else {
+    newFood = await foodStore.actions.createOne(foodData.data);
+  }
+
+  if (!newFood) {
+    alert.error(i18n.t("events.something-went-wrong"));
+    return;
+  }
+
+  currentIng.value!.ingredient.food = newFood;
+  createdFoods.set(newFood.name.toLowerCase(), newFood);
+  currentMissingFood.value = "";
+}
+
+async function addMissingUnitAsAlias() {
+  const unit = currentIng.value?.ingredient.unit as IngredientUnit | undefined;
+  if (!currentMissingUnit.value || !unit?.id) {
+    return;
+  }
+
+  unit.aliases = unit.aliases || [];
+  if (unit.aliases.map(a => a.name).includes(currentMissingUnit.value)) {
+    return;
+  }
+
+  unit.aliases.push({ name: currentMissingUnit.value });
+  const updated = await unitStore.actions.updateOne(unit);
+  if (!updated) {
+    alert.error(i18n.t("events.something-went-wrong"));
+    return;
+  }
+
+  currentIng.value!.ingredient.unit = updated;
+  currentMissingUnit.value = "";
+}
+
+async function addMissingFoodAsAlias() {
+  const food = currentIng.value?.ingredient.food as IngredientFood | undefined;
+  if (!currentMissingFood.value || !food?.id) {
+    return;
+  }
+
+  food.aliases = food.aliases || [];
+  if (food.aliases.map(a => a.name).includes(currentMissingFood.value)) {
+    return;
+  }
+
+  food.aliases.push({ name: currentMissingFood.value });
+  const updated = await foodStore.actions.updateOne(food);
+  if (!updated) {
+    alert.error(i18n.t("events.something-went-wrong"));
+    return;
+  }
+
+  currentIng.value!.ingredient.food = updated;
+  currentMissingFood.value = "";
+}
+
+watch(() => props.modelValue, () => {
+  if (!props.modelValue) {
+    return;
+  }
+
+  parseIngredients();
+});
+
+watch(parser, () => {
+  parserPreferences.value.parser = parser.value;
+  parseIngredients();
+});
+
+watch([parsedIngs, () => state.allReviewed], () => {
+  if (!state.allReviewed) {
+    return;
+  }
+
+  if (!parsedIngs.value.length) {
+    insertNewIngredient(0);
+  }
+}, { immediate: true, deep: true });
+
+function asPercentage(num: number | undefined): string {
+  if (!num) {
+    return "0%";
+  }
+
+  return Math.round(num * 100).toFixed(2) + "%";
+}
+
+function insertNewIngredient(index: number) {
+  const ing = {
+    input: "",
+    confidence: {},
+    ingredient: {
+      quantity: 0,
+      referenceId: uuid4(),
+    },
+  } as ParsedIngredient;
+
+  parsedIngs.value.splice(index, 0, ing);
+}
+
+function saveIngs() {
+  emit("save", parsedIngs.value.map(x => x.ingredient as NoUndefinedField<RecipeIngredient>));
+  state.loading.save = true;
+}
+</script>

frontend/components/Domain/Recipe/RecipePrintView.vue

@@ -4,20 +4,23 @@
     <section>
       <v-container class="ma-0 pa-0">
         <v-row>
-          <v-col v-if="preferences.imagePosition && preferences.imagePosition != ImagePosition.hidden"
-                 :order="preferences.imagePosition == ImagePosition.left ? -1 : 1"
-                 cols="4"
-                 align-self="center"
+          <v-col
+            v-if="preferences.imagePosition && preferences.imagePosition != ImagePosition.hidden"
+            :order="preferences.imagePosition == ImagePosition.left ? -1 : 1"
+            cols="4"
+            align-self="center"
           >
-            <img :key="imageKey"
-                 :src="recipeImageUrl"
-                 style="min-height: 50; max-width: 100%;"
+            <img
+              :key="imageKey"
+              :src="recipeImageUrl"
+              style="min-height: 50; max-width: 100%;"
             >
           </v-col>
           <v-col order="0">
             <v-card-title class="headline pl-0">
-              <v-icon start
-                      color="primary"
+              <v-icon
+                start
+                color="primary"
               >
                 {{ $globals.icons.primary }}
               </v-icon>
@@ -36,17 +39,19 @@
               </div>
             </div>
             <v-row class="d-flex justify-start">
-              <RecipeTimeCard :prep-time="recipe.prepTime"
-                              :total-time="recipe.totalTime"
-                              :perform-time="recipe.performTime"
-                              small
-                              color="white"
-                              class="ml-4"
+              <RecipeTimeCard
+                :prep-time="recipe.prepTime"
+                :total-time="recipe.totalTime"
+                :perform-time="recipe.performTime"
+                small
+                color="white"
+                class="ml-4"
               />
             </v-row>
 
-            <v-card-text v-if="preferences.showDescription"
-                         class="px-0"
+            <v-card-text
+              v-if="preferences.showDescription"
+              class="px-0"
             >
               <SafeMarkdown :source="recipe.description" />
             </v-card-text>
@@ -60,24 +65,29 @@
       <v-card-title class="headline pl-0">
         {{ $t("recipe.ingredients") }}
       </v-card-title>
-      <div v-for="(ingredientSection, sectionIndex) in ingredientSections"
-           :key="`ingredient-section-${sectionIndex}`"
-           class="print-section"
+      <div
+        v-for="(ingredientSection, sectionIndex) in ingredientSections"
+        :key="`ingredient-section-${sectionIndex}`"
+        class="print-section"
       >
-        <h4 v-if="ingredientSection.ingredients[0].title"
-            class="ingredient-title mt-2"
+        <h4
+          v-if="ingredientSection.ingredients[0].title"
+          class="ingredient-title mt-2"
         >
           {{ ingredientSection.ingredients[0].title }}
         </h4>
-        <div class="ingredient-grid"
-             :style="{ gridTemplateRows: `repeat(${Math.ceil(ingredientSection.ingredients.length / 2)}, min-content)` }"
+        <div
+          class="ingredient-grid"
+          :style="{ gridTemplateRows: `repeat(${Math.ceil(ingredientSection.ingredients.length / 2)}, min-content)` }"
         >
-          <template v-for="(ingredient, ingredientIndex) in ingredientSection.ingredients"
-                    :key="`ingredient-${ingredientIndex}`"
+          <template
+            v-for="(ingredient, ingredientIndex) in ingredientSection.ingredients"
+            :key="`ingredient-${ingredientIndex}`"
           >
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <p class="ingredient-body"
-               v-html="parseText(ingredient)"
+            <p
+              class="ingredient-body"
+              v-html="parseText(ingredient)"
             />
           </template>
         </div>
@@ -86,22 +96,26 @@
 
     <!-- Instructions -->
     <section>
-      <div v-for="(instructionSection, sectionIndex) in instructionSections"
-           :key="`instruction-section-${sectionIndex}`"
-           :class="{ 'print-section': instructionSection.sectionName }"
+      <div
+        v-for="(instructionSection, sectionIndex) in instructionSections"
+        :key="`instruction-section-${sectionIndex}`"
+        :class="{ 'print-section': instructionSection.sectionName }"
       >
-        <v-card-title v-if="!sectionIndex"
-                      class="headline pl-0"
+        <v-card-title
+          v-if="!sectionIndex"
+          class="headline pl-0"
         >
           {{ $t("recipe.instructions") }}
         </v-card-title>
-        <div v-for="(step, stepIndex) in instructionSection.instructions"
-             :key="`instruction-${stepIndex}`"
+        <div
+          v-for="(step, stepIndex) in instructionSection.instructions"
+          :key="`instruction-${stepIndex}`"
         >
           <div class="print-section">
-            <h4 v-if="step.title"
-                :key="`instruction-title-${stepIndex}`"
-                class="instruction-title mb-2"
+            <h4
+              v-if="step.title"
+              :key="`instruction-title-${stepIndex}`"
+              class="instruction-title mb-2"
             >
               {{ step.title }}
             </h4>
@@ -112,8 +126,9 @@
                   + 1,
               }) }}
             </h5>
-            <SafeMarkdown :source="step.text"
-                          class="recipe-step-body"
+            <SafeMarkdown
+              :source="step.text"
+              class="recipe-step-body"
             />
           </div>
         </div>
@@ -122,18 +137,21 @@
 
     <!-- Notes -->
     <div v-if="preferences.showNotes">
-      <v-divider v-if="hasNotes"
-                 class="grey my-4"
+      <v-divider
+        v-if="hasNotes"
+        class="grey my-4"
       />
 
       <section>
-        <div v-for="(note, index) in recipe.notes"
-             :key="index + 'note'"
+        <div
+          v-for="(note, index) in recipe.notes"
+          :key="index + 'note'"
         >
           <div class="print-section">
             <h4>{{ note.title }}</h4>
-            <SafeMarkdown :source="note.text"
-                          class="note-body"
+            <SafeMarkdown
+              :source="note.text"
+              class="note-body"
             />
           </div>
         </div>
@@ -150,8 +168,9 @@
         <div class="print-section">
           <table class="nutrition-table">
             <tbody>
-              <tr v-for="(value, key) in recipe.nutrition"
-                  :key="key"
+              <tr
+                v-for="(value, key) in recipe.nutrition"
+                :key="key"
               >
                 <template v-if="value">
                   <td>{{ labels[key].label }}</td>
@@ -243,32 +262,55 @@ const ingredientSections = computed<IngredientSection[]>(() => {
   if (!props.recipe.recipeIngredient) {
     return [];
   }
-
-  return props.recipe.recipeIngredient.reduce((sections, ingredient) => {
-    // if title append new section to the end of the array
-    if (ingredient.title) {
-      sections.push({
-        sectionName: ingredient.title,
-        ingredients: [ingredient],
-      });
-
-      return sections;
+  const addIngredientsToSections = (ingredients: RecipeIngredient[], sections: IngredientSection[], title: string | null) => {
+  // If title is set, ensure the section exists before adding ingredients
+    let section: IngredientSection | undefined;
+    if (title) {
+      section = sections.find(sec => sec.sectionName === title);
+      if (!section) {
+        section = { sectionName: title, ingredients: [] };
+        sections.push(section);
+      }
     }
 
-    // append new section if first
-    if (sections.length === 0) {
-      sections.push({
-        sectionName: "",
-        ingredients: [ingredient],
-      });
+    ingredients.forEach((ingredient) => {
+      if (preferences.value.expandChildRecipes && ingredient.referencedRecipe?.recipeIngredient?.length) {
+        // Recursively add to the section for this referenced recipe
+        addIngredientsToSections(
+          ingredient.referencedRecipe.recipeIngredient,
+          sections,
+          "",
+        );
+      }
+      else {
+        const sectionName = title || ingredient.title || "";
+        if (sectionName) {
+          let sec = sections.find(sec => sec.sectionName === sectionName);
+          if (!sec) {
+            sec = { sectionName, ingredients: [] };
+            sections.push(sec);
+          }
+          ingredient.title = sectionName;
+          sec.ingredients.push(ingredient);
+        }
+        else {
+          if (sections.length === 0) {
+            sections.push({
+              sectionName: "",
+              ingredients: [ingredient],
+            });
+          }
+          else {
+            sections[sections.length - 1].ingredients.push(ingredient);
+          }
+        }
+      }
+    });
+  };
 
-      return sections;
-    }
-
-    // otherwise add ingredient to last section in the array
-    sections[sections.length - 1].ingredients.push(ingredient);
-    return sections;
-  }, [] as IngredientSection[]);
+  const sections: IngredientSection[] = [];
+  addIngredientsToSections(props.recipe.recipeIngredient, sections, null);
+  return sections;
 });
 
 // Group instructions by section so we can style them independently

frontend/components/Domain/Recipe/RecipeRating.vue

@@ -2,7 +2,8 @@
   <div @click.prevent>
     <!-- User Rating -->
     <v-hover v-slot="{ isHovering, props }">
-      <v-rating v-if="isOwnGroup && (userRating || isHovering || !ratingsLoaded)"
+      <v-rating
+        v-if="isOwnGroup && (userRating || isHovering || !ratingsLoaded)"
         v-bind="props"
         :model-value="userRating"
         active-color="secondary"
@@ -13,10 +14,10 @@
         hover
         clearable
         @update:model-value="updateRating(+$event)"
-        @click="updateRating"
       />
       <!-- Group Rating -->
-      <v-rating v-else
+      <v-rating
+        v-else
         v-bind="props"
         :model-value="groupRating"
         :half-increments="true"
@@ -83,7 +84,7 @@ export default defineNuxtComponent({
     });
 
     function updateRating(val?: number) {
-      if (!isOwnGroup.value) {
+      if (!isOwnGroup.value || !val) {
         return;
       }
 

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/RecipeTimeCard.vue

@@ -47,7 +47,7 @@
             left
             color="primary"
           >
-            {{ $globals.icons.knfife }}
+            {{ $globals.icons.knife }}
           </v-icon>
           <p class="my-0">
             <span class="font-weight-bold opacity-80">{{ validatePrepTime.name }}</span><br>{{ validatePrepTime.value }}

frontend/components/Domain/Recipe/RecipeTimeline.vue

@@ -80,7 +80,7 @@
           :recipe="recipes.get(event.recipeId)"
           :show-recipe-cards="showRecipeCards"
           :width="$vuetify.display.smAndDown ? '100%' : undefined"
-          @update="updateTimelineEvent(index)"
+          @update="updateTimelineEvent(index, $event)"
           @delete="deleteTimelineEvent(index)"
         />
       </v-timeline>
@@ -186,20 +186,17 @@ function toggleEventTypeOption(option: TimelineEventType) {
 }
 
 // Timeline Actions
-async function updateTimelineEvent(index: number) {
-  const event = timelineEvents.value[index];
-  const payload: RecipeTimelineEventUpdate = {
-    subject: event.subject,
-    eventMessage: event.eventMessage,
-    image: event.image,
-  };
-
-  const { response } = await api.recipes.updateTimelineEvent(event.id, payload);
+async function updateTimelineEvent(index: number, event: RecipeTimelineEventUpdate) {
+  const eventId = timelineEvents.value[index].id;
+  const { response } = await api.recipes.updateTimelineEvent(eventId, event);
   if (response?.status !== 200) {
     alert.error(i18n.t("events.something-went-wrong") as string);
     return;
   }
 
+  // Update the local event data to reflect the changes in the UI
+  timelineEvents.value[index] = response.data;
+
   alert.success(i18n.t("events.event-updated") as string);
 }
 

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"
     >

frontend/components/Domain/Recipe/RecipeTimelineItem.vue

@@ -5,7 +5,7 @@
         <v-icon class="mr-1">
           {{ $globals.icons.calendar }}
         </v-icon>
-        {{ new Date(event.timestamp).toLocaleDateString($i18n.locale) }}
+        {{ $d(new Date(event.timestamp)) }}
       </v-chip>
     </template>
     <v-card
@@ -22,7 +22,7 @@
           <v-col v-if="useMobileFormat" align-self="center" class="pr-0">
             <v-chip label>
               <v-icon> {{ $globals.icons.calendar }} </v-icon>
-              {{ new Date(event.timestamp || "").toLocaleDateString($i18n.locale) }}
+              {{ $d(new Date(event.timestamp || "")) }}
             </v-chip>
           </v-col>
           <v-col v-else cols="9" style="margin: auto; text-align: center">
@@ -43,7 +43,7 @@
                 edit: true,
                 delete: true,
               }"
-              @update="$emit('update')"
+              @update="$emit('update', $event)"
               @delete="$emit('delete')"
             />
           </v-col>
@@ -96,7 +96,7 @@ import RecipeCardMobile from "./RecipeCardMobile.vue";
 import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
 import { useStaticRoutes } from "~/composables/api";
 import { useTimelineEventTypes } from "~/composables/recipes/use-recipe-timeline-events";
-import type { Recipe, RecipeTimelineEventOut } from "~/lib/api/types/recipe";
+import type { Recipe, RecipeTimelineEventOut, RecipeTimelineEventUpdate } from "~/lib/api/types/recipe";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
 
@@ -113,12 +113,13 @@ const props = withDefaults(defineProps<Props>(), {
 
 defineEmits<{
   selected: [];
-  update: [];
+  update: [event: RecipeTimelineEventUpdate];
   delete: [];
 }>();
 
-const { $vuetify, $globals } = useNuxtApp();
-const { recipeTimelineEventImage } = useStaticRoutes();
+const { $globals } = useNuxtApp();
+const display = useDisplay();
+const { recipeTimelineEventSmallImage } = useStaticRoutes();
 const { eventTypeOptions } = useTimelineEventTypes();
 
 const { user: currentUser } = useMealieAuth();
@@ -127,7 +128,7 @@ const route = useRoute();
 const groupSlug = computed(() => (route.params.groupSlug as string) || currentUser?.value?.groupSlug || "");
 
 const useMobileFormat = computed(() => {
-  return $vuetify.display.smAndDown.value;
+  return display.smAndDown.value;
 });
 
 const attrs = computed(() => {
@@ -172,7 +173,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

@@ -9,10 +9,11 @@
     >
       <template #activator="{ props }">
         <v-badge
-          :model-value="selected.length > 0"
+          v-memo="[selectedCount]"
+          :model-value="selectedCount > 0"
           size="small"
           color="primary"
-          :content="selected.length"
+          :content="selectedCount"
         >
           <v-btn
             size="small"
@@ -28,6 +29,7 @@
         <v-card-text>
           <v-text-field
             v-model="state.search"
+            v-memo="[state.search]"
             class="mb-2"
             hide-details
             density="comfortable"
@@ -43,7 +45,7 @@
               hide-details
               class="my-auto"
               color="primary"
-              :label="`${requireAll ? $t('search.has-all') : $t('search.has-any')}`"
+              :label="requireAllValue ? $t('search.has-all') : $t('search.has-any')"
             />
             <v-spacer />
             <v-btn
@@ -73,7 +75,8 @@
               >
                 <template #default="{ item }">
                   <v-list-item
-                    :key="item.id"
+                    :key="`radio-${item.id}`"
+                    v-memo="[item.id, item.name, selectedRadio?.id]"
                     :value="item"
                     :title="item.name"
                   >
@@ -101,7 +104,8 @@
               >
                 <template #default="{ item }">
                   <v-list-item
-                    :key="item.id"
+                    :key="`checkbox-${item.id}`"
+                    v-memo="[item.id, item.name, selectedIds.has(item.id)]"
                     :value="item"
                     :title="item.name"
                   >
@@ -134,6 +138,8 @@
 </template>
 
 <script lang="ts">
+import { watchDebounced } from "@vueuse/core";
+
 export interface SelectableItem {
   id: string;
   name: string;
@@ -165,6 +171,9 @@ export default defineNuxtComponent({
       menu: false,
     });
 
+    // Use shallowRef for better performance with arrays
+    const debouncedSearch = shallowRef("");
+
     const requireAllValue = computed({
       get: () => props.requireAll,
       set: (value) => {
@@ -172,6 +181,7 @@ export default defineNuxtComponent({
       },
     });
 
+    // Use shallowRef to prevent deep reactivity on large arrays
     const selected = computed({
       get: () => props.modelValue as SelectableItem[],
       set: (value) => {
@@ -186,21 +196,40 @@ export default defineNuxtComponent({
       },
     });
 
+    watchDebounced(
+      () => state.search,
+      (newSearch) => {
+        debouncedSearch.value = newSearch;
+      },
+      { debounce: 500, maxWait: 1500, immediate: false }, // Increased debounce time
+    );
+
     const filtered = computed(() => {
-      if (!state.search) {
-        return props.items;
+      const items = props.items;
+      const search = debouncedSearch.value;
+
+      if (!search || search.length < 2) { // Only filter after 2 characters
+        return items;
       }
 
-      return props.items.filter(item => item.name.toLowerCase().includes(state.search.toLowerCase()));
+      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) => {
-      console.log(selected.value, item);
-      if (selected.value.includes(item)) {
-        selected.value = selected.value.filter(i => i !== item);
+      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.push(item);
+        selected.value = [...currentSelection, item];
       }
     };
 
@@ -221,6 +250,8 @@ export default defineNuxtComponent({
       state,
       selected,
       selectedRadio,
+      selectedCount,
+      selectedIds,
       filtered,
       handleCheckboxClick,
       handleRadioClick,

frontend/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -7,8 +7,16 @@
       no-gutters
       class="flex-nowrap align-center"
     >
-      <v-col :cols="itemLabelCols">
-        <div class="d-flex align-center flex-nowrap">
+      <v-card
+        flat
+        link
+        class="grow"
+        @click="() => {
+          listItem.checked = !listItem.checked
+          $emit('checked', listItem)
+        }"
+      >
+        <div class="d-flex align-center flex-nowrap grow">
           <v-checkbox
             v-model="listItem.checked"
             hide-details
@@ -25,84 +33,78 @@
             <RecipeIngredientListItem :ingredient="listItem" />
           </div>
         </div>
-      </v-col>
-      <v-spacer />
-      <v-col
-        cols="auto"
-        class="text-right"
+      </v-card>
+      <div
+        v-if="!listItem.checked"
+        style="min-width: 72px"
       >
-        <div
-          v-if="!listItem.checked"
-          style="min-width: 72px"
+        <v-menu
+          offset-x
+          start
+          min-width="125px"
         >
-          <v-menu
-            offset-x
-            start
-            min-width="125px"
-          >
-            <template #activator="{ props }">
-              <v-tooltip
-                v-if="recipeList && recipeList.length"
-                open-delay="200"
-                transition="slide-x-reverse-transition"
-                density="compact"
-                location="end"
-                content-class="text-caption"
-              >
-                <template #activator="{ props: tooltipProps }">
-                  <v-btn
-                    size="small"
-                    variant="text"
-                    class="ml-2"
-                    icon
-                    v-bind="tooltipProps"
-                    @click="displayRecipeRefs = !displayRecipeRefs"
-                  >
-                    <v-icon>
-                      {{ $globals.icons.potSteam }}
-                    </v-icon>
-                  </v-btn>
-                </template>
-                <span>Toggle Recipes</span>
-              </v-tooltip>
-              <v-btn
-                size="small"
-                variant="text"
-                class="ml-2"
-                icon
-                @click="toggleEdit(true)"
-              >
-                <v-icon>
-                  {{ $globals.icons.edit }}
-                </v-icon>
-              </v-btn>
-              <v-btn
-                size="small"
-                variant="text"
-                class="handle"
-                icon
-                v-bind="props"
-              >
-                <v-icon>
-                  {{ $globals.icons.arrowUpDown }}
-                </v-icon>
-              </v-btn>
-            </template>
-            <v-list density="compact">
-              <v-list-item
-                v-for="action in contextMenu"
-                :key="action.event"
-                density="compact"
-                @click="contextHandler(action.event)"
-              >
-                <v-list-item-title>
-                  {{ action.text }}
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </div>
-      </v-col>
+          <template #activator="{ props }">
+            <v-tooltip
+              v-if="recipeList && recipeList.length"
+              open-delay="200"
+              transition="slide-x-reverse-transition"
+              density="compact"
+              location="end"
+              content-class="text-caption"
+            >
+              <template #activator="{ props: tooltipProps }">
+                <v-btn
+                  size="small"
+                  variant="text"
+                  class="ml-2"
+                  icon
+                  v-bind="tooltipProps"
+                  @click="displayRecipeRefs = !displayRecipeRefs"
+                >
+                  <v-icon>
+                    {{ $globals.icons.potSteam }}
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>Toggle Recipes</span>
+            </v-tooltip>
+            <v-btn
+              size="small"
+              variant="text"
+              class="ml-2"
+              icon
+              @click="toggleEdit(true)"
+            >
+              <v-icon>
+                {{ $globals.icons.edit }}
+              </v-icon>
+            </v-btn>
+            <v-btn
+              size="small"
+              variant="text"
+              class="handle"
+              icon
+              v-bind="props"
+            >
+              <v-icon>
+                {{ $globals.icons.arrowUpDown }}
+              </v-icon>
+            </v-btn>
+          </template>
+          <v-list density="compact">
+            <v-list-item
+              v-for="action in contextMenu"
+              :key="action.event"
+              density="compact"
+              @click="contextHandler(action.event)"
+            >
+              <v-list-item-title>
+                {{ action.text }}
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
     </v-row>
     <v-row
       v-if="!listItem.checked && recipeList && recipeList.length && displayRecipeRefs"
@@ -130,9 +132,8 @@
       <v-col cols="auto">
         <div class="text-caption font-weight-light font-italic">
           {{ $t("shopping-list.completed-on", {
-            date: new Date(listItem.updatedAt
-              || "").toLocaleDateString($i18n.locale) })
-          }}
+            date: listItem.updatedAt ? $d(new Date(listItem.updatedAt)) : '',
+          }) }}
         </div>
       </v-col>
     </v-row>
@@ -312,4 +313,8 @@ export default defineNuxtComponent({
 .strike-through {
   text-decoration: line-through !important;
 }
+
+.grow {
+  flex-grow: 1;
+}
 </style>

frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue

@@ -4,13 +4,25 @@
       <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"
+              variant="plain"
+              control-variant="stacked"
+              inset
+              density="compact"
+              class="centered-number-input"
+              style="width: 100px;"
+            />
           </div>
           <InputLabelType
             v-model="listItem.unit"
             v-model:item-id="listItem.unitId!"
             :items="units"
-            :label="$t('general.units')"
+            :label="$t('recipe.unit')"
             :icon="$globals.icons.units"
             create
             @create="createAssignUnit"
@@ -69,7 +81,7 @@
           </div>
           <BaseButton
             v-if="listItem.labelId && listItem.food && listItem.labelId !== listItem.food.labelId"
-            size="small"
+            small
             color="info"
             :icon="$globals.icons.tagArrowRight"
             :text="$t('shopping-list.save-label')"
@@ -84,12 +96,12 @@
           :buttons="[
             ...(allowDelete
               ? [
-                  {
-                    icon: $globals.icons.delete,
-                    text: $t('general.delete'),
-                    event: 'delete',
-                  },
-                ]
+                {
+                  icon: $globals.icons.delete,
+                  text: $t('general.delete'),
+                  event: 'delete',
+                },
+              ]
               : []),
             {
               icon: $globals.icons.close,
@@ -158,6 +170,15 @@ export default defineNuxtComponent({
       },
     });
 
+    watch(
+      () => props.modelValue.quantity,
+      () => {
+        if (!props.modelValue.quantity) {
+          listItem.value.quantity = 0;
+        }
+      },
+    );
+
     watch(
       () => props.modelValue.food,
       (newFood) => {
@@ -221,3 +242,10 @@ export default defineNuxtComponent({
   },
 });
 </script>
+
+<style scoped>
+.centered-number-input :deep(.v-field) {
+  display: flex;
+  align-items: center;
+}
+</style>

frontend/components/Domain/User/UserPasswordStrength.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex justify-center pb-6 mt-n1">
+  <div class="d-flex pb-6 mt-n1 ml-10">
     <div style="flex-basis: 500px">
       <strong> {{ $t("user.password-strength", { strength: pwStrength.strength.value }) }}</strong>
       <v-progress-linear

frontend/components/Domain/User/UserRegistrationForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card-title>
+    <v-card-title class="pt-0">
       <v-icon
         size="large"
         class="mr-3"
@@ -10,7 +10,7 @@
       <span class="headline"> {{ $t("user-registration.account-details") }}</span>
     </v-card-title>
     <v-divider />
-    <v-card-text>
+    <v-card-text class="mt-2">
       <v-form
         ref="domAccountForm"
         @submit.prevent

frontend/components/Layout/DefaultLayout.vue

@@ -1,6 +1,5 @@
 <template>
   <v-app dark>
-    <NuxtPwaManifest />
     <TheSnackbar />
 
     <AppHeader>
@@ -17,7 +16,6 @@
       absolute
       :top-link="topLinks"
       :secondary-links="cookbookLinks || []"
-      :bottom-links="bottomLinks"
     >
       <v-menu
         offset-y
@@ -80,30 +78,11 @@
                 <v-list-item-subtitle class="font-weight-medium" style="font-size: small;">
                   {{ item.subtitle }}
                 </v-list-item-subtitle>
-            </v-list-item>
+              </v-list-item>
             </div>
           </template>
         </v-list>
       </v-menu>
-      <template #bottom>
-        <v-list-item @click.stop="languageDialog = true">
-          <template #prepend>
-            <v-icon>{{ $globals.icons.translate }}</v-icon>
-          </template>
-          <v-list-item-title>{{ $t("sidebar.language") }}</v-list-item-title>
-          <LanguageDialog v-model="languageDialog" />
-        </v-list-item>
-        <v-list-item @click="toggleDark">
-          <template #prepend>
-            <v-icon>
-              {{ $vuetify.theme.current.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
-            </v-icon>
-          </template>
-          <v-list-item-title>
-            {{ $vuetify.theme.current.dark ? $t("settings.theme.light-mode") : $t("settings.theme.dark-mode") }}
-          </v-list-item-title>
-        </v-list-item>
-      </template>
     </AppSidebar>
     <v-main class="pt-12">
       <v-scroll-x-transition>
@@ -118,32 +97,24 @@
 <script lang="ts">
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import type { SideBarLink } from "~/types/application-types";
-import { useAppInfo } from "~/composables/api";
 import { useCookbookPreferences } from "~/composables/use-users/preferences";
 import { useCookbookStore, usePublicCookbookStore } from "~/composables/store/use-cookbook-store";
-import { useHouseholdStore, usePublicHouseholdStore } from "~/composables/store/use-household-store";
-import { useToggleDarkMode } from "~/composables/use-utils";
 import type { ReadCookBook } from "~/lib/api/types/cookbook";
-import type { HouseholdSummary } from "~/lib/api/types/household";
 
 export default defineNuxtComponent({
   setup() {
     const i18n = useI18n();
-    const { $globals, $vuetify } = useNuxtApp();
+    const { $appInfo, $globals } = useNuxtApp();
+    const display = useDisplay();
     const $auth = useMealieAuth();
     const { isOwnGroup } = useLoggedInState();
 
-    const isAdmin = computed(() => $auth.user.value?.admin);
     const route = useRoute();
     const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
 
     const cookbookPreferences = useCookbookPreferences();
-
     const ownCookbookStore = useCookbookStore(i18n);
-    const ownHouseholdStore = useHouseholdStore(i18n);
-
     const publicCookbookStoreCache = ref<Record<string, ReturnType<typeof usePublicCookbookStore>>>({});
-    const publicHouseholdStoreCache = ref<Record<string, ReturnType<typeof usePublicHouseholdStore>>>({});
 
     function getPublicCookbookStore(slug: string) {
       if (!publicCookbookStoreCache.value[slug]) {
@@ -152,13 +123,6 @@ export default defineNuxtComponent({
       return publicCookbookStoreCache.value[slug];
     }
 
-    function getPublicHouseholdStore(slug: string) {
-      if (!publicHouseholdStoreCache.value[slug]) {
-        publicHouseholdStoreCache.value[slug] = usePublicHouseholdStore(slug, i18n);
-      }
-      return publicHouseholdStoreCache.value[slug];
-    }
-
     const cookbooks = computed(() => {
       if (isOwnGroup.value) {
         return ownCookbookStore.store.value;
@@ -170,34 +134,12 @@ export default defineNuxtComponent({
       return [];
     });
 
-    const households = computed(() => {
-      if (isOwnGroup.value) {
-        return ownHouseholdStore.store.value;
-      }
-      else if (groupSlug.value) {
-        const publicStore = getPublicHouseholdStore(groupSlug.value);
-        return unref(publicStore.store);
-      }
-      return [];
-    });
-
-    const householdsById = computed(() => {
-      return households.value.reduce((acc, household) => {
-        acc[household.id] = household;
-        return acc;
-      }, {} as { [key: string]: HouseholdSummary });
-    });
-
-    const appInfo = useAppInfo();
-    const showImageImport = computed(() => appInfo.value?.enableOpenaiImageServices);
-
-    const toggleDark = useToggleDarkMode();
-
+    const showImageImport = computed(() => $appInfo.enableOpenaiImageServices);
     const languageDialog = ref<boolean>(false);
 
     const sidebar = ref<boolean>(false);
     onMounted(() => {
-      sidebar.value = $vuetify.display.mdAndUp.value;
+      sidebar.value = display.lgAndUp.value;
     });
 
     function cookbookAsLink(cookbook: ReadCookBook): SideBarLink {
@@ -221,11 +163,8 @@ export default defineNuxtComponent({
       const ownLinks: SideBarLink[] = [];
       const links: SideBarLink[] = [];
       const cookbooksByHousehold = sortedCookbooks.reduce((acc, cookbook) => {
-        const householdName = householdsById.value[cookbook.householdId]?.name || "";
-        if (!acc[householdName]) {
-          acc[householdName] = [];
-        }
-        acc[householdName].push(cookbook);
+        const householdName = cookbook.household?.name || "";
+        (acc[householdName] ||= []).push(cookbook);
         return acc;
       }, {} as Record<string, ReadCookBook[]>);
 
@@ -286,19 +225,6 @@ export default defineNuxtComponent({
       },
     ]);
 
-    const bottomLinks = computed<SideBarLink[]>(() =>
-      isAdmin.value
-        ? [
-            {
-              icon: $globals.icons.cog,
-              title: i18n.t("general.settings"),
-              to: "/admin/site-settings",
-              restricted: true,
-            },
-          ]
-        : [],
-    );
-
     const topLinks = computed<SideBarLink[]>(() => [
       {
         icon: $globals.icons.silverwareForkKnife,
@@ -367,11 +293,9 @@ export default defineNuxtComponent({
       groupSlug,
       cookbookLinks,
       createLinks,
-      bottomLinks,
       topLinks,
       isOwnGroup,
       languageDialog,
-      toggleDark,
       sidebar,
     };
   },