fix(deps): update dependency authlib to v1.3.1 (#3696)

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

.devcontainer/devcontainer.json

@@ -30,7 +30,6 @@
         "dbaeumer.vscode-eslint",
         "matangover.mypy",
         "ms-python.black-formatter",
-        "ms-python.isort",
         "ms-python.pylint",
         "ms-python.python",
         "ms-python.vscode-pylance",
@@ -42,6 +41,7 @@
   "forwardPorts": [
     3000,
     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.

.github/DISCUSSION_TEMPLATE/oauth-provider-example.yaml

@@ -0,0 +1,9 @@
+---
+title: OAuth setup with <PROVIDER>
+body:
+- type: textarea
+  attributes:
+    label: Configuration Example
+    description: Add your example configuration. You can provide code blocks, screenshots, and links.
+  validations: 
+    required: true

.github/ISSUE_TEMPLATE/task.yaml

@@ -1,7 +1,7 @@
 ---
-name: v1.0.0b Task
+name: Task
 description: "CONTRIBUTORS ONLY: Submit a Task that needs to be completed"
-title: "[v1.0.0b] [Task] - TASK DESCRIPTION"
+title: "[Task] - TASK DESCRIPTION"
 labels:
   - task
   - v1
@@ -11,17 +11,17 @@ body:
       value: |
         Thanks for your interest in Mealie! 🚀
 
-        This is a place for Mealie contributors to find tasks that need to get done around the repository. Tasks are different than issues as they are generally related to providing a new feature or improve an existing feature. They are _generally_ not related to an issue.
+        This is a place for Mealie contributors to find tasks that need to get done around the repository. Tasks are different than issues as they are generally related to providing a new feature or improving an existing feature. They are _generally_ not related to an issue.
 
         **DO NOT** create a task unless
-        - You are a contributors who has prior approval via discord/discussions
+        - You are a contributor who has prior approval via discord/discussions
         - You have otherwise been given approval to post the tasks
 
         Otherwise, your post will be closed/deleted.
 
         **Interested in Taking This?**
 
-        If you're interested in completing this tasks and it hasn't already been taken, comment below and to let others know you're working on it. As you work through the task, I ask that you submit a draft pull request as soon as possible, and tag this issue so we can all collaborate as best as possible.
+        If you're interested in completing this task and it hasn't already been taken, comment below and to let others know you're working on it. As you work through the task, I ask that you submit a draft pull request as soon as possible, and tag this issue so we can all collaborate as best as possible.
   - type: textarea
     id: problem
     attributes:
@@ -33,6 +33,6 @@ body:
     id: solution
     attributes:
       label: Proposed/Possible Solution(s)?
-      placeholder: Provide as much context around the idea as possible with potential files and roadblocks that may come up
+      placeholder: Provide as much context around the idea as possible with potential files and roadblocks that may come up.
     validations:
       required: true

.github/pull_request_template.md

@@ -1,6 +1,12 @@
 <!--
   This template provides some ideas of things to include in your PR description.
-  To start, try providing a short summary of your changes in the Title above.
+  
+  To start, try providing a short summary of your changes in the Title above. We follow Conventional Commits syntax, please ensure your title is prefixed with one of:
+  - `feat: `
+  - `fix: `
+  - `docs: `
+  - `chore: `
+  
   If a section of the PR template does not apply to this PR, then delete that section.
 
   PLEASE READ:
@@ -36,6 +42,8 @@ _(REQUIRED)_
   Briefly explain any decisions you made with respect to the changes.
   Include anything here that you didn't include in *Release Notes*
   above, such as changes to CI or changes to internal methods.
+
+  If there is a UI component to the change, please include before/after images.
 -->
 
 ## Which issue(s) this PR fixes:
@@ -44,7 +52,7 @@ _(REQUIRED)_
 
 <!--
 If this PR fixes one of more issues, list them here.
-One line each, like so:
+One per line, like so:
 Fixes #123
 Fixes #39
 -->

.github/workflows/e2e.yml

@@ -0,0 +1,46 @@
+name: E2E Tests
+on:
+  pull_request:
+    branches:
+      - mealie-next
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./tests/e2e
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+        cache: 'yarn'
+        cache-dependency-path: ./tests/e2e/yarn.lock
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+    - name: Build Image
+      uses: docker/build-push-action@v5
+      with:
+        file: ./docker/Dockerfile
+        context: .
+        push: false
+        load: true
+        tags: mealie:e2e
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+    - name: Deploy E2E Test Environment
+      run: docker compose up -d
+      working-directory: ./tests/e2e/docker
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Check test environment
+      run: docker ps
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - name: Destroy Test Environment
+      if: always()
+      run: docker compose down --volumes
+      working-directory: ./tests/e2e/docker

.github/workflows/partial-backend.yml

@@ -66,7 +66,7 @@ jobs:
         id: cache-validate
         if: steps.cached-poetry-dependencies.outputs.cache-hit == 'true'
         run: |
-          echo "import black;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 && poetry run python test.py && echo "cache-hit-success=true" >> $GITHUB_OUTPUT
           rm test.py
         continue-on-error: true
 
@@ -78,9 +78,9 @@ jobs:
           poetry add "psycopg2-binary==2.9.9"
         if: steps.cached-poetry-dependencies.outputs.cache-hit != 'true' || steps.cache-validate.outputs.cache-hit-success != 'true'
 
-      - name: Formatting (Black)
+      - name: Formatting (Ruff)
         run: |
-          poetry run black . --check
+          poetry run ruff format . --check
 
       - name: Lint (Ruff)
         run: |

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

@@ -0,0 +1,41 @@
+name: Pull Request Linter
+
+on:
+  workflow_call:
+  pull_request:
+    types: [edited] # This captures the PR title changing
+    branches:
+      - mealie-next
+
+jobs:
+  validate-title:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      # https://github.com/amannn/action-semantic-pull-request
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          # Configure which types are allowed (newline-delimited).
+          # Default: https://github.com/commitizen/conventional-commit-types
+          types: |
+            fix
+            feat
+            docs
+            chore
+          # Configure which scopes are allowed (newline-delimited).
+          # These are regex patterns auto-wrapped in `^ $`.
+          scopes: |
+            deps
+            auto
+            l10n
+          # Configure that a scope must always be provided.
+          requireScope: false
+          # If the PR contains one of these newline-delimited labels, the
+          # validation is skipped. If you want to rerun the validation when
+          # labels change, you might want to use the `labeled` and `unlabeled`
+          # event triggers in your workflow.
+          ignoreLabels: |
+            bot
+            ignore-semantic-pull-request

.github/workflows/pull-requests.yml

@@ -6,6 +6,10 @@ on:
       - mealie-next
 
 jobs:
+  pull-request-lint:
+    name: "Lint PR"
+    uses: ./.github/workflows/pull-request-lint.yml
+
   backend-tests:
     name: "Backend Server Tests"
     uses: ./.github/workflows/partial-backend.yml

.github/workflows/release.yml

@@ -68,6 +68,9 @@ jobs:
 
       - 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 }}"

.pre-commit-config.yaml

@@ -10,7 +10,8 @@ repos:
       - id: end-of-file-fixer
       - id: trailing-whitespace
         exclude: ^tests/data/
-  - repo: https://github.com/psf/black
-    rev: 24.1.0
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    # Ruff version.
+    rev: v0.4.3
     hooks:
-      - id: black
+      - id: ruff-format

.vscode/settings.json

@@ -60,8 +60,5 @@
   },
   "[vue]": {
     "editor.formatOnSave": false
-  },
-  "[python]": {
-    "editor.defaultFormatter": "ms-python.black-formatter",
-  },
+  }
 }

.vscode/tasks.json

@@ -24,16 +24,6 @@
       },
       "problemMatcher": []
     },
-    {
-      "label": "Init Database",
-      "command": "poetry run python mealie/db/init_db.py",
-      "type": "shell",
-      "presentation": {
-        "reveal": "always",
-        "group": "groupA"
-      },
-      "problemMatcher": []
-    },
     {
       "label": "Dev: Start Frontend",
       "command": "task ui",

README.md

@@ -18,9 +18,9 @@
   <h3 align="center">Mealie</h3>
 
   <p align="center">
-    A Place for All Your Recipes
+    A Place For All Your Recipes
     <br />
-    <a href="https://nightly.mealie.io"><strong>Explore the docs »</strong></a>
+    <a href="https://docs.mealie.io/"><strong>Explore the docs »</strong></a>
   <a href="https://github.com/mealie-recipes/mealie">
   </a>
     <br />
@@ -38,12 +38,20 @@
 
 # About The Project
 
-Mealie is a self hosted recipe manager and meal planner with a RestAPI backend and a reactive frontend application built in Vue for a pleasant user experience for the whole family. Easily add recipes into your database by providing the URL and Mealie will automatically import the relevant data, or add a family recipe with the UI editor. Mealie also provides an API for interactions from 3rd party applications.
+Mealie is a self hosted recipe manager, meal planner and shopping list with a RestAPI backend and a reactive frontend built in Vue for a pleasant user experience for the whole family. Easily add recipes into your database by providing the URL and Mealie will automatically import the relevant data, or add a family recipe with the UI editor. Mealie also provides an API for interactions from 3rd party applications.
 
 - [Remember to join the Discord](https://discord.gg/QuStdQGSGK)!
-- [Documentation](https://nightly.mealie.io)
+- [Documentation](https://docs.mealie.io/)
 
 
+## Key Features
+- Recipe imports: Create recipes, by **importing from a URL** or entering data manually
+- Meal Planner: Use the **Meal Planner** to plan your what you'll cook for the next week
+- Shopping List: Put the necessary ingredients on your **Shopping List**, organised into sections of your local supermarket
+- Cookbooks: Group recipes into **Cookbooks** based on your own criteria
+- Docker: Easy **Docker** deployment
+- Localisation: **Translations** for 35+ languages
+
 <!-- CONTRIBUTING -->
 ## Contributing
 
@@ -58,7 +66,7 @@ If you are not a coder, you can still contribute financially. Financial contribu
 
 ### Translations
 
-Translations can be a great way for **non-coders** to contribute to project. We use [Crowdin](https://crowdin.com/project/mealie) to allow several contributors to work on translating Mealie. You can simply help by voting for your preferred translations, or even by completely translating Mealie into a new language.
+Translations can be a great way for **non-coders** to contribute to the project. We use [Crowdin](https://crowdin.com/project/mealie) to allow several contributors to work on translating Mealie. You can simply help by voting for your preferred translations, or even by completely translating Mealie into a new language.
 
 For more information, check out the translation page on the [contributor's guide](https://nightly.mealie.io/contributors/translating/).
 

Taskfile.yml

@@ -74,6 +74,7 @@ tasks:
     desc: run code generators
     cmds:
       - poetry run python dev/code-generation/main.py
+      - task: py:format
 
   dev:services:
     desc: starts postgres and mailpit containers
@@ -105,12 +106,12 @@ tasks:
   py:format:
     desc: runs python code formatter
     cmds:
-      - poetry run black mealie
+      - poetry run ruff format .
 
   py:lint:
     desc: runs python linter
     cmds:
-      - poetry run ruff mealie
+      - poetry run ruff check mealie
 
   py:check:
     desc: runs all linters, type checkers, and formatters
@@ -132,7 +133,6 @@ tasks:
   py:
     desc: runs the backend server
     cmds:
-      - poetry run python mealie/db/init_db.py
       - poetry run python mealie/app.py
 
   py:postgres:
@@ -145,9 +145,14 @@ tasks:
       POSTGRES_PORT: 5432
       POSTGRES_DB: mealie
     cmds:
-      - poetry run python mealie/db/init_db.py
       - poetry run python mealie/app.py
 
+  py:migrate:
+    desc: generates a new migration file e.g. task py:migrate:generate "add new column"
+    cmds:
+      - poetry run alembic revision --autogenerate -m "{{ .CLI_ARGS }}"
+      - task: py:format
+
   ui:build:
     desc: builds the frontend in frontend/dist
     dir: frontend

alembic.ini

@@ -58,15 +58,3 @@ sqlalchemy.url =
 # post_write_hooks defines scripts or Python functions that are run
 # on newly generated revision scripts.  See the documentation for further
 # detail and examples
-
-hooks = isort, black
-
-# format using "isort" - use the console_scripts runner, against the "isort" entrypoint
-isort.type = console_scripts
-isort.entrypoint = isort
-isort.options = REVISION_SCRIPT_FILENAME
-
-# format using "black" - use the console_scripts runner, against the "black" entrypoint
-black.type = console_scripts
-black.entrypoint = black
-black.options = REVISION_SCRIPT_FILENAME

alembic/env.py

@@ -22,7 +22,11 @@ target_metadata = SqlAlchemyBase.metadata
 
 # Set DB url from config
 settings = get_app_settings()
-config.set_main_option("sqlalchemy.url", settings.DB_URL)
+
+if not settings.DB_URL:
+    raise Exception("DB URL not set in config")
+
+config.set_main_option("sqlalchemy.url", settings.DB_URL.replace("%", "%%"))
 
 
 def run_migrations_offline():

alembic/versions/2024-02-23-16.15.07_2298bb460ffd_added_user_to_shopping_list.py

@@ -13,6 +13,9 @@ from sqlalchemy import orm
 
 import mealie.db.migration_types
 from alembic import op
+from mealie.core.root_logger import get_logger
+
+logger = get_logger()
 
 # revision identifiers, used by Alembic.
 revision = "2298bb460ffd"
@@ -37,13 +40,20 @@ def find_user_id_for_group(group_id: UUID):
     with session:
         try:
             # try to find an admin user
-            user_id = session.execute(sa.text(stmt).bindparams(group_id=group_id)).scalar_one()
+            return session.execute(sa.text(stmt).bindparams(group_id=group_id)).scalar_one()
         except orm.exc.NoResultFound:
+            pass
+
+        try:
             # fallback to any user
-            user_id = session.execute(
+            return session.execute(
                 sa.text("SELECT id FROM users WHERE group_id=:group_id LIMIT 1").bindparams(group_id=group_id)
             ).scalar_one()
-        return user_id
+        except orm.exc.NoResultFound:
+            pass
+
+        # no user could be found
+        return None
 
 
 def populate_shopping_list_users():
@@ -54,11 +64,17 @@ def populate_shopping_list_users():
         list_ids_and_group_ids = session.execute(sa.text("SELECT id, group_id FROM shopping_lists")).all()
         for list_id, group_id in list_ids_and_group_ids:
             user_id = find_user_id_for_group(group_id)
-            session.execute(
-                sa.text(f"UPDATE shopping_lists SET user_id=:user_id WHERE id=:id").bindparams(
-                    user_id=user_id, id=list_id
+            if user_id:
+                session.execute(
+                    sa.text(f"UPDATE shopping_lists SET user_id=:user_id WHERE id=:id").bindparams(
+                        user_id=user_id, id=list_id
+                    )
                 )
-            )
+            else:
+                logger.warning(
+                    f"No user found for shopping list {list_id} with group {group_id}; deleting shopping list"
+                )
+                session.execute(sa.text(f"DELETE FROM shopping_lists WHERE id=:id").bindparams(id=list_id))
 
 
 def upgrade():

alembic/versions/2024-03-10-05.08.32_09aba125b57a_add_oidc_auth_method.py

@@ -0,0 +1,31 @@
+"""add OIDC auth method
+
+Revision ID: 09aba125b57a
+Revises: 2298bb460ffd
+Create Date: 2024-03-10 05:08:32.397027
+
+"""
+
+import sqlalchemy as sa
+
+import mealie.db.migration_types
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "09aba125b57a"
+down_revision = "2298bb460ffd"
+branch_labels = None
+depends_on = None
+
+
+def is_postgres():
+    return op.get_context().dialect.name == "postgresql"
+
+
+def upgrade():
+    if is_postgres():
+        op.execute("ALTER TYPE authmethod ADD VALUE 'OIDC'")
+
+
+def downgrade():
+    pass

alembic/versions/2024-03-18-02.28.15_d7c6efd2de42_migrate_favorites_and_ratings_to_user_.py

@@ -0,0 +1,229 @@
+"""migrate favorites and ratings to user_ratings
+
+Revision ID: d7c6efd2de42
+Revises: 09aba125b57a
+Create Date: 2024-03-18 02:28:15.896959
+
+"""
+
+from datetime import datetime
+from textwrap import dedent
+from typing import Any
+from uuid import uuid4
+
+import sqlalchemy as sa
+from sqlalchemy import orm
+
+import mealie.db.migration_types
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "d7c6efd2de42"
+down_revision = "09aba125b57a"
+branch_labels = None
+depends_on = None
+
+
+def is_postgres():
+    return op.get_context().dialect.name == "postgresql"
+
+
+def new_user_rating(user_id: Any, recipe_id: Any, rating: float | None = None, is_favorite: bool = False):
+    if is_postgres():
+        id = str(uuid4())
+    else:
+        id = "%.32x" % uuid4().int
+
+    now = datetime.now().isoformat()
+    return {
+        "id": id,
+        "user_id": user_id,
+        "recipe_id": recipe_id,
+        "rating": rating,
+        "is_favorite": is_favorite,
+        "created_at": now,
+        "update_at": now,
+    }
+
+
+def migrate_user_favorites_to_user_ratings():
+    bind = op.get_bind()
+    session = orm.Session(bind=bind)
+
+    with session:
+        user_ids_and_recipe_ids = session.execute(sa.text("SELECT user_id, recipe_id FROM users_to_favorites")).all()
+        rows = [
+            new_user_rating(user_id, recipe_id, is_favorite=True)
+            for user_id, recipe_id in user_ids_and_recipe_ids
+            if user_id and recipe_id
+        ]
+
+        if is_postgres():
+            query = dedent(
+                """
+                INSERT INTO users_to_recipes (id, user_id, recipe_id, rating, is_favorite, created_at, update_at)
+                VALUES (:id, :user_id, :recipe_id, :rating, :is_favorite, :created_at, :update_at)
+                ON CONFLICT DO NOTHING
+                """
+            )
+        else:
+            query = dedent(
+                """
+                INSERT OR IGNORE INTO users_to_recipes
+                (id, user_id, recipe_id, rating, is_favorite, created_at, update_at)
+                VALUES (:id, :user_id, :recipe_id, :rating, :is_favorite, :created_at, :update_at)
+                """
+            )
+
+        for row in rows:
+            session.execute(sa.text(query), row)
+
+
+def migrate_group_to_user_ratings(group_id: Any):
+    bind = op.get_bind()
+    session = orm.Session(bind=bind)
+
+    with session:
+        user_ids = (
+            session.execute(sa.text("SELECT id FROM users WHERE group_id=:group_id").bindparams(group_id=group_id))
+            .scalars()
+            .all()
+        )
+
+        recipe_ids_ratings = session.execute(
+            sa.text(
+                "SELECT id, rating FROM recipes WHERE group_id=:group_id AND rating > 0 AND rating IS NOT NULL"
+            ).bindparams(group_id=group_id)
+        ).all()
+
+        # Convert recipe ratings to user ratings. Since we don't know who
+        # rated the recipe initially, we copy the rating to all users.
+        rows: list[dict] = []
+        for recipe_id, rating in recipe_ids_ratings:
+            for user_id in user_ids:
+                rows.append(new_user_rating(user_id, recipe_id, rating, is_favorite=False))
+
+        if is_postgres():
+            insert_query = dedent(
+                """
+                INSERT INTO users_to_recipes (id, user_id, recipe_id, rating, is_favorite, created_at, update_at)
+                VALUES (:id, :user_id, :recipe_id, :rating, :is_favorite, :created_at, :update_at)
+                ON CONFLICT (user_id, recipe_id) DO NOTHING;
+                """
+            )
+        else:
+            insert_query = dedent(
+                """
+                INSERT OR IGNORE INTO users_to_recipes
+                (id, user_id, recipe_id, rating, is_favorite, created_at, update_at)
+                VALUES (:id, :user_id, :recipe_id, :rating, :is_favorite, :created_at, :update_at);
+                """
+            )
+
+        update_query = dedent(
+            """
+            UPDATE users_to_recipes
+            SET rating = :rating, update_at = :update_at
+            WHERE user_id = :user_id AND recipe_id = :recipe_id;
+            """
+        )
+
+        # Create new user ratings with is_favorite set to False
+        for row in rows:
+            session.execute(sa.text(insert_query), row)
+
+        # Update existing user ratings with the correct rating
+        for row in rows:
+            session.execute(sa.text(update_query), row)
+
+
+def migrate_to_user_ratings():
+    migrate_user_favorites_to_user_ratings()
+
+    bind = op.get_bind()
+    session = orm.Session(bind=bind)
+
+    with session:
+        group_ids = session.execute(sa.text("SELECT id FROM groups")).scalars().all()
+
+    for group_id in group_ids:
+        migrate_group_to_user_ratings(group_id)
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table(
+        "users_to_recipes",
+        sa.Column("user_id", mealie.db.migration_types.GUID(), nullable=False),
+        sa.Column("recipe_id", mealie.db.migration_types.GUID(), nullable=False),
+        sa.Column("rating", sa.Float(), nullable=True),
+        sa.Column("is_favorite", sa.Boolean(), nullable=False),
+        sa.Column("id", mealie.db.migration_types.GUID(), nullable=False),
+        sa.Column("created_at", sa.DateTime(), nullable=True),
+        sa.Column("update_at", sa.DateTime(), nullable=True),
+        sa.ForeignKeyConstraint(
+            ["recipe_id"],
+            ["recipes.id"],
+        ),
+        sa.ForeignKeyConstraint(
+            ["user_id"],
+            ["users.id"],
+        ),
+        sa.PrimaryKeyConstraint("user_id", "recipe_id", "id"),
+        sa.UniqueConstraint("user_id", "recipe_id", name="user_id_recipe_id_rating_key"),
+    )
+    op.create_index(op.f("ix_users_to_recipes_created_at"), "users_to_recipes", ["created_at"], unique=False)
+    op.create_index(op.f("ix_users_to_recipes_is_favorite"), "users_to_recipes", ["is_favorite"], unique=False)
+    op.create_index(op.f("ix_users_to_recipes_rating"), "users_to_recipes", ["rating"], unique=False)
+    op.create_index(op.f("ix_users_to_recipes_recipe_id"), "users_to_recipes", ["recipe_id"], unique=False)
+    op.create_index(op.f("ix_users_to_recipes_user_id"), "users_to_recipes", ["user_id"], unique=False)
+
+    migrate_to_user_ratings()
+
+    if is_postgres():
+        op.drop_index("ix_users_to_favorites_recipe_id", table_name="users_to_favorites")
+        op.drop_index("ix_users_to_favorites_user_id", table_name="users_to_favorites")
+        op.alter_column("recipes", "rating", existing_type=sa.INTEGER(), type_=sa.Float(), existing_nullable=True)
+    else:
+        op.execute("DROP INDEX IF EXISTS ix_users_to_favorites_recipe_id")
+        op.execute("DROP INDEX IF EXISTS ix_users_to_favorites_user_id")
+        with op.batch_alter_table("recipes") as batch_op:
+            batch_op.alter_column("rating", existing_type=sa.INTEGER(), type_=sa.Float(), existing_nullable=True)
+
+    op.drop_table("users_to_favorites")
+    op.create_index(op.f("ix_recipes_rating"), "recipes", ["rating"], unique=False)
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.alter_column(
+        "recipes_ingredients", "quantity", existing_type=sa.Float(), type_=sa.INTEGER(), existing_nullable=True
+    )
+    op.drop_index(op.f("ix_recipes_rating"), table_name="recipes")
+    op.alter_column("recipes", "rating", existing_type=sa.Float(), type_=sa.INTEGER(), existing_nullable=True)
+    op.create_unique_constraint("ingredient_units_name_group_id_key", "ingredient_units", ["name", "group_id"])
+    op.create_unique_constraint("ingredient_foods_name_group_id_key", "ingredient_foods", ["name", "group_id"])
+    op.create_table(
+        "users_to_favorites",
+        sa.Column("user_id", sa.CHAR(length=32), nullable=True),
+        sa.Column("recipe_id", sa.CHAR(length=32), nullable=True),
+        sa.ForeignKeyConstraint(
+            ["recipe_id"],
+            ["recipes.id"],
+        ),
+        sa.ForeignKeyConstraint(
+            ["user_id"],
+            ["users.id"],
+        ),
+        sa.UniqueConstraint("user_id", "recipe_id", name="user_id_recipe_id_key"),
+    )
+    op.create_index("ix_users_to_favorites_user_id", "users_to_favorites", ["user_id"], unique=False)
+    op.create_index("ix_users_to_favorites_recipe_id", "users_to_favorites", ["recipe_id"], unique=False)
+    op.drop_index(op.f("ix_users_to_recipes_user_id"), table_name="users_to_recipes")
+    op.drop_index(op.f("ix_users_to_recipes_recipe_id"), table_name="users_to_recipes")
+    op.drop_index(op.f("ix_users_to_recipes_rating"), table_name="users_to_recipes")
+    op.drop_index(op.f("ix_users_to_recipes_is_favorite"), table_name="users_to_recipes")
+    op.drop_index(op.f("ix_users_to_recipes_created_at"), table_name="users_to_recipes")
+    op.drop_table("users_to_recipes")
+    # ### end Alembic commands ###

alembic/versions/2024-04-07-01.05.20_7788478a0338_add_group_recipe_actions.py

@@ -0,0 +1,52 @@
+"""add group recipe actions
+
+Revision ID: 7788478a0338
+Revises: d7c6efd2de42
+Create Date: 2024-04-07 01:05:20.816270
+
+"""
+
+import sqlalchemy as sa
+
+import mealie.db.migration_types
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "7788478a0338"
+down_revision = "d7c6efd2de42"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table(
+        "recipe_actions",
+        sa.Column("id", mealie.db.migration_types.GUID(), nullable=False),
+        sa.Column("group_id", mealie.db.migration_types.GUID(), nullable=False),
+        sa.Column("action_type", sa.String(), nullable=False),
+        sa.Column("title", sa.String(), nullable=False),
+        sa.Column("url", sa.String(), nullable=False),
+        sa.Column("created_at", sa.DateTime(), nullable=True),
+        sa.Column("update_at", sa.DateTime(), nullable=True),
+        sa.ForeignKeyConstraint(
+            ["group_id"],
+            ["groups.id"],
+        ),
+        sa.PrimaryKeyConstraint("id"),
+    )
+    op.create_index(op.f("ix_recipe_actions_action_type"), "recipe_actions", ["action_type"], unique=False)
+    op.create_index(op.f("ix_recipe_actions_created_at"), "recipe_actions", ["created_at"], unique=False)
+    op.create_index(op.f("ix_recipe_actions_group_id"), "recipe_actions", ["group_id"], unique=False)
+    op.create_index(op.f("ix_recipe_actions_title"), "recipe_actions", ["title"], unique=False)
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_index(op.f("ix_recipe_actions_title"), table_name="recipe_actions")
+    op.drop_index(op.f("ix_recipe_actions_group_id"), table_name="recipe_actions")
+    op.drop_index(op.f("ix_recipe_actions_created_at"), table_name="recipe_actions")
+    op.drop_index(op.f("ix_recipe_actions_action_type"), table_name="recipe_actions")
+    op.drop_table("recipe_actions")
+    # ### end Alembic commands ###

crowdin.yml

@@ -1,4 +1,8 @@
 preserve_hierarchy: false
+pull_request_title: "chore(l10n): New Crowdin updates"
+pull_request_labels: [
+  "l10n"
+]
 files:
   - source: /frontend/lang/messages/en-US.json
     translation: /frontend/lang/messages/%locale%.json

dev/code-generation/gen_py_pytest_routes.py

@@ -3,8 +3,8 @@ from pathlib import Path
 
 from fastapi import FastAPI
 from jinja2 import Template
-from pydantic import BaseModel
-from utils import PROJECT_DIR, CodeTemplates, HTTPRequest, RouteObject
+from pydantic import BaseModel, ConfigDict
+from utils import PROJECT_DIR, CodeTemplates, HTTPRequest, RouteObject, RequestType
 
 CWD = Path(__file__).parent
 
@@ -12,23 +12,25 @@ OUTFILE = PROJECT_DIR / "tests" / "utils" / "api_routes" / "__init__.py"
 
 
 class PathObject(BaseModel):
+    model_config = ConfigDict(arbitrary_types_allowed=True)
     route_object: RouteObject
     http_verbs: list[HTTPRequest]
 
-    class Config:
-        arbitrary_types_allowed = True
-
 
 def get_path_objects(app: FastAPI):
     paths = []
 
     for key, value in app.openapi().items():
         if key == "paths":
-            for key, value in value.items():
+            for key, value2 in value.items():
+                verbs = []
+                for k, v in value2.items():
+                    verbs.append(HTTPRequest(request_type=k, **v))
+
                 paths.append(
                     PathObject(
                         route_object=RouteObject(key),
-                        http_verbs=[HTTPRequest(request_type=k, **v) for k, v in value.items()],
+                        http_verbs=verbs,
                     )
                 )
 

dev/code-generation/gen_ts_locales.py

@@ -5,7 +5,7 @@ from pathlib import Path
 import dotenv
 import requests
 from jinja2 import Template
-from pydantic import Extra
+from pydantic import ConfigDict
 from requests import Response
 from utils import CodeDest, CodeKeys, inject_inline, log
 
@@ -35,18 +35,24 @@ LOCALE_DATA: dict[str, LocaleData] = {
     "es-ES": LocaleData(name="Español (Spanish)"),
     "fi-FI": LocaleData(name="Suomi (Finnish)"),
     "fr-FR": LocaleData(name="Français (French)"),
+    "gl-ES": LocaleData(name="Galego (Galician)"),
     "he-IL": LocaleData(name="עברית (Hebrew)", dir="rtl"),
+    "hr-HR": LocaleData(name="Hrvatski (Croatian)"),
     "hu-HU": LocaleData(name="Magyar (Hungarian)"),
+    "is-IS": LocaleData(name="Íslenska (Icelandic)"),
     "it-IT": LocaleData(name="Italiano (Italian)"),
     "ja-JP": LocaleData(name="日本語 (Japanese)"),
     "ko-KR": LocaleData(name="한국어 (Korean)"),
-    "no-NO": LocaleData(name="Norsk (Norwegian)"),
+    "lt-LT": LocaleData(name="Lietuvių (Lithuanian)"),
+    "lv-LV": LocaleData(name="Latviešu (Latvian)"),
     "nl-NL": LocaleData(name="Nederlands (Dutch)"),
+    "no-NO": LocaleData(name="Norsk (Norwegian)"),
     "pl-PL": LocaleData(name="Polski (Polish)"),
     "pt-BR": LocaleData(name="Português do Brasil (Brazilian Portuguese)"),
     "pt-PT": LocaleData(name="Português (Portuguese)"),
     "ro-RO": LocaleData(name="Română (Romanian)"),
     "ru-RU": LocaleData(name="Pусский (Russian)"),
+    "sl-SI": LocaleData(name="Slovenščina (Slovenian)"),
     "sr-SP": LocaleData(name="српски (Serbian)"),
     "sv-SE": LocaleData(name="Svenska (Swedish)"),
     "tr-TR": LocaleData(name="Türkçe (Turkish)"),
@@ -56,7 +62,7 @@ LOCALE_DATA: dict[str, LocaleData] = {
     "zh-TW": LocaleData(name="繁體中文 (Chinese traditional)"),
 }
 
-LOCALE_TEMPLATE = """// This Code is auto generated by gen_global_components.py
+LOCALE_TEMPLATE = """// This Code is auto generated by gen_ts_locales.py
 export const LOCALES = [{% for locale in locales %}
   {
     name: "{{ locale.name }}",
@@ -70,6 +76,8 @@ export const LOCALES = [{% for locale in locales %}
 
 
 class TargetLanguage(MealieModel):
+    model_config = ConfigDict(populate_by_name=True, extra="allow")
+
     id: str
     name: str
     locale: str
@@ -78,10 +86,6 @@ class TargetLanguage(MealieModel):
     twoLettersCode: str
     progress: float = 0.0
 
-    class Config:
-        extra = Extra.allow
-        allow_population_by_field_name = True
-
 
 class CrowdinApi:
     project_name = "Mealie"
@@ -152,6 +156,7 @@ PROJECT_DIR = Path(__file__).parent.parent.parent
 datetime_dir = PROJECT_DIR / "frontend" / "lang" / "dateTimeFormats"
 locales_dir = PROJECT_DIR / "frontend" / "lang" / "messages"
 nuxt_config = PROJECT_DIR / "frontend" / "nuxt.config.js"
+reg_valid = PROJECT_DIR / "mealie" / "schema" / "_mealie" / "validators.py"
 
 """
 This snippet walks the message and dat locales directories and generates the import information
@@ -175,6 +180,19 @@ def inject_nuxt_values():
     inject_inline(nuxt_config, CodeKeys.nuxt_local_dates, all_date_locales)
 
 
+def inject_registration_validation_values():
+    all_langs = []
+    for match in locales_dir.glob("*.json"):
+        lang_string = f'"{match.stem}",'
+        all_langs.append(lang_string)
+
+    # sort
+    all_langs.sort()
+
+    log.debug(f"injecting locales into user registration validation -> {reg_valid}")
+    inject_inline(reg_valid, CodeKeys.nuxt_local_messages, all_langs)
+
+
 def generate_locales_ts_file():
     api = CrowdinApi("")
     models = api.get_languages()
@@ -193,6 +211,7 @@ def main():
 
     generate_locales_ts_file()
     inject_nuxt_values()
+    inject_registration_validation_values()
 
 
 if __name__ == "__main__":

dev/code-generation/gen_ts_types.py

@@ -6,7 +6,7 @@ from utils import log
 
 # ============================================================
 
-template = """// This Code is auto generated by gen_global_components.py
+template = """// This Code is auto generated by gen_ts_types.py
 {% for name in global %}import {{ name }} from "@/components/global/{{ name }}.vue";
 {% endfor %}{% for name in layout %}import {{ name }} from "@/components/layout/{{ name }}.vue";
 {% endfor %}

dev/code-generation/utils/route.py

@@ -1,9 +1,8 @@
 import re
 from enum import Enum
-from typing import Optional
 
 from humps import camelize
-from pydantic import BaseModel, Extra, Field
+from pydantic import BaseModel, ConfigDict, Field
 from slugify import slugify
 
 
@@ -34,33 +33,30 @@ class ParameterIn(str, Enum):
 
 
 class RouterParameter(BaseModel):
+    model_config = ConfigDict(extra="allow")
+
     required: bool = False
     name: str
     location: ParameterIn = Field(..., alias="in")
 
-    class Config:
-        extra = Extra.allow
-
 
 class RequestBody(BaseModel):
-    required: bool = False
+    model_config = ConfigDict(extra="allow")
 
-    class Config:
-        extra = Extra.allow
+    required: bool = False
 
 
 class HTTPRequest(BaseModel):
+    model_config = ConfigDict(extra="allow", populate_by_name=True)
+
     request_type: RequestType
     description: str = ""
     summary: str
-    requestBody: Optional[RequestBody]
+    request_body: RequestBody | None = None
 
     parameters: list[RouterParameter] = []
     tags: list[str] | None = []
 
-    class Config:
-        extra = Extra.allow
-
     def list_as_js_object_string(self, parameters, braces=True):
         if len(parameters) == 0:
             return ""
@@ -71,11 +67,11 @@ class HTTPRequest(BaseModel):
             return ", ".join(parameters)
 
     def payload(self):
-        return "payload" if self.requestBody else ""
+        return "payload" if self.request_body else ""
 
     def function_args(self):
         all_params = [p.name for p in self.parameters]
-        if self.requestBody:
+        if self.request_body:
             all_params.append("payload")
         return self.list_as_js_object_string(all_params)
 

dev/code-generation/utils/template.py

@@ -3,8 +3,6 @@ import re
 from dataclasses import dataclass
 from pathlib import Path
 
-import black
-import isort
 from jinja2 import Template
 from rich.logging import RichHandler
 
@@ -23,10 +21,7 @@ def render_python_template(template_file: Path | str, dest: Path, data: dict):
 
     text = tplt.render(data=data)
 
-    text = black.format_str(text, mode=black.FileMode())
-
     dest.write_text(text)
-    isort.file(dest)
 
 
 @dataclass
@@ -50,7 +45,7 @@ class CodeSlicer:
         self._next_line += 1
 
 
-def get_indentation_of_string(line: str, comment_char: str = "//") -> str:
+def get_indentation_of_string(line: str, comment_char: str = "//|#") -> str:
     return re.sub(rf"{comment_char}.*", "", line).removesuffix("\n")
 
 

docker/docker-compose.yml

@@ -14,6 +14,7 @@ services:
       - 9091:9000
     environment:
       ALLOW_SIGNUP: "false"
+      LOG_LEVEL: "DEBUG"
 
       DB_ENGINE: sqlite # Optional: 'sqlite', 'postgres'
       # =====================================

docker/entry.sh

@@ -33,9 +33,6 @@ init() {
 
     # Activate our virtual environment here
     . /opt/pysetup/.venv/bin/activate
-
-    # Initialize Database Prerun
-    poetry run python /app/mealie/db/init_db.py
 }
 
 change_user
@@ -43,10 +40,11 @@ init
 GUNICORN_PORT=${API_PORT:-9000}
 
 # Start API
-hostip=`/sbin/ip route|awk '/default/ { print $3 }'`
+HOST_IP=`/sbin/ip route|awk '/default/ { print $3 }'`
+
 if [ "$WEB_GUNICORN" = 'true' ]; then
     echo "Starting Gunicorn"
-    exec gunicorn mealie.app:app -b 0.0.0.0:$GUNICORN_PORT --forwarded-allow-ips=$hostip -k uvicorn.workers.UvicornWorker -c /app/gunicorn_conf.py --preload
+    exec gunicorn mealie.app:app -b 0.0.0.0:$GUNICORN_PORT --forwarded-allow-ips=$HOST_IP -k uvicorn.workers.UvicornWorker -c /app/gunicorn_conf.py --preload
 else
-    exec uvicorn mealie.app:app --host 0.0.0.0 --forwarded-allow-ips=$hostip --port $GUNICORN_PORT
+    exec python /app/mealie/main.py
 fi

docs/docs/contributors/developers-guide/code-contributions.md

@@ -2,11 +2,11 @@
 
 [Please Join the Discord](https://discord.gg/QuStdQGSGK). We are building a community of developers working on the project.
 
-## We Develop with Github
-We use github to host code, to track issues and feature requests, as well as accept pull requests.
+## We Develop with GitHub
+We use GitHub to host code, to track issues and feature requests, as well as accept pull requests.
 
-## We Use [Github Flow](https://docs.github.com/en/get-started/using-github/github-flow), So All Code Changes Happen Through Pull Requests
-Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://docs.github.com/en/get-started/using-github/github-flow)). We actively welcome your pull requests:
+## We Use [GitHub Flow](https://docs.github.com/en/get-started/using-github/github-flow), So All Code Changes Happen Through Pull Requests
+Pull requests are the best way to propose changes to the codebase (we use [GitHub Flow](https://docs.github.com/en/get-started/using-github/github-flow)). We actively welcome your pull requests:
 
 1. Fork the repo and create your branch from `mealie-next`.
 2. Checkout the Discord, the PRs page, or the Projects page to get an idea of what's already being worked on.
@@ -14,13 +14,13 @@ Pull requests are the best way to propose changes to the codebase (we use [Githu
 4. Once you've got an idea of what changes you want to make, create a draft PR as soon as you can to let us know what you're working on and how we can help!
 5. If you've changed APIs, update the documentation.
 6. Run tests, including `task py:check`.
-6. Issue that pull request! First make a draft PR, make sure that the automated github tests all pass, then mark as ready for review.
-7. Be sure to add release notes to the pull request.
+7. Issue that pull request! First make a draft PR, make sure that the automated GitHub tests all pass, then mark as ready for review. We follow Conventional Commits syntax; please title your PR as described in the PR template.
+8. Be sure to add release notes to the pull request.
 
 ## Any contributions you make will be under the AGPL Software License
 In short, when you submit code changes, your submissions are understood to be under the same [AGPL License](https://choosealicense.com/licenses/agpl-3.0/) that covers the project. Feel free to contact the maintainers if that's a concern.
 
-## Report bugs using Github's [issues](https://github.com/mealie-recipes/mealie/issues)
+## Report bugs using GitHub's [issues](https://github.com/mealie-recipes/mealie/issues)
 We use GitHub issues to track public bugs. Report a bug by [opening a new issue](https://github.com/mealie-recipes/mealie/issues/new); it's that easy!
 
 ## Write bug reports with detail, background, and sample code

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

@@ -6,7 +6,7 @@ This is the start of the maintainers guide for Mealie developers. Those who have
 
 If you are working on issues, it can be helpful to understand the workflow for our repository. When an issue comes in it is tagged with the `bug` and `triage` flags. This is to indicate that they need to be reviewed by a maintainer to determine validity.
 
-After you've reviered an issue it will generally move into one of two states:
+After you've reviewed an issue it will generally move into one of two states:
 
 `bug:confirmed`
 :   Your were able to verify the issue and we determined we need to fix it

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

@@ -0,0 +1,65 @@
+# OpenID Connect (OIDC) Authentication
+
+:octicons-tag-24: v1.4.0
+
+Mealie supports 3rd party authentication via [OpenID Connect (OIDC)](https://openid.net/connect/), an identity layer built on top of OAuth2. OIDC is supported by many Identity Providers (IdP), including:
+
+- [Authentik](https://goauthentik.io/integrations/sources/oauth/#openid-connect)
+- [Authelia](https://www.authelia.com/configuration/identity-providers/open-id-connect/)
+- [Keycloak](https://www.keycloak.org/docs/latest/securing_apps/#_oidc)
+- [Okta](https://www.okta.com/openid-connect/)
+
+## Account Linking
+
+Signing in with OAuth will automatically find your account in Mealie and link to it. If a user does not exist in Mealie, then one will be created (if enabled), but will be unable to log in with any other authentication method. An admin can configure another authentication method for such a user.
+
+## Provider Setup
+
+Before you can start using OIDC Authentication, you must first configure a new client application in your identity provider. Your identity provider must support the OAuth **Authorization Code flow with PKCE**. The steps will vary by provider, but generally, the steps are as follows.
+
+1. Create a new client application
+    - The Provider type should be OIDC or OAuth2
+    - The Grant type should be `Authorization Code`
+    - The Application type should be `Web` or `SPA`
+    - The Client type should be `public`
+
+2. Configure redirect URI
+
+    The redirect URI(s) that are needed:
+
+    1. `http(s)://DOMAIN:PORT/login`
+    2. `https(s)://DOMAIN:PORT/login?direct=1`
+        1. This URI is only required if your IdP supports [RP-Initiated Logout](https://openid.net/specs/openid-connect-rpinitiated-1_0.html) such as Keycloak. You may also be able to combine this into the previous URI by using a wildcard: `http(s)://DOMAIN:PORT/login*`
+
+    The redirect URI(s) should include any URL that Mealie is accessible from. Some examples include
+
+        http://localhost:9091/login
+        https://mealie.example.com/login
+
+3. Configure origins
+
+    If your identity provider enforces CORS on any endpoints, you will need to specify your Mealie URL as an Allowed Origin.
+
+4. Configure allowed scopes
+
+    The scopes required are `openid profile email`
+
+    If you plan to use the [groups](#groups) to configure access within Mealie, you will need to also add the scope defined by the `OIDC_GROUPS_CLAIM` environment variable. The default claim is `groups`
+
+## Mealie Setup
+
+Take the client id and your discovery URL and update your environment variables to include the required OIDC variables described in [Installation - Backend Configuration](../installation/backend-config.md#openid-connect-oidc).
+
+### Groups
+
+There are two (optional) [environment variables](../installation/backend-config.md#openid-connect-oidc) that can control which of the users in your IdP can log in to Mealie and what permissions they will have. Keep in mind that these groups **do not necessarily correspond to groups in Mealie**. The groups claim is configurable via the `OIDC_GROUPS_CLAIM` environment variable. The groups should be **defined in your IdP** and be returned in the configured claim value.
+
+`OIDC_USER_GROUP`: Users must be a part of this group (within your IdP) to be able to log in.
+
+`OIDC_ADMIN_GROUP`: Users that are in this group (within your IdP) will be made an **admin** in Mealie.
+
+## Examples
+
+Example configurations for several Identity Providers have been provided by the Community in the [GitHub Discussions](https://github.com/mealie-recipes/mealie/discussions/categories/oauth-provider-example).
+
+If you don't see your provider and have successfully set it up, please consider [creating your own example](https://github.com/mealie-recipes/mealie/discussions/new?category=oauth-provider-example) so that others can have a smoother setup.

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

@@ -26,7 +26,7 @@ Do the following for each recipe you want to intelligently handle ingredients.
 6. Click the Edit button/icon again
 7. Scroll to the ingredients and you should see new fields for Amount, Unit, Food, and Note. The Note in particular will contain the original text of the Recipe.
 8. Click `Parse` and you will be taken to the ingredient parsing page.
-9. Choose your parser. The `Natural Language Parser` works very well, but you can also use the `Brute Parser`.
+9. Choose your parser. The `Natural Language Parser` works very well, but you can also use the `Brute Parser`, or the `OpenAI Parser` if you've [enabled OpenAI support](./installation/backend-config.md#openai).
 10. Click `Parse All`, and your ingredients should be separated out into Units and Foods based on your seeding in Step 1 above.
 11. For ingredients where the Unit or Food was not found, you can click a button to accept an automatically suggested Food to add to the database. Or, manually enter the Unit/Food and hit `Enter` (or click `Create`) to add it to the database
 12. When done, click `Save All` and you will be taken back to the recipe. Now the Unit and Food fields of the recipe should be filled out.
@@ -94,6 +94,10 @@ docker exec -it mealie-next bash
 python /app/mealie/scripts/change_password.py
 ```
 
+## I can't log in with external auth. How can I change my authentication method?
+
+Follow the [steps above](#how-can-i-change-my-password) for changing your password. You will be prompted if you would like to switch your authentication method back to local auth so you can log in again.
+
 ## How do private groups and recipes work?
 
 Managing private groups and recipes can be confusing. The following diagram and notes should help explain how they work to determine if a recipe can be shared publicly.

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

@@ -14,10 +14,14 @@ Mealie offers two main ways to create recipes. You can use the integrated recipe
 
 Mealie supports importing recipes from a few other sources besides websites. Currently the following sources are supported:
 
-- Mealie Pre v1
+- Tandoor
 - Nextcloud Cookbooks
 - Paprika
 - Chowdown
+- Plan to Eat
+- Recipe Keeper
+- Copy Me That
+- My Recipe Box
 
 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.
 
@@ -81,12 +85,63 @@ The meal planner has the concept of plan rules. These offer a flexible way to us
 
 The shopping lists feature is a great way to keep track of what you need to buy for your next meal. You can add items directly to the shopping list or link a recipe and all of it's ingredients to track meals during the week.
 
-!!! warning
-    At this time there isn't a tight integration between meal-plans and shopping lists; however, it's something we have planned for the future.
-
 
 [Shopping List Demo](https://demo.mealie.io/shopping-lists){ .md-button .md-button--primary }
 
+## Integrations
+
+Mealie is designed to integrate with many different external services. There are several ways you can integrate with Mealie to achieve custom IoT automations, data synchronization, and anything else you can think of. [You can work directly with Mealie through the API](./api-usage.md), or leverage other services to make seamless integrations.
+
+### Notifiers
+
+Notifiers are event-driven notifications sent when specific actions are performed within Mealie. Some actions include:
+- creating a recipe
+- adding items to a shopping list
+- creating a new mealplan
+
+Notifiers use the [Apprise library](https://github.com/caronc/apprise/wiki), which integrates with a large number of notification services. In addition, certain custom notifiers send basic event data to the consumer (e.g. the `id` of the resource). These include:
+
+- `form` and `forms`
+- `json` and `jsons`
+- `xml` and `xmls`
+
+[Notifiers Demo](https://demo.mealie.io/group/notifiers){ .md-button .md-button--primary }
+
+### Webhooks
+
+Unlike notifiers, which are event-driven notifications, Webhooks allow you to send scheduled notifications to your desired endpoint. Webhooks are sent on the day of a scheduled mealplan, at the specified time, and contain the mealplan data in the request.
+
+[Webhooks Demo](https://demo.mealie.io/group/webhooks){ .md-button .md-button--primary }
+
+### Recipe Actions
+
+Recipe Actions are custom actions you can add to all recipes in Mealie. This is a great way to add custom integrations that are fired manually. There are two types of recipe actions:
+
+1. link - these actions will take you directly to an external page
+2. post - these actions will send a `POST` request to the specified URL, with the recipe JSON in the request body. These can be used, for instance, to manually trigger a webhook in Home Assistant
+
+Recipe Action URLs can include merge fields to inject the current recipe's data. For instance, you can use the following URL to include a Google search with the recipe's slug:
+```
+https://www.google.com/search?q=${slug}
+```
+
+When the action is clicked on, the `${slug}` field is replaced with the recipe's slug value. So, for example, it might take you to this URL on one of your recipes:
+```
+https://www.google.com/search?q=pasta-fagioli
+```
+
+A common use case for "link" recipe actions is to integrate with the Bring! shopping list. Simply add a Recipe Action with the following URL:
+```
+https://api.getbring.com/rest/bringrecipes/deeplink?url=${url}&source=web
+```
+
+Below is a list of all valid merge fields:
+
+- ${id}
+- ${slug}
+- ${url}
+
+To add, modify, or delete Recipe Actions, visit the Data Management page (more on that below).
 
 ## Data Management
 

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

@@ -4,17 +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                                                         |
-| 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  |         true          | Allow user sign-up without token                                                    |
+| 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                                                         |
+| 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                                                    |
+| LOG_CONFIG_OVERRIDE           |                       | Override the config for logging with a custom path                                  |
+| LOG_LEVEL                     |         info          | Logging level (e.g. critical, error, warning, info, debug, trace)                   |
+| DAILY_SCHEDULE_TIME           |        23:45          | The time of day to run the daily tasks.                                             |
+
+<super>\*</super> Starting in v1.4.0 this was changed to default to `false` as apart of a security review of the application.
 
 ### Security
 
@@ -25,14 +30,15 @@
 
 ### Database
 
-| Variables         | Default  | Description                      |
-| ----------------- | :------: | -------------------------------- |
-| DB_ENGINE         |  sqlite  | Optional: 'sqlite', 'postgres'   |
-| POSTGRES_USER     |  mealie  | Postgres database user           |
-| POSTGRES_PASSWORD |  mealie  | Postgres database password       |
-| POSTGRES_SERVER   | postgres | Postgres database server address |
-| POSTGRES_PORT     |   5432   | Postgres database port           |
-| POSTGRES_DB       |  mealie  | Postgres database name           |
+| Variables             | Default  | Description                                                             |
+| --------------------- | :------: | ----------------------------------------------------------------------- |
+| DB_ENGINE             |  sqlite  | Optional: 'sqlite', 'postgres'                                          |
+| POSTGRES_USER         |  mealie  | Postgres database user                                                  |
+| POSTGRES_PASSWORD     |  mealie  | Postgres database password                                              |
+| POSTGRES_SERVER       | postgres | Postgres database server address                                        |
+| POSTGRES_PORT         |   5432   | Postgres database port                                                  |
+| POSTGRES_DB           |  mealie  | Postgres database name                                                  |
+| POSTGRES_URL_OVERRIDE |   None   | Optional Postgres URL override to use instead of POSTGRES\_\* variables |
 
 ### Email
 
@@ -75,6 +81,42 @@ Changing the webworker settings may cause unforeseen memory leak issues with Mea
 | LDAP_NAME_ATTRIBUTE  |  name   | The LDAP attribute that maps to the user's name                                                                                     |
 | LDAP_MAIL_ATTRIBUTE  |  mail   | The LDAP attribute that maps to the user's email                                                                                    |
 
+### OpenID Connect (OIDC)
+
+:octicons-tag-24: v1.4.0
+
+For usage, see [Usage - OpenID Connect](../authentication/oidc.md)
+
+| Variables              | Default | Description                                                                                                                                                                                               |
+| ---------------------- | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| OIDC_AUTH_ENABLED      |  False  | Enables authentication via OpenID Connect                                                                                                                                                                 |
+| OIDC_SIGNUP_ENABLED    |  True   | Enables new users to be created when signing in for the first time with OIDC                                                                                                                              |
+| OIDC_CONFIGURATION_URL |  None   | The URL to the OIDC configuration of your provider. This is usually something like https://auth.example.com/.well-known/openid-configuration                                                              |
+| OIDC_CLIENT_ID         |  None   | The client id of your configured client in your provider                                                                                                                                                  |
+| OIDC_USER_GROUP        |  None   | If specified, only users belonging to this group will be able to successfully authenticate, regardless of the `OIDC_ADMIN_GROUP`. For more information see [this page](../authentication/oidc.md#groups)  |
+| OIDC_ADMIN_GROUP       |  None   | If specified, users belonging to this group will be made an admin. For more information see [this page](../authentication/oidc.md#groups)                                                                 |
+| OIDC_AUTO_REDIRECT     |  False  | If `True`, then the login page will be bypassed an you will be sent directly to your Identity Provider. You can still get to the login page by adding `?direct=1` to the login URL                        |
+| OIDC_PROVIDER_NAME     |  OAuth  | The provider name is shown in SSO login button. "Login with <OIDC_PROVIDER_NAME\>"                                                                                                                        |
+| OIDC_REMEMBER_ME       |  False  | Because redirects bypass the login screen, you cant extend your session by clicking the "Remember Me" checkbox. By setting this value to true, a session will be extended as if "Remember Me" was checked |
+| OIDC_SIGNING_ALGORITHM |  RS256  | The algorithm used to sign the id token (examples: RS256, HS256)                                                                                                                                          |
+| OIDC_USER_CLAIM        |  email  | This is the claim which Mealie will use to look up an existing user by (e.g. "email", "preferred_username") |
+| OIDC_GROUPS_CLAIM      | groups  | Optional if not using `OIDC_USER_GROUP` or `OIDC_ADMIN_GROUP`. This is the claim Mealie will request from your IdP and will use to compare to `OIDC_USER_GROUP` or `OIDC_ADMIN_GROUP` to allow the user to log in to Mealie or is set as an admin. **Your IdP must be configured to grant this claim**|
+| OIDC_TLS_CACERTFILE    | None    | File path to Certificate Authority used to verify server certificate (e.g. `/path/to/ca.crt`) |
+
+### OpenAI
+
+:octicons-tag-24: v1.7.0
+
+Mealie supports various integrations using OpenAI. To enable OpenAI, [you must provide your OpenAI API key](https://platform.openai.com/api-keys). You can tweak how OpenAI is used using these backend settings. Please note that while OpenAI usage is optimized to reduce API costs, you're unlikely to be able to use OpenAI features with the free tier limits.
+
+| Variables                 |     Default   | Description                                                                                                                    |
+| ------------------------- |    :------:   | ------------------------------------------------------------------------------------------------------------------------------ |
+| OPENAI_BASE_URL           |      None     | The base URL for the OpenAI API. If you're not sure, leave this empty to use the standard OpenAI platform                      |
+| OPENAI_API_KEY            |      None     | Your OpenAI API Key. Enables OpenAI-related features                                                                           |
+| OPENAI_MODEL              |     gpt-4o    | Which OpenAI model to use. If you're not sure, leave this empty                                                                |
+| OPENAI_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                        |
+
 ### Themeing
 
 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.
@@ -96,6 +138,27 @@ Setting the following environmental variables will change the theme of the front
 | THEME_DARK_WARNING    | #FF6D00 | Dark Theme Config Variable  |
 | THEME_DARK_ERROR      | #EF5350 | Dark Theme Config Variable  |
 
+### Docker Secrets
+
+Setting a credential can be done using secrets when running in a Docker container.
+This can be used to avoid leaking passwords through compose files, environment variables, or command-line history.
+For example, to configure the Postgres database password in Docker compose, create a file on the host that contains only the password, and expose that file to the Mealie service as a secret with the correct name.
+Note that environment variables take priority over secrets, so any previously defined environment variables should be removed when migrating to secrets.
+
+```
+services:
+  mealie:
+    ...
+    environment:
+      ...
+      POSTGRES_USER: postgres
+    secrets:
+      - POSTGRES_PASSWORD
+
+secrets:
+  POSTGRES_PASSWORD:
+    file: postgrespassword.txt
+```
 
 [workers_per_core]: https://github.com/tiangolo/uvicorn-gunicorn-docker/blob/2daa3e3873c837d5781feb4ff6a40a89f791f81b/README.md#workers_per_core
 [max_workers]: https://github.com/tiangolo/uvicorn-gunicorn-docker/blob/2daa3e3873c837d5781feb4ff6a40a89f791f81b/README.md#max_workers

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

@@ -0,0 +1,16 @@
+# Logs
+
+:octicons-tag-24: v1.5.0
+
+## Highlighs
+
+- Logs are written to `/app/data/mealie.log` by default in the container.
+- Logs are also written to stdout and stderr.
+- You can adjust the log level using the `LOG_LEVEL` environment variable.
+
+## Configuration
+
+Starting in v1.5.0 logging is now highly configurable. Using the `LOG_CONFIG_OVERRIDE` you can provide the application with a custom configuration to log however you'd like. This configuration file is based off the [Python Logging Config](https://docs.python.org/3/library/logging.config.html#logging.config.fileConfig). It can be difficult to understand the configuration at first, so here are some resources to help get started.
+
+- This [YouTube Video](https://www.youtube.com/watch?v=9L77QExPmI0) for a great walkthrough on the logging file format.
+- Our [Logging Config](https://github.com/mealie-recipes/mealie/blob/mealie-next/mealie/core/logger/logconf.prod.json)

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

@@ -5,40 +5,39 @@ PostgreSQL might be considered if you need to support many concurrent users. In
 **For Environment Variable Configuration, see** [Backend Configuration](./backend-config.md)
 
 ```yaml
----
-version: "3.7"
 services:
   mealie:
-    image: ghcr.io/mealie-recipes/mealie:v1.1.0 # (3)
+    image: ghcr.io/mealie-recipes/mealie:v1.7.0 # (3)
     container_name: mealie
+    restart: always
     ports:
         - "9925:9000" # (1)
     deploy:
       resources:
         limits:
           memory: 1000M # (2)
-    depends_on:
-      - postgres
     volumes:
       - mealie-data:/app/data/
     environment:
-    # Set Backend ENV Variables Here
-      - ALLOW_SIGNUP=true
-      - PUID=1000
-      - PGID=1000
-      - TZ=America/Anchorage
-      - MAX_WORKERS=1
-      - WEB_CONCURRENCY=1
-      - BASE_URL=https://mealie.yourdomain.com
+      # Set Backend ENV Variables Here
+      ALLOW_SIGNUP: true
+      PUID: 1000
+      PGID: 1000
+      TZ: America/Anchorage
+      MAX_WORKERS: 1
+      WEB_CONCURRENCY: 1
+      BASE_URL: https://mealie.yourdomain.com
+      # Database Settings
+      DB_ENGINE: postgres
+      POSTGRES_USER: mealie
+      POSTGRES_PASSWORD: mealie
+      POSTGRES_SERVER: postgres
+      POSTGRES_PORT: 5432
+      POSTGRES_DB: mealie
+    depends_on:
+      postgres:
+        condition: service_healthy
 
-    # Database Settings
-      - DB_ENGINE=postgres
-      - POSTGRES_USER=mealie
-      - POSTGRES_PASSWORD=mealie
-      - POSTGRES_SERVER=postgres
-      - POSTGRES_PORT=5432
-      - POSTGRES_DB=mealie
-    restart: always
   postgres:
     container_name: postgres
     image: postgres:15
@@ -48,12 +47,15 @@ services:
     environment:
       POSTGRES_PASSWORD: mealie
       POSTGRES_USER: mealie
+    healthcheck:
+      test: ["CMD", "pg_isready"]
+      interval: 30s
+      timeout: 20s
+      retries: 3
 
 volumes:
   mealie-data:
-    driver: local
   mealie-pgdata:
-    driver: local
 ```
 
 <!-- Updating This? Be Sure to also update the SQLite Annotations -->

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

@@ -0,0 +1,43 @@
+---
+tags:
+  - Security
+---
+
+# Security Considerations
+
+This page is a collection of security considerations for Mealie. It mostly deals with reported issues and how it's possible to mitigate them. Note that this page is for you to use as a guide for how secure you want to make your deployment. It's important to note that most of these will not apply to you, if you:
+
+1. Run behind a VPN
+2. Use a strong password
+3. Disable Sign-Ups
+4. Don't host for malicious users
+
+Use your best judgement when deciding what to do.
+
+## Denial of Service
+
+By default, the API is **not** rate limited. This leaves Mealie open to a potential **Denial of Service Attack**. While it's possible to perform a **Denial of Service Attack** on any endpoint, there are a few key endpoints that are more vulnerable than others.
+
+- `/api/recipes/create-url`
+- `/api/recipes/{id}/image`
+
+These endpoints are used to scrape data based off a user provided URL. It is possible for a malicious user to issue multiple requests to download an arbitrarily large external file (e.g a Debian ISO) and sufficiently saturate a CPU assigned to the container. While we do implement some protections against this by chunking the response, and using a timeout strategy, it's still possible to overload the CPU if an attacker issues multiple requests concurrently.
+
+### Mitigation
+
+If you'd like to mitigate this risk, we suggest that you rate limit the API in general, and apply strict rate limits to these endpoints. You can do this by utilizing a reverse proxy. See the following links to get started:
+
+- [Traefik](https://doc.traefik.io/traefik/middlewares/http/ratelimit/)
+- [Nginx](https://nginx.org/en/docs/http/ngx_http_limit_req_module.html)
+- [Caddy](https://caddyserver.com/docs/modules/http.handlers.rate_limit)
+
+## Server Side Request Forgery
+
+- `/api/recipes/create-url`
+- `/api/recipes/{id}/image`
+
+Given the nature of these APIs it's possible to perform a **Server Side Request Forgery** attack. This is where a malicious user can issue a request to an internal network resource, and potentially exfiltrate data. We _do_ perform some checks to mitigate access to resources within your network but at the end of the day, users of Mealie are allowed to trigger HTTP requests on **your server**.
+
+### Mitigation
+
+If you'd like to mitigate this risk, we suggest that you isolate the container that Mealie is running in to ensure that it's access to internal resources is limited only to what is required. _Note that Mealie does require access to the internet for recipe imports._ You might consider isolating Mealie from your home network entirely and only allowing access to the external internet.

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

@@ -9,12 +9,11 @@ SQLite is a popular, open source, self-contained, zero-configuration database th
 **For Environment Variable Configuration, see** [Backend Configuration](./backend-config.md)
 
 ```yaml
----
-version: "3.7"
 services:
   mealie:
-    image: ghcr.io/mealie-recipes/mealie:v1.1.0 # (3)
+    image: ghcr.io/mealie-recipes/mealie:v1.7.0 # (3)
     container_name: mealie
+    restart: always
     ports:
         - "9925:9000" # (1)
     deploy:
@@ -24,19 +23,17 @@ services:
     volumes:
       - mealie-data:/app/data/
     environment:
-    # Set Backend ENV Variables Here
-      - ALLOW_SIGNUP=true
-      - PUID=1000
-      - PGID=1000
-      - TZ=America/Anchorage
-      - MAX_WORKERS=1
-      - WEB_CONCURRENCY=1
-      - BASE_URL=https://mealie.yourdomain.com
-    restart: always
+      # Set Backend ENV Variables Here
+      ALLOW_SIGNUP: true
+      PUID: 1000
+      PGID: 1000
+      TZ: America/Anchorage
+      MAX_WORKERS: 1
+      WEB_CONCURRENCY: 1
+      BASE_URL: https://mealie.yourdomain.com
 
 volumes:
   mealie-data:
-    driver: local
 ```
 
 <!-- Updating This? Be Sure to also update the Postgres Annotations -->

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

@@ -1,7 +1,7 @@
 # Permissions and Public Access
 
 Mealie provides various levels of user access and permissions. This includes:
-- Authentication and registration ([check out the LDAP guide](./ldap.md) for how to configure access using LDAP)
+- 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
 

docs/mkdocs.yml

@@ -41,7 +41,8 @@ markdown_extensions:
       custom_checkbox: true
   - admonition
   - attr_list
-  - pymdownx.tabbed
+  - pymdownx.tabbed:
+      alternate_style: true
   - pymdownx.superfences:
       custom_fences:
         - name: mermaid
@@ -71,9 +72,15 @@ nav:
           - SQLite (Recommended): "documentation/getting-started/installation/sqlite.md"
           - PostgreSQL: "documentation/getting-started/installation/postgres.md"
           - Backend Configuration: "documentation/getting-started/installation/backend-config.md"
+          - Security: "documentation/getting-started/installation/security.md"
+          - Logs: "documentation/getting-started/installation/logs.md"
       - Usage:
           - Backup and Restoring: "documentation/getting-started/usage/backups-and-restoring.md"
-          - LDAP Authentication: "documentation/getting-started/usage/ldap.md"
+          - Permissions and Public Access: "documentation/getting-started/usage/permissions-and-public-access.md"
+
+      - Authentication:
+        - LDAP: "documentation/getting-started/authentication/ldap.md"
+        - OpenID Connect: "documentation/getting-started/authentication/oidc.md"
 
       - Community Guides:
           - iOS Shortcuts: "documentation/community-guide/ios.md"

frontend/components/Domain/Cookbook/CookbookPage.vue

@@ -1,8 +1,33 @@
 <template>
+  <div>
+    <!-- Edit Dialog -->
+    <BaseDialog
+      v-if="editTarget"
+      v-model="dialogStates.edit"
+      :width="650"
+      :icon="$globals.icons.pages"
+      :title="$t('general.edit')"
+      :submit-icon="$globals.icons.save"
+      :submit-text="$tc('general.save')"
+      @submit="editCookbook"
+    >
+      <v-card-text>
+        <CookbookEditor :cookbook="editTarget" :actions="actions" />
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Page -->
     <v-container v-if="book" fluid>
-      <v-app-bar color="transparent" flat class="mt-n1 rounded">
+      <v-app-bar color="transparent" flat class="mt-n1">
         <v-icon large left> {{ $globals.icons.pages }} </v-icon>
         <v-toolbar-title class="headline"> {{ book.name }} </v-toolbar-title>
+        <v-spacer></v-spacer>
+        <BaseButton
+          v-if="isOwnGroup"
+          class="mx-1"
+          :edit="true"
+          @click="handleEditCookbook"
+        />
       </v-app-bar>
       <v-card flat>
         <v-card-text class="py-0">
@@ -22,17 +47,20 @@
         />
       </v-container>
     </v-container>
-  </template>
+  </div>
+</template>
 
   <script lang="ts">
-  import { computed, defineComponent, useRoute, ref, useContext, useMeta } from "@nuxtjs/composition-api";
+  import { computed, defineComponent, useRoute, ref, useContext, useMeta, reactive, useRouter } from "@nuxtjs/composition-api";
   import { useLazyRecipes } from "~/composables/recipes";
   import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
-  import { useCookbook } from "~/composables/use-group-cookbooks";
+  import { useCookbook, useCookbooks } from "~/composables/use-group-cookbooks";
   import { useLoggedInState } from "~/composables/use-logged-in-state";
+  import { RecipeCookBook } from "~/lib/api/types/cookbook";
+  import CookbookEditor from "~/components/Domain/Cookbook/CookbookEditor.vue";
 
   export default defineComponent({
-    components: { RecipeCardSection },
+    components: { RecipeCardSection, CookbookEditor },
     setup() {
       const { $auth } = useContext();
       const { isOwnGroup } = useLoggedInState();
@@ -43,10 +71,36 @@
       const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
       const slug = route.value.params.slug;
       const { getOne } = useCookbook(isOwnGroup.value ? null : groupSlug.value);
+      const { actions } = useCookbooks();
+      const router = useRouter();
 
       const tab = ref(null);
       const book = getOne(slug);
 
+      const dialogStates = reactive({
+        edit: false,
+      });
+
+      const editTarget = ref<RecipeCookBook | null>(null);
+      function handleEditCookbook() {
+        dialogStates.edit = true;
+        editTarget.value = book.value;
+      }
+
+      async function editCookbook() {
+        if (!editTarget.value) {
+          return;
+        }
+        const response = await actions.updateOne(editTarget.value);
+
+        // if name changed, redirect to new slug
+        if (response?.slug && book.value?.slug !== response?.slug) {
+          router.push(`/g/${route.value.params.groupSlug}/cookbooks/${response?.slug}`);
+        }
+        dialogStates.edit = false;
+        editTarget.value = null;
+      }
+
       useMeta(() => {
         return {
           title: book?.value?.name || "Cookbook",
@@ -62,6 +116,12 @@
         recipes,
         removeRecipe,
         replaceRecipes,
+        isOwnGroup,
+        dialogStates,
+        editTarget,
+        handleEditCookbook,
+        editCookbook,
+        actions,
       };
     },
     head: {}, // Must include for useMeta

frontend/components/Domain/Group/GroupMealPlanRuleForm.vue

@@ -19,7 +19,7 @@
 <script lang="ts">
 import { defineComponent, computed, useContext } from "@nuxtjs/composition-api";
 import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
-import { RecipeTag, RecipeCategory } from "~/lib/api/types/group";
+import { RecipeTag, RecipeCategory } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   components: {

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -21,7 +21,7 @@
 
     <v-spacer></v-spacer>
     <div v-if="!open" class="custom-btn-group ma-1">
-      <RecipeFavoriteBadge v-if="loggedIn" class="mx-1" color="info" button-style :slug="recipe.slug" show-always />
+      <RecipeFavoriteBadge v-if="loggedIn" class="mx-1" color="info" button-style :recipe-id="recipe.id" show-always />
       <RecipeTimelineBadge v-if="loggedIn" button-style :slug="recipe.slug" :recipe-name="recipe.name" />
       <div v-if="loggedIn">
         <v-tooltip v-if="!locked" bottom color="info">
@@ -70,6 +70,7 @@
           print: true,
           printPreferences: true,
           share: loggedIn,
+          recipeActions: true,
         }"
         @print="$emit('print')"
       />

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -3,8 +3,9 @@
     <v-hover v-slot="{ hover }" :open-delay="50">
       <v-card
         :class="{ 'on-hover': hover }"
+        :style="{ cursor }"
         :elevation="hover ? 12 : 2"
-        :to="route ? recipeRoute : ''"
+        :to="recipeRoute"
         :min-height="imageHeight + 75"
         @click="$emit('click')"
       >
@@ -33,10 +34,10 @@
         </v-card-title>
 
         <slot name="actions">
-          <v-card-actions class="px-1">
-            <RecipeFavoriteBadge v-if="isOwnGroup" class="absolute" :slug="slug" show-always />
+          <v-card-actions v-if="showRecipeContent" class="px-1">
+            <RecipeFavoriteBadge v-if="isOwnGroup" class="absolute" :recipe-id="recipeId" show-always />
 
-            <RecipeRating class="pb-1" :value="rating" :name="name" :slug="slug" :small="true" />
+            <RecipeRating class="pb-1" :value="rating" :recipe-id="recipeId" :slug="slug" :small="true" />
             <v-spacer></v-spacer>
             <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" />
 
@@ -96,15 +97,15 @@ export default defineComponent({
       required: false,
       default: 0,
     },
+    ratingColor: {
+      type: String,
+      default: "secondary",
+    },
     image: {
       type: String,
       required: false,
       default: "abc123",
     },
-    route: {
-      type: Boolean,
-      default: true,
-    },
     tags: {
       type: Array,
       default: () => [],
@@ -123,14 +124,18 @@ export default defineComponent({
     const { isOwnGroup } = useLoggedInState();
 
     const route = useRoute();
-    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+    const showRecipeContent = computed(() => props.recipeId && props.slug);
     const recipeRoute = computed<string>(() => {
-      return `/g/${groupSlug.value}/r/${props.slug}`;
+      return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
     });
+    const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
 
     return {
       isOwnGroup,
       recipeRoute,
+      showRecipeContent,
+      cursor,
     };
   },
 });

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -3,6 +3,7 @@
     <v-card
       :ripple="false"
       :class="isFlat ? 'mx-auto flat' : 'mx-auto'"
+      :style="{ cursor }"
       hover
       :to="$listeners.selected ? undefined : recipeRoute"
       @click="$emit('selected')"
@@ -37,22 +38,20 @@
           </v-list-item-subtitle>
           <div class="d-flex flex-wrap justify-end align-center">
             <slot name="actions">
-              <RecipeFavoriteBadge v-if="isOwnGroup" :slug="slug" show-always />
-              <v-rating
-                color="secondary"
+              <RecipeFavoriteBadge v-if="isOwnGroup && showRecipeContent" :recipe-id="recipeId" show-always />
+              <RecipeRating
                 :class="isOwnGroup ? 'ml-auto' : 'ml-auto pb-2'"
-                background-color="secondary lighten-3"
-                dense
-                length="5"
-                size="15"
                 :value="rating"
-              ></v-rating>
+                :recipe-id="recipeId"
+                :slug="slug"
+                :small="true"
+              />
               <v-spacer></v-spacer>
 
               <!-- If we're not logged-in, no items display, so we hide this menu -->
               <!-- We also add padding to the v-rating above to compensate -->
               <RecipeContextMenu
-                v-if="isOwnGroup"
+                v-if="isOwnGroup && showRecipeContent"
                 :slug="slug"
                 :menu-icon="$globals.icons.dotsHorizontal"
                 :name="name"
@@ -83,12 +82,14 @@ import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composi
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
+import RecipeRating from "./RecipeRating.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 export default defineComponent({
   components: {
     RecipeFavoriteBadge,
     RecipeContextMenu,
+    RecipeRating,
     RecipeCardImage,
   },
   props: {
@@ -113,10 +114,6 @@ export default defineComponent({
       required: false,
       default: "abc123",
     },
-    route: {
-      type: Boolean,
-      default: true,
-    },
     recipeId: {
       type: String,
       required: true,
@@ -135,14 +132,19 @@ export default defineComponent({
     const { isOwnGroup } = useLoggedInState();
 
     const route = useRoute();
-    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+    const showRecipeContent = computed(() => props.recipeId && props.slug);
     const recipeRoute = computed<string>(() => {
-      return `/g/${groupSlug.value}/r/${props.slug}`;
+      return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
     });
+    const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
+
 
     return {
       isOwnGroup,
       recipeRoute,
+      showRecipeContent,
+      cursor,
     };
   },
 });

frontend/components/Domain/Recipe/RecipeChips.vue

@@ -9,7 +9,7 @@
       color="accent"
       :small="small"
       dark
-      :to="isOwnGroup ? `${baseRecipeRoute}?${urlPrefix}=${category.id}` : undefined"
+      :to="`${baseRecipeRoute}?${urlPrefix}=${category.id}`"
     >
       {{ truncateText(category.name) }}
     </v-chip>
@@ -18,8 +18,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
-import { useLoggedInState } from "~/composables/use-logged-in-state";
-import { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/user";
+import { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
 
 export type UrlPrefixParam = "tags" | "categories" | "tools";
 
@@ -56,7 +55,6 @@ export default defineComponent({
   },
   setup(props) {
     const { $auth } = useContext();
-    const { isOwnGroup } = useLoggedInState();
 
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
@@ -74,7 +72,6 @@ export default defineComponent({
 
     return {
       baseRecipeRoute,
-      isOwnGroup,
       truncateText,
     };
   },

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -59,7 +59,13 @@
               v-on="on"
             ></v-text-field>
           </template>
-          <v-date-picker v-model="newMealdate" no-title @input="pickerMenu = false"></v-date-picker>
+          <v-date-picker
+            v-model="newMealdate"
+            no-title
+            :first-day-of-week="firstDayOfWeek"
+            :local="$i18n.locale"
+            @input="pickerMenu = false"
+          />
         </v-menu>
         <v-select
           v-model="newMealType"
@@ -99,6 +105,26 @@
           </v-list-item-icon>
           <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-group @click.stop>
+            <template #activator>
+              <v-list-item-title>{{ $tc("recipe.recipe-actions") }}</v-list-item-title>
+            </template>
+            <v-list dense class="ma-0 pa-0">
+              <v-list-item
+                v-for="(action, index) in recipeActions"
+                :key="index"
+                class="pl-6"
+                @click="executeRecipeAction(action)"
+              >
+                <v-list-item-title>
+                  {{ action.title }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-list-group>
+        </div>
       </v-list>
     </v-menu>
   </div>
@@ -111,10 +137,12 @@ import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
 import RecipeDialogShare from "./RecipeDialogShare.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserApi } from "~/composables/api";
+import { useGroupRecipeActions } from "~/composables/use-group-recipe-actions";
+import { useGroupSelf } from "~/composables/use-groups";
 import { alert } from "~/composables/use-toast";
 import { usePlanTypeOptions } from "~/composables/use-group-mealplan";
 import { Recipe } from "~/lib/api/types/recipe";
-import { ShoppingListSummary } from "~/lib/api/types/group";
+import { GroupRecipeActionOut, ShoppingListSummary } from "~/lib/api/types/group";
 import { PlanEntryType } from "~/lib/api/types/meal-plan";
 import { useAxiosDownloader } from "~/composables/api/use-axios-download";
 
@@ -127,6 +155,7 @@ export interface ContextMenuIncludes {
   print: boolean;
   printPreferences: boolean;
   share: boolean;
+  recipeActions: boolean;
 }
 
 export interface ContextMenuItem {
@@ -156,6 +185,7 @@ export default defineComponent({
         print: true,
         printPreferences: true,
         share: true,
+        recipeActions: true,
       }),
     },
     // Append items are added at the end of the useItems list
@@ -224,11 +254,16 @@ export default defineComponent({
     });
 
     const { i18n, $auth, $globals } = useContext();
+    const { group } = useGroupSelf();
     const { isOwnGroup } = useLoggedInState();
 
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
+    const firstDayOfWeek = computed(() => {
+      return group.value?.preferences?.firstDayOfWeek || 0;
+    });
+
     // ===========================================================================
     // Context Menu Setup
 
@@ -335,6 +370,19 @@ export default defineComponent({
     }
 
     const router = useRouter();
+    const groupRecipeActionsStore = useGroupRecipeActions();
+
+    async function executeRecipeAction(action: GroupRecipeActionOut) {
+      const response = await groupRecipeActionsStore.execute(action, props.recipe);
+
+      if (action.actionType === "post") {
+        if (!response || (response.status >= 200  && response.status < 300)) {
+          alert.success(i18n.tc("events.message-sent"));
+        } else {
+          alert.error(i18n.tc("events.something-went-wrong"));
+        }
+      }
+    }
 
     async function deleteRecipe() {
       await api.recipes.deleteOne(props.slug);
@@ -425,6 +473,8 @@ export default defineComponent({
       ...toRefs(state),
       recipeRef,
       recipeRefWithScale,
+      executeRecipeAction,
+      recipeActions: groupRecipeActionsStore.recipeActions,
       shoppingLists,
       duplicateRecipe,
       contextMenuEventHandler,
@@ -432,6 +482,7 @@ export default defineComponent({
       addRecipeToPlan,
       icon,
       planTypeOptions,
+      firstDayOfWeek,
     };
   },
 });

frontend/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -45,7 +45,6 @@
           :rating="recipe.rating"
           :image="recipe.image"
           :recipe-id="recipe.id"
-          :route="true"
           v-on="$listeners.selected ? { selected: () => handleSelect(recipe) } : {}"
         />
       </v-card>

frontend/components/Domain/Recipe/RecipeDialogShare.vue

@@ -22,7 +22,13 @@
               v-on="on"
             ></v-text-field>
           </template>
-          <v-date-picker v-model="expirationDate" no-title @input="datePickerMenu = false"></v-date-picker>
+          <v-date-picker
+            v-model="expirationDate"
+            no-title
+            :first-day-of-week="firstDayOfWeek"
+            :local="$i18n.locale"
+            @input="datePickerMenu = false"
+          />
         </v-menu>
       </v-card-text>
       <v-card-actions class="justify-end">
@@ -60,6 +66,7 @@ import { defineComponent, computed, toRefs, reactive, useContext, useRoute } fro
 import { useClipboard, useShare, whenever } from "@vueuse/core";
 import { RecipeShareToken } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
+import { useGroupSelf } from "~/composables/use-groups";
 import { alert } from "~/composables/use-toast";
 
 export default defineComponent({
@@ -106,9 +113,14 @@ export default defineComponent({
     );
 
     const { $auth, i18n } = useContext();
+    const { group } = useGroupSelf();
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
+    const firstDayOfWeek = computed(() => {
+      return group.value?.preferences?.firstDayOfWeek || 0;
+    });
+
     // ============================================================
     // Token Actions
 
@@ -185,6 +197,7 @@ export default defineComponent({
       dialog,
       createNewToken,
       deleteToken,
+      firstDayOfWeek,
       shareRecipe,
       copyTokenLink,
     };

frontend/components/Domain/Recipe/RecipeExplorerPage.vue

@@ -67,12 +67,16 @@
               <v-list>
                 <v-list-item @click="toggleOrderDirection()">
                   <v-icon left>
-                    {{ $globals.icons.sort }}
+                    {{
+                      state.orderDirection === "asc" ?
+                      $globals.icons.sortDescending : $globals.icons.sortAscending
+                    }}
                   </v-icon>
                   <v-list-item-title>
-                    {{ state.orderDirection === "asc" ? "Sort Descending" : "Sort Ascending" }}
+                    {{ state.orderDirection === "asc" ? $tc("general.sort-descending") : $tc("general.sort-ascending") }}
                   </v-list-item-title>
                 </v-list-item>
+                <v-divider />
                 <v-list-item
                   v-for="v in sortable"
                   :key="v.name"
@@ -120,11 +124,12 @@
     <v-divider></v-divider>
     <v-container class="mt-6 px-md-6">
       <RecipeCardSection
+        v-if="state.ready"
         class="mt-n5"
         :icon="$globals.icons.search"
         :title="$tc('search.results')"
         :recipes="recipes"
-        :query="passedQuery"
+        :query="passedQueryWithSeed"
         @replaceRecipes="replaceRecipes"
         @appendRecipes="appendRecipes"
       />
@@ -133,11 +138,12 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref, useRoute } from "@nuxtjs/composition-api";
+import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref, useRoute, watch } from "@nuxtjs/composition-api";
 import { watchDebounced } from "@vueuse/shared";
 import SearchFilter from "~/components/Domain/SearchFilter.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
+import { useUserSearchQuerySession } from "~/composables/use-users/preferences";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
@@ -157,6 +163,7 @@ export default defineComponent({
     const { isOwnGroup } = useLoggedInState();
     const state = ref({
       auto: true,
+      ready: false,
       search: "",
       orderBy: "created_at",
       orderDirection: "desc" as "asc" | "desc",
@@ -170,6 +177,7 @@ export default defineComponent({
 
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+    const searchQuerySession = useUserSearchQuerySession();
 
     const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
     const categories = isOwnGroup.value ? useCategoryStore() : usePublicCategoryStore(groupSlug.value);
@@ -184,65 +192,11 @@ export default defineComponent({
     const tools = isOwnGroup.value ? useToolStore() : usePublicToolStore(groupSlug.value);
     const selectedTools = ref<NoUndefinedField<RecipeTool>[]>([]);
 
-    const passedQuery = ref<RecipeSearchQuery | null>(null);
-
-    function reset() {
-      state.value.search = "";
-      state.value.orderBy = "created_at";
-      state.value.orderDirection = "desc";
-      state.value.requireAllCategories = false;
-      state.value.requireAllTags = false;
-      state.value.requireAllTools = false;
-      state.value.requireAllFoods = false;
-      selectedCategories.value = [];
-      selectedFoods.value = [];
-      selectedTags.value = [];
-      selectedTools.value = [];
-
-      router.push({
-        query: {},
-      });
-
-      search();
-    }
-
-    function toggleOrderDirection() {
-      state.value.orderDirection = state.value.orderDirection === "asc" ? "desc" : "asc";
-    }
-
-    function toIDArray(array: { id: string }[]) {
-      return array.map((item) => item.id);
-    }
-
-    function hideKeyboard() {
-      input.value.blur()
-    }
-
-    const input: Ref<any> = ref(null);
-
-    async function search() {
-      await router.push({
-        query: {
-          categories: toIDArray(selectedCategories.value),
-          foods: toIDArray(selectedFoods.value),
-          tags: toIDArray(selectedTags.value),
-          tools: toIDArray(selectedTools.value),
-          // Only add the query param if it's or not default
-          ...{
-            auto: state.value.auto ? undefined : "false",
-            search: state.value.search === "" ? undefined : state.value.search,
-            orderBy: state.value.orderBy === "createdAt" ? undefined : state.value.orderBy,
-            orderDirection: state.value.orderDirection === "desc" ? undefined : state.value.orderDirection,
-            requireAllCategories: state.value.requireAllCategories ? "true" : undefined,
-            requireAllTags: state.value.requireAllTags ? "true" : undefined,
-            requireAllTools: state.value.requireAllTools ? "true" : undefined,
-            requireAllFoods: state.value.requireAllFoods ? "true" : undefined,
-          },
-        },
-      });
-
-      passedQuery.value = {
-        search: state.value.search,
+    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),
         tags: toIDArray(selectedTags.value),
@@ -253,8 +207,87 @@ export default defineComponent({
         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;
+      state.value.requireAllCategories = queryDefaults.requireAllCategories;
+      state.value.requireAllTags = queryDefaults.requireAllTags;
+      state.value.requireAllTools = queryDefaults.requireAllTools;
+      state.value.requireAllFoods = queryDefaults.requireAllFoods;
+      selectedCategories.value = [];
+      selectedFoods.value = [];
+      selectedTags.value = [];
+      selectedTools.value = [];
+
+      search();
+    }
+
+    function toggleOrderDirection() {
+      state.value.orderDirection = state.value.orderDirection === "asc" ? "desc" : "asc";
+    }
+
+    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,
+          orderBy: passedQuery.value.orderBy === queryDefaults.orderBy ? undefined : passedQuery.value.orderBy,
+          orderDirection: passedQuery.value.orderDirection === queryDefaults.orderDirection ? undefined : passedQuery.value.orderDirection,
+          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(
@@ -325,32 +358,69 @@ export default defineComponent({
       },
     ];
 
-    onMounted(() => {
-      // Hydrate Search
-      // wait for stores to be hydrated
+    watch(
+      () => route.value.query,
+      () => {
+        if (state.value.ready) {
+          hydrateSearch();
+        }
+      },
+      {
+        deep: true,
+      },
+    )
 
-      // read query params
+    async function hydrateSearch() {
       const query = router.currentRoute.query;
-
-      if (query.auto) {
+      if (query.auto?.length) {
         state.value.auto = query.auto === "true";
       }
 
-      if (query.search) {
+      if (query.search?.length) {
         state.value.search = query.search as string;
+      } else {
+        state.value.search = queryDefaults.search;
       }
 
-      if (query.orderBy) {
+      if (query.orderBy?.length) {
         state.value.orderBy = query.orderBy as string;
+      } else {
+        state.value.orderBy = queryDefaults.orderBy;
       }
 
-      if (query.orderDirection) {
+      if (query.orderDirection?.length) {
         state.value.orderDirection = query.orderDirection as "asc" | "desc";
+      } else {
+        state.value.orderDirection = queryDefaults.orderDirection;
+      }
+
+      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) {
+      if (query.categories?.length) {
         promises.push(
           waitUntilAndExecute(
             () => categories.items.value.length > 0,
@@ -363,9 +433,39 @@ export default defineComponent({
             }
           )
         );
+      } else {
+        selectedCategories.value = [];
       }
 
-      if (query.foods) {
+      if (query.tags?.length) {
+        promises.push(
+          waitUntilAndExecute(
+            () => tags.items.value.length > 0,
+            () => {
+              const result = tags.items.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.items.value.length > 0,
+            () => {
+              const result = tools.items.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(
             () => {
@@ -380,35 +480,28 @@ export default defineComponent({
             }
           )
         );
+      } else {
+        selectedFoods.value = [];
       }
 
-      if (query.tags) {
-        promises.push(
-          waitUntilAndExecute(
-            () => tags.items.value.length > 0,
-            () => {
-              const result = tags.items.value.filter((item) => (query.tags as string[]).includes(item.id as string));
-              selectedTags.value = result as NoUndefinedField<RecipeTag>[];
-            }
-          )
-        );
+      await Promise.allSettled(promises);
+    };
+
+    onMounted(async () => {
+      // restore the user's last search query
+      if (searchQuerySession.value.recipe && !(Object.keys(route.value.query).length > 0)) {
+        try {
+          const query = JSON.parse(searchQuerySession.value.recipe);
+          await router.replace({ query });
+        } catch (error) {
+          searchQuerySession.value.recipe = "";
+          router.replace({ query: {} });
+        }
       }
 
-      if (query.tools) {
-        promises.push(
-          waitUntilAndExecute(
-            () => tools.items.value.length > 0,
-            () => {
-              const result = tools.items.value.filter((item) => (query.tools as string[]).includes(item.id));
-              selectedTools.value = result as NoUndefinedField<RecipeTool>[];
-            }
-          )
-        );
-      }
-
-      Promise.allSettled(promises).then(() => {
-        search();
-      });
+      await hydrateSearch();
+      await search();
+      state.value.ready = true;
     });
 
     watchDebounced(
@@ -426,7 +519,7 @@ export default defineComponent({
         selectedTools,
       ],
       async () => {
-        if (state.value.auto) {
+        if (state.value.ready && state.value.auto) {
           await search();
         }
       },
@@ -459,7 +552,7 @@ export default defineComponent({
       recipes,
       removeRecipe,
       replaceRecipes,
-      passedQuery,
+      passedQueryWithSeed,
     };
   },
   head: {},

frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue

@@ -22,11 +22,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { useUserSelfRatings } from "~/composables/use-users";
 import { useUserApi } from "~/composables/api";
 import { UserOut } from "~/lib/api/types/user";
 export default defineComponent({
   props: {
-    slug: {
+    recipeId: {
       type: String,
       default: "",
     },
@@ -42,19 +43,23 @@ export default defineComponent({
   setup(props) {
     const api = useUserApi();
     const { $auth } = useContext();
+    const { userRatings, refreshUserRatings } = useUserSelfRatings();
 
     // TODO Setup the correct type for $auth.user
     // See https://github.com/nuxt-community/auth-module/issues/1097
     const user = computed(() => $auth.user as unknown as UserOut);
-    const isFavorite = computed(() => user.value?.favoriteRecipes?.includes(props.slug));
+    const isFavorite = computed(() => {
+      const rating = userRatings.value.find((r) => r.recipeId === props.recipeId);
+      return rating?.isFavorite || false;
+    });
 
     async function toggleFavorite() {
       if (!isFavorite.value) {
-        await api.users.addFavorite(user.value?.id, props.slug);
+        await api.users.addFavorite(user.value?.id, props.recipeId);
       } else {
-        await api.users.removeFavorite(user.value?.id, props.slug);
+        await api.users.removeFavorite(user.value?.id, props.recipeId);
       }
-      $auth.fetchUser();
+      await refreshUserRatings();
     }
 
     return { isFavorite, toggleFavorite };

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -29,6 +29,7 @@
       </v-col>
       <v-col v-if="!disableAmount" sm="12" md="3" cols="12">
         <v-autocomplete
+          ref="unitAutocomplete"
           v-model="value.unit"
           :search-input.sync="unitSearch"
           auto-select-first
@@ -57,6 +58,7 @@
       <!-- Foods Input -->
       <v-col v-if="!disableAmount" m="12" md="3" cols="12" class="">
         <v-autocomplete
+          ref="foodAutocomplete"
           v-model="value.food"
           :search-input.sync="foodSearch"
           auto-select-first
@@ -200,11 +202,13 @@ export default defineComponent({
     const foodStore = useFoodStore();
     const foodData = useFoodData();
     const foodSearch = ref("");
+    const foodAutocomplete = ref<HTMLInputElement>();
 
     async function createAssignFood() {
       foodData.data.name = foodSearch.value;
       props.value.food = await foodStore.actions.createOne(foodData.data) || undefined;
       foodData.reset();
+      foodAutocomplete.value?.blur();
     }
 
     // ==================================================
@@ -212,11 +216,13 @@ export default defineComponent({
     const unitStore = useUnitStore();
     const unitsData = useUnitData();
     const unitSearch = ref("");
+    const unitAutocomplete = ref<HTMLInputElement>();
 
     async function createAssignUnit() {
       unitsData.data.name = unitSearch.value;
       props.value.unit = await unitStore.actions.createOne(unitsData.data) || undefined;
       unitsData.reset();
+      unitAutocomplete.value?.blur();
     }
 
     const state = reactive({
@@ -269,7 +275,9 @@ export default defineComponent({
       contextMenuOptions,
       handleUnitEnter,
       handleFoodEnter,
+      foodAutocomplete,
       createAssignFood,
+      unitAutocomplete,
       createAssignUnit,
       foods: foodStore.foods,
       foodSearch,

frontend/components/Domain/Recipe/RecipeLastMade.vue

@@ -41,6 +41,7 @@
                     <v-date-picker
                       v-model="newTimelineEventTimestamp"
                       no-title
+                      :first-day-of-week="firstDayOfWeek"
                       :local="$i18n.locale"
                       @input="datePickerMenu = false"
                     />
@@ -109,10 +110,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
 import { whenever } from "@vueuse/core";
 import { VForm } from "~/types/vuetify";
 import { useUserApi } from "~/composables/api";
+import { useGroupSelf } from "~/composables/use-groups";
 import { Recipe, RecipeTimelineEventIn } from "~/lib/api/types/recipe";
 
 export default defineComponent({
@@ -129,6 +131,7 @@ export default defineComponent({
   setup(props, context) {
     const madeThisDialog = ref(false);
     const userApi = useUserApi();
+    const { group } = useGroupSelf();
     const { $auth, i18n } = useContext();
     const domMadeThisForm = ref<VForm>();
     const newTimelineEvent = ref<RecipeTimelineEventIn>({
@@ -153,6 +156,10 @@ export default defineComponent({
       }
     );
 
+    const firstDayOfWeek = computed(() => {
+      return group.value?.preferences?.firstDayOfWeek || 0;
+    });
+
     function clearImage() {
       newTimelineEventImage.value = undefined;
       newTimelineEventImageName.value = "";
@@ -226,6 +233,7 @@ export default defineComponent({
       ...toRefs(state),
       domMadeThisForm,
       madeThisDialog,
+      firstDayOfWeek,
       newTimelineEvent,
       newTimelineEventImage,
       newTimelineEventImagePreviewUrl,

frontend/components/Domain/Recipe/RecipeNotes.vue

@@ -24,7 +24,7 @@
     </div>
 
     <div v-if="edit" class="d-flex justify-end">
-      <BaseButton class="ml-auto my-2" @click="addNote"> {{ $t("general.new") }}</BaseButton>
+      <BaseButton class="ml-auto my-2" @click="addNote"> {{ $t("general.add") }}</BaseButton>
     </div>
   </div>
 </template>

frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue

@@ -13,6 +13,9 @@
       $globals.icons.tags"
     return-object
     v-bind="inputAttrs"
+    auto-select-first
+    :search-input.sync="searchInput"
+    @change="resetSearchInput"
   >
     <template #selection="data">
       <v-chip
@@ -43,7 +46,7 @@
 <script lang="ts">
 import { defineComponent, ref, useContext, computed, onMounted } from "@nuxtjs/composition-api";
 import RecipeOrganizerDialog from "./RecipeOrganizerDialog.vue";
-import { RecipeCategory, RecipeTag } from "~/lib/api/types/user";
+import { RecipeCategory, RecipeTag } from "~/lib/api/types/recipe";
 import { RecipeTool } from "~/lib/api/types/admin";
 import { useTagStore } from "~/composables/store/use-tag-store";
 import { useCategoryStore, useToolStore } from "~/composables/store";
@@ -138,7 +141,6 @@ export default defineComponent({
     }
 
     function appendCreated(item: RecipeTag | RecipeCategory | RecipeTool) {
-      console.log(item);
       if (selected.value === undefined) {
         return;
       }
@@ -148,6 +150,12 @@ export default defineComponent({
 
     const dialog = ref(false);
 
+    const searchInput = ref("");
+
+    function resetSearchInput() {
+      searchInput.value = "";
+    }
+
     return {
       Organizer,
       appendCreated,
@@ -156,6 +164,8 @@ export default defineComponent({
       label,
       selected,
       removeByIndex,
+      searchInput,
+      resetSearchInput,
     };
   },
 });

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

@@ -51,7 +51,7 @@
             />
             <div v-if="isEditForm" class="d-flex">
               <RecipeDialogBulkAdd class="ml-auto my-2 mr-1" @bulk-data="addStep" />
-              <BaseButton class="my-2" @click="addStep()"> {{ $t("general.new") }}</BaseButton>
+              <BaseButton class="my-2" @click="addStep()"> {{ $t("general.add") }}</BaseButton>
             </div>
             <div v-if="!$vuetify.breakpoint.mdAndUp">
               <RecipePageOrganizers :recipe="recipe" />

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

@@ -5,7 +5,7 @@
         <v-card-text>
           <v-card-title class="headline pa-0 flex-column align-center">
             {{ recipe.name }}
-            <RecipeRating :key="recipe.slug" v-model="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
+            <RecipeRating :key="recipe.slug" :value="recipe.rating" :recipe-id="recipe.id" :slug="recipe.slug" />
           </v-card-title>
           <v-divider class="my-2"></v-divider>
           <SafeMarkdown :source="recipe.description" />

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

@@ -47,7 +47,7 @@
         <span>{{ parserToolTip }}</span>
       </v-tooltip>
       <RecipeDialogBulkAdd class="mx-1 mb-1" @bulk-data="addIngredient" />
-      <BaseButton class="mb-1" @click="addIngredient" > {{ $t("general.new") }} </BaseButton>
+      <BaseButton class="mb-1" @click="addIngredient" > {{ $t("general.add") }} </BaseButton>
     </div>
   </div>
 </template>

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

@@ -20,7 +20,7 @@
       v-if="landscape && $vuetify.breakpoint.smAndUp"
       :key="recipe.slug"
       v-model="recipe.rating"
-      :name="recipe.name"
+      :recipe-id="recipe.id"
       :slug="recipe.slug"
     />
   </div>

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

@@ -24,7 +24,7 @@
           v-if="$vuetify.breakpoint.smAndDown"
           :key="recipe.slug"
           v-model="recipe.rating"
-          :name="recipe.name"
+          :recipe-id="recipe.id"
           :slug="recipe.slug"
         />
       </div>

frontend/components/Domain/Recipe/RecipeRating.vue

@@ -1,34 +1,48 @@
 <template>
   <div @click.prevent>
-    <v-rating
-      v-model="rating"
-      :readonly="!isOwnGroup"
-      color="secondary"
-      background-color="secondary lighten-3"
-      length="5"
-      :dense="small ? true : undefined"
-      :size="small ? 15 : undefined"
-      hover
-      :value="value"
-      clearable
-      @input="updateRating"
-      @click="updateRating"
-    ></v-rating>
+    <!-- User Rating -->
+    <v-hover v-slot="{ hover }">
+      <v-rating
+        v-if="isOwnGroup && (userRating || hover || !ratingsLoaded)"
+        :value="userRating"
+        color="secondary"
+        background-color="secondary lighten-3"
+        length="5"
+        :dense="small ? true : undefined"
+        :size="small ? 15 : undefined"
+        hover
+        clearable
+        @input="updateRating"
+        @click="updateRating"
+      />
+      <!-- Group Rating -->
+      <v-rating
+        v-else
+        :value="groupRating"
+        :half-increments="true"
+        :readonly="true"
+        color="grey darken-1"
+        background-color="secondary lighten-3"
+        length="5"
+        :dense="small ? true : undefined"
+        :size="small ? 15 : undefined"
+        hover
+      />
+    </v-hover>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, watch } from "@nuxtjs/composition-api";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
-import { useUserApi } from "~/composables/api";
+import { useUserSelfRatings } from "~/composables/use-users";
 export default defineComponent({
   props: {
     emitOnly: {
       type: Boolean,
       default: false,
     },
-    // TODO Remove name prop?
-    name: {
+    recipeId: {
       type: String,
       default: "",
     },
@@ -47,23 +61,45 @@ export default defineComponent({
   },
   setup(props, context) {
     const { isOwnGroup } = useLoggedInState();
+    const { userRatings, setRating, ready: ratingsLoaded } = useUserSelfRatings();
 
-    const rating = ref(props.value);
+    const userRating = computed(() => {
+      return userRatings.value.find((r) => r.recipeId === props.recipeId)?.rating;
+    });
+
+    // if a user unsets their rating, we don't want to fall back to the group rating since it's out of sync
+    const hideGroupRating = ref(!!userRating.value);
+    watch(
+      () => userRating.value,
+      () => {
+        if (userRating.value) {
+          hideGroupRating.value = true;
+        }
+      },
+    )
+
+    const groupRating = computed(() => {
+      return hideGroupRating.value ? 0 : props.value;
+    });
 
-    const api = useUserApi();
     function updateRating(val: number | null) {
-      if (val === 0) {
-        val = null;
+      if (!isOwnGroup.value) {
+        return;
       }
+
       if (!props.emitOnly) {
-        api.recipes.patchOne(props.slug, {
-          rating: val,
-        });
+        setRating(props.slug, val || 0, null);
       }
       context.emit("input", val);
     }
 
-    return { isOwnGroup, rating, updateRating };
+    return {
+      isOwnGroup,
+      ratingsLoaded,
+      groupRating,
+      userRating,
+      updateRating,
+    };
   },
 });
 </script>

frontend/components/Domain/Recipe/RecipeTimeline.vue

@@ -3,9 +3,53 @@
     <v-row class="my-0 mx-7">
       <v-spacer />
       <v-col class="text-right">
-        <v-btn fab small color="info" @click="reverseSort">
-          <v-icon> {{ preferences.orderDirection === "asc" ? $globals.icons.sortCalendarAscending : $globals.icons.sortCalendarDescending }} </v-icon>
-        </v-btn>
+        <!-- Filters -->
+        <v-menu offset-y bottom left nudge-bottom="3" :close-on-content-click="false">
+          <template #activator="{ on, attrs }">
+            <v-badge :content="filterBadgeCount" :value="filterBadgeCount" bordered overlap>
+              <v-btn fab small color="info" v-bind="attrs" v-on="on">
+                <v-icon> {{ $globals.icons.filter }} </v-icon>
+              </v-btn>
+            </v-badge>
+          </template>
+          <v-card>
+            <v-list>
+              <v-list-item @click="reverseSort">
+                <v-icon left>
+                  {{
+                    preferences.orderDirection === "asc" ?
+                    $globals.icons.sortCalendarDescending : $globals.icons.sortCalendarAscending
+                  }}
+                </v-icon>
+                <v-list-item-title>
+                  {{ preferences.orderDirection === "asc" ? $tc("general.sort-descending") : $tc("general.sort-ascending") }}
+                </v-list-item-title>
+              </v-list-item>
+              <v-divider />
+              <v-list-item class="pa-0">
+                <v-list class="py-0" style="width: 100%;">
+                  <v-list-item
+                    v-for="option, idx in eventTypeFilterState"
+                    :key="idx"
+                  >
+                    <v-checkbox
+                      :input-value="option.checked"
+                      readonly
+                      @click="toggleEventTypeOption(option.value)"
+                    >
+                      <template #label>
+                        <v-icon left>
+                          {{ option.icon }}
+                        </v-icon>
+                        {{ option.label }}
+                      </template>
+                    </v-checkbox>
+                  </v-list-item>
+                </v-list>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
       </v-col>
     </v-row>
     <v-divider class="mx-2"/>
@@ -29,9 +73,9 @@
         />
       </v-timeline>
     </div>
-    <v-card v-else-if="!loading">
+    <v-card v-else-if="!loading" class="mt-2">
       <v-card-title class="justify-center pa-9">
-        {{ $t("recipe.timeline-is-empty") }}
+        {{ $t("recipe.timeline-no-events-found-try-adjusting-filters") }}
       </v-card-title>
     </v-card>
     <div v-if="loading" class="mb-3 text-center">
@@ -41,14 +85,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref, useAsync, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, onMounted, ref, useAsync, useContext } from "@nuxtjs/composition-api";
 import { useThrottleFn, whenever } from "@vueuse/core";
 import RecipeTimelineItem from "./RecipeTimelineItem.vue"
 import { useTimelinePreferences } from "~/composables/use-users/preferences";
+import { useTimelineEventTypes } from "~/composables/recipes/use-recipe-timeline-events";
 import { useAsyncKey } from "~/composables/use-utils";
 import { alert } from "~/composables/use-toast";
 import { useUserApi } from "~/composables/api";
-import { Recipe, RecipeTimelineEventOut, RecipeTimelineEventUpdate } from "~/lib/api/types/recipe"
+import { Recipe, RecipeTimelineEventOut, RecipeTimelineEventUpdate, TimelineEventType } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   components: { RecipeTimelineItem },
@@ -76,6 +121,7 @@ export default defineComponent({
     const api = useUserApi();
     const { i18n } = useContext();
     const preferences = useTimelinePreferences();
+    const { eventTypeOptions } = useTimelineEventTypes();
     const loading = ref(true);
     const ready = ref(false);
 
@@ -85,6 +131,15 @@ export default defineComponent({
 
     const timelineEvents = ref([] as RecipeTimelineEventOut[]);
     const recipes = new Map<string, Recipe>();
+    const filterBadgeCount = computed(() => eventTypeOptions.value.length - preferences.value.types.length);
+    const eventTypeFilterState = computed(() => {
+      return eventTypeOptions.value.map(option => {
+        return {
+          ...option,
+          checked: preferences.value.types.includes(option.value),
+        }
+      });
+    });
 
     interface ScrollEvent extends Event {
         target: HTMLInputElement;
@@ -112,7 +167,7 @@ export default defineComponent({
       }
     );
 
-    // Sorting
+    // Preferences
     function reverseSort() {
       if (loading.value) {
         return;
@@ -122,6 +177,21 @@ export default defineComponent({
       initializeTimelineEvents();
     }
 
+    function toggleEventTypeOption(option: TimelineEventType) {
+      if (loading.value) {
+        return;
+      }
+
+      const index = preferences.value.types.indexOf(option);
+      if (index === -1) {
+        preferences.value.types.push(option);
+      } else {
+        preferences.value.types.splice(index, 1);
+      }
+
+      initializeTimelineEvents();
+    }
+
     // Timeline Actions
     async function updateTimelineEvent(index: number) {
       const event = timelineEvents.value[index]
@@ -179,8 +249,11 @@ export default defineComponent({
     async function scrollTimelineEvents() {
       const orderBy = "timestamp";
       const orderDirection = preferences.value.orderDirection === "asc" ? "asc" : "desc";
+      // eslint-disable-next-line quotes
+      const eventTypeValue = `["${preferences.value.types.join('", "')}"]`;
+      const queryFilter = `(${props.queryFilter}) AND eventType IN ${eventTypeValue}`
 
-      const response = await api.recipes.getAllTimelineEvents(page.value, perPage, { orderBy, orderDirection, queryFilter: props.queryFilter });
+      const response = await api.recipes.getAllTimelineEvents(page.value, perPage, { orderBy, orderDirection, queryFilter });
       page.value += 1;
       if (!response?.data) {
         return;
@@ -256,11 +329,14 @@ export default defineComponent({
 
     return {
       deleteTimelineEvent,
+      filterBadgeCount,
       loading,
       onScroll,
       preferences,
+      eventTypeFilterState,
       recipes,
       reverseSort,
+      toggleEventTypeOption,
       timelineEvents,
       updateTimelineEvent,
     };

frontend/components/Domain/Recipe/RecipeTimelineItem.vue

@@ -99,6 +99,7 @@ import { computed, defineComponent, ref, useContext, useRoute } from "@nuxtjs/co
 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 { Recipe, RecipeTimelineEventOut } from "~/lib/api/types/recipe"
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
@@ -124,6 +125,7 @@ export default defineComponent({
   setup(props) {
     const { $auth, $globals, $vuetify } = useContext();
     const { recipeTimelineEventImage } = useStaticRoutes();
+    const { eventTypeOptions } = useTimelineEventTypes();
     const timelineEvents = ref([] as RecipeTimelineEventOut[]);
 
     const route = useRoute();
@@ -164,21 +166,10 @@ export default defineComponent({
       }
     })
 
-    const icon = computed( () => {
-      switch (props.event.eventType) {
-        case "comment":
-          return $globals.icons.commentTextMultiple;
-
-        case "info":
-          return $globals.icons.informationVariant;
-
-        case "system":
-          return $globals.icons.cog;
-
-        default:
-          return $globals.icons.informationVariant;
-      };
-    })
+    const icon = computed(() => {
+      const option = eventTypeOptions.value.find((option) => option.value === props.event.eventType);
+      return option ? option.icon : $globals.icons.informationVariant;
+    });
 
     const hideImage = ref(false);
     const eventImageUrl = computed<string>( () => {

frontend/components/Domain/ShoppingList/MultiPurposeLabel.vue

@@ -8,8 +8,11 @@
 
 <script lang="ts">
 import { computed, defineComponent } from "@nuxtjs/composition-api";
+// @ts-ignore missing color types
+import Color from "@sphinxxxx/color-conversion";
 import { MultiPurposeLabelSummary } from "~/lib/api/types/recipe";
 
+
 export default defineComponent({
   props: {
     label: {
@@ -34,19 +37,27 @@ export default defineComponent({
     const ACCESSIBILITY_THRESHOLD = 0.179;
 
     function pickTextColorBasedOnBgColorAdvanced(bgColor: string, lightColor: string, darkColor: string) {
-      const color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
-      const r = parseInt(color.substring(0, 2), 16); // hexToR
-      const g = parseInt(color.substring(2, 4), 16); // hexToG
-      const b = parseInt(color.substring(4, 6), 16); // hexToB
-      const uicolors = [r / 255, g / 255, b / 255];
-      const c = uicolors.map((col) => {
-        if (col <= 0.03928) {
-          return col / 12.92;
+      try {
+        const color = new Color(bgColor);
+
+        // if opacity is less than 0.3 always return dark color
+        if (color._rgba[3] < 0.3) {
+          return darkColor;
         }
-        return Math.pow((col + 0.055) / 1.055, 2.4);
-      });
-      const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-      return L > ACCESSIBILITY_THRESHOLD ? darkColor : lightColor;
+
+        const uicolors = [color._rgba[0] / 255, color._rgba[1] / 255, color._rgba[2] / 255];
+        const c = uicolors.map((col) => {
+          if (col <= 0.03928) {
+            return col / 12.92;
+          }
+          return Math.pow((col + 0.055) / 1.055, 2.4);
+        });
+        const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+        return L > ACCESSIBILITY_THRESHOLD ? darkColor : lightColor;
+      } catch (error) {
+        console.warn(error);
+        return "black";
+      }
     }
 
     return {

frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue

@@ -9,6 +9,7 @@
             :item-id.sync="listItem.foodId"
             :label="$t('shopping-list.food')"
             :icon="$globals.icons.foods"
+            @create="createAssignFood"
           />
           <InputLabelType
             v-model="listItem.unit"
@@ -16,6 +17,7 @@
             :item-id.sync="listItem.unitId"
             :label="$t('general.units')"
             :icon="$globals.icons.units"
+            @create="createAssignUnit"
           />
         </div>
         <div class="d-md-flex align-center" style="gap: 20px">
@@ -28,37 +30,49 @@
             @keypress="handleNoteKeyPress"
           ></v-textarea>
         </div>
-        <div class="d-flex align-end" style="gap: 20px">
-          <div>
-            <InputQuantity v-model="listItem.quantity" />
-          </div>
-          <div style="max-width: 300px" class="mt-3 mr-auto">
-            <InputLabelType
-              v-model="listItem.label"
-              :items="labels"
-              :item-id.sync="listItem.labelId"
-              :label="$t('shopping-list.label')"
-            />
-          </div>
+        <div class="d-flex flex-wrap align-end" style="gap: 20px">
+          <div class="d-flex align-end">
+            <div>
+              <InputQuantity v-model="listItem.quantity" />
+            </div>
+            <div style="max-width: 300px" class="mt-3 mr-auto">
+              <InputLabelType
+                v-model="listItem.label"
+                :items="labels"
+                :item-id.sync="listItem.labelId"
+                :label="$t('shopping-list.label')"
+              />
+            </div>
 
-          <v-menu
-            v-if="listItem.recipeReferences && listItem.recipeReferences.length > 0"
-            open-on-hover
-            offset-y
-            left
-            top
-          >
-            <template #activator="{ on, attrs }">
-              <v-icon class="mt-auto" icon v-bind="attrs" color="warning" v-on="on">
-                {{ $globals.icons.alert }}
-              </v-icon>
-            </template>
-            <v-card max-width="350px" class="left-warning-border">
-              <v-card-text>
-                {{ $t("shopping-list.linked-item-warning") }}
-              </v-card-text>
-            </v-card>
-          </v-menu>
+            <v-menu
+              v-if="listItem.recipeReferences && listItem.recipeReferences.length > 0"
+              open-on-hover
+              offset-y
+              left
+              top
+            >
+              <template #activator="{ on, attrs }">
+                <v-icon class="mt-auto" icon v-bind="attrs" color="warning" v-on="on">
+                  {{ $globals.icons.alert }}
+                </v-icon>
+              </template>
+              <v-card max-width="350px" class="left-warning-border">
+                <v-card-text>
+                  {{ $t("shopping-list.linked-item-warning") }}
+                </v-card-text>
+              </v-card>
+            </v-menu>
+          </div>
+          <BaseButton
+            v-if="listItem.labelId && listItem.food && listItem.labelId !== listItem.food.labelId"
+            small
+            color="info"
+            :icon="$globals.icons.tagArrowRight"
+            :text="$tc('shopping-list.save-label')"
+            class="mt-2 align-items-flex-start"
+            @click="assignLabelToFood"
+          />
+          <v-spacer />
         </div>
       </v-card-text>
     </v-card>
@@ -100,6 +114,7 @@ import { defineComponent, computed, watch } from "@nuxtjs/composition-api";
 import { ShoppingListItemCreate, ShoppingListItemOut } from "~/lib/api/types/group";
 import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
 import { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
+import { useFoodStore, useFoodData, useUnitStore, useUnitData } from "~/composables/store";
 
 export default defineComponent({
   props: {
@@ -121,6 +136,12 @@ export default defineComponent({
     },
   },
   setup(props, context) {
+    const foodStore = useFoodStore();
+    const foodData = useFoodData();
+
+    const unitStore = useUnitStore();
+    const unitData = useUnitData();
+
     const listItem = computed({
       get: () => {
         return props.value;
@@ -139,8 +160,47 @@ export default defineComponent({
       }
     );
 
+    async function createAssignFood(val: string) {
+      // keep UI reactive
+      listItem.value.food ? listItem.value.food.name = val : listItem.value.food = { name: val };
+
+      foodData.data.name = val;
+      const newFood = await foodStore.actions.createOne(foodData.data);
+      if (newFood) {
+        listItem.value.food = newFood;
+        listItem.value.foodId = newFood.id;
+      }
+      foodData.reset();
+    }
+
+    async function createAssignUnit(val: string) {
+      // keep UI reactive
+      listItem.value.unit ? listItem.value.unit.name = val : listItem.value.unit = { name: val };
+
+      unitData.data.name = val;
+      const newUnit = await unitStore.actions.createOne(unitData.data);
+      if (newUnit) {
+        listItem.value.unit = newUnit;
+        listItem.value.unitId = newUnit.id;
+      }
+      unitData.reset();
+    }
+
+    async function assignLabelToFood() {
+      if (!(listItem.value.food && listItem.value.foodId && listItem.value.labelId)) {
+        return;
+      }
+
+      listItem.value.food.labelId = listItem.value.labelId;
+      // @ts-ignore the food will have an id, even though TS says it might not
+      await foodStore.actions.updateOne(listItem.value.food);
+    }
+
     return {
       listItem,
+      createAssignFood,
+      createAssignUnit,
+      assignLabelToFood,
     };
   },
   methods: {

frontend/components/Domain/User/UserRegistrationForm.vue

@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <v-card-title>
+      <v-icon large class="mr-3"> {{ $globals.icons.user }}</v-icon>
+      <span class="headline"> {{ $t("user-registration.account-details") }}</span>
+    </v-card-title>
+    <v-divider />
+    <v-card-text>
+      <v-form ref="domAccountForm" @submit.prevent>
+        <v-text-field
+          v-model="accountDetails.username.value"
+          autofocus
+          v-bind="inputAttrs"
+          :label="$tc('user.username')"
+          :prepend-icon="$globals.icons.user"
+          :rules="[validators.required]"
+          :error-messages="usernameErrorMessages"
+          @blur="validateUsername"
+        />
+        <v-text-field
+          v-model="accountDetails.fullName.value"
+          v-bind="inputAttrs"
+          :label="$tc('user.full-name')"
+          :prepend-icon="$globals.icons.user"
+          :rules="[validators.required]"
+        />
+        <v-text-field
+          v-model="accountDetails.email.value"
+          v-bind="inputAttrs"
+          :prepend-icon="$globals.icons.email"
+          :label="$tc('user.email')"
+          :rules="[validators.required, validators.email]"
+          :error-messages="emailErrorMessages"
+          @blur="validateEmail"
+        />
+        <v-text-field
+          v-model="credentials.password1.value"
+          v-bind="inputAttrs"
+          :type="pwFields.inputType.value"
+          :append-icon="pwFields.passwordIcon.value"
+          :prepend-icon="$globals.icons.lock"
+          :label="$tc('user.password')"
+          :rules="[validators.required, validators.minLength(8), validators.maxLength(258)]"
+          @click:append="pwFields.togglePasswordShow"
+        />
+
+        <UserPasswordStrength :value="credentials.password1.value" />
+
+        <v-text-field
+          v-model="credentials.password2.value"
+          v-bind="inputAttrs"
+          :type="pwFields.inputType.value"
+          :append-icon="pwFields.passwordIcon.value"
+          :prepend-icon="$globals.icons.lock"
+          :label="$tc('user.confirm-password')"
+          :rules="[validators.required, credentials.passwordMatch]"
+          @click:append="pwFields.togglePasswordShow"
+        />
+        <div class="px-2">
+          <v-checkbox
+            v-model="accountDetails.advancedOptions.value"
+            :label="$tc('user.enable-advanced-content')"
+          />
+          <p class="text-caption mt-n4">
+            {{ $tc("user.enable-advanced-content-description") }}
+          </p>
+        </div>
+      </v-form>
+    </v-card-text>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import { useDark } from "@vueuse/core";
+import { validators } from "~/composables/use-validators";
+import { useUserRegistrationForm } from "~/composables/use-users/user-registration-form";
+import { usePasswordField } from "~/composables/use-passwords";
+import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
+
+const inputAttrs = {
+  filled: true,
+  rounded: true,
+  validateOnBlur: true,
+  class: "rounded-lg",
+};
+
+export default defineComponent({
+  components: { UserPasswordStrength },
+  layout: "blank",
+  setup() {
+    const isDark = useDark();
+    const langDialog = ref(false);
+
+    const pwFields = usePasswordField();
+    const {
+      accountDetails,
+      credentials,
+      emailErrorMessages,
+      usernameErrorMessages,
+      validateUsername,
+      validateEmail,
+      domAccountForm,
+    } = useUserRegistrationForm();
+    return {
+      accountDetails,
+      credentials,
+      emailErrorMessages,
+      inputAttrs,
+      isDark,
+      langDialog,
+      pwFields,
+      usernameErrorMessages,
+      validators,
+      // Validators
+      validateUsername,
+      validateEmail,
+      // Dom Refs
+      domAccountForm,
+    };
+  },
+});
+</script>
+
+<style lang="css" scoped>
+.icon-primary {
+  fill: var(--v-primary-base);
+}
+
+.icon-white {
+  fill: white;
+}
+
+.icon-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  margin-top: 2.5rem;
+}
+
+.icon-divider {
+  width: 100%;
+  margin-bottom: -2.5rem;
+}
+
+.icon-avatar {
+  border-color: rgba(0, 0, 0, 0.12);
+  border: 2px;
+}
+
+.bg-off-white {
+  background: #f5f8fa;
+}
+
+.preferred-width {
+  width: 840px;
+}
+</style>

frontend/components/Layout/DefaultLayout.vue

@@ -6,8 +6,6 @@
         v-model="sidebar"
         absolute
         :top-link="topLinks"
-        :secondary-header="cookbookLinks.length ? $tc('sidebar.cookbooks') : undefined"
-        :secondary-header-link="isOwnGroup && cookbookLinks.length ? `/g/${groupSlug}/cookbooks` : undefined"
         :secondary-links="cookbookLinks || []"
         :bottom-links="isAdmin ? bottomLinks : []"
       >
@@ -146,14 +144,6 @@
           to: `/g/${groupSlug.value}/r/create/new`,
           restricted: true,
         },
-        {
-          insertDivider: true,
-          icon: $globals.icons.pages,
-          title: i18n.tc("sidebar.cookbook"),
-          subtitle: i18n.tc("sidebar.create-cookbook"),
-          to: `/g/${groupSlug.value}/cookbooks`,
-          restricted: true,
-        },
       ]);
 
       const bottomLinks = computed<SidebarLinks>(() => [
@@ -191,22 +181,35 @@
           restricted: true,
         },
         {
-          icon: $globals.icons.categories,
-          to: `/g/${groupSlug.value}/recipes/categories`,
-          title: i18n.tc("sidebar.categories"),
+          icon: $globals.icons.book,
+          to: `/g/${groupSlug.value}/cookbooks`,
+          title: i18n.tc("cookbook.cookbooks"),
           restricted: true,
         },
         {
-          icon: $globals.icons.tags,
-          to: `/g/${groupSlug.value}/recipes/tags`,
-          title: i18n.tc("sidebar.tags"),
-          restricted: true,
-        },
-        {
-          icon: $globals.icons.potSteam,
-          to: `/g/${groupSlug.value}/recipes/tools`,
-          title: i18n.tc("tool.tools"),
+          icon: $globals.icons.organizers,
+          title: i18n.tc("general.organizers"),
           restricted: true,
+          children: [
+            {
+              icon: $globals.icons.categories,
+              to: `/g/${groupSlug.value}/recipes/categories`,
+              title: i18n.tc("sidebar.categories"),
+              restricted: true,
+            },
+            {
+              icon: $globals.icons.tags,
+              to: `/g/${groupSlug.value}/recipes/tags`,
+              title: i18n.tc("sidebar.tags"),
+              restricted: true,
+            },
+            {
+              icon: $globals.icons.potSteam,
+              to: `/g/${groupSlug.value}/recipes/tools`,
+              title: i18n.tc("tool.tools"),
+              restricted: true,
+            },
+          ],
         },
       ]);
 

frontend/components/Layout/LayoutParts/AppSidebar.vue

@@ -39,13 +39,12 @@
                 <v-list-item-title>{{ nav.title }}</v-list-item-title>
               </template>
 
-              <v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to">
+              <v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to" class="ml-2">
                 <v-list-item-icon>
                   <v-icon>{{ child.icon }}</v-icon>
                 </v-list-item-icon>
                 <v-list-item-title>{{ child.title }}</v-list-item-title>
               </v-list-item>
-              <v-divider class="mb-4"></v-divider>
             </v-list-group>
 
             <!-- Single Item -->
@@ -68,18 +67,8 @@
     </template>
 
     <!-- Secondary Links -->
-    <template v-if="secondaryLinks">
-      <router-link v-if="secondaryHeader && secondaryHeaderLink" :to="secondaryHeaderLink" style="text-decoration: none;">
-        <v-subheader :to="secondaryHeaderLink" class="pb-0">
-          {{ secondaryHeader }}
-        </v-subheader>
-      </router-link>
-      <div v-else-if="secondaryHeader">
-        <v-subheader :to="secondaryHeaderLink" class="pb-0">
-          {{ secondaryHeader }}
-        </v-subheader>
-      </div>
-      <v-divider v-if="secondaryHeader"></v-divider>
+    <template v-if="secondaryLinks.length > 0">
+      <v-divider class="mt-2"></v-divider>
       <v-list nav dense exact>
         <template v-for="nav in secondaryLinks">
           <div v-if="!nav.restricted || isOwnGroup" :key="nav.title">
@@ -179,14 +168,6 @@ export default defineComponent({
       required: false,
       default: null,
     },
-    secondaryHeader: {
-      type: String,
-      default: null,
-    },
-    secondaryHeaderLink: {
-      type: String,
-      default: null,
-    },
   },
   setup(props, context) {
     // V-Model Support

frontend/components/global/AutoForm.vue

@@ -15,12 +15,22 @@
           v-if="inputField.type === fieldTypes.BOOLEAN"
           v-model="value[inputField.varName]"
           class="my-0 py-0"
-          :label="inputField.label"
           :name="inputField.varName"
-          :hint="inputField.hint || ''"
           :disabled="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (disabledFields && disabledFields.includes(inputField.varName))"
           @change="emitBlur"
-        />
+        >
+          <template #label>
+            <div>
+              <v-card-text class="text-body-1 my-0 py-0">
+                {{ inputField.label }}
+              </v-card-text>
+              <v-card-text v-if="inputField.hint" class="text-caption my-0 py-0">
+                {{ inputField.hint }}
+              </v-card-text>
+            </div>
+          </template>
+        </v-checkbox>
+
 
         <!-- Text Field -->
         <v-text-field

frontend/components/global/BaseButton.vue

@@ -14,15 +14,15 @@
   >
     <v-icon v-if="!iconRight" left>
       <slot name="icon">
-        {{ btnAttrs.icon }}
+        {{ icon || btnAttrs.icon }}
       </slot>
     </v-icon>
     <slot name="default">
-      {{ btnAttrs.text }}
+      {{ text || btnAttrs.text }}
     </slot>
     <v-icon v-if="iconRight" right>
       <slot name="icon">
-        {{ btnAttrs.icon }}
+        {{ icon || btnAttrs.icon }}
       </slot>
     </v-icon>
   </v-btn>
@@ -103,6 +103,14 @@ export default defineComponent({
       type: String,
       default: null,
     },
+    text: {
+      type: String,
+      default: null,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
     iconRight: {
       type: Boolean,
       default: false,

frontend/components/global/BaseOverflowButton.vue

@@ -11,44 +11,50 @@
         </v-icon>
       </v-btn>
     </template>
-    <!--  Model -->
+    <!-- Model -->
     <v-list v-if="mode === MODES.model" dense>
       <v-list-item-group v-model="itemGroup">
         <template v-for="(item, index) in items">
-          <v-list-item :key="index" @click="setValue(item)">
+          <div v-if="!item.hide" :key="index">
+            <v-list-item @click="setValue(item)">
+              <v-list-item-icon v-if="item.icon">
+                <v-icon>{{ item.icon }}</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>{{ item.text }}</v-list-item-title>
+            </v-list-item>
+            <v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
+          </div>
+        </template>
+      </v-list-item-group>
+    </v-list>
+    <!-- Links -->
+    <v-list v-else-if="mode === MODES.link" dense>
+      <v-list-item-group v-model="itemGroup">
+        <template v-for="(item, index) in items">
+          <div v-if="!item.hide" :key="index">
+            <v-list-item :to="item.to">
             <v-list-item-icon v-if="item.icon">
               <v-icon>{{ item.icon }}</v-icon>
             </v-list-item-icon>
             <v-list-item-title>{{ item.text }}</v-list-item-title>
+            </v-list-item>
             <v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
-          </v-list-item>
+          </div>
         </template>
       </v-list-item-group>
     </v-list>
-    <!--  Links -->
-    <v-list v-else-if="mode === MODES.link" dense>
-      <v-list-item-group v-model="itemGroup">
-        <template v-for="(item, index) in items">
-          <v-list-item :key="index" :to="item.to">
-          <v-list-item-icon v-if="item.icon">
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-icon>
-          <v-list-item-title>{{ item.text }}</v-list-item-title>
-          </v-list-item>
-          <v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
-        </template>
-      </v-list-item-group>
-    </v-list>
-    <!--  Event -->
+    <!-- Event -->
     <v-list v-else-if="mode === MODES.event" dense>
       <template v-for="(item, index) in items">
-        <v-list-item :key="index" @click="$emit(item.event)">
-          <v-list-item-icon v-if="item.icon">
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-icon>
-          <v-list-item-title>{{ item.text }}</v-list-item-title>
+        <div v-if="!item.hide" :key="index">
+          <v-list-item @click="$emit(item.event)">
+            <v-list-item-icon v-if="item.icon">
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>{{ item.text }}</v-list-item-title>
+          </v-list-item>
           <v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
-        </v-list-item>
+        </div>
       </template>
     </v-list>
   </v-menu>
@@ -74,6 +80,7 @@ export interface MenuItem {
   value?: string;
   event?: string;
   divider?: boolean;
+  hide?: boolean;
 }
 
 export default defineComponent({

frontend/components/global/BaseWizard.vue

@@ -0,0 +1,259 @@
+<template>
+  <div :style="`width: ${width}; height: 100%;`">
+    <LanguageDialog v-model="langDialog" />
+    <v-card>
+      <div>
+        <v-toolbar width="100%" color="primary" class="d-flex justify-center" style="margin-bottom: 4rem" dark>
+          <v-toolbar-title class="headline text-h4"> Mealie </v-toolbar-title>
+        </v-toolbar>
+
+        <div class="icon-container">
+          <v-divider class="icon-divider"></v-divider>
+          <v-avatar class="pa-2 icon-avatar" color="primary" size="75">
+            <svg class="icon-white" style="width: 75" viewBox="0 0 24 24">
+              <path
+                d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"
+              />
+            </svg>
+          </v-avatar>
+        </div>
+      </div>
+      <div class="d-flex justify-center grow items-center my-4">
+        <slot :width="pageWidth"></slot>
+      </div>
+      <div class="mx-2 my-4">
+        <v-progress-linear
+          v-if="value > 0"
+          :value="Math.ceil((value/maxPageNumber)*100)"
+          striped
+          height="10"
+        />
+      </div>
+      <v-divider class="ma-2" />
+      <v-card-actions width="100%">
+        <v-btn
+          v-if="prevButtonShow"
+          :disabled="!prevButtonEnable"
+          :color="prevButtonColor"
+          @click="decrementPage"
+        >
+          <v-icon v-if="prevButtonIconRef">
+            {{ prevButtonIconRef }}
+          </v-icon>
+          {{ prevButtonTextRef }}
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          v-if="nextButtonShow"
+          :disabled="!nextButtonEnable"
+          :color="nextButtonColorRef"
+          @click="incrementPage"
+        >
+          <div v-if="isSubmitting">
+            <v-progress-circular indeterminate color="white" size="24" />
+          </div>
+          <div v-else>
+            <v-icon v-if="nextButtonIconRef && !nextButtonIconAfter">
+              {{ nextButtonIconRef }}
+            </v-icon>
+            {{ nextButtonTextRef }}
+            <v-icon v-if="nextButtonIconRef && nextButtonIconAfter">
+              {{ nextButtonIconRef }}
+            </v-icon>
+          </div>
+        </v-btn>
+      </v-card-actions>
+      <v-card-actions class="justify-center flex-column py-8">
+        <BaseButton large color="primary" @click="langDialog = true">
+          <template #icon> {{ $globals.icons.translate }}</template>
+          {{ $t("language-dialog.choose-language") }}
+        </BaseButton>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Number,
+      required: true,
+    },
+    minPageNumber: {
+      type: Number,
+      default: 0,
+    },
+    maxPageNumber: {
+      type: Number,
+      required: true,
+    },
+    width: {
+      type: [String, Number],
+      default: "1200px",
+    },
+    pageWidth: {
+      type: [String, Number],
+      default: "600px",
+    },
+    prevButtonText: {
+      type: String,
+      default: undefined,
+    },
+    prevButtonIcon: {
+      type: String,
+      default: null,
+    },
+    prevButtonColor: {
+      type: String,
+      default: "grey-darken-3",
+    },
+    prevButtonShow: {
+      type: Boolean,
+      default: true,
+    },
+    prevButtonEnable: {
+      type: Boolean,
+      default: true,
+    },
+    nextButtonText: {
+      type: String,
+      default: undefined,
+    },
+    nextButtonIcon: {
+      type: String,
+      default: null,
+    },
+    nextButtonIconAfter: {
+      type: Boolean,
+      default: true,
+    },
+    nextButtonColor: {
+      type: String,
+      default: undefined,
+    },
+    nextButtonShow: {
+      type: Boolean,
+      default: true,
+    },
+    nextButtonEnable: {
+      type: Boolean,
+      default: true,
+    },
+    nextButtonIsSubmit: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    isSubmitting: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  setup(props, context) {
+    const { $globals, i18n } = useContext();
+    const ready = ref(false);
+    const langDialog = ref(false);
+
+    const prevButtonTextRef = computed(() => props.prevButtonText || i18n.tc("general.back"));
+    const prevButtonIconRef = computed(() => props.prevButtonIcon || $globals.icons.back);
+    const nextButtonTextRef = computed(
+      () => props.nextButtonText || (
+          props.nextButtonIsSubmit ? i18n.tc("general.submit") : i18n.tc("general.next")
+        )
+      );
+    const nextButtonIconRef = computed(
+      () => props.nextButtonIcon || (
+          props.nextButtonIsSubmit ? $globals.icons.createAlt : $globals.icons.forward
+      )
+    );
+    const nextButtonColorRef = computed(
+      () => props.nextButtonColor || (props.nextButtonIsSubmit ? "success" : "info")
+    );
+
+    function goToPage(page: number) {
+      if (page < props.minPageNumber) {
+        goToPage(props.minPageNumber);
+        return;
+      } else if (page > props.maxPageNumber) {
+        goToPage(props.maxPageNumber);
+        return;
+      }
+
+      context.emit("input", page);
+    }
+
+    function decrementPage() {
+      goToPage(props.value - 1);
+    }
+
+    function incrementPage() {
+      if (props.nextButtonIsSubmit) {
+        context.emit("submit", props.value);
+      } else {
+        goToPage(props.value + 1);
+      }
+    }
+
+    ready.value = true;
+
+    return {
+      ready,
+      langDialog,
+      prevButtonTextRef,
+      prevButtonIconRef,
+      nextButtonTextRef,
+      nextButtonIconRef,
+      nextButtonColorRef,
+      decrementPage,
+      incrementPage,
+    };
+  }
+});
+</script>
+
+<style lang="css" scoped>
+.icon-primary {
+  fill: var(--v-primary-base);
+}
+
+.icon-white {
+  fill: white;
+}
+
+.icon-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  margin-top: 2.5rem;
+}
+
+.icon-divider {
+  width: 100%;
+  margin-bottom: -2.5rem;
+}
+
+.icon-avatar {
+  border-color: rgba(0, 0, 0, 0.12);
+  border: 2px;
+}
+
+.bg-off-white {
+  background: #f5f8fa;
+}
+
+.preferred-width {
+  width: 840px;
+}
+</style>

frontend/components/global/InputLabelType.vue

@@ -1,14 +1,27 @@
 <template>
   <v-autocomplete
+    ref="autocompleteRef"
     v-model="itemVal"
     v-bind="$attrs"
+    :search-input.sync="searchInput"
     item-text="name"
     return-object
     :items="items"
     :prepend-icon="icon || $globals.icons.tags"
+    auto-select-first
     clearable
     hide-details
-  />
+    @keyup.enter="emitCreate"
+  >
+    <template v-if="$listeners.create" #no-data>
+      <div class="caption text-center pb-2">{{ $t("recipe.press-enter-to-create") }}</div>
+    </template>
+    <template v-if="$listeners.create" #append-item>
+      <div class="px-2">
+        <BaseButton block small @click="emitCreate"></BaseButton>
+      </div>
+    </template>
+  </v-autocomplete>
 </template>
 
 <script lang="ts">
@@ -31,7 +44,7 @@
  * Both the ID and Item can be synced. The item can be synced using the v-model syntax and the itemId can be synced
  * using the .sync syntax `item-id.sync="item.labelId"`
  */
-import { defineComponent, computed } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref } from "@nuxtjs/composition-api";
 import { MultiPurposeLabelSummary } from "~/lib/api/types/labels";
 import { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
 
@@ -59,6 +72,8 @@ export default defineComponent({
     },
   },
   setup(props, context) {
+    const autocompleteRef = ref<HTMLInputElement>();
+    const searchInput = ref("");
     const itemIdVal = computed({
       get: () => {
         return props.itemId || undefined;
@@ -78,9 +93,20 @@ export default defineComponent({
       },
     });
 
+    function emitCreate() {
+      if (props.items.some(item => item.name === searchInput.value)) {
+        return;
+      }
+      context.emit("create", searchInput.value);
+      autocompleteRef.value?.blur();
+    }
+
     return {
+      autocompleteRef,
       itemVal,
       itemIdVal,
+      searchInput,
+      emitCreate,
     };
   },
 });

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

@@ -37,6 +37,7 @@ export function usePublicStoreActions<T extends BoundT>(
     loading.value = true;
     const allItems = useAsync(async () => {
       const { data } = await api.getAll(page, perPage, params);
+      loading.value = false;
 
       if (data && allRef) {
         allRef.value = data.items;
@@ -49,7 +50,6 @@ export function usePublicStoreActions<T extends BoundT>(
       }
     }, useAsyncKey());
 
-    loading.value = false;
     return allItems;
   }
 
@@ -88,6 +88,7 @@ export function useStoreActions<T extends BoundT>(
     loading.value = true;
     const allItems = useAsync(async () => {
       const { data } = await api.getAll(page, perPage, params);
+      loading.value = false;
 
       if (data && allRef) {
         allRef.value = data.items;
@@ -100,7 +101,6 @@ export function useStoreActions<T extends BoundT>(
       }
     }, useAsyncKey());
 
-    loading.value = false;
     return allItems;
   }
 

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

@@ -34,6 +34,12 @@ describe(parseIngredientText.name, () => {
     expect(parseIngredientText(ingredient, false, 1, true)).contain("1 <sup>1</sup>").and.to.contain("<sub>2</sub>");
   });
 
+  test("ingredient text with fraction when unit is null", () => {
+    const ingredient = createRecipeIngredient({ quantity: 1.5, unit: undefined });
+
+    expect(parseIngredientText(ingredient, false, 1, true)).contain("1 <sup>1</sup>").and.to.contain("<sub>2</sub>");
+  });
+
   test("ingredient text with fraction no formatting", () => {
     const ingredient = createRecipeIngredient({ quantity: 1.5, unit: { fraction: true, id: "1", name: "cup" } });
     const result = parseIngredientText(ingredient, false, 1, false);

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

@@ -53,7 +53,9 @@ export function useParsedIngredientText(ingredient: RecipeIngredient, disableAmo
 
   // casting to number is required as sometimes quantity is a string
   if (quantity && Number(quantity) !== 0) {
-    if (unit?.fraction) {
+    if (unit && !unit.fraction) {
+      returnQty = (quantity * scale).toString();
+    } else {
       const fraction = frac(quantity * scale, 10, true);
       if (fraction[0] !== undefined && fraction[0] > 0) {
         returnQty += fraction[0];
@@ -64,8 +66,6 @@ export function useParsedIngredientText(ingredient: RecipeIngredient, disableAmo
           ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>` :
           ` ${fraction[1]}/${fraction[2]}`;
       }
-    } else {
-      returnQty = (quantity * scale).toString();
     }
   }
 

frontend/composables/recipes/use-recipe-timeline-events.ts

@@ -0,0 +1,35 @@
+import { computed, useContext } from "@nuxtjs/composition-api";
+import { TimelineEventType } from "~/lib/api/types/recipe";
+
+export interface TimelineEventTypeData {
+  value: TimelineEventType;
+  label: string;
+  icon: string;
+}
+
+export const useTimelineEventTypes = () => {
+  const { $globals, i18n } = useContext();
+  const eventTypeOptions = computed<TimelineEventTypeData[]>(() => {
+    return [
+      {
+        value: "comment",
+        label: i18n.tc("recipe.comment"),
+        icon: $globals.icons.commentTextMultiple,
+      },
+      {
+        value: "info",
+        label: i18n.tc("settings.theme.info"),
+        icon: $globals.icons.informationVariant,
+      },
+      {
+        value: "system",
+        label: i18n.tc("general.system"),
+        icon: $globals.icons.cog,
+      },
+    ];
+  });
+
+  return {
+    eventTypeOptions,
+  }
+}

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

@@ -2,7 +2,7 @@ import { reactive, ref, useAsync } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
 import { useUserApi } from "~/composables/api";
 import { VForm } from "~/types/vuetify";
-import { RecipeTool } from "~/lib/api/types/user";
+import { RecipeTool } from "~/lib/api/types/recipe";
 
 export const useTools = function (eager = true) {
   const workingToolData = reactive<RecipeTool>({

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

@@ -2,9 +2,11 @@ import { reactive, ref, Ref } from "@nuxtjs/composition-api";
 import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
 import { usePublicExploreApi } from "../api/api-client";
 import { useUserApi } from "~/composables/api";
-import { RecipeCategory } from "~/lib/api/types/admin";
+import { RecipeCategory } from "~/lib/api/types/recipe";
 
 const categoryStore: Ref<RecipeCategory[]> = ref([]);
+const publicStoreLoading = ref(false);
+const storeLoading = ref(false);
 
 export function useCategoryData() {
   const data = reactive({
@@ -27,7 +29,7 @@ export function useCategoryData() {
 
 export function usePublicCategoryStore(groupSlug: string) {
   const api = usePublicExploreApi(groupSlug).explore;
-  const loading = ref(false);
+  const loading = publicStoreLoading;
 
   const actions = {
     ...usePublicStoreActions<RecipeCategory>(api.categories, categoryStore, loading),
@@ -36,7 +38,7 @@ export function usePublicCategoryStore(groupSlug: string) {
     },
   };
 
-  if (!categoryStore.value || categoryStore.value?.length === 0) {
+  if (!loading.value && (!categoryStore.value || categoryStore.value?.length === 0)) {
     actions.getAll();
   }
 
@@ -50,7 +52,7 @@ export function usePublicCategoryStore(groupSlug: string) {
 export function useCategoryStore() {
   // passing the group slug switches to using the public API
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions<RecipeCategory>(api.categories, categoryStore, loading),
@@ -59,7 +61,7 @@ export function useCategoryStore() {
     },
   };
 
-  if (!categoryStore.value || categoryStore.value?.length === 0) {
+  if (!loading.value && (!categoryStore.value || categoryStore.value?.length === 0)) {
     actions.getAll();
   }
 

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

@@ -5,10 +5,12 @@ import { useUserApi } from "~/composables/api";
 import { IngredientFood } from "~/lib/api/types/recipe";
 
 let foodStore: Ref<IngredientFood[] | null> = ref([]);
+const publicStoreLoading = ref(false);
+const storeLoading = ref(false);
 
 /**
  * useFoodData returns a template reactive object
- * for managing the creation of units. It also provides a
+ * for managing the creation of foods. It also provides a
  * function to reset the data back to the initial state.
  */
 export const useFoodData = function () {
@@ -34,7 +36,7 @@ export const useFoodData = function () {
 
 export const usePublicFoodStore = function (groupSlug: string) {
   const api = usePublicExploreApi(groupSlug).explore;
-  const loading = ref(false);
+  const loading = publicStoreLoading;
 
   const actions = {
     ...usePublicStoreActions(api.foods, foodStore, loading),
@@ -43,7 +45,7 @@ export const usePublicFoodStore = function (groupSlug: string) {
     },
   };
 
-  if (!foodStore.value || foodStore.value.length === 0) {
+  if (!loading.value && (!foodStore.value || foodStore.value.length === 0)) {
     foodStore = actions.getAll();
   }
 
@@ -52,7 +54,7 @@ export const usePublicFoodStore = function (groupSlug: string) {
 
 export const useFoodStore = function () {
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions(api.foods, foodStore, loading),
@@ -61,7 +63,7 @@ export const useFoodStore = function () {
     },
   };
 
-  if (!foodStore.value || foodStore.value.length === 0) {
+  if (!loading.value && (!foodStore.value || foodStore.value.length === 0)) {
     foodStore = actions.getAll();
   }
 

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

@@ -4,6 +4,7 @@ import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
 import { useUserApi } from "~/composables/api";
 
 let labelStore: Ref<MultiPurposeLabelOut[] | null> = ref([]);
+const storeLoading = ref(false);
 
 export function useLabelData() {
   const data = reactive({
@@ -28,7 +29,7 @@ export function useLabelData() {
 
 export function useLabelStore() {
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions<MultiPurposeLabelOut>(api.multiPurposeLabels, labelStore, loading),
@@ -37,7 +38,7 @@ export function useLabelStore() {
     },
   };
 
-  if (!labelStore.value || labelStore.value?.length === 0) {
+  if (!loading.value && (!labelStore.value || labelStore.value?.length === 0)) {
     labelStore = actions.getAll();
   }
 

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

@@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api";
 import { RecipeTag } from "~/lib/api/types/admin";
 
 const items: Ref<RecipeTag[]> = ref([]);
+const publicStoreLoading = ref(false);
+const storeLoading = ref(false);
 
 export function useTagData() {
   const data = reactive({
@@ -27,7 +29,7 @@ export function useTagData() {
 
 export function usePublicTagStore(groupSlug: string) {
   const api = usePublicExploreApi(groupSlug).explore;
-  const loading = ref(false);
+  const loading = publicStoreLoading;
 
   const actions = {
     ...usePublicStoreActions<RecipeTag>(api.tags, items, loading),
@@ -36,7 +38,7 @@ export function usePublicTagStore(groupSlug: string) {
     },
   };
 
-  if (!items.value || items.value?.length === 0) {
+  if (!loading.value && (!items.value || items.value?.length === 0)) {
     actions.getAll();
   }
 
@@ -49,7 +51,7 @@ export function usePublicTagStore(groupSlug: string) {
 
 export function useTagStore() {
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions<RecipeTag>(api.tags, items, loading),
@@ -58,7 +60,7 @@ export function useTagStore() {
     },
   };
 
-  if (!items.value || items.value?.length === 0) {
+  if (!loading.value && (!items.value || items.value?.length === 0)) {
     actions.getAll();
   }
 

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

@@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api";
 import { RecipeTool } from "~/lib/api/types/recipe";
 
 const toolStore: Ref<RecipeTool[]> = ref([]);
+const publicStoreLoading = ref(false);
+const storeLoading = ref(false);
 
 export function useToolData() {
   const data = reactive({
@@ -29,7 +31,7 @@ export function useToolData() {
 
 export function usePublicToolStore(groupSlug: string) {
   const api = usePublicExploreApi(groupSlug).explore;
-  const loading = ref(false);
+  const loading = publicStoreLoading;
 
   const actions = {
     ...usePublicStoreActions<RecipeTool>(api.tools, toolStore, loading),
@@ -38,7 +40,7 @@ export function usePublicToolStore(groupSlug: string) {
     },
   };
 
-  if (!toolStore.value || toolStore.value?.length === 0) {
+  if (!loading.value && (!toolStore.value || toolStore.value?.length === 0)) {
     actions.getAll();
   }
 
@@ -51,7 +53,7 @@ export function usePublicToolStore(groupSlug: string) {
 
 export function useToolStore() {
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions<RecipeTool>(api.tools, toolStore, loading),
@@ -60,7 +62,7 @@ export function useToolStore() {
     },
   };
 
-  if (!toolStore.value || toolStore.value?.length === 0) {
+  if (!loading.value && (!toolStore.value || toolStore.value?.length === 0)) {
     actions.getAll();
   }
 

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

@@ -4,6 +4,7 @@ import { useUserApi } from "~/composables/api";
 import { IngredientUnit } from "~/lib/api/types/recipe";
 
 let unitStore: Ref<IngredientUnit[] | null> = ref([]);
+const storeLoading = ref(false);
 
 /**
  * useUnitData returns a template reactive object
@@ -35,7 +36,7 @@ export const useUnitData = function () {
 
 export const useUnitStore = function () {
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions<IngredientUnit>(api.units, unitStore, loading),
@@ -44,7 +45,7 @@ export const useUnitStore = function () {
     },
   };
 
-  if (!unitStore.value || unitStore.value.length === 0) {
+  if (!loading.value && (!unitStore.value || unitStore.value.length === 0)) {
     unitStore = actions.getAll();
   }
 

frontend/composables/use-group-cookbooks.ts

@@ -122,6 +122,7 @@ export const useCookbooks = function () {
         this.refreshAll();
       }
       loading.value = false;
+      return data;
     },
 
     async updateOrder() {

frontend/composables/use-group-recipe-actions.ts

@@ -0,0 +1,98 @@
+import { computed, reactive, ref } from "@nuxtjs/composition-api";
+import { useStoreActions } from "./partials/use-actions-factory";
+import { useUserApi } from "~/composables/api";
+import { GroupRecipeActionOut, RecipeActionType } from "~/lib/api/types/group";
+import { Recipe } from "~/lib/api/types/recipe";
+
+const groupRecipeActions = ref<GroupRecipeActionOut[] | null>(null);
+const loading = ref(false);
+
+export function useGroupRecipeActionData() {
+  const data = reactive({
+    id: "",
+    actionType: "link" as RecipeActionType,
+    title: "",
+    url: "",
+  });
+
+  function reset() {
+    data.id = "";
+    data.actionType = "link";
+    data.title = "";
+    data.url = "";
+  }
+
+  return {
+    data,
+    reset,
+  };
+}
+
+export const useGroupRecipeActions = function (
+  orderBy: string | null = "title",
+  orderDirection: string | null = "asc",
+) {
+  const api = useUserApi();
+
+  async function refreshGroupRecipeActions() {
+    loading.value = true;
+    const { data } = await api.groupRecipeActions.getAll(1, -1, { orderBy, orderDirection });
+    groupRecipeActions.value = data?.items || null;
+    loading.value = false;
+  }
+
+  const recipeActions = computed<GroupRecipeActionOut[] | null>(() => {
+    return groupRecipeActions.value;
+  });
+
+  function parseRecipeActionUrl(url: string, recipe: Recipe): string {
+    /* eslint-disable no-template-curly-in-string */
+    return url
+      .replace("${url}", window.location.href)
+      .replace("${id}", recipe.id || "")
+      .replace("${slug}", recipe.slug || "")
+    /* eslint-enable no-template-curly-in-string */
+  };
+
+  async function execute(action: GroupRecipeActionOut, recipe: Recipe): Promise<void | Response> {
+    const url = parseRecipeActionUrl(action.url, recipe);
+
+    switch (action.actionType) {
+      case "link":
+        window.open(url, "_blank")?.focus();
+        break;
+      case "post":
+        return await fetch(url, {
+          method: "POST",
+          headers: {
+            // The "text/plain" content type header is used here to skip the CORS preflight request,
+            // since it may fail. This is fine, since we don't care about the response, we just want
+            // the request to get sent.
+            "Content-Type": "text/plain",
+          },
+          body: JSON.stringify(recipe),
+        }).catch((error) => {
+          console.error(error);
+        });
+      default:
+        break;
+    }
+  };
+
+  if (!groupRecipeActions.value && !loading.value) {
+    refreshGroupRecipeActions();
+  };
+
+  const actions = {
+    ...useStoreActions<GroupRecipeActionOut>(api.groupRecipeActions, groupRecipeActions, loading),
+    flushStore() {
+      groupRecipeActions.value = [];
+    }
+  }
+
+  return {
+    actions,
+    execute,
+    recipeActions,
+  };
+};

frontend/composables/use-groups.ts

@@ -1,30 +1,39 @@
 import { useAsync, ref } from "@nuxtjs/composition-api";
-import { useAsyncKey } from "./use-utils";
 import { useUserApi } from "~/composables/api";
-import { GroupBase } from "~/lib/api/types/user";
+import { GroupBase, GroupSummary } from "~/lib/api/types/user";
+
+const groupSelfRef = ref<GroupSummary | null>(null);
+const loading = ref(false);
 
 export const useGroupSelf = function () {
   const api = useUserApi();
+  async function refreshGroupSelf() {
+    loading.value = true;
+    const { data } = await api.groups.getCurrentUserGroup();
+    groupSelfRef.value = data;
+    loading.value = false;
+  }
 
   const actions = {
     get() {
-      const group = useAsync(async () => {
-        const { data } = await api.groups.getCurrentUserGroup();
+      if (!(groupSelfRef.value || loading.value)) {
+        refreshGroupSelf();
+      }
 
-        return data;
-      }, useAsyncKey());
-
-      return group;
+      return groupSelfRef;
     },
     async updatePreferences() {
-      if (!group.value?.preferences) {
+      if (!groupSelfRef.value) {
+        await refreshGroupSelf();
+      }
+      if (!groupSelfRef.value?.preferences) {
         return;
       }
 
-      const { data } = await api.groups.setPreferences(group.value.preferences);
+      const { data } = await api.groups.setPreferences(groupSelfRef.value.preferences);
 
       if (data) {
-        group.value.preferences = data;
+        groupSelfRef.value.preferences = data;
       }
     },
   };

frontend/composables/use-locales/available-locales.ts

@@ -1,9 +1,9 @@
-// This Code is auto generated by gen_global_components.py
+// This Code is auto generated by gen_ts_locales.py
 export const LOCALES = [
   {
     name: "繁體中文 (Chinese traditional)",
     value: "zh-TW",
-    progress: 30,
+    progress: 29,
     dir: "ltr",
   },
   {
@@ -15,7 +15,7 @@ export const LOCALES = [
   {
     name: "Tiếng Việt (Vietnamese)",
     value: "vi-VN",
-    progress: 1,
+    progress: 0,
     dir: "ltr",
   },
   {
@@ -27,43 +27,43 @@ export const LOCALES = [
   {
     name: "Türkçe (Turkish)",
     value: "tr-TR",
-    progress: 53,
+    progress: 62,
     dir: "ltr",
   },
   {
     name: "Svenska (Swedish)",
     value: "sv-SE",
-    progress: 94,
+    progress: 99,
     dir: "ltr",
   },
   {
     name: "српски (Serbian)",
     value: "sr-SP",
-    progress: 32,
+    progress: 31,
     dir: "ltr",
   },
   {
     name: "Slovenian",
     value: "sl-SI",
-    progress: 47,
+    progress: 49,
     dir: "ltr",
   },
   {
     name: "Slovak",
     value: "sk-SK",
-    progress: 93,
+    progress: 91,
     dir: "ltr",
   },
   {
     name: "Pусский (Russian)",
     value: "ru-RU",
-    progress: 98,
+    progress: 99,
     dir: "ltr",
   },
   {
     name: "Română (Romanian)",
     value: "ro-RO",
-    progress: 42,
+    progress: 44,
     dir: "ltr",
   },
   {
@@ -75,19 +75,19 @@ export const LOCALES = [
   {
     name: "Português do Brasil (Brazilian Portuguese)",
     value: "pt-BR",
-    progress: 97,
+    progress: 95,
     dir: "ltr",
   },
   {
     name: "Polski (Polish)",
     value: "pl-PL",
-    progress: 98,
+    progress: 100,
     dir: "ltr",
   },
   {
     name: "Norsk (Norwegian)",
     value: "no-NO",
-    progress: 99,
+    progress: 97,
     dir: "ltr",
   },
   {
@@ -99,25 +99,25 @@ export const LOCALES = [
   {
     name: "Latvian",
     value: "lv-LV",
-    progress: 1,
+    progress: 0,
     dir: "ltr",
   },
   {
     name: "Lithuanian",
     value: "lt-LT",
-    progress: 93,
+    progress: 91,
     dir: "ltr",
   },
   {
     name: "한국어 (Korean)",
     value: "ko-KR",
-    progress: 5,
+    progress: 3,
     dir: "ltr",
   },
   {
     name: "日本語 (Japanese)",
     value: "ja-JP",
-    progress: 12,
+    progress: 11,
     dir: "ltr",
   },
   {
@@ -135,25 +135,25 @@ export const LOCALES = [
   {
     name: "Magyar (Hungarian)",
     value: "hu-HU",
-    progress: 100,
+    progress: 98,
     dir: "ltr",
   },
   {
     name: "Croatian",
     value: "hr-HR",
-    progress: 93,
+    progress: 91,
     dir: "ltr",
   },
   {
     name: "עברית (Hebrew)",
     value: "he-IL",
-    progress: 97,
+    progress: 98,
     dir: "rtl",
   },
   {
     name: "Galician",
     value: "gl-ES",
-    progress: 1,
+    progress: 3,
     dir: "ltr",
   },
   {
@@ -165,19 +165,19 @@ export const LOCALES = [
   {
     name: "French, Canada",
     value: "fr-CA",
-    progress: 97,
+    progress: 95,
     dir: "ltr",
   },
   {
     name: "Suomi (Finnish)",
     value: "fi-FI",
-    progress: 91,
+    progress: 89,
     dir: "ltr",
   },
   {
     name: "Español (Spanish)",
     value: "es-ES",
-    progress: 79,
+    progress: 93,
     dir: "ltr",
   },
   {
@@ -189,13 +189,13 @@ export const LOCALES = [
   {
     name: "British English",
     value: "en-GB",
-    progress: 3,
+    progress: 2,
     dir: "ltr",
   },
   {
     name: "Ελληνικά (Greek)",
     value: "el-GR",
-    progress: 34,
+    progress: 33,
     dir: "ltr",
   },
   {
@@ -219,7 +219,7 @@ export const LOCALES = [
   {
     name: "Català (Catalan)",
     value: "ca-ES",
-    progress: 75,
+    progress: 74,
     dir: "ltr",
   },
   {
@@ -231,13 +231,13 @@ export const LOCALES = [
   {
     name: "العربية (Arabic)",
     value: "ar-SA",
-    progress: 20,
+    progress: 18,
     dir: "rtl",
   },
   {
     name: "Afrikaans (Afrikaans)",
     value: "af-ZA",
-    progress: 92,
+    progress: 90,
     dir: "ltr",
   },
 ]

frontend/composables/use-setup/common-settings-form.ts

@@ -0,0 +1,30 @@
+import { useContext } from "@nuxtjs/composition-api";
+import { fieldTypes } from "../forms";
+import { AutoFormItems } from "~/types/auto-forms";
+
+export const useCommonSettingsForm = () => {
+    const { i18n } = useContext();
+
+    const commonSettingsForm: AutoFormItems = [
+        {
+          section: i18n.tc("profile.group-settings"),
+          label: i18n.tc("group.enable-public-access"),
+          hint: i18n.tc("group.enable-public-access-description"),
+          varName: "makeGroupRecipesPublic",
+          type: fieldTypes.BOOLEAN,
+          rules: ["required"],
+        },
+        {
+          section: i18n.tc("data-pages.data-management"),
+          label: i18n.tc("user-registration.use-seed-data"),
+          hint: i18n.tc("user-registration.use-seed-data-description"),
+          varName: "useSeedData",
+          type: fieldTypes.BOOLEAN,
+          rules: ["required"],
+        },
+      ];
+
+    return {
+        commonSettingsForm,
+    }
+}

frontend/composables/use-setup/index.ts

@@ -0,0 +1 @@
+export { useCommonSettingsForm } from "./common-settings-form";

frontend/composables/use-users/index.ts

@@ -1 +1,3 @@
 export { useUserForm } from "./user-form";
+export { useUserRegistrationForm } from "./user-registration-form";
+export { useUserSelfRatings } from "./user-ratings";

frontend/composables/use-users/preferences.ts

@@ -1,5 +1,6 @@
 import { Ref, useContext } from "@nuxtjs/composition-api";
-import { useLocalStorage } from "@vueuse/core";
+import { useLocalStorage, useSessionStorage } from "@vueuse/core";
+import { RegisteredParser, TimelineEventType } from "~/lib/api/types/recipe";
 
 export interface UserPrintPreferences {
   imagePosition: string;
@@ -7,12 +8,20 @@ export interface UserPrintPreferences {
   showNotes: boolean;
 }
 
+export interface UserSearchQuery {
+  recipe: string;
+}
+
 export enum ImagePosition {
   hidden = "hidden",
   left = "left",
   right = "right",
 }
 
+export interface UserMealPlanPreferences {
+  numberOfDays: number;
+}
+
 export interface UserRecipePreferences {
   orderBy: string;
   orderDirection: string;
@@ -28,6 +37,25 @@ export interface UserShoppingListPreferences {
 
 export interface UserTimelinePreferences {
   orderDirection: string;
+  types: TimelineEventType[];
+}
+
+export interface UserParsingPreferences {
+  parser: RegisteredParser;
+}
+
+export function useUserMealPlanPreferences(): Ref<UserMealPlanPreferences> {
+  const fromStorage = useLocalStorage(
+    "meal-planner-preferences",
+    {
+      numberOfDays: 7,
+    },
+    { mergeDefaults: true }
+    // we cast to a Ref because by default it will return an optional type ref
+    // but since we pass defaults we know all properties are set.
+  ) as unknown as Ref<UserMealPlanPreferences>;
+
+  return fromStorage;
 }
 
 export function useUserPrintPreferences(): Ref<UserPrintPreferences> {
@@ -66,6 +94,20 @@ export function useUserSortPreferences(): Ref<UserRecipePreferences> {
   return fromStorage;
 }
 
+export function useUserSearchQuerySession(): Ref<UserSearchQuery> {
+  const fromStorage = useSessionStorage(
+    "search-query",
+    {
+      recipe: "",
+    },
+    { mergeDefaults: true }
+    // we cast to a Ref because by default it will return an optional type ref
+    // but since we pass defaults we know all properties are set.
+  ) as unknown as Ref<UserSearchQuery>;
+
+  return fromStorage;
+}
+
 
 export function useShoppingListPreferences(): Ref<UserShoppingListPreferences> {
   const fromStorage = useLocalStorage(
@@ -87,6 +129,7 @@ export function useTimelinePreferences(): Ref<UserTimelinePreferences> {
     "timeline-preferences",
     {
       orderDirection: "asc",
+      types: ["info", "system", "comment"] as TimelineEventType[],
     },
     { mergeDefaults: true }
     // we cast to a Ref because by default it will return an optional type ref
@@ -95,3 +138,17 @@ export function useTimelinePreferences(): Ref<UserTimelinePreferences> {
 
   return fromStorage;
 }
+
+export function useParsingPreferences(): Ref<UserParsingPreferences> {
+  const fromStorage = useLocalStorage(
+    "parsing-preferences",
+    {
+      parser: "nlp",
+    },
+    { mergeDefaults: true }
+    // we cast to a Ref because by default it will return an optional type ref
+    // but since we pass defaults we know all properties are set.
+  ) as unknown as Ref<UserParsingPreferences>;
+
+  return fromStorage;
+}

frontend/composables/use-users/user-form.ts

@@ -38,7 +38,7 @@ export const useUserForm = () => {
       type: fieldTypes.SELECT,
       hint: i18n.tc("user.authentication-method-hint"),
       disableCreate: true,
-      options: [{ text: "Mealie" }, { text: "LDAP" }],
+      options: [{ text: "Mealie" }, { text: "LDAP" }, { text: "OIDC" }],
     },
     {
       section: i18n.tc("user.permissions"),

frontend/composables/use-users/user-ratings.ts

@@ -0,0 +1,40 @@
+import { ref, useContext } from "@nuxtjs/composition-api";
+import { useUserApi } from "~/composables/api";
+import { UserRatingSummary } from "~/lib/api/types/user";
+
+const userRatings = ref<UserRatingSummary[]>([]);
+const loading = ref(false);
+const ready = ref(false);
+
+export const useUserSelfRatings = function () {
+    const { $auth } = useContext();
+    const api = useUserApi();
+
+    async function refreshUserRatings() {
+        if (loading.value) {
+            return;
+        }
+
+        loading.value = true;
+        const { data } = await api.users.getSelfRatings();
+        userRatings.value = data?.ratings || [];
+        loading.value = false;
+        ready.value = true;
+    }
+
+    async function setRating(slug: string, rating: number | null, isFavorite: boolean | null) {
+        loading.value = true;
+        const userId = $auth.user?.id || "";
+        await api.users.setRating(userId, slug, rating, isFavorite);
+        loading.value = false;
+        await refreshUserRatings();
+    }
+
+    refreshUserRatings();
+    return {
+        userRatings,
+        refreshUserRatings,
+        setRating,
+        ready,
+    }
+}

frontend/composables/use-users/user-registration-form.ts

@@ -0,0 +1,87 @@
+import { ref, Ref, useContext } from "@nuxtjs/composition-api";
+import { useAsyncValidator } from "~/composables/use-validators";
+import { VForm } from "~/types/vuetify";
+import { usePublicApi } from "~/composables/api/api-client";
+
+const domAccountForm = ref<VForm | null>(null);
+const username = ref("");
+const fullName = ref("");
+const email = ref("");
+const password1 = ref("");
+const password2 = ref("");
+const advancedOptions = ref(false);
+
+export const useUserRegistrationForm = () => {
+  const { i18n } = useContext();
+  function safeValidate(form: Ref<VForm | null>) {
+    if (form.value && form.value.validate) {
+      return form.value.validate();
+    }
+    return false;
+  }
+  // ================================================================
+  // Provide Group Details
+  const publicApi = usePublicApi();
+  // ================================================================
+  // Provide Account Details
+
+  const usernameErrorMessages = ref<string[]>([]);
+  const { validate: validateUsername, valid: validUsername } = useAsyncValidator(
+    username,
+    (v: string) => publicApi.validators.username(v),
+    i18n.tc("validation.username-is-taken"),
+    usernameErrorMessages
+  );
+  const emailErrorMessages = ref<string[]>([]);
+  const { validate: validateEmail, valid: validEmail } = useAsyncValidator(
+    email,
+    (v: string) => publicApi.validators.email(v),
+    i18n.tc("validation.email-is-taken"),
+    emailErrorMessages
+  );
+  const accountDetails = {
+    username,
+    fullName,
+    email,
+    advancedOptions,
+    validate: async () => {
+      if (!(validUsername.value && validEmail.value)) {
+        await Promise.all([validateUsername(), validateEmail()]);
+      }
+
+      return (safeValidate(domAccountForm as Ref<VForm>) && validUsername.value && validEmail.value);
+    },
+    reset: () => {
+      accountDetails.username.value = "";
+      accountDetails.fullName.value = "";
+      accountDetails.email.value = "";
+      accountDetails.advancedOptions.value = false;
+    },
+  };
+  // ================================================================
+  // Provide Credentials
+  const passwordMatch = () => password1.value === password2.value || i18n.tc("user.password-must-match");
+  const credentials = {
+    password1,
+    password2,
+    passwordMatch,
+    reset: () => {
+      credentials.password1.value = "";
+      credentials.password2.value = "";
+    }
+  };
+
+  return {
+    accountDetails,
+    credentials,
+    emailErrorMessages,
+    usernameErrorMessages,
+    // Fields
+    advancedOptions,
+    // Validators
+    validateUsername,
+    validateEmail,
+    // Dom Refs
+    domAccountForm,
+  };
+};

frontend/lang/dateTimeFormats/gl-ES.json

@@ -0,0 +1,21 @@
+{
+  "short": {
+    "month": "short",
+    "day": "numeric",
+    "weekday": "long"
+  },
+  "medium": {
+    "month": "long",
+    "day": "numeric",
+    "weekday": "long",
+    "year": "numeric"
+  },
+  "long": {
+    "year": "numeric",
+    "month": "long",
+    "day": "numeric",
+    "weekday": "long",
+    "hour": "numeric",
+    "minute": "numeric"
+  }
+}

frontend/lang/dateTimeFormats/hr-HR.json

@@ -0,0 +1,21 @@
+{
+  "short": {
+    "month": "short",
+    "day": "numeric",
+    "weekday": "long"
+  },
+  "medium": {
+    "month": "long",
+    "day": "numeric",
+    "weekday": "long",
+    "year": "numeric"
+  },
+  "long": {
+    "year": "numeric",
+    "month": "long",
+    "day": "numeric",
+    "weekday": "long",
+    "hour": "numeric",
+    "minute": "numeric"
+  }
+}

frontend/lang/dateTimeFormats/is-IS.json

@@ -0,0 +1,21 @@
+{
+  "short": {
+    "month": "short",
+    "day": "numeric",
+    "weekday": "long"
+  },
+  "medium": {
+    "month": "long",
+    "day": "numeric",
+    "weekday": "long",
+    "year": "numeric"
+  },
+  "long": {
+    "year": "numeric",
+    "month": "long",
+    "day": "numeric",
+    "weekday": "long",
+    "hour": "numeric",
+    "minute": "numeric"
+  }
+}