From e24e28ae0391ca80e2239e2a4718fa627458ccbc Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 21 Aug 2023 09:54:02 -0500
Subject: [PATCH 01/14] feat: Improved recipeYield Parsing For Fractions and
 Decimals (#2507)

* improved recipeYield parsing for fracs/decimals

* added fix for edgecase with weird fractions

* made typescript happy

* lint

* extracted yield calculation into composable

* fixed some gross edgecases

* added tests

* made bare return clearer

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
---
 .../RecipePageParts/RecipePageScale.vue       |  24 +---
 .../use-extract-recipe-yield.test.ts          | 111 +++++++++++++++
 .../recipe-page/use-extract-recipe-yield.ts   | 132 ++++++++++++++++++
 3 files changed, 247 insertions(+), 20 deletions(-)
 create mode 100644 frontend/composables/recipe-page/use-extract-recipe-yield.test.ts
 create mode 100644 frontend/composables/recipe-page/use-extract-recipe-yield.ts

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue
index 6db9d01662d..d42dc5d5675 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue
@@ -33,6 +33,8 @@ import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { Recipe } from "~/lib/api/types/recipe";
 import { usePageState } from "~/composables/recipe-page/shared-state";
+import { useExtractRecipeYield } from "~/composables/recipe-page/use-extract-recipe-yield";
+
 export default defineComponent({
   components: {
     RecipeScaleEditButton,
@@ -65,29 +67,11 @@ export default defineComponent({
     });
 
     const scaledYield = computed(() => {
-      const regMatchNum = /\d+/;
-      const yieldString = props.recipe.recipeYield;
-      const num = yieldString?.match(regMatchNum);
-
-      if (num && num?.length > 0) {
-        const yieldAsInt = parseInt(num[0]);
-        return yieldString?.replace(num[0], String(yieldAsInt * scaleValue.value));
-      }
-
-      return props.recipe.recipeYield;
+      return useExtractRecipeYield(props.recipe.recipeYield, scaleValue.value);
     });
 
     const basicYield = computed(() => {
-      const regMatchNum = /\d+/;
-      const yieldString = props.recipe.recipeYield;
-      const num = yieldString?.match(regMatchNum);
-
-      if (num && num?.length > 0) {
-        const yieldAsInt = parseInt(num[0]);
-        return yieldString?.replace(num[0], String(yieldAsInt));
-      }
-
-      return props.recipe.recipeYield;
+      return useExtractRecipeYield(props.recipe.recipeYield, 1);
     });
 
     return {
diff --git a/frontend/composables/recipe-page/use-extract-recipe-yield.test.ts b/frontend/composables/recipe-page/use-extract-recipe-yield.test.ts
new file mode 100644
index 00000000000..3bc8e7996e8
--- /dev/null
+++ b/frontend/composables/recipe-page/use-extract-recipe-yield.test.ts
@@ -0,0 +1,111 @@
+import { describe, expect, test } from "vitest";
+import { useExtractRecipeYield } from "./use-extract-recipe-yield";
+
+describe("test use extract recipe yield", () => {
+    test("when text empty return empty", () => {
+        const result = useExtractRecipeYield(null, 1);
+        expect(result).toStrictEqual("");
+    });
+
+    test("when text matches nothing return text", () => {
+        const val = "this won't match anything";
+        const result = useExtractRecipeYield(val, 1);
+        expect(result).toStrictEqual(val);
+
+        const resultScaled = useExtractRecipeYield(val, 5);
+        expect(resultScaled).toStrictEqual(val);
+    });
+
+    test("when text matches a mixed fraction, return a scaled fraction", () => {
+        const val = "10 1/2 units";
+        const result = useExtractRecipeYield(val, 1);
+        expect(result).toStrictEqual(val);
+
+        const resultScaled = useExtractRecipeYield(val, 3);
+        expect(resultScaled).toStrictEqual("31 1/2 units");
+
+        const resultScaledPartial = useExtractRecipeYield(val, 2.5);
+        expect(resultScaledPartial).toStrictEqual("26 1/4 units");
+
+        const resultScaledInt = useExtractRecipeYield(val, 4);
+        expect(resultScaledInt).toStrictEqual("42 units");
+    });
+
+    test("when text matches a fraction, return a scaled fraction", () => {
+        const val = "1/3 plates";
+        const result = useExtractRecipeYield(val, 1);
+        expect(result).toStrictEqual(val);
+
+        const resultScaled = useExtractRecipeYield(val, 2);
+        expect(resultScaled).toStrictEqual("2/3 plates");
+
+        const resultScaledInt = useExtractRecipeYield(val, 3);
+        expect(resultScaledInt).toStrictEqual("1 plates");
+
+        const resultScaledPartial = useExtractRecipeYield(val, 2.5);
+        expect(resultScaledPartial).toStrictEqual("5/6 plates");
+
+        const resultScaledMixed = useExtractRecipeYield(val, 4);
+        expect(resultScaledMixed).toStrictEqual("1 1/3 plates");
+    });
+
+    test("when text matches a decimal, return a scaled, rounded decimal", () => {
+        const val = "1.25 parts";
+        const result = useExtractRecipeYield(val, 1);
+        expect(result).toStrictEqual(val);
+
+        const resultScaled = useExtractRecipeYield(val, 2);
+        expect(resultScaled).toStrictEqual("2.5 parts");
+
+        const resultScaledInt = useExtractRecipeYield(val, 4);
+        expect(resultScaledInt).toStrictEqual("5 parts");
+
+        const resultScaledPartial = useExtractRecipeYield(val, 2.5);
+        expect(resultScaledPartial).toStrictEqual("3.125 parts");
+
+        const roundedVal = "1.33333333333333333333 parts";
+        const resultScaledRounded = useExtractRecipeYield(roundedVal, 2);
+        expect(resultScaledRounded).toStrictEqual("2.667 parts");
+    });
+
+    test("when text matches an int, return a scaled int", () => {
+        const val = "5 bowls";
+        const result = useExtractRecipeYield(val, 1);
+        expect(result).toStrictEqual(val);
+
+        const resultScaled = useExtractRecipeYield(val, 2);
+        expect(resultScaled).toStrictEqual("10 bowls");
+
+        const resultScaledPartial = useExtractRecipeYield(val, 2.5);
+        expect(resultScaledPartial).toStrictEqual("12.5 bowls");
+
+        const resultScaledLarge = useExtractRecipeYield(val, 10);
+        expect(resultScaledLarge).toStrictEqual("50 bowls");
+    });
+
+    test("when text contains an invalid fraction, return the original string", () => {
+        const valDivZero = "3/0 servings";
+        const resultDivZero = useExtractRecipeYield(valDivZero, 3);
+        expect(resultDivZero).toStrictEqual(valDivZero);
+
+        const valDivZeroMixed = "2 4/0 servings";
+        const resultDivZeroMixed = useExtractRecipeYield(valDivZeroMixed, 6);
+        expect(resultDivZeroMixed).toStrictEqual(valDivZeroMixed);
+    });
+
+    test("when text contains a weird or small fraction, return the original string", () => {
+        const valWeird = "2323231239087/134527431962272135 servings";
+        const resultWeird = useExtractRecipeYield(valWeird, 5);
+        expect(resultWeird).toStrictEqual(valWeird);
+
+        const valSmall = "1/20230225 lovable servings";
+        const resultSmall = useExtractRecipeYield(valSmall, 12);
+        expect(resultSmall).toStrictEqual(valSmall);
+    });
+
+    test("when text contains multiple numbers, the first is parsed as the servings amount", () => {
+        const val = "100 sets of 55 bowls";
+        const result = useExtractRecipeYield(val, 3);
+        expect(result).toStrictEqual("300 sets of 55 bowls");
+    })
+});
diff --git a/frontend/composables/recipe-page/use-extract-recipe-yield.ts b/frontend/composables/recipe-page/use-extract-recipe-yield.ts
new file mode 100644
index 00000000000..53d17b264b9
--- /dev/null
+++ b/frontend/composables/recipe-page/use-extract-recipe-yield.ts
@@ -0,0 +1,132 @@
+import { useFraction } from "~/composables/recipes";
+
+const matchMixedFraction = /(?:\d*\s\d*\d*|0)\/\d*\d*/;
+const matchFraction = /(?:\d*\d*|0)\/\d*\d*/;
+const matchDecimal = /(\d+.\d+)|(.\d+)/;
+const matchInt = /\d+/;
+
+
+
+function extractServingsFromMixedFraction(fractionString: string): number | undefined {
+    const mixedSplit = fractionString.split(/\s/);
+    const wholeNumber = parseInt(mixedSplit[0]);
+    const fraction = mixedSplit[1];
+
+    const fractionSplit = fraction.split("/");
+    const numerator = parseInt(fractionSplit[0]);
+    const denominator = parseInt(fractionSplit[1]);
+
+    if (denominator === 0) {
+        return undefined;  // if the denominator is zero, just give up
+    }
+    else {
+        return wholeNumber + (numerator / denominator);
+    }
+}
+
+function extractServingsFromFraction(fractionString: string): number | undefined {
+    const fractionSplit = fractionString.split("/");
+    const numerator = parseInt(fractionSplit[0]);
+    const denominator = parseInt(fractionSplit[1]);
+
+    if (denominator === 0) {
+        return undefined;  // if the denominator is zero, just give up
+    }
+    else {
+        return numerator / denominator;
+    }
+}
+
+
+
+function findMatch(yieldString: string): [matchString: string, servings: number, isFraction: boolean] | null {
+    if (!yieldString) {
+        return null;
+    }
+
+    const mixedFractionMatch = yieldString.match(matchMixedFraction);
+    if (mixedFractionMatch?.length) {
+        const match = mixedFractionMatch[0];
+        const servings = extractServingsFromMixedFraction(match);
+
+        // if the denominator is zero, return no match
+        if (servings === undefined) {
+            return null;
+        } else {
+            return [match, servings, true];
+        }
+    }
+
+    const fractionMatch = yieldString.match(matchFraction);
+    if (fractionMatch?.length) {
+        const match = fractionMatch[0]
+        const servings = extractServingsFromFraction(match);
+
+        // if the denominator is zero, return no match
+        if (servings === undefined) {
+            return null;
+        } else {
+            return [match, servings, true];
+        }
+    }
+
+    const decimalMatch = yieldString.match(matchDecimal);
+    if (decimalMatch?.length) {
+        const match = decimalMatch[0];
+        return [match, parseFloat(match), false];
+    }
+
+    const intMatch = yieldString.match(matchInt);
+    if (intMatch?.length) {
+        const match = intMatch[0];
+        return [match, parseInt(match), false];
+    }
+
+    return null;
+}
+
+function formatServings(servings: number, scale: number, isFraction: boolean): string {
+    const val = servings * scale;
+    if (Number.isInteger(val)) {
+        return val.toString();
+    } else if (!isFraction) {
+        return (Math.round(val * 1000) / 1000).toString();
+    }
+
+    // convert val into a fraction string
+    const { frac } = useFraction();
+
+    let valString = "";
+    const fraction = frac(val, 10, true);
+
+    if (fraction[0] !== undefined && fraction[0] > 0) {
+        valString += fraction[0];
+    }
+
+    if (fraction[1] > 0) {
+        valString += ` ${fraction[1]}/${fraction[2]}`;
+    }
+
+    return valString.trim();
+}
+
+
+export function useExtractRecipeYield(yieldString: string | null, scale: number): string {
+    if (!yieldString) {
+        return "";
+    }
+
+    const match = findMatch(yieldString);
+    if (!match) {
+        return yieldString;
+    }
+
+    const [matchString, servings, isFraction] = match;
+
+    const formattedServings = formatServings(servings, scale, isFraction);
+    if (!formattedServings) {
+        return yieldString  // this only happens with very weird or small fractions
+    } else {
+        return yieldString.replace(matchString, formatServings(servings, scale, isFraction));
+    }
+}

From 2151451634dd598f44b99a08402f4cad84907a92 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 21 Aug 2023 10:00:37 -0500
Subject: [PATCH 02/14] feat: Timeline Image Uploader Improvements (#2494)

* improved UI responsiveness and added image preview

* added global image cropper component

* added image cropper to last made dialog

* style tweaks

* added more specific text for creating event

* mopped up some slop

* renamed height and width vars

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
---
 .../Domain/Recipe/RecipeLastMade.vue          |  49 +++++-
 .../components/global/AppButtonUpload.vue     |  10 +-
 frontend/components/global/ImageCropper.vue   | 152 ++++++++++++++++++
 frontend/lang/messages/en-US.json             |   4 +-
 frontend/lib/api/user/recipes/recipe.ts       |   4 +-
 frontend/lib/icons/icons.ts                   |   8 +
 frontend/package.json                         |   1 +
 frontend/types/components.d.ts                |   2 +
 frontend/yarn.lock                            |  24 +++
 9 files changed, 246 insertions(+), 8 deletions(-)
 create mode 100644 frontend/components/global/ImageCropper.vue

diff --git a/frontend/components/Domain/Recipe/RecipeLastMade.vue b/frontend/components/Domain/Recipe/RecipeLastMade.vue
index 4b054e43d66..56b5d954151 100644
--- a/frontend/components/Domain/Recipe/RecipeLastMade.vue
+++ b/frontend/components/Domain/Recipe/RecipeLastMade.vue
@@ -5,7 +5,7 @@
         v-model="madeThisDialog"
         :icon="$globals.icons.chefHat"
         :title="$tc('recipe.made-this')"
-        :submit-text="$tc('general.save')"
+        :submit-text="$tc('recipe.add-to-timeline')"
         @submit="createTimelineEvent"
         >
         <v-card-text>
@@ -49,6 +49,7 @@
                 <v-spacer />
                 <v-col cols="auto" align-self="center">
                   <AppButtonUpload
+                    v-if="!newTimelineEventImage"
                     class="ml-auto"
                     url="none"
                     file-name="image"
@@ -58,6 +59,24 @@
                     :post="false"
                     @uploaded="uploadImage"
                   />
+                  <v-btn
+                    v-if="!!newTimelineEventImage"
+                    color="error"
+                    @click="clearImage"
+                  >
+                    <v-icon left>{{ $globals.icons.close }}</v-icon>
+                    {{ $i18n.tc('recipe.remove-image') }}
+                  </v-btn>
+                </v-col>
+              </v-row>
+              <v-row v-if="newTimelineEventImage && newTimelineEventImagePreviewUrl">
+                <v-col cols="12" align-self="center">
+                  <ImageCropper
+                    :img="newTimelineEventImagePreviewUrl"
+                    cropper-height="20vh"
+                    cropper-width="100%"
+                    @save="updateUploadedImage"
+                  />
                 </v-col>
               </v-row>
             </v-container>
@@ -120,7 +139,9 @@ export default defineComponent({
       timestamp: undefined,
       recipeId: props.recipe?.id || "",
     });
-    const newTimelineEventImage = ref<File>();
+    const newTimelineEventImage = ref<Blob | File>();
+    const newTimelineEventImageName = ref<string>("");
+    const newTimelineEventImagePreviewUrl = ref<string>();
     const newTimelineEventTimestamp = ref<string>();
 
     whenever(
@@ -133,8 +154,21 @@ export default defineComponent({
       }
     );
 
+    function clearImage() {
+      newTimelineEventImage.value = undefined;
+      newTimelineEventImageName.value = "";
+      newTimelineEventImagePreviewUrl.value = undefined;
+    }
+
     function uploadImage(fileObject: File) {
       newTimelineEventImage.value = fileObject;
+      newTimelineEventImageName.value = fileObject.name;
+      newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject);
+    }
+
+    function updateUploadedImage(fileObject: Blob) {
+      newTimelineEventImage.value = fileObject;
+      newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject);
     }
 
     const state = reactive({datePickerMenu: false});
@@ -166,7 +200,11 @@ export default defineComponent({
 
       // update the image, if provided
       if (newTimelineEventImage.value && newEvent) {
-        const imageResponse = await userApi.recipes.updateTimelineEventImage(newEvent.id, newTimelineEventImage.value);
+        const imageResponse = await userApi.recipes.updateTimelineEventImage(
+          newEvent.id,
+          newTimelineEventImage.value,
+          newTimelineEventImageName.value,
+        );
         if (imageResponse.data) {
           // @ts-ignore the image response data will always match a value of TimelineEventImage
           newEvent.image = imageResponse.data.image;
@@ -176,7 +214,7 @@ export default defineComponent({
       // reset form
       newTimelineEvent.value.eventMessage = "";
       newTimelineEvent.value.timestamp = undefined;
-      newTimelineEventImage.value = undefined;
+      clearImage();
       madeThisDialog.value = false;
       domMadeThisForm.value?.reset();
 
@@ -189,9 +227,12 @@ export default defineComponent({
       madeThisDialog,
       newTimelineEvent,
       newTimelineEventImage,
+      newTimelineEventImagePreviewUrl,
       newTimelineEventTimestamp,
       createTimelineEvent,
+      clearImage,
       uploadImage,
+      updateUploadedImage,
     };
   },
 });
diff --git a/frontend/components/global/AppButtonUpload.vue b/frontend/components/global/AppButtonUpload.vue
index 77a9e7ebf65..5ca87d22c83 100644
--- a/frontend/components/global/AppButtonUpload.vue
+++ b/frontend/components/global/AppButtonUpload.vue
@@ -2,7 +2,7 @@
   <v-form ref="file">
     <input ref="uploader" class="d-none" type="file" :accept="accept" @change="onFileChanged" />
     <slot v-bind="{ isSelecting, onButtonClick }">
-      <v-btn :loading="isSelecting" :small="small" color="info" :text="textBtn" @click="onButtonClick">
+      <v-btn :loading="isSelecting" :small="small" :color="color" :text="textBtn" :disabled="disabled" @click="onButtonClick">
         <v-icon left> {{ effIcon }}</v-icon>
         {{ text ? text : defaultText }}
       </v-btn>
@@ -50,6 +50,14 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    color: {
+      type: String,
+      default: "info",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    }
   },
   setup(props, context) {
     const file = ref<File | null>(null);
diff --git a/frontend/components/global/ImageCropper.vue b/frontend/components/global/ImageCropper.vue
new file mode 100644
index 00000000000..b36e471b836
--- /dev/null
+++ b/frontend/components/global/ImageCropper.vue
@@ -0,0 +1,152 @@
+<template>
+    <v-container class="pa-0">
+        <v-row no-gutters>
+            <v-col cols="2" align-self="center">
+                <v-container class="pa-0 mx-0">
+                    <v-row v-for="(row, keyRow) in controls" :key="keyRow">
+                        <v-col
+                            v-for="(control, keyControl) in row" :key="keyControl"
+                            :cols="12 / row.length"
+                            class="py-2 mx-0"
+                            style="display: flex; align-items: center; justify-content: center;"
+                        >
+                            <v-btn icon :color="control.color" @click="control.callback()">
+                                <v-icon> {{ control.icon }} </v-icon>
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                </v-container>
+            </v-col>
+            <v-spacer />
+            <v-col cols="8" align-self="center">
+                <Cropper
+                    ref="cropper"
+                    class="cropper"
+                    :src="img"
+                    :default-size="defaultSize"
+                    :style="`height: ${cropperHeight}; width: ${cropperWidth};`"
+                />
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+
+import { Cropper } from "vue-advanced-cropper";
+import "vue-advanced-cropper/dist/style.css";
+
+export default defineComponent({
+	components: { Cropper },
+    props: {
+        img: {
+            type: String,
+            required: true,
+        },
+        cropperHeight: {
+            type: String,
+            default: undefined,
+        },
+        cropperWidth: {
+            type: String,
+            default: undefined,
+        }
+    },
+    setup(props, context) {
+        const cropper = ref<Cropper>();
+        const { $globals, $vuetify } = useContext();
+
+        interface Control {
+            color: string;
+            icon: string;
+            callback: CallableFunction;
+        }
+
+        const controls = ref<Control[][]>([
+            [
+                {
+                    color: "info",
+                    icon: $globals.icons.flipHorizontal,
+                    callback: () => flip(true, false),
+                },
+                {
+                    color: "info",
+                    icon: $globals.icons.flipVertical,
+                    callback: () => flip(false, true),
+                },
+            ],
+            [
+                {
+                    color: "info",
+                    icon: $globals.icons.rotateLeft,
+                    callback: () => rotate(-90),
+                },
+                {
+                    color: "info",
+                    icon: $globals.icons.rotateRight,
+                    callback: () => rotate(90),
+                },
+            ],
+            [
+                {
+                    color: "success",
+                    icon: $globals.icons.save,
+                    callback: () => save(),
+                },
+            ],
+        ]);
+
+        function flip(hortizontal: boolean, vertical?: boolean) {
+            if (!cropper.value) {
+                return;
+            }
+
+            cropper.value.flip(hortizontal, vertical);
+        }
+
+        function rotate(angle: number) {
+            if (!cropper.value) {
+                return;
+            }
+
+            cropper.value.rotate(angle);
+        }
+
+        function save() {
+            if (!cropper.value) {
+                return;
+            }
+
+            const { canvas } = cropper.value.getResult();
+            if (!canvas) {
+                return;
+            }
+
+            canvas.toBlob((blob) => {
+                if (blob) {
+                    context.emit("save", blob);
+                }
+            })
+        }
+
+        return {
+            cropper,
+            controls,
+            flip,
+            rotate,
+            save,
+        };
+    },
+
+	methods: {
+        // @ts-expect-error https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html
+        defaultSize({ imageSize, visibleArea }) {
+            return {
+                width: (visibleArea || imageSize).width,
+                height: (visibleArea || imageSize).height,
+            };
+        },
+    },
+});
+</script>
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index 1b2f90fc858..e41cc45c001 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -456,6 +456,7 @@
     "date-format-hint-yyyy-mm-dd": "YYYY-MM-DD format",
     "add-to-list": "Add to List",
     "add-to-plan": "Add to Plan",
+    "add-to-timeline": "Add to Timeline",
     "recipe-added-to-list": "Recipe added to list",
     "recipe-added-to-mealplan": "Recipe added to mealplan",
     "failed-to-add-recipe-to-mealplan": "Failed to add recipe to mealplan",
@@ -529,7 +530,8 @@
     "tree-view": "Tree View",
     "recipe-yield": "Recipe Yield",
     "unit": "Unit",
-    "upload-image": "Upload image"
+    "upload-image": "Upload image",
+    "remove-image": "Remove image"
   },
   "search": {
     "advanced-search": "Advanced Search",
diff --git a/frontend/lib/api/user/recipes/recipe.ts b/frontend/lib/api/user/recipes/recipe.ts
index eef097671fe..fadfb41ff3c 100644
--- a/frontend/lib/api/user/recipes/recipe.ts
+++ b/frontend/lib/api/user/recipes/recipe.ts
@@ -196,10 +196,10 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
     );
   }
 
-  async updateTimelineEventImage(eventId: string, fileObject: File) {
+  async updateTimelineEventImage(eventId: string, fileObject: Blob | File, fileName: string) {
     const formData = new FormData();
     formData.append("image", fileObject);
-    formData.append("extension", fileObject.name.split(".").pop() ?? "");
+    formData.append("extension", fileName.split(".").pop() ?? "");
 
     return await this.requests.put<UpdateImageResponse, FormData>(routes.recipesTimelineEventIdImage(eventId), formData);
   }
diff --git a/frontend/lib/icons/icons.ts b/frontend/lib/icons/icons.ts
index ffaec84d2ce..1b0d5e20cd4 100644
--- a/frontend/lib/icons/icons.ts
+++ b/frontend/lib/icons/icons.ts
@@ -135,6 +135,10 @@ import {
   mdiDockTop,
   mdiDockBottom,
   mdiCheckboxOutline,
+  mdiFlipHorizontal,
+  mdiFlipVertical,
+  mdiRotateLeft,
+  mdiRotateRight,
 } from "@mdi/js";
 
 export const icons = {
@@ -200,6 +204,8 @@ export const icons = {
   fileImage: mdiFileImage,
   filePDF: mdiFilePdfBox,
   filter: mdiFilter,
+  flipHorizontal: mdiFlipHorizontal,
+  flipVertical: mdiFlipVertical,
   folderOutline: mdiFolderOutline,
   food: mdiFood,
   formatColorFill: mdiFormatColorFill,
@@ -226,6 +232,8 @@ export const icons = {
   printerSettings: mdiPrinterPosCog,
   refreshCircle: mdiRefreshCircle,
   robot: mdiRobot,
+  rotateLeft: mdiRotateLeft,
+  rotateRight: mdiRotateRight,
   search: mdiMagnify,
   shareVariant: mdiShareVariant,
   shuffleVariant: mdiShuffleVariant,
diff --git a/frontend/package.json b/frontend/package.json
index 3746039f03e..fdb73b48e76 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,7 @@
     "isomorphic-dompurify": "^1.0.0",
     "nuxt": "^2.16.0",
     "v-jsoneditor": "^1.4.5",
+    "vue-advanced-cropper": "^1.11.6",
     "vuedraggable": "^2.24.3",
     "vuetify": "^2.6.13"
   },
diff --git a/frontend/types/components.d.ts b/frontend/types/components.d.ts
index 85725e4dd3b..8806e6da888 100644
--- a/frontend/types/components.d.ts
+++ b/frontend/types/components.d.ts
@@ -21,6 +21,7 @@ import DevDumpJson from "@/components/global/DevDumpJson.vue";
 import DocLink from "@/components/global/DocLink.vue";
 import DropZone from "@/components/global/DropZone.vue";
 import HelpIcon from "@/components/global/HelpIcon.vue";
+import ImageCropper from "@/components/global/ImageCropper.vue";
 import InputColor from "@/components/global/InputColor.vue";
 import InputLabelType from "@/components/global/InputLabelType.vue";
 import InputQuantity from "@/components/global/InputQuantity.vue";
@@ -61,6 +62,7 @@ declare module "vue" {
     DocLink: typeof DocLink;
     DropZone: typeof DropZone;
     HelpIcon: typeof HelpIcon;
+    ImageCropper: typeof ImageCropper;
     InputColor: typeof InputColor;
     InputLabelType: typeof InputLabelType;
     InputQuantity: typeof InputQuantity;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index f3447ac77d7..883d9d35891 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3735,6 +3735,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-css@^4.2.1, clean-css@^4.2.3:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
@@ -4277,6 +4282,11 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
+debounce@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -4584,6 +4594,11 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
+easy-bem@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/easy-bem/-/easy-bem-1.1.1.tgz#1bfcc10425498090bcfddc0f9c000aba91399e03"
+  integrity sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -11032,6 +11047,15 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-advanced-cropper@^1.11.6:
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/vue-advanced-cropper/-/vue-advanced-cropper-1.11.6.tgz#38f824e515747d749168e20de6d5eeea1a8d508b"
+  integrity sha512-S/3VXfnvq/8C3Js6OaxfPN709l7mrWRqI4GRklGM08glyXF147Nl74EkfyVNv7zhuNLM4stPvaQB7XUvRH9/iA==
+  dependencies:
+    classnames "^2.2.6"
+    debounce "^1.2.0"
+    easy-bem "^1.0.2"
+
 vue-client-only@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.1.0.tgz#1a67a47b8ecacfa86d75830173fffee3bf8a4ee3"

From 50a92c165cc93f35b941fac5e903287a72499cc7 Mon Sep 17 00:00:00 2001
From: Hugo van Rijswijk <git@hugovr.nl>
Date: Mon, 21 Aug 2023 17:32:09 +0200
Subject: [PATCH 03/14] feat: improve readability of ingredients list (#2502)

* feat: improve readability of notes in ingredients list

Makes the notes in the ingredients list more readable by making them slightly opaque. This creates a better visual separation between the notes and the rest of the ingredient.

* Use server display if available

* Move note to newline and make quantity more distinct

* Use safeMarkdown for shopping list

* Use component

* Wrap unit in accent color

* Update RecipeIngredientListItem to set food in bold
---
 .../Domain/Recipe/RecipeContextMenu.vue       | 14 +++--
 .../Recipe/RecipeIngredientListItem.vue       | 58 +++++++++++++++++++
 .../Domain/Recipe/RecipeIngredients.vue       | 20 +++----
 .../Domain/ShoppingList/ShoppingListItem.vue  |  5 +-
 frontend/composables/recipes/index.ts         |  2 +-
 .../recipes/use-recipe-ingredients.test.ts    | 42 ++++++++++++++
 .../recipes/use-recipe-ingredients.ts         | 24 ++++++--
 7 files changed, 140 insertions(+), 25 deletions(-)
 create mode 100644 frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
 create mode 100644 frontend/composables/recipes/use-recipe-ingredients.test.ts

diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu.vue b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
index a5016bd753d..32ad0fb1e4f 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
@@ -114,7 +114,10 @@
             color="secondary"
           />
           <v-list-item-content :key="ingredientData.ingredient.quantity">
-            <SafeMarkdown class="ma-0 pa-0 text-subtitle-1 dense-markdown" :source="ingredientData.display" />
+            <RecipeIngredientListItem
+              :ingredient="ingredientData.ingredient"
+              :disable-amount="ingredientData.disableAmount"
+              :scale="recipeScale" />
           </v-list-item-content>
         </v-list-item>
       </v-card>
@@ -168,13 +171,13 @@
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, useContext, useRouter, ref } from "@nuxtjs/composition-api";
+import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
 import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
 import RecipeDialogShare from "./RecipeDialogShare.vue";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { usePlanTypeOptions } from "~/composables/use-group-mealplan";
 import { Recipe, RecipeIngredient } from "~/lib/api/types/recipe";
-import { parseIngredientText } from "~/composables/recipes";
 import { ShoppingListSummary } from "~/lib/api/types/group";
 import { PlanEntryType } from "~/lib/api/types/meal-plan";
 import { useAxiosDownloader } from "~/composables/api/use-axios-download";
@@ -203,7 +206,8 @@ export default defineComponent({
   components: {
     RecipeDialogPrintPreferences,
     RecipeDialogShare,
-  },
+    RecipeIngredientListItem
+},
   props: {
     useItems: {
       type: Object as () => ContextMenuIncludes,
@@ -384,7 +388,7 @@ export default defineComponent({
     const shoppingLists = ref<ShoppingListSummary[]>();
     const selectedShoppingList = ref<ShoppingListSummary>();
     const recipeRef = ref<Recipe>(props.recipe);
-    const recipeIngredients = ref<{ checked: boolean; ingredient: RecipeIngredient; display: string }[]>([]);
+    const recipeIngredients = ref<{ checked: boolean; ingredient: RecipeIngredient, disableAmount: boolean }[]>([]);
 
     async function getShoppingLists() {
       const { data } = await api.shopping.lists.getAll();
@@ -411,7 +415,7 @@ export default defineComponent({
           return {
             checked: true,
             ingredient,
-            display: parseIngredientText(ingredient, recipeRef.value?.settings?.disableAmount || false, props.recipeScale),
+            disableAmount: recipeRef.value.settings?.disableAmount || false
           };
         });
       }
diff --git a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
new file mode 100644
index 00000000000..ff6c75cd3d3
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="ma-0 pa-0 text-subtitle-1 dense-markdown ingredient-item">
+    <SafeMarkdown v-if="quantity" class="d-inline" :source="quantity" />
+    <template v-if="unit">{{ unit }} </template>
+    <SafeMarkdown v-if="note && !name" class="text-bold d-inline" :source="note" />
+    <template v-else>
+      <SafeMarkdown v-if="name" class="text-bold d-inline" :source="name" />
+      <SafeMarkdown v-if="note" class="note" :source="note" />
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import { RecipeIngredient } from "~/lib/api/types/group";
+import { useParsedIngredientText } from "~/composables/recipes";
+
+export default defineComponent({
+  props: {
+    ingredient: {
+      type: Object as () => RecipeIngredient,
+      required: true,
+    },
+    disableAmount: {
+      type: Boolean,
+      default: false,
+    },
+    scale: {
+      type: Number,
+      default: 1,
+    },
+  },
+  setup(props) {
+    const parsed = useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
+    return {
+      ...parsed,
+    };
+  },
+});
+</script>
+<style>
+.ingredient-item {
+  .d-inline {
+    & > p {
+      display: inline;
+    }
+  }
+
+  .text-bold {
+    font-weight: bold;
+  }
+}
+
+.note {
+  line-height: 0.8em;
+  font-size: 0.8em;
+  opacity: 0.7;
+}
+</style>
diff --git a/frontend/components/Domain/Recipe/RecipeIngredients.vue b/frontend/components/Domain/Recipe/RecipeIngredients.vue
index 18120934d01..f69d6ab2c73 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredients.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredients.vue
@@ -11,7 +11,7 @@
         <v-list-item dense @click="toggleChecked(index)">
           <v-checkbox hide-details :value="checked[index]" class="pt-0 my-auto py-auto" color="secondary" />
           <v-list-item-content :key="ingredient.quantity">
-            <SafeMarkdown class="ma-0 pa-0 text-subtitle-1 dense-markdown" :source="ingredientDisplay[index]" />
+            <RecipeIngredientListItem :ingredient="ingredient" :disable-amount="disableAmount" :scale="scale" />
           </v-list-item-content>
         </v-list-item>
       </div>
@@ -21,12 +21,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
-// @ts-ignore vue-markdown has no types
+import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
 import { parseIngredientText } from "~/composables/recipes";
 import { RecipeIngredient } from "~/lib/api/types/recipe";
 
 export default defineComponent({
-  components: {},
+  components: { RecipeIngredientListItem },
   props: {
     value: {
       type: Array as () => RecipeIngredient[],
@@ -52,7 +52,11 @@ export default defineComponent({
     });
 
     const ingredientCopyText = computed(() => {
-      return ingredientDisplay.value.join("\n");
+      return props.value
+        .map((ingredient) => {
+          return `${parseIngredientText(ingredient, props.disableAmount, props.scale)}`;
+        })
+        .join("\n");
     });
 
     function toggleChecked(index: number) {
@@ -61,16 +65,8 @@ export default defineComponent({
       state.checked.splice(index, 1, !state.checked[index]);
     }
 
-    const ingredientDisplay = computed(() => {
-      return props.value.map((ingredient) => {
-        return `${parseIngredientText(ingredient, props.disableAmount, props.scale)}`;
-      });
-    });
-
     return {
-      ingredientDisplay,
       ...toRefs(state),
-      parseIngredientText,
       ingredientCopyText,
       toggleChecked,
     };
diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
index 0cb6e8dd3c6..b7d71cac38c 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
@@ -13,7 +13,7 @@
         >
           <template #label>
             <div :class="listItem.checked ? 'strike-through' : ''">
-              {{ listItem.display }}
+              <RecipeIngredientListItem :ingredient="listItem" :disable-amount="!(listItem.quantity && (listItem.isFood || listItem.quantity !== 1))" />
             </div>
           </template>
         </v-checkbox>
@@ -70,6 +70,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref, useContext } from "@nuxtjs/composition-api";
+import RecipeIngredientListItem from "../Recipe/RecipeIngredientListItem.vue";
 import ShoppingListItemEditor from "./ShoppingListItemEditor.vue";
 import MultiPurposeLabel from "./MultiPurposeLabel.vue";
 import { ShoppingListItemOut } from "~/lib/api/types/group";
@@ -82,7 +83,7 @@ interface actions {
 }
 
 export default defineComponent({
-  components: { ShoppingListItemEditor, MultiPurposeLabel },
+  components: { ShoppingListItemEditor, MultiPurposeLabel, RecipeIngredientListItem },
   props: {
     value: {
       type: Object as () => ShoppingListItemOut,
diff --git a/frontend/composables/recipes/index.ts b/frontend/composables/recipes/index.ts
index 2d58768320d..4578756fa34 100644
--- a/frontend/composables/recipes/index.ts
+++ b/frontend/composables/recipes/index.ts
@@ -1,6 +1,6 @@
 export { useFraction } from "./use-fraction";
 export { useRecipe } from "./use-recipe";
 export { useRecipes, recentRecipes, allRecipes, useLazyRecipes } from "./use-recipes";
-export { parseIngredientText } from "./use-recipe-ingredients";
+export { parseIngredientText, useParsedIngredientText } from "./use-recipe-ingredients";
 export { useTools } from "./use-recipe-tools";
 export { useRecipeMeta } from "./use-recipe-meta";
diff --git a/frontend/composables/recipes/use-recipe-ingredients.test.ts b/frontend/composables/recipes/use-recipe-ingredients.test.ts
new file mode 100644
index 00000000000..499e2b2db2f
--- /dev/null
+++ b/frontend/composables/recipes/use-recipe-ingredients.test.ts
@@ -0,0 +1,42 @@
+import { describe, test, expect } from "vitest";
+import { parseIngredientText } from "./use-recipe-ingredients";
+import { RecipeIngredient } from "~/lib/api/types/recipe";
+
+describe(parseIngredientText.name, () => {
+  const createRecipeIngredient = (overrides: Partial<RecipeIngredient>): RecipeIngredient => ({
+    quantity: 1,
+    food: {
+      id: "1",
+      name: "Item 1",
+    },
+    unit: {
+      id: "1",
+      name: "cup",
+    },
+    ...overrides,
+  });
+
+  test("uses ingredient note if disableAmount: true", () => {
+    const ingredient = createRecipeIngredient({ note: "foo" });
+
+    expect(parseIngredientText(ingredient, true)).toEqual("foo");
+  });
+
+  test("adds note section if note present", () => {
+    const ingredient = createRecipeIngredient({ note: "custom note" });
+
+    expect(parseIngredientText(ingredient, false)).toContain("custom note");
+  });
+
+  test("ingredient text with fraction", () => {
+    const ingredient = createRecipeIngredient({ quantity: 1.5, unit: { fraction: true, id: "1", name: "cup" } });
+
+    expect(parseIngredientText(ingredient, false)).contain("1 <sup>1</sup>").and.to.contain("<sub>2</sub>");
+  });
+
+  test("sanitizes html", () => {
+    const ingredient = createRecipeIngredient({ note: "<script>alert('foo')</script>" });
+
+    expect(parseIngredientText(ingredient, false)).not.toContain("<script>");
+  });
+});
diff --git a/frontend/composables/recipes/use-recipe-ingredients.ts b/frontend/composables/recipes/use-recipe-ingredients.ts
index ca0d93531fd..36b9bc9f082 100644
--- a/frontend/composables/recipes/use-recipe-ingredients.ts
+++ b/frontend/composables/recipes/use-recipe-ingredients.ts
@@ -10,11 +10,14 @@ function sanitizeIngredientHTML(rawHtml: string) {
   });
 }
 
-export function parseIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale = 1): string {
-  // TODO: the backend now supplies a "display" property which does this for us, so we don't need this function
-
+export function useParsedIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale = 1) {
   if (disableAmount) {
-    return ingredient.note || "";
+    return {
+      name: ingredient.note ? sanitizeIngredientHTML(ingredient.note) : undefined,
+      quantity: undefined,
+      unit: undefined,
+      note: undefined,
+    };
   }
 
   const { quantity, food, unit, note } = ingredient;
@@ -43,6 +46,17 @@ export function parseIngredientText(ingredient: RecipeIngredient, disableAmount:
     }
   }
 
-  const text = `${returnQty} ${unitDisplay || " "}  ${food?.name || " "} ${note || " "}`.replace(/ {2,}/g, " ");
+  return {
+    quantity: returnQty ? sanitizeIngredientHTML(returnQty) : undefined,
+    unit: unitDisplay ? sanitizeIngredientHTML(unitDisplay) : undefined,
+    name: food?.name ? sanitizeIngredientHTML(food.name) : undefined,
+    note: note ? sanitizeIngredientHTML(note) : undefined,
+  };
+}
+
+export function parseIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale = 1): string {
+  const { quantity, unit, name, note } = useParsedIngredientText(ingredient, disableAmount, scale);
+
+  const text = `${quantity || ""} ${unit || ""} ${name || ""} ${note || ""}`.replace(/ {2,}/g, " ").trim();
   return sanitizeIngredientHTML(text);
 }

From d6e4829e6f932bd2fa0fee548ac7d3f84b24ce7d Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 21 Aug 2023 12:18:37 -0500
Subject: [PATCH 04/14] feat: Display Shopping List Item Recipe Refs (#2501)

* added recipe ref display to shopping list items

* added backend support for recipe notes

* added recipe note to item recipe ref display

* fixed note merge bug with 3+ notes

* tweak display

* lint

* updated alembic refs

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
---
 ...403_added_recipe_note_to_shopping_list_.py |  28 ++++
 .../components/Domain/Recipe/RecipeList.vue   | 147 ++++++++++++++++--
 .../Domain/ShoppingList/ShoppingListItem.vue  |  64 +++++++-
 frontend/lib/api/types/group.ts               |   3 +
 frontend/pages/shopping-lists/_id.vue         |  15 +-
 mealie/db/models/group/shopping_list.py       |   7 +-
 mealie/schema/group/group_shopping_list.py    |   3 +
 .../services/group_services/shopping_lists.py |  22 ++-
 8 files changed, 247 insertions(+), 42 deletions(-)
 create mode 100644 alembic/versions/2023-08-14-19.30.49_1825b5225403_added_recipe_note_to_shopping_list_.py

diff --git a/alembic/versions/2023-08-14-19.30.49_1825b5225403_added_recipe_note_to_shopping_list_.py b/alembic/versions/2023-08-14-19.30.49_1825b5225403_added_recipe_note_to_shopping_list_.py
new file mode 100644
index 00000000000..b6a6489016b
--- /dev/null
+++ b/alembic/versions/2023-08-14-19.30.49_1825b5225403_added_recipe_note_to_shopping_list_.py
@@ -0,0 +1,28 @@
+"""added recipe note to shopping list recipe ref
+
+Revision ID: 1825b5225403
+Revises: 04ac51cbe9a4
+Create Date: 2023-08-14 19:30:49.103185
+
+"""
+import sqlalchemy as sa
+
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "1825b5225403"
+down_revision = "04ac51cbe9a4"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column("shopping_list_item_recipe_reference", sa.Column("recipe_note", sa.String(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column("shopping_list_item_recipe_reference", "recipe_note")
+    # ### end Alembic commands ###
diff --git a/frontend/components/Domain/Recipe/RecipeList.vue b/frontend/components/Domain/Recipe/RecipeList.vue
index 1a3ef0c5618..258714349e1 100644
--- a/frontend/components/Domain/Recipe/RecipeList.vue
+++ b/frontend/components/Domain/Recipe/RecipeList.vue
@@ -1,22 +1,28 @@
 <template>
-  <v-list>
-    <v-list-item v-for="recipe in recipes" :key="recipe.id" :to="'/recipe/' + recipe.slug">
-      <v-list-item-avatar>
-        <v-icon class="pa-1 primary" dark> {{ $globals.icons.primary }} </v-icon>
-      </v-list-item-avatar>
-      <v-list-item-content>
-        <v-list-item-title>
-          {{ recipe.name }}
-        </v-list-item-title>
-        <v-list-item-subtitle>{{ recipe.description }}</v-list-item-subtitle>
-      </v-list-item-content>
-      <slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
-    </v-list-item>
+  <v-list :class="tile ? 'd-flex flex-wrap background' : 'background'">
+    <v-sheet v-for="recipe, index in recipes" :key="recipe.id" :class="attrs.class.sheet" :style="tile ? 'width: fit-content;' : 'width: 100%;'">
+      <v-list-item :to="'/recipe/' + recipe.slug" :class="attrs.class.listItem">
+        <v-list-item-avatar :class="attrs.class.avatar">
+          <v-icon :class="attrs.class.icon" dark :small="small"> {{ $globals.icons.primary }} </v-icon>
+        </v-list-item-avatar>
+        <v-list-item-content :class="attrs.class.text">
+          <v-list-item-title :class="listItem && listItemDescriptions[index] ? '' : 'pr-4'" :style="attrs.style.text.title">
+            {{ recipe.name }}
+          </v-list-item-title>
+          <v-list-item-subtitle v-if="showDescription">{{ recipe.description }}</v-list-item-subtitle>
+          <v-list-item-subtitle v-if="listItem && listItemDescriptions[index]" :style="attrs.style.text.subTitle" v-html="listItemDescriptions[index]"/>
+        </v-list-item-content>
+        <slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
+      </v-list-item>
+    </v-sheet>
   </v-list>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
+import DOMPurify from "dompurify";
+import { useFraction } from "~/composables/recipes/use-fraction";
+import { ShoppingListItemOut } from "~/lib/api/types/group";
 import { RecipeSummary } from "~/lib/api/types/recipe";
 
 export default defineComponent({
@@ -25,9 +31,118 @@ export default defineComponent({
       type: Array as () => RecipeSummary[],
       required: true,
     },
+    listItem: {
+      type: Object as () => ShoppingListItemOut | undefined,
+      default: undefined,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    tile: {
+      type: Boolean,
+      default: false,
+    },
+    showDescription: {
+      type: Boolean,
+      default: false,
+    },
   },
-  setup() {
-    return {};
+  setup(props) {
+    const { frac } = useFraction();
+
+    const attrs = computed(() => {
+      return props.small ? {
+        class: {
+          sheet: props.tile ? "mb-1 me-1 justify-center align-center" : "mb-1 justify-center align-center",
+          listItem: "px-0",
+          avatar: "ma-0",
+          icon: "ma-0 pa-0 primary",
+          text: "pa-0",
+        },
+        style: {
+          text: {
+            title: "font-size: small;",
+            subTitle: "font-size: x-small;",
+          },
+        },
+      } : {
+        class: {
+          sheet: props.tile ? "mx-1 justify-center align-center" : "mb-1 justify-center align-center",
+          listItem: "px-4",
+          avatar: "",
+          icon: "pa-1 primary",
+          text: "",
+        },
+        style: {
+          text: {
+            title: "",
+            subTitle: "",
+          },
+        },
+      }
+    });
+
+    function sanitizeHTML(rawHtml: string) {
+      return DOMPurify.sanitize(rawHtml, {
+        USE_PROFILES: { html: true },
+        ALLOWED_TAGS: ["strong", "sup"],
+      });
+    }
+
+    const listItemDescriptions = computed<string[]>(() => {
+      if (
+          props.recipes.length === 1  // we don't need to specify details if there's only one recipe ref
+          || !props.listItem?.recipeReferences
+          || props.listItem.recipeReferences.length !== props.recipes.length
+        ) {
+        return props.recipes.map((_) => "")
+      }
+
+      const listItemDescriptions: string[] = [];
+      for (let i = 0; i < props.recipes.length; i++) {
+        const itemRef = props.listItem?.recipeReferences[i];
+        const quantity = (itemRef.recipeQuantity || 1) * (itemRef.recipeScale || 1);
+
+        let listItemDescription = ""
+        if (props.listItem.unit?.fraction) {
+            const fraction = frac(quantity, 10, true);
+            if (fraction[0] !== undefined && fraction[0] > 0) {
+              listItemDescription += fraction[0];
+            }
+
+            if (fraction[1] > 0) {
+              listItemDescription += ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>`;
+            }
+            else {
+              listItemDescription = (quantity).toString();
+            }
+          }
+          else {
+            listItemDescription = (Math.round(quantity*100)/100).toString();
+          }
+
+          if (props.listItem.unit) {
+            const unitDisplay = props.listItem.unit.useAbbreviation && props.listItem.unit.abbreviation
+              ? props.listItem.unit.abbreviation : props.listItem.unit.name;
+
+            listItemDescription += ` ${unitDisplay}`
+          }
+
+          if (itemRef.recipeNote) {
+            listItemDescription += `, ${itemRef.recipeNote}`
+          }
+
+          listItemDescriptions.push(sanitizeHTML(listItemDescription));
+      }
+
+      return listItemDescriptions;
+    });
+
+    return {
+      attrs,
+      listItemDescriptions,
+    };
   },
 });
 </script>
diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
index b7d71cac38c..8934ae1898f 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
@@ -26,11 +26,37 @@
         <div v-if="!listItem.checked" style="min-width: 72px">
           <v-menu offset-x left min-width="125px">
             <template #activator="{ on, attrs }">
+              <v-tooltip
+                v-if="recipeList && recipeList.length"
+                open-delay="200"
+                transition="slide-x-reverse-transition"
+                dense
+                right
+                content-class="text-caption"
+              >
+                <template #activator="{ on: onBtn, attrs: attrsBtn }">
+                  <v-btn small class="ml-2" icon @click="displayRecipeRefs = !displayRecipeRefs" v-bind="attrsBtn" v-on="onBtn">
+                    <v-icon>
+                      {{ $globals.icons.potSteam }}
+                    </v-icon>
+                  </v-btn>
+                </template>
+                <span>Toggle Recipes</span>
+              </v-tooltip>
+              <!-- Dummy button so the spacing is consistent when labels are enabled -->
+              <v-btn v-else small class="ml-2" icon disabled>
+              </v-btn>
+
               <v-btn small class="ml-2 handle" icon v-bind="attrs" v-on="on">
                 <v-icon>
                   {{ $globals.icons.arrowUpDown }}
                 </v-icon>
               </v-btn>
+              <v-btn small class="ml-2" icon @click="toggleEdit(true)">
+                <v-icon>
+                  {{ $globals.icons.edit }}
+                </v-icon>
+              </v-btn>
             </template>
             <v-list dense>
               <v-list-item v-for="action in contextMenu" :key="action.event" dense @click="contextHandler(action.event)">
@@ -38,14 +64,14 @@
               </v-list-item>
             </v-list>
           </v-menu>
-          <v-btn small class="ml-2" icon @click="toggleEdit(true)">
-            <v-icon>
-              {{ $globals.icons.edit }}
-            </v-icon>
-          </v-btn>
         </div>
       </v-col>
     </v-row>
+    <v-row v-if="!listItem.checked && recipeList && recipeList.length && displayRecipeRefs" no-gutters class="mb-2">
+      <v-col cols="auto" style="width: 100%;">
+        <RecipeList :recipes="recipeList" :list-item="listItem" small tile />
+      </v-col>
+    </v-row>
     <v-row v-if="listItem.checked" no-gutters class="mb-2">
       <v-col cols="auto">
         <div class="text-caption font-weight-light font-italic">
@@ -75,7 +101,8 @@ import ShoppingListItemEditor from "./ShoppingListItemEditor.vue";
 import MultiPurposeLabel from "./MultiPurposeLabel.vue";
 import { ShoppingListItemOut } from "~/lib/api/types/group";
 import { MultiPurposeLabelOut, MultiPurposeLabelSummary } from "~/lib/api/types/labels";
-import { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
+import { IngredientFood, IngredientUnit, RecipeSummary } from "~/lib/api/types/recipe";
+import RecipeList from "~/components/Domain/Recipe/RecipeList.vue";
 
 interface actions {
   text: string;
@@ -105,10 +132,15 @@ export default defineComponent({
       type: Array as () => IngredientFood[],
       required: true,
     },
+    recipes: {
+      type: Map<string, RecipeSummary>,
+      default: undefined,
+    }
   },
   setup(props, context) {
     const { i18n } = useContext();
-    const itemLabelCols = ref<string>(props.value.checked ? "auto" : props.showLabel ? "6" : "8");
+    const displayRecipeRefs = ref(false);
+    const itemLabelCols = ref<string>(props.value.checked ? "auto" : props.showLabel ? "4" : "6");
 
     const contextMenu: actions[] = [
       {
@@ -190,16 +222,34 @@ export default defineComponent({
       return undefined;
     });
 
+    const recipeList = computed<RecipeSummary[]>(() => {
+      const recipeList: RecipeSummary[] = [];
+      if (!listItem.value.recipeReferences) {
+        return recipeList;
+      }
+
+      listItem.value.recipeReferences.forEach((ref) => {
+        const recipe = props.recipes.get(ref.recipeId)
+        if (recipe) {
+          recipeList.push(recipe);
+        }
+      });
+
+      return recipeList;
+    });
+
     return {
       updatedLabels,
       save,
       contextHandler,
+      displayRecipeRefs,
       edit,
       contextMenu,
       itemLabelCols,
       listItem,
       localListItem,
       label,
+      recipeList,
       toggleEdit,
     };
   },
diff --git a/frontend/lib/api/types/group.ts b/frontend/lib/api/types/group.ts
index a0dd0517e00..42fb45a8546 100644
--- a/frontend/lib/api/types/group.ts
+++ b/frontend/lib/api/types/group.ts
@@ -359,6 +359,7 @@ export interface ShoppingListItemRecipeRefCreate {
   recipeId: string;
   recipeQuantity?: number;
   recipeScale?: number;
+  recipeNote?: string;
 }
 export interface ShoppingListItemOut {
   quantity?: number;
@@ -387,6 +388,7 @@ export interface ShoppingListItemRecipeRefOut {
   recipeId: string;
   recipeQuantity?: number;
   recipeScale?: number;
+  recipeNote?: string;
   id: string;
   shoppingListItemId: string;
 }
@@ -394,6 +396,7 @@ export interface ShoppingListItemRecipeRefUpdate {
   recipeId: string;
   recipeQuantity?: number;
   recipeScale?: number;
+  recipeNote?: string;
   id: string;
   shoppingListItemId: string;
 }
diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index f80f1ff1a9d..7452ecc8fe3 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -19,6 +19,7 @@
               :labels="allLabels || []"
               :units="allUnits || []"
               :foods="allFoods || []"
+              :recipes="recipeMap"
               @checked="saveListItem"
               @save="saveListItem"
               @delete="deleteListItem(item)"
@@ -46,6 +47,7 @@
                 :labels="allLabels || []"
                 :units="allUnits || []"
                 :foods="allFoods || []"
+                :recipes="recipeMap"
                 @checked="saveListItem"
                 @save="saveListItem"
                 @delete="deleteListItem(item)"
@@ -175,8 +177,8 @@
           {{ $tc('shopping-list.linked-recipes-count', shoppingList.recipeReferences ? shoppingList.recipeReferences.length : 0) }}
         </div>
         <v-divider class="my-4"></v-divider>
-        <RecipeList :recipes="listRecipes">
-          <template v-for="(recipe, index) in listRecipes" #[`actions-${recipe.id}`]>
+        <RecipeList :recipes="Array.from(recipeMap.values())" show-description>
+          <template v-for="(recipe, index) in recipeMap.values()" #[`actions-${recipe.id}`]>
             <v-list-item-action :key="'item-actions-decrease' + recipe.id">
               <v-btn icon @click.prevent="removeRecipeReferenceToList(recipe.id)">
                 <v-icon color="grey lighten-1">{{ $globals.icons.minus }}</v-icon>
@@ -530,9 +532,10 @@ export default defineComponent({
     // =====================================
     // Add/Remove Recipe References
 
-    const listRecipes = computed<Array<any>>(() => {
-      return shoppingList.value?.recipeReferences?.map((ref) => ref.recipe) ?? [];
-    });
+    const recipeMap = computed(() => new Map(
+      (shoppingList.value?.recipeReferences?.map((ref) => ref.recipe) ?? [])
+        .map((recipe) => [recipe.id || "", recipe]))
+    );
 
     async function addRecipeReferenceToList(recipeId: string) {
       if (!shoppingList.value || recipeReferenceLoading.value) {
@@ -741,10 +744,10 @@ export default defineComponent({
       getLabelColor,
       itemsByLabel,
       listItems,
-      listRecipes,
       loadingCounter,
       preferences,
       presentLabels,
+      recipeMap,
       removeRecipeReferenceToList,
       reorderLabelsDialog,
       toggleReorderLabelsDialog,
diff --git a/mealie/db/models/group/shopping_list.py b/mealie/db/models/group/shopping_list.py
index 01c0086bdbd..e111537063e 100644
--- a/mealie/db/models/group/shopping_list.py
+++ b/mealie/db/models/group/shopping_list.py
@@ -5,11 +5,7 @@
 from sqlalchemy.orm import Mapped, mapped_column
 
 from mealie.db.models.labels import MultiPurposeLabel
-from mealie.db.models.recipe.api_extras import (
-    ShoppingListExtras,
-    ShoppingListItemExtras,
-    api_extras,
-)
+from mealie.db.models.recipe.api_extras import ShoppingListExtras, ShoppingListItemExtras, api_extras
 
 from .._model_base import BaseMixins, SqlAlchemyBase
 from .._model_utils import GUID, auto_init
@@ -30,6 +26,7 @@ class ShoppingListItemRecipeReference(BaseMixins, SqlAlchemyBase):
     recipe: Mapped[Optional["RecipeModel"]] = orm.relationship("RecipeModel", back_populates="shopping_list_item_refs")
     recipe_quantity: Mapped[float] = mapped_column(Float, nullable=False)
     recipe_scale: Mapped[float | None] = mapped_column(Float, default=1)
+    recipe_note: Mapped[str | None] = mapped_column(String)
 
     @auto_init()
     def __init__(self, **_) -> None:
diff --git a/mealie/schema/group/group_shopping_list.py b/mealie/schema/group/group_shopping_list.py
index 82d4c27d1b1..546b47a5c1d 100644
--- a/mealie/schema/group/group_shopping_list.py
+++ b/mealie/schema/group/group_shopping_list.py
@@ -35,6 +35,9 @@ class ShoppingListItemRecipeRefCreate(MealieModel):
     recipe_scale: NoneFloat = 1
     """the number of times this recipe has been added"""
 
+    recipe_note: str | None = None
+    """the original note from the recipe"""
+
     @validator("recipe_quantity", pre=True)
     def default_none_to_zero(cls, v):
         return 0 if v is None else v
diff --git a/mealie/services/group_services/shopping_lists.py b/mealie/services/group_services/shopping_lists.py
index 99e088d2b97..1315e796ef6 100644
--- a/mealie/services/group_services/shopping_lists.py
+++ b/mealie/services/group_services/shopping_lists.py
@@ -17,11 +17,7 @@
     ShoppingListMultiPurposeLabelCreate,
     ShoppingListSave,
 )
-from mealie.schema.recipe.recipe_ingredient import (
-    IngredientFood,
-    IngredientUnit,
-    RecipeIngredient,
-)
+from mealie.schema.recipe.recipe_ingredient import IngredientFood, IngredientUnit, RecipeIngredient
 from mealie.schema.response.pagination import OrderDirection, PaginationQuery
 from mealie.schema.user.user import GroupInDB, PrivateUser
 
@@ -68,6 +64,11 @@ def merge_items(
         if to_item.note != from_item.note:
             to_item.note = " | ".join([note for note in [to_item.note, from_item.note] if note])
 
+        if from_item.note and to_item.note != from_item.note:
+            notes: set[str] = set(to_item.note.split(" | ")) if to_item.note else set()
+            notes.add(from_item.note)
+            to_item.note = " | ".join([note for note in notes if note])
+
         if to_item.extras and from_item.extras:
             to_item.extras.update(from_item.extras)
 
@@ -318,7 +319,10 @@ def get_shopping_list_items_from_recipe(
                 unit_id=unit_id,
                 recipe_references=[
                     ShoppingListItemRecipeRefCreate(
-                        recipe_id=recipe_id, recipe_quantity=ingredient.quantity, recipe_scale=scale
+                        recipe_id=recipe_id,
+                        recipe_quantity=ingredient.quantity,
+                        recipe_scale=scale,
+                        recipe_note=ingredient.note or None,
                     )
                 ],
             )
@@ -336,8 +340,10 @@ def get_shopping_list_items_from_recipe(
                     existing_item.recipe_references[0].recipe_quantity += ingredient.quantity  # type: ignore
 
                 # merge notes
-                if existing_item.note != new_item.note:
-                    existing_item.note = " | ".join([note for note in [existing_item.note, new_item.note] if note])
+                if new_item.note and existing_item.note != new_item.note:
+                    notes: set[str] = set(existing_item.note.split(" | ")) if existing_item.note else set()
+                    notes.add(new_item.note)
+                    existing_item.note = " | ".join([note for note in notes if note])
 
                 merged = True
                 break

From 1e693fdca64d51116e8afe3ae8d1f98d3381c150 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 21 Aug 2023 12:18:55 -0500
Subject: [PATCH 05/14] fix: refresh tag store when new tags are imported
 (#2504)

---
 frontend/pages/recipe/create/url.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/recipe/create/url.vue b/frontend/pages/recipe/create/url.vue
index 1040f3663f4..fb3f53bbfb3 100644
--- a/frontend/pages/recipe/create/url.vue
+++ b/frontend/pages/recipe/create/url.vue
@@ -74,6 +74,7 @@ import {
 } from "@nuxtjs/composition-api";
 import { AxiosResponse } from "axios";
 import { useUserApi } from "~/composables/api";
+import { useTagStore } from "~/composables/store/use-tag-store";
 import { validators } from "~/composables/use-validators";
 import { VForm } from "~/types/vuetify";
 
@@ -87,13 +88,17 @@ export default defineComponent({
     const api = useUserApi();
     const route = useRoute();
     const router = useRouter();
+    const tags = useTagStore();
 
-    function handleResponse(response: AxiosResponse<string> | null, edit = false) {
+    function handleResponse(response: AxiosResponse<string> | null, edit = false, refreshTags = false) {
       if (response?.status !== 201) {
         state.error = true;
         state.loading = false;
         return;
       }
+      if (refreshTags) {
+        tags.actions.refresh();
+      }
       router.push(`/recipe/${response.data}?edit=${edit.toString()}`);
     }
 
@@ -150,7 +155,7 @@ export default defineComponent({
       }
       state.loading = true;
       const { response } = await api.recipes.createOneByUrl(url, importKeywordsAsTags);
-      handleResponse(response, stayInEditMode);
+      handleResponse(response, stayInEditMode, importKeywordsAsTags);
     }
 
     return {

From 99e7717fec3495cf1e6c8476b8a1915a3d446233 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ars=C3=A8ne=20Reymond?=
 <66876397+p0lycarpio@users.noreply.github.com>
Date: Mon, 21 Aug 2023 20:41:18 +0200
Subject: [PATCH 06/14] UI/UX improvements (#2423)

* disable autofocus and hide keyboard on enter

* improve a11y

* fix non-translated string

* improve recipeTimeline UI

* format

* fixes
---
 .../Domain/Recipe/RecipeCardMobile.vue        | 25 ++++--
 .../Domain/Recipe/RecipeContextMenu.vue       |  2 +-
 .../Domain/Recipe/RecipePage/RecipePage.vue   |  2 +-
 .../Domain/Recipe/RecipeTimeline.vue          |  7 +-
 .../Recipe/RecipeTimelineContextMenu.vue      |  6 +-
 .../Domain/Recipe/RecipeTimelineItem.vue      | 77 +++++++++++--------
 frontend/components/Layout/AppHeader.vue      |  4 +-
 frontend/lang/messages/en-US.json             |  3 +-
 frontend/pages/index.vue                      | 13 +++-
 frontend/pages/login.vue                      |  9 ++-
 10 files changed, 91 insertions(+), 57 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeCardMobile.vue b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
index c729b874c87..7cfcb91970a 100644
--- a/frontend/components/Domain/Recipe/RecipeCardMobile.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
@@ -2,24 +2,24 @@
   <v-expand-transition>
     <v-card
       :ripple="false"
-      class="mx-auto"
+      :class="isFlat ? 'mx-auto flat' : 'mx-auto'"
       hover
       :to="$listeners.selected ? undefined : `/recipe/${slug}`"
       @click="$emit('selected')"
     >
-      <v-img v-if="vertical">
+      <v-img v-if="vertical" class="rounded-sm">
         <RecipeCardImage
           :icon-size="100"
-          :height="75"
+          :height="150"
           :slug="slug"
           :recipe-id="recipeId"
           small
           :image-version="image"
         />
       </v-img>
-      <v-list-item three-line>
+      <v-list-item three-line class="px-0">
         <slot v-if="!vertical" name="avatar">
-          <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0 ml-n4">
+          <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0">
             <RecipeCardImage
               :icon-size="100"
               :height="125"
@@ -30,8 +30,8 @@
             />
           </v-list-item-avatar>
         </slot>
-        <v-list-item-content>
-          <v-list-item-title class="mb-1">{{ name }} </v-list-item-title>
+        <v-list-item-content class="py-0">
+          <v-list-item-title class="mt-3 mb-1">{{ name }} </v-list-item-title>
           <v-list-item-subtitle>
             <SafeMarkdown :source="description" />
           </v-list-item-subtitle>
@@ -120,7 +120,11 @@ export default defineComponent({
     vertical: {
       type: Boolean,
       default: false,
-    }
+    },
+    isFlat: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
     const { $auth } = useContext();
@@ -162,4 +166,9 @@ export default defineComponent({
 .text-top {
   align-self: start !important;
 }
+
+.flat {
+  box-shadow: none!important;
+  background-color: transparent;
+}
 </style>
diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu.vue b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
index 32ad0fb1e4f..9134e893470 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
@@ -149,7 +149,7 @@
       :nudge-top="menuTop ? '5' : '0'"
       allow-overflow
       close-delay="125"
-      open-on-hover
+      :open-on-hover="$vuetify.breakpoint.mdAndUp"
       content-class="d-print-none"
     >
       <template #activator="{ on, attrs }">
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index 6e297a01d1e..2d0fc87b7dc 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -62,7 +62,7 @@
       class="d-print-none d-flex px-2"
       :class="$vuetify.breakpoint.smAndDown ? 'justify-center' : 'justify-end'"
     >
-      <v-switch v-model="wakeLock" small label="Keep Screen Awake" />
+      <v-switch v-model="wakeLock" small :label="$t('recipe.screen-awake')" />
     </div>
 
     <RecipePageComments
diff --git a/frontend/components/Domain/Recipe/RecipeTimeline.vue b/frontend/components/Domain/Recipe/RecipeTimeline.vue
index 9089d0f0f1f..7352946f8a6 100644
--- a/frontend/components/Domain/Recipe/RecipeTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimeline.vue
@@ -8,8 +8,7 @@
         </v-btn>
       </v-col>
     </v-row>
-    <v-divider v-if="timelineEvents.length" />
-    <v-card
+    <div
       v-if="timelineEvents.length"
       id="timeline-container"
       height="fit-content"
@@ -27,13 +26,13 @@
           @delete="deleteTimelineEvent(index)"
         />
       </v-timeline>
-    </v-card>
+    </div>
     <v-card v-else-if="!loading">
       <v-card-title class="justify-center pa-9">
         {{ $t("recipe.timeline-is-empty") }}
       </v-card-title>
     </v-card>
-    <div v-if="loading" class="pb-3">
+    <div v-if="loading" class="mb-3">
       <AppLoader :loading="loading" :waiting-text="$tc('general.loading-events')" />
     </div>
   </div>
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue b/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
index 57ae9d9d8c2..84c9dabd19d 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
@@ -41,7 +41,7 @@
       :nudge-top="menuTop ? '5' : '0'"
       allow-overflow
       close-delay="125"
-      open-on-hover
+      :open-on-hover="!useMobileFormat"
       content-class="d-print-none"
     >
       <template #activator="{ on, attrs }">
@@ -121,6 +121,10 @@ export default defineComponent({
       type: String,
       default: null,
     },
+    useMobileFormat: {
+      type: Boolean,
+      default: true,
+    }
   },
   setup(props, context) {
     const domEditEventForm = ref<VForm>();
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
index 778f52309cc..507ecb8774d 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
@@ -11,29 +11,33 @@
         {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
       </v-chip>
     </template>
-    <v-card>
-      <v-sheet>
-        <v-card-title>
-          <v-row>
+      <v-card
+        hover
+        :to="$listeners.selected ? undefined : `/recipe/${recipe.slug}`"
+        @click="$emit('selected')">
+        <v-sheet>
+        <v-card-title class="bg-primary">
+            <v-row>
             <v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'" :class="attrs.avatar.class">
-              <UserAvatar :user-id="event.userId" :size="attrs.avatar.size" />
+                <UserAvatar :user-id="event.userId" :size="attrs.avatar.size" />
             </v-col>
             <v-col v-if="useMobileFormat" align-self="center" class="pr-0">
-              <v-chip label>
+                <v-chip label>
                 <v-icon> {{ $globals.icons.calendar }} </v-icon>
                 {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
-              </v-chip>
+                </v-chip>
             </v-col>
             <v-col v-else cols="9" style="margin: auto; text-align: center;">
-              {{ event.subject }}
+                {{ event.subject }}
             </v-col>
             <v-spacer />
             <v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
-              <RecipeTimelineContextMenu
+                <RecipeTimelineContextMenu
                 v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
                 :menu-top="false"
                 :event="event"
                 :menu-icon="$globals.icons.dotsVertical"
+                :use-mobile-format="useMobileFormat"
                 fab
                 color="transparent"
                 :elevation="0"
@@ -44,13 +48,13 @@
                 }"
                 @update="$emit('update')"
                 @delete="$emit('delete')"
-              />
+                />
             </v-col>
-          </v-row>
+            </v-row>
         </v-card-title>
-        <v-sheet v-if="showRecipeCards && recipe">
-          <v-row class="pt-3 pb-7 mx-3" style="max-width: 100%;">
-            <v-col align-self="center" class="pa-0">
+        <v-card-text v-if="showRecipeCards && recipe">
+            <v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%;">
+              <v-col align-self="center" class="pa-0">
               <RecipeCardMobile
                 :vertical="useMobileFormat"
                 :name="recipe.name"
@@ -59,32 +63,33 @@
                 :rating="recipe.rating"
                 :image="recipe.image"
                 :recipe-id="recipe.id"
+                :is-flat="true"
               />
             </v-col>
-          </v-row>
+            </v-row>
+        </v-card-text>
         </v-sheet>
-        <v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage || (eventImageUrl && !hideImage))" />
-        <v-card-text>
-          <v-row>
+        <v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)" />
+        <v-card-text v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)">
+            <v-row>
             <v-col>
-              <strong v-if="useMobileFormat">{{ event.subject }}</strong>
-              <v-img
-                v-if="eventImageUrl"
-                :src="eventImageUrl"
-                min-height="50"
-                :height="hideImage ? undefined : 'auto'"
-                :max-height="attrs.image.maxHeight"
-                contain
-                :class=attrs.image.class
-                @error="hideImage = true"
-              />
-              <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
+                <strong v-if="useMobileFormat">{{ event.subject }}</strong>
+                <v-img
+                  v-if="eventImageUrl"
+                  :src="eventImageUrl"
+                  min-height="50"
+                  :height="hideImage ? undefined : 'auto'"
+                  :max-height="attrs.image.maxHeight"
+                  contain
+                  :class=attrs.image.class
+                  @error="hideImage = true"
+                />
+                <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
                 {{ event.eventMessage }}
-              </div>
+                </div>
             </v-col>
-          </v-row>
+            </v-row>
         </v-card-text>
-      </v-sheet>
     </v-card>
   </v-timeline-item>
 </template>
@@ -191,3 +196,9 @@ export default defineComponent({
   },
 });
 </script>
+
+<style>
+.v-card::after {
+  display: none;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/Layout/AppHeader.vue b/frontend/components/Layout/AppHeader.vue
index 8594548b689..1f5feb93786 100644
--- a/frontend/components/Layout/AppHeader.vue
+++ b/frontend/components/Layout/AppHeader.vue
@@ -26,7 +26,7 @@
           dense
           flat
           :prepend-inner-icon="$globals.icons.search"
-          background-color="primary lighten-1"
+          background-color="primary darken-1"
           color="white"
           :placeholder="$t('search.search-hint')"
         >
@@ -35,7 +35,7 @@
       <v-btn v-else icon @click="activateSearch">
         <v-icon> {{ $globals.icons.search }}</v-icon>
       </v-btn>
-      <v-btn v-if="$auth.loggedIn" text @click="$auth.logout()">
+      <v-btn v-if="$auth.loggedIn" :text="$vuetify.breakpoint.smAndUp" :icon="$vuetify.breakpoint.xs" @click="$auth.logout()">
         <v-icon :left="$vuetify.breakpoint.smAndUp">{{ $globals.icons.logout }}</v-icon>
         {{ $vuetify.breakpoint.smAndUp ? $t("user.logout") : "" }}
       </v-btn>
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index e41cc45c001..77fa41a18c1 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -531,6 +531,7 @@
     "recipe-yield": "Recipe Yield",
     "unit": "Unit",
     "upload-image": "Upload image",
+    "screen-awake": "Keep Screen Awake",
     "remove-image": "Remove image"
   },
   "search": {
@@ -1114,4 +1115,4 @@
     "cookbook-name": "Cookbook Name",
     "cookbook-with-name": "Cookbook {0}"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index a306e852464..78bae22a4bd 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -4,14 +4,15 @@
       <form class="search-box pa-2" @submit.prevent="search">
         <div class="d-flex justify-center my-2">
           <v-text-field
+            ref="input"
             v-model="state.search"
             outlined
-            autofocus
             hide-details
             clearable
             color="primary"
             :placeholder="$tc('search.search-placeholder')"
             :prepend-inner-icon="$globals.icons.search"
+            @keyup.enter="hideKeyboard"
           />
         </div>
         <div class="search-row">
@@ -132,7 +133,7 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, useRouter, onMounted, useContext, computed } from "@nuxtjs/composition-api";
+import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref } from "@nuxtjs/composition-api";
 import { watchDebounced } from "@vueuse/shared";
 import SearchFilter from "~/components/Domain/SearchFilter.vue";
 import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
@@ -205,6 +206,12 @@ export default defineComponent({
       return array.map((item) => item.id);
     }
 
+    function hideKeyboard() {
+      input.value.blur()
+    }
+
+    const input: Ref<any> = ref(null);
+
     async function search() {
       await router.push({
         query: {
@@ -432,6 +439,8 @@ export default defineComponent({
 
       sortable,
       toggleOrderDirection,
+      hideKeyboard,
+      input,
 
       selectedCategories,
       selectedFoods,
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 90e4fd37dce..45d7648ee5a 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -2,7 +2,7 @@
   <v-container
     fill-height
     fluid
-    class="d-flex justify-center align-center"
+    class="d-flex justify-center align-center flex-column"
     :class="{
       'bg-off-white': !$vuetify.theme.dark && !isDark,
     }"
@@ -23,7 +23,7 @@
         </v-avatar>
       </div>
 
-      <v-card-title class="headline justify-center pb-1"> {{ $t('user.sign-in') }} </v-card-title>
+      <v-card-title class="headline justify-center pb-3"> {{ $t('user.sign-in') }} </v-card-title>
       <v-card-text>
         <v-form @submit.prevent="authenticate">
           <v-text-field
@@ -68,7 +68,7 @@
 
       <v-divider></v-divider>
 
-      <v-card-text class="d-flex justify-center">
+      <v-card-text class="d-flex justify-center flex-column flex-sm-row">
         <div
           v-for="link in [
             {
@@ -88,6 +88,7 @@
             },
           ]"
           :key="link.text"
+          class="text-center"
         >
           <v-btn text :href="link.href" target="_blank">
             <v-icon left>
@@ -99,7 +100,7 @@
       </v-card-text>
     </v-card>
 
-    <v-btn absolute bottom center @click="toggleDark">
+    <v-btn bottom center class="mt-5" @click="toggleDark">
       <v-icon left>
         {{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
       </v-icon>

From c9cc7a93c8a746615477d06b4e658e46b100624c Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 21 Aug 2023 15:39:23 -0500
Subject: [PATCH 07/14] fix: Tools Shouldn't Be Unique Across Groups (#2505)

* fixed type/abc errors in tests

* fixed false positive multitentant tests

* fix tools not allowing unique slugs across groups

* fixed alembic refs

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
---
 ...b7355_remove_tool_name_and_slug_unique_.py | 32 +++++++++++++++++++
 mealie/db/models/recipe/tool.py               |  4 +--
 tests/multitenant_tests/case_abc.py           | 11 ++++---
 tests/multitenant_tests/case_categories.py    |  6 ++--
 tests/multitenant_tests/case_foods.py         |  6 ++--
 tests/multitenant_tests/case_tags.py          |  6 ++--
 tests/multitenant_tests/case_tools.py         |  6 ++--
 tests/multitenant_tests/case_units.py         |  6 ++--
 .../test_multitenant_cases.py                 | 14 ++++----
 9 files changed, 62 insertions(+), 29 deletions(-)
 create mode 100644 alembic/versions/2023-08-15-16.25.07_bcfdad6b7355_remove_tool_name_and_slug_unique_.py

diff --git a/alembic/versions/2023-08-15-16.25.07_bcfdad6b7355_remove_tool_name_and_slug_unique_.py b/alembic/versions/2023-08-15-16.25.07_bcfdad6b7355_remove_tool_name_and_slug_unique_.py
new file mode 100644
index 00000000000..c61e0b98943
--- /dev/null
+++ b/alembic/versions/2023-08-15-16.25.07_bcfdad6b7355_remove_tool_name_and_slug_unique_.py
@@ -0,0 +1,32 @@
+"""remove tool name and slug unique contraints
+
+Revision ID: bcfdad6b7355
+Revises: 1825b5225403
+Create Date: 2023-08-15 16:25:07.058929
+
+"""
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "bcfdad6b7355"
+down_revision = "1825b5225403"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_index("ix_tools_name", table_name="tools")
+    op.create_index(op.f("ix_tools_name"), "tools", ["name"], unique=False)
+    op.drop_index("ix_tools_slug", table_name="tools")
+    op.create_index(op.f("ix_tools_slug"), "tools", ["slug"], unique=False)
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_index(op.f("ix_tools_slug"), table_name="tools")
+    op.create_index("ix_tools_slug", "tools", ["slug"], unique=True)
+    op.drop_index(op.f("ix_tools_name"), table_name="tools")
+    op.create_index("ix_tools_name", "tools", ["name"], unique=True)
+    # ### end Alembic commands ###
diff --git a/mealie/db/models/recipe/tool.py b/mealie/db/models/recipe/tool.py
index 06df17ff7b2..e0a00acfa01 100644
--- a/mealie/db/models/recipe/tool.py
+++ b/mealie/db/models/recipe/tool.py
@@ -36,8 +36,8 @@ class Tool(SqlAlchemyBase, BaseMixins):
     group_id: Mapped[GUID] = mapped_column(GUID, ForeignKey("groups.id"), nullable=False, index=True)
     group: Mapped["Group"] = orm.relationship("Group", back_populates="tools", foreign_keys=[group_id])
 
-    name: Mapped[str] = mapped_column(String, index=True, unique=True, nullable=False)
-    slug: Mapped[str] = mapped_column(String, index=True, unique=True, nullable=False)
+    name: Mapped[str] = mapped_column(String, index=True, nullable=False)
+    slug: Mapped[str] = mapped_column(String, index=True, nullable=False)
     on_hand: Mapped[bool | None] = mapped_column(Boolean, default=False)
     recipes: Mapped[list["RecipeModel"]] = orm.relationship(
         "RecipeModel", secondary=recipes_to_tools, back_populates="tools"
diff --git a/tests/multitenant_tests/case_abc.py b/tests/multitenant_tests/case_abc.py
index e27ec621395..ac6c019214b 100644
--- a/tests/multitenant_tests/case_abc.py
+++ b/tests/multitenant_tests/case_abc.py
@@ -10,17 +10,18 @@ class ABCMultiTenantTestCase(ABC):
     def __init__(self, database: AllRepositories, client: TestClient) -> None:
         self.database = database
         self.client = client
-        self.items = []
+        self.items: list = []
 
     @abstractmethod
-    def seed_action(repos: AllRepositories, group_id: str) -> set[int] | set[str]:
+    def seed_action(self, group_id: str) -> set[int] | set[str]:
         ...
 
-    def seed_multi(self, group1_id: str, group2_id: str) -> tuple[set[int], set[int]]:
-        pass
+    @abstractmethod
+    def seed_multi(self, group1_id: str, group2_id: str) -> tuple[set[str], set[str]]:
+        ...
 
     @abstractmethod
-    def get_all(token: str) -> Response:
+    def get_all(self, token: str) -> Response:
         ...
 
     @abstractmethod
diff --git a/tests/multitenant_tests/case_categories.py b/tests/multitenant_tests/case_categories.py
index bf3c050e0dc..5d87ecb366f 100644
--- a/tests/multitenant_tests/case_categories.py
+++ b/tests/multitenant_tests/case_categories.py
@@ -29,9 +29,9 @@ def seed_multi(self, group1_id: str, group2_id: str) -> tuple[set[str], set[str]
         g1_item_ids: set[str] = set()
         g2_item_ids: set[str] = set()
 
-        for group_id, item_ids in [(group1_id, g1_item_ids), (group2_id, g2_item_ids)]:
-            for _ in range(10):
-                name = utils.random_string(10)
+        for _ in range(10):
+            name = utils.random_string(10)
+            for group_id, item_ids in [(group1_id, g1_item_ids), (group2_id, g2_item_ids)]:
                 category = self.database.categories.create(
                     CategorySave(
                         group_id=group_id,
diff --git a/tests/multitenant_tests/case_foods.py b/tests/multitenant_tests/case_foods.py
index d8066897c44..c206240f83b 100644
--- a/tests/multitenant_tests/case_foods.py
+++ b/tests/multitenant_tests/case_foods.py
@@ -28,9 +28,9 @@ def seed_multi(self, group1_id: str, group2_id: str) -> tuple[set[str], set[str]
         g1_item_ids: set[str] = set()
         g2_item_ids: set[str] = set()
 
-        for group_id, item_ids in [(group1_id, g1_item_ids), (group2_id, g2_item_ids)]:
-            for _ in range(10):
-                name = utils.random_string(10)
+        for _ in range(10):
+            name = utils.random_string(10)
+            for group_id, item_ids in [(group1_id, g1_item_ids), (group2_id, g2_item_ids)]:
                 food = self.database.ingredient_foods.create(
                     SaveIngredientFood(
                         group_id=group_id,
diff --git a/tests/multitenant_tests/case_tags.py b/tests/multitenant_tests/case_tags.py
index 5093da133cd..235b533a87c 100644
--- a/tests/multitenant_tests/case_tags.py
+++ b/tests/multitenant_tests/case_tags.py
@@ -29,9 +29,9 @@ def seed_multi(self, group1_id: str, group2_id: str) -> tuple[set[str], set[str]
         g1_item_ids: set[str] = set()
         g2_item_ids: set[str] = set()
 
-        for group_id, item_ids in [(group1_id, g1_item_ids), (group2_id, g2_item_ids)]:
-            for _ in range(10):
-                name = utils.random_string(10)
+        for _ in range(10):
+            name = utils.random_string(10)
+            for group_id, item_ids in [(group1_id, g1_item_ids), (group2_id, g2_item_ids)]:
                 category = self.database.tags.create(
                     TagSave(
                         group_id=group_id,
diff --git a/tests/multitenant_tests/case_tools.py b/tests/multitenant_tests/case_tools.py
index c699eed88f7..1187b744fb8 100644
--- a/tests/multitenant_tests/case_tools.py
+++ b/tests/multitenant_tests/case_tools.py
@@ -29,9 +29,9 @@ def seed_multi(self, group1_id: str, group2_id: str) -> tuple[set[str], set[str]
         g1_item_ids: set[str] = set()
         g2_item_ids: set[str] = set()
 
-        for group_id, item_ids in [(group1_id, g1_item_ids), (group2_id, g2_item_ids)]:
-            for _ in range(10):
-                name = utils.random_string(10)
+        for _ in range(10):
+            name = utils.random_string(10)
+            for group_id, item_ids in [(group1_id, g1_item_ids), (group2_id, g2_item_ids)]:
                 tool = self.database.tools.create(
                     RecipeToolSave(
                         group_id=group_id,
diff --git a/tests/multitenant_tests/case_units.py b/tests/multitenant_tests/case_units.py
index 76563a4a69c..a7269e365e5 100644
--- a/tests/multitenant_tests/case_units.py
+++ b/tests/multitenant_tests/case_units.py
@@ -28,9 +28,9 @@ def seed_multi(self, group1_id: str, group2_id: str) -> tuple[set[str], set[str]
         g1_item_ids: set[str] = set()
         g2_item_ids: set[str] = set()
 
-        for group_id, item_ids in [(group1_id, g1_item_ids), (group2_id, g2_item_ids)]:
-            for _ in range(10):
-                name = utils.random_string(10)
+        for _ in range(10):
+            name = utils.random_string(10)
+            for group_id, item_ids in [(group1_id, g1_item_ids), (group2_id, g2_item_ids)]:
                 food = self.database.ingredient_units.create(
                     SaveIngredientUnit(
                         group_id=group_id,
diff --git a/tests/multitenant_tests/test_multitenant_cases.py b/tests/multitenant_tests/test_multitenant_cases.py
index 01bb6278ce1..08879775616 100644
--- a/tests/multitenant_tests/test_multitenant_cases.py
+++ b/tests/multitenant_tests/test_multitenant_cases.py
@@ -19,12 +19,12 @@
 ]
 
 
-@pytest.mark.parametrize("test_case", all_cases)
+@pytest.mark.parametrize("test_case_type", all_cases)
 def test_multitenant_cases_get_all(
     api_client: TestClient,
     multitenants: MultiTenant,
     database: AllRepositories,
-    test_case: type[ABCMultiTenantTestCase],
+    test_case_type: type[ABCMultiTenantTestCase],
 ):
     """
     This test will run all the multitenant test cases and validate that they return only the data for their group.
@@ -34,11 +34,11 @@ def test_multitenant_cases_get_all(
     user1 = multitenants.user_one
     user2 = multitenants.user_two
 
-    test_case = test_case(database, api_client)
+    test_case = test_case_type(database, api_client)
 
     with test_case:
         expected_ids = test_case.seed_action(user1.group_id)
-        expected_results = [
+        expected_results: list = [
             (user1.token, expected_ids),
             (user2.token, []),
         ]
@@ -56,12 +56,12 @@ def test_multitenant_cases_get_all(
                     assert item["id"] in item_ids
 
 
-@pytest.mark.parametrize("test_case", all_cases)
+@pytest.mark.parametrize("test_case_type", all_cases)
 def test_multitenant_cases_same_named_resources(
     api_client: TestClient,
     multitenants: MultiTenant,
     database: AllRepositories,
-    test_case: type[ABCMultiTenantTestCase],
+    test_case_type: type[ABCMultiTenantTestCase],
 ):
     """
     This test is used to ensure that the same resource can be created with the same values in different tenants.
@@ -71,7 +71,7 @@ def test_multitenant_cases_same_named_resources(
     user1 = multitenants.user_one
     user2 = multitenants.user_two
 
-    test_case = test_case(database, api_client)
+    test_case = test_case_type(database, api_client)
 
     with test_case:
         expected_ids, expected_ids2 = test_case.seed_multi(user1.group_id, user2.group_id)

From ae502c56527130392bb4758c0fa257cc868b9845 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 21 Aug 2023 20:30:31 -0500
Subject: [PATCH 08/14] added missing recipe list import (#2516)

---
 frontend/components/Domain/ShoppingList/ShoppingListItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
index 8934ae1898f..973d7160dd0 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
@@ -110,7 +110,7 @@ interface actions {
 }
 
 export default defineComponent({
-  components: { ShoppingListItemEditor, MultiPurposeLabel, RecipeIngredientListItem },
+  components: { ShoppingListItemEditor, MultiPurposeLabel, RecipeList, RecipeIngredientListItem },
   props: {
     value: {
       type: Object as () => ShoppingListItemOut,

From 5213a61d9b40b8595d9a0b0ea3d14df7242a0d08 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 22 Aug 2023 17:03:24 -0500
Subject: [PATCH 09/14] fix: logic for disableAmount in shopping list items
 (#2518)

---
 frontend/components/Domain/ShoppingList/ShoppingListItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
index 973d7160dd0..ae618021ded 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
@@ -13,7 +13,7 @@
         >
           <template #label>
             <div :class="listItem.checked ? 'strike-through' : ''">
-              <RecipeIngredientListItem :ingredient="listItem" :disable-amount="!(listItem.quantity && (listItem.isFood || listItem.quantity !== 1))" />
+              <RecipeIngredientListItem :ingredient="listItem" :disable-amount="!(listItem.isFood || listItem.quantity !== 1)" />
             </div>
           </template>
         </v-checkbox>

From 5c5432304f97b38f96ecbf0e3f1f57e74c273fe9 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Wed, 23 Aug 2023 12:30:59 -0500
Subject: [PATCH 10/14] fix: recipe timeline UI glitches (#2519)

* fix invalid undefined prop

* fixed weird rendering

* made items pop more against background

* fixed invalid v-if

* fixed indentation
---
 .../Domain/Recipe/RecipeCardMobile.vue        |   2 +-
 .../Domain/Recipe/RecipeTimeline.vue          |   4 +-
 .../Domain/Recipe/RecipeTimelineBadge.vue     |   2 +-
 .../Domain/Recipe/RecipeTimelineItem.vue      | 128 +++++++++---------
 4 files changed, 69 insertions(+), 67 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeCardMobile.vue b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
index 7cfcb91970a..507a1969603 100644
--- a/frontend/components/Domain/Recipe/RecipeCardMobile.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
@@ -17,7 +17,7 @@
           :image-version="image"
         />
       </v-img>
-      <v-list-item three-line class="px-0">
+      <v-list-item three-line :class="vertical ? 'px-2' : 'px-0'">
         <slot v-if="!vertical" name="avatar">
           <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0">
             <RecipeCardImage
diff --git a/frontend/components/Domain/Recipe/RecipeTimeline.vue b/frontend/components/Domain/Recipe/RecipeTimeline.vue
index 7352946f8a6..e7c03c963eb 100644
--- a/frontend/components/Domain/Recipe/RecipeTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="maxHeight ? `max-height: ${maxHeight}; overflow-y: auto;` : ''" @scroll="onScroll($event)">
+  <div style="height: 100%;">
     <v-row class="my-0 mx-7">
       <v-spacer />
       <v-col class="text-right">
@@ -8,12 +8,14 @@
         </v-btn>
       </v-col>
     </v-row>
+    <v-divider class="mx-2" />
     <div
       v-if="timelineEvents.length"
       id="timeline-container"
       height="fit-content"
       width="100%"
       class="px-1"
+      :style="maxHeight ? `max-height: ${maxHeight}; overflow-y: auto;` : ''"
     >
       <v-timeline :dense="$vuetify.breakpoint.smAndDown" class="timeline">
         <RecipeTimelineItem
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue b/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
index 9fd03d0eb83..a5c31aec6db 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
@@ -15,7 +15,7 @@
         </v-icon>
       </v-btn>
       <BaseDialog v-model="showTimeline" :title="timelineAttrs.title" :icon="$globals.icons.timelineText" width="70%">
-        <RecipeTimeline v-model="showTimeline" :query-filter="timelineAttrs.queryFilter" max-height="70vh" />
+        <RecipeTimeline v-model="showTimeline" :query-filter="timelineAttrs.queryFilter" max-height="60vh" />
       </BaseDialog>
 
     </template>
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
index 507ecb8774d..9c6a820d1d7 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
@@ -11,28 +11,29 @@
         {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
       </v-chip>
     </template>
-      <v-card
-        hover
-        :to="$listeners.selected ? undefined : `/recipe/${recipe.slug}`"
-        @click="$emit('selected')">
-        <v-sheet>
-        <v-card-title class="bg-primary">
-            <v-row>
-            <v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'" :class="attrs.avatar.class">
-                <UserAvatar :user-id="event.userId" :size="attrs.avatar.size" />
-            </v-col>
-            <v-col v-if="useMobileFormat" align-self="center" class="pr-0">
-                <v-chip label>
-                <v-icon> {{ $globals.icons.calendar }} </v-icon>
-                {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
-                </v-chip>
-            </v-col>
-            <v-col v-else cols="9" style="margin: auto; text-align: center;">
-                {{ event.subject }}
-            </v-col>
-            <v-spacer />
-            <v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
-                <RecipeTimelineContextMenu
+    <v-card
+      hover
+      :to="$listeners.selected || !recipe ? undefined : `/recipe/${recipe.slug}`"
+      @click="$emit('selected')"
+      class="elevation-12"
+    >
+      <v-card-title class="background">
+        <v-row>
+          <v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'" :class="attrs.avatar.class">
+              <UserAvatar :user-id="event.userId" :size="attrs.avatar.size" />
+          </v-col>
+          <v-col v-if="useMobileFormat" align-self="center" class="pr-0">
+              <v-chip label>
+              <v-icon> {{ $globals.icons.calendar }} </v-icon>
+              {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
+              </v-chip>
+          </v-col>
+          <v-col v-else cols="9" style="margin: auto; text-align: center;">
+              {{ event.subject }}
+          </v-col>
+          <v-spacer />
+          <v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
+              <RecipeTimelineContextMenu
                 v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
                 :menu-top="false"
                 :event="event"
@@ -48,48 +49,47 @@
                 }"
                 @update="$emit('update')"
                 @delete="$emit('delete')"
-                />
-            </v-col>
-            </v-row>
-        </v-card-title>
-        <v-card-text v-if="showRecipeCards && recipe">
-            <v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%;">
-              <v-col align-self="center" class="pa-0">
-              <RecipeCardMobile
-                :vertical="useMobileFormat"
-                :name="recipe.name"
-                :slug="recipe.slug"
-                :description="recipe.description"
-                :rating="recipe.rating"
-                :image="recipe.image"
-                :recipe-id="recipe.id"
-                :is-flat="true"
               />
-            </v-col>
-            </v-row>
-        </v-card-text>
-        </v-sheet>
-        <v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)" />
-        <v-card-text v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)">
-            <v-row>
-            <v-col>
-                <strong v-if="useMobileFormat">{{ event.subject }}</strong>
-                <v-img
-                  v-if="eventImageUrl"
-                  :src="eventImageUrl"
-                  min-height="50"
-                  :height="hideImage ? undefined : 'auto'"
-                  :max-height="attrs.image.maxHeight"
-                  contain
-                  :class=attrs.image.class
-                  @error="hideImage = true"
-                />
-                <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
-                {{ event.eventMessage }}
-                </div>
-            </v-col>
-            </v-row>
-        </v-card-text>
+          </v-col>
+        </v-row>
+      </v-card-title>
+      <v-card-text v-if="showRecipeCards && recipe" class="background">
+          <v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%;">
+            <v-col align-self="center" class="pa-0">
+            <RecipeCardMobile
+              :vertical="useMobileFormat"
+              :name="recipe.name"
+              :slug="recipe.slug"
+              :description="recipe.description"
+              :rating="recipe.rating"
+              :image="recipe.image"
+              :recipe-id="recipe.id"
+              :is-flat="true"
+            />
+          </v-col>
+          </v-row>
+      </v-card-text>
+      <v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)" />
+      <v-card-text class="background">
+        <v-row>
+          <v-col>
+              <strong v-if="useMobileFormat">{{ event.subject }}</strong>
+              <v-img
+                v-if="eventImageUrl"
+                :src="eventImageUrl"
+                min-height="50"
+                :height="hideImage ? undefined : 'auto'"
+                :max-height="attrs.image.maxHeight"
+                contain
+                :class=attrs.image.class
+                @error="hideImage = true"
+              />
+              <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
+              {{ event.eventMessage }}
+              </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
     </v-card>
   </v-timeline-item>
 </template>
@@ -201,4 +201,4 @@ export default defineComponent({
 .v-card::after {
   display: none;
 }
-</style>
\ No newline at end of file
+</style>

From 693608d59fd1cd9f474108bd74576cd6c82b2dac Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Wed, 23 Aug 2023 12:31:23 -0500
Subject: [PATCH 11/14] feat: cook timer (#2508)

* updated base button group

* added kitchen timer

* added missing icon

* usability tweaks

* for for menu rendering over app bar

* clean up types

* fix for mp3 loading, maybe?

* spooky linter fixes

* for real this time

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
---
 frontend/assets/audio/kitchen_alarm.mp3       | Bin 0 -> 25331 bytes
 .../Domain/Recipe/RecipeActionMenu.vue        |   9 +-
 .../Domain/Recipe/RecipeTimerMenu.vue         | 317 ++++++++++++++++++
 .../components/global/BaseButtonGroup.vue     |  27 +-
 frontend/lang/messages/en-US.json             |   7 +
 frontend/lib/icons/icons.ts                   |  12 +
 frontend/nuxt.config.js                       |  11 +
 7 files changed, 379 insertions(+), 4 deletions(-)
 create mode 100644 frontend/assets/audio/kitchen_alarm.mp3
 create mode 100644 frontend/components/Domain/Recipe/RecipeTimerMenu.vue

diff --git a/frontend/assets/audio/kitchen_alarm.mp3 b/frontend/assets/audio/kitchen_alarm.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..e8eadc01a7081bb3166bf3cf378516aa3bfcf9e8
GIT binary patch
literal 25331
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
WKR@^n|7U&tD*Z=4ziQ-X`M&`8(=n9*

literal 0
HcmV?d00001

diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
index 2dc804782d5..2c975cae62b 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
@@ -42,6 +42,12 @@
         </v-tooltip>
       </div>
 
+      <RecipeTimerMenu
+        fab
+        color="info"
+        class="mr-1"
+      />
+
       <RecipeContextMenu
         show-print
         :menu-top="false"
@@ -90,6 +96,7 @@
 import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
+import RecipeTimerMenu from "./RecipeTimerMenu.vue";
 import RecipeTimelineBadge from "./RecipeTimelineBadge.vue";
 import { Recipe } from "~/lib/api/types/recipe";
 
@@ -100,7 +107,7 @@ const JSON_EVENT = "json";
 const OCR_EVENT = "ocr";
 
 export default defineComponent({
-  components: { RecipeContextMenu, RecipeFavoriteBadge, RecipeTimelineBadge },
+  components: { RecipeContextMenu, RecipeFavoriteBadge, RecipeTimerMenu, RecipeTimelineBadge },
   props: {
     recipe: {
       required: true,
diff --git a/frontend/components/Domain/Recipe/RecipeTimerMenu.vue b/frontend/components/Domain/Recipe/RecipeTimerMenu.vue
new file mode 100644
index 00000000000..2e36da549e3
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipeTimerMenu.vue
@@ -0,0 +1,317 @@
+<template>
+  <div class="text-center">
+    <v-menu
+      v-model="showMenu"
+      offset-x
+      offset-overflow
+      left
+      allow-overflow
+      close-delay="125"
+      :close-on-content-click="false"
+      content-class="d-print-none"
+      :z-index="2"
+    >
+      <template #activator="{ on, attrs }">
+        <v-badge :value="timerEnded" overlap color="red" content="!">
+          <v-btn :fab="fab" :small="fab" :color="timerEnded ? 'secondary' : color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
+            <v-progress-circular
+              v-if="timerInitialized && !timerEnded"
+              :value="timerProgress"
+              :rotate="270"
+              :color="timerRunning ? undefined : 'primary'"
+            >
+              <v-icon small>{{ timerRunning ? $globals.icons.timer : $globals.icons.timerPause }}</v-icon>
+            </v-progress-circular>
+            <v-icon v-else>{{ $globals.icons.timer }}</v-icon>
+          </v-btn>
+        </v-badge>
+      </template>
+      <v-card>
+        <v-card-title>
+          <v-icon class="pr-2">{{ $globals.icons.timer }}</v-icon>
+          {{ $i18n.tc("recipe.timer.kitchen-timer") }}
+        </v-card-title>
+        <div class="mx-auto" style="width: fit-content;">
+          <v-progress-circular
+            :value="timerProgress"
+            :rotate="270"
+            color="primary"
+            class="mb-2"
+            :size="128"
+            :width="24"
+          >
+          <v-icon
+            v-if="timerInitialized && !timerRunning"
+            x-large
+            :color="timerEnded ? 'red' : 'primary'"
+            @click="() => timerEnded ? resetTimer() : resumeTimer()"
+          >
+            {{ timerEnded ? $globals.icons.stop : $globals.icons.pause }}
+          </v-icon>
+          </v-progress-circular>
+        </div>
+        <v-container width="100%" fluid class="ma-0 px-auto py-2">
+          <v-row no-gutters justify="center">
+            <v-col cols="3" align-self="center">
+              <v-text-field
+                :value="timerHours"
+                :min="0"
+                outlined
+                single-line
+                solo
+                hide-details
+                type="number"
+                :disabled="timerInitialized"
+                class="centered-input my-0 py-0"
+                style="font-size: large; width: 100px;"
+                @input="(v) => timerHours = v.toString().padStart(2, '0')"
+              />
+            </v-col>
+            <v-col cols="1" align-self="center" style="text-align: center;">
+              <h1>:</h1>
+            </v-col>
+            <v-col cols="3" align-self="center">
+              <v-text-field
+                :value="timerMinutes"
+                :min="0"
+                outlined
+                single-line
+                solo
+                hide-details
+                type="number"
+                :disabled="timerInitialized"
+                class="centered-input my-0 py-0"
+                style="font-size: large; width: 100px;"
+                @input="(v) => timerMinutes = v.toString().padStart(2, '0')"
+              />
+            </v-col>
+            <v-col cols="1" align-self="center" style="text-align: center;" >
+              <h1>:</h1>
+            </v-col>
+            <v-col cols="3" align-self="center">
+              <v-text-field
+                :value="timerSeconds"
+                :min="0"
+                outlined
+                single-line
+                solo
+                hide-details
+                type="number"
+                :disabled="timerInitialized"
+                class="centered-input my-0 py-0"
+                style="font-size: large; width: 100px;"
+                @input="(v) => timerSeconds = v.toString().padStart(2, '0')"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+        <div class="mx-auto" style="width: 100%;">
+          <BaseButtonGroup
+            stretch
+            :buttons="timerButtons"
+            @initialize-timer="initializeTimer"
+            @pause-timer="pauseTimer"
+            @resume-timer="resumeTimer"
+            @stop-timer="resetTimer"
+          />
+        </div>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, ref, toRefs, useContext, watch } from "@nuxtjs/composition-api";
+import { ButtonOption } from "~/components/global/BaseButtonGroup.vue";
+
+// @ts-ignore typescript can't find our audio file, but it's there!
+import timerAlarmAudio from "~/assets/audio/kitchen_alarm.mp3";
+
+export default defineComponent({
+  props: {
+    fab: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default: "primary",
+    },
+  },
+  setup() {
+    const { $globals, i18n } = useContext();
+    const state = reactive({
+      showMenu: false,
+      timerInitialized: false,
+      timerRunning: false,
+      timerEnded: false,
+      timerInitialValue: 0,
+      timerValue: 0,
+    });
+
+    watch(
+      () => state.showMenu,
+      () => {
+        if (state.showMenu && state.timerEnded) {
+          resetTimer();
+        }
+      }
+    );
+
+    // ts doesn't recognize timerAlarmAudio because it's a weird import
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const timerAlarm = new Audio(timerAlarmAudio);
+    timerAlarm.loop = true;
+
+    const timerHours = ref<string | number>("00");
+    const timerMinutes = ref<string | number>("00");
+    const timerSeconds = ref<string | number>("00");
+
+    const initializeButton: ButtonOption = {
+      icon: $globals.icons.timerPlus,
+      text: i18n.tc("recipe.timer.start-timer"),
+      event: "initialize-timer",
+    }
+
+    const pauseButton: ButtonOption = {
+      icon: $globals.icons.pause,
+      text: i18n.tc("recipe.timer.pause-timer"),
+      event: "pause-timer",
+    };
+
+    const resumeButton: ButtonOption = {
+      icon: $globals.icons.play,
+      text: i18n.tc("recipe.timer.resume-timer"),
+      event: "resume-timer",
+    };
+
+    const stopButton: ButtonOption = {
+      icon: $globals.icons.stop,
+      text: i18n.tc("recipe.timer.stop-timer"),
+      event: "stop-timer",
+      color: "red",
+    };
+
+    const timerButtons = computed<ButtonOption[]>(() => {
+      const buttons: ButtonOption[] = [];
+      if (state.timerInitialized) {
+        if (state.timerEnded) {
+          buttons.push(stopButton);
+        } else if (state.timerRunning) {
+          buttons.push(pauseButton, stopButton);
+        } else {
+          buttons.push(resumeButton, stopButton);
+        }
+      } else {
+        buttons.push(initializeButton);
+      }
+
+      // I don't know why this is failing the frontend lint test ¯\_(ツ)_/¯
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return buttons;
+    });
+
+    const timerProgress = computed(() => {
+      if(state.timerInitialValue) {
+        return (state.timerValue / state.timerInitialValue) * 100;
+      } else {
+        return 0;
+      }
+    });
+
+    let timerInterval: number | null = null;
+    function decrementTimer() {
+      if (state.timerValue > 0) {
+        state.timerValue -= 1;
+
+        timerHours.value = Math.floor(state.timerValue / 3600).toString().padStart(2, "0");
+        timerMinutes.value = Math.floor(state.timerValue % 3600 / 60).toString().padStart(2, "0");
+        timerSeconds.value = Math.floor(state.timerValue % 3600 % 60).toString().padStart(2, "0");
+      }
+      else {
+        state.timerRunning = false;
+        state.timerEnded = true;
+        timerAlarm.currentTime = 0;
+        timerAlarm.play();
+
+        if (timerInterval) {
+          clearInterval(timerInterval);
+          timerInterval = null;
+        }
+      }
+    }
+
+    function initializeTimer() {
+      state.timerInitialized = true;
+      state.timerRunning = true;
+      state.timerEnded = false;
+
+      console.log(timerSeconds.value);
+
+      const hours = parseFloat(timerHours.value.toString()) > 0 ? parseFloat(timerHours.value.toString()) : 0;
+      const minutes = parseFloat(timerMinutes.value.toString()) > 0 ? parseFloat(timerMinutes.value.toString()) : 0;
+      const seconds = parseFloat(timerSeconds.value.toString()) > 0 ? parseFloat(timerSeconds.value.toString()) : 0;
+
+      state.timerInitialValue = (hours * 3600) + (minutes * 60) + seconds;
+      state.timerValue = state.timerInitialValue;
+
+      timerInterval = setInterval(decrementTimer, 1000) as unknown as number;
+
+      timerHours.value = Math.floor(state.timerValue / 3600).toString().padStart(2, "0");
+      timerMinutes.value = Math.floor(state.timerValue % 3600 / 60).toString().padStart(2, "0");
+      timerSeconds.value = Math.floor(state.timerValue % 3600 % 60).toString().padStart(2, "0");
+    };
+
+    function pauseTimer() {
+      state.timerRunning = false;
+      if (timerInterval) {
+        clearInterval(timerInterval);
+        timerInterval = null;
+      }
+    };
+
+    function resumeTimer() {
+      state.timerRunning = true;
+      timerInterval = setInterval(decrementTimer, 1000) as unknown as number;
+    };
+
+    function resetTimer() {
+      state.timerInitialized = false;
+      state.timerRunning = false;
+      state.timerEnded = false;
+
+      timerAlarm.pause();
+      timerAlarm.currentTime = 0;
+
+      timerHours.value = "00";
+      timerMinutes.value = "00";
+      timerSeconds.value = "00";
+
+      state.timerValue = 0;
+      if (timerInterval) {
+        clearInterval(timerInterval);
+        timerInterval = null;
+      }
+    };
+
+    return {
+      ...toRefs(state),
+      timerHours,
+      timerMinutes,
+      timerSeconds,
+      timerButtons,
+      timerProgress,
+      initializeTimer,
+      pauseTimer,
+      resumeTimer,
+      resetTimer,
+    };
+  },
+});
+</script>
+
+<style scoped>
+    .centered-input >>> input {
+      text-align: center;
+    }
+</style>
diff --git a/frontend/components/global/BaseButtonGroup.vue b/frontend/components/global/BaseButtonGroup.vue
index 356b9b9615d..704ddff12cb 100644
--- a/frontend/components/global/BaseButtonGroup.vue
+++ b/frontend/components/global/BaseButtonGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <v-item-group>
     <template v-for="btn in buttons">
-      <v-menu v-if="btn.children" :key="'menu-' + btn.event" active-class="pa-0" offset-y top left>
+      <v-menu v-if="btn.children" :key="'menu-' + btn.event" active-class="pa-0" offset-y top left :style="stretch ? 'width: 100%;' : ''">
         <template #activator="{ on, attrs }">
           <v-btn tile :large="large" icon v-bind="attrs" v-on="on">
             <v-icon>
@@ -25,7 +25,17 @@
         content-class="text-caption"
       >
         <template #activator="{ on, attrs }">
-          <v-btn tile :large="large" icon v-bind="attrs" @click="$emit(btn.event)" v-on="on" :disabled="btn.disabled">
+          <v-btn
+            tile
+            icon
+            :color="btn.color"
+            :large="large"
+            :disabled="btn.disabled"
+            :style="stretch ? `width: ${maxButtonWidth};` : ''"
+            v-bind="attrs"
+            v-on="on"
+            @click="$emit(btn.event)"
+          >
             <v-icon> {{ btn.icon }} </v-icon>
           </v-btn>
         </template>
@@ -36,10 +46,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
 
 export interface ButtonOption {
   icon?: string;
+  color?: string;
   text: string;
   event: string;
   children?: ButtonOption[];
@@ -56,6 +67,16 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    stretch: {
+      type: Boolean,
+      default: false,
+    }
   },
+  setup(props) {
+    const maxButtonWidth = computed(() => `${100 / props.buttons.length}%`);
+    return {
+      maxButtonWidth,
+    };
+  }
 });
 </script>
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index 77fa41a18c1..6b829cfa453 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -480,6 +480,13 @@
     "increase-scale-label": "Increase Scale by 1",
     "locked": "Locked",
     "public-link": "Public Link",
+    "timer": {
+      "kitchen-timer": "Kitchen Timer",
+      "start-timer": "Start Timer",
+      "pause-timer": "Pause Timer",
+      "resume-timer": "Resume Timer",
+      "stop-timer": "Stop Timer"
+    },
     "edit-timeline-event": "Edit Timeline Event",
     "timeline": "Timeline",
     "timeline-is-empty": "Nothing on the timeline yet. Try making this recipe!",
diff --git a/frontend/lib/icons/icons.ts b/frontend/lib/icons/icons.ts
index 1b0d5e20cd4..ab198282cad 100644
--- a/frontend/lib/icons/icons.ts
+++ b/frontend/lib/icons/icons.ts
@@ -135,6 +135,12 @@ import {
   mdiDockTop,
   mdiDockBottom,
   mdiCheckboxOutline,
+  mdiTimer,
+  mdiTimerPlus,
+  mdiPause,
+  mdiStop,
+  mdiPlay,
+  mdiTimerPause,
   mdiFlipHorizontal,
   mdiFlipVertical,
   mdiRotateLeft,
@@ -228,6 +234,8 @@ export const icons = {
   openInNew: mdiOpenInNew,
   orderAlphabeticalAscending: mdiOrderAlphabeticalAscending,
   pageLayoutBody: mdiPageLayoutBody,
+  pause: mdiPause,
+  play: mdiPlay,
   printer: mdiPrinter,
   printerSettings: mdiPrinterPosCog,
   refreshCircle: mdiRefreshCircle,
@@ -247,8 +255,12 @@ export const icons = {
   sortClockAscending: mdiSortClockAscending,
   sortClockDescending: mdiSortClockDescending,
   star: mdiStar,
+  stop: mdiStop,
   testTube: mdiTestTube,
   timelineText: mdiTimelineText,
+  timer: mdiTimer,
+  timerPause: mdiTimerPause,
+  timerPlus: mdiTimerPlus,
   tools: mdiTools,
   potSteam: mdiPotSteam,
   translate: mdiTranslate,
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 533448fba48..9acc66dbffb 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -385,6 +385,17 @@ export default {
         // ["@nuxtjs/composition-api/dist/babel-plugin"],
       ],
     },
+    // audio file support
+    // https://v2.nuxt.com/docs/features/configuration/#extend-webpack-to-load-audio-files
+    extend(config, ctx) {
+      config.module.rules.push({
+        test: /\.(ogg|mp3|wav|mpe?g)$/i,
+        loader: 'file-loader',
+        options: {
+          name: '[path][name].[ext]'
+        }
+      })
+    },
     transpile: process.env.NODE_ENV !== "production" ? [/@vue[\\/]composition-api/] : null,
   },
 };

From 30717e50d3349734f26c54a2dd659ae84a43ce08 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Fri, 25 Aug 2023 11:32:06 -0500
Subject: [PATCH 12/14] made parsed ingredient reactive (#2520)

---
 .../Recipe/RecipeIngredientListItem.vue       | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
index ff6c75cd3d3..d9c4a10a37a 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="ma-0 pa-0 text-subtitle-1 dense-markdown ingredient-item">
-    <SafeMarkdown v-if="quantity" class="d-inline" :source="quantity" />
-    <template v-if="unit">{{ unit }} </template>
-    <SafeMarkdown v-if="note && !name" class="text-bold d-inline" :source="note" />
+    <SafeMarkdown v-if="parsedIng.quantity" class="d-inline" :source="parsedIng.quantity" />
+    <template v-if="parsedIng.unit">{{ parsedIng.unit }} </template>
+    <SafeMarkdown v-if="parsedIng.note && !parsedIng.name" class="text-bold d-inline" :source="parsedIng.note" />
     <template v-else>
-      <SafeMarkdown v-if="name" class="text-bold d-inline" :source="name" />
-      <SafeMarkdown v-if="note" class="note" :source="note" />
+      <SafeMarkdown v-if="parsedIng.name" class="text-bold d-inline" :source="parsedIng.name" />
+      <SafeMarkdown v-if="parsedIng.note" class="note" :source="parsedIng.note" />
     </template>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent, toRefs } from "@nuxtjs/composition-api";
 import { RecipeIngredient } from "~/lib/api/types/group";
 import { useParsedIngredientText } from "~/composables/recipes";
 
@@ -30,9 +30,12 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const parsed = useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
+    const parsedIng = computed(() => {
+      return useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
+    });
+
     return {
-      ...parsed,
+      parsedIng,
     };
   },
 });

From 408ca88cb2013210d3a3bfee26a16bf47195915a Mon Sep 17 00:00:00 2001
From: Hugo van Rijswijk <git@hugovr.nl>
Date: Fri, 25 Aug 2023 18:32:26 +0200
Subject: [PATCH 13/14] fix: ingredient item should be single-line (#2521)

This is an issue on non-chromium browsers. I guess Chromium has some sort of support for nested CSS, whereas other browsers don't.
---
 frontend/components/Domain/Recipe/RecipeIngredientListItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
index d9c4a10a37a..949d3c35844 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
@@ -40,7 +40,7 @@ export default defineComponent({
   },
 });
 </script>
-<style>
+<style lang="scss">
 .ingredient-item {
   .d-inline {
     & > p {

From 0a00a6ea0d05d2dd944dd9cc6713156dc767e1ed Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Thu, 31 Aug 2023 12:08:44 -0500
Subject: [PATCH 14/14] fix: removed HTML tags when copying recipe ingredients
 (#2533)

---
 .../components/Domain/Recipe/RecipeIngredients.vue    |  2 +-
 .../recipes/use-recipe-ingredients.test.ts            | 11 ++++++++++-
 .../composables/recipes/use-recipe-ingredients.ts     | 10 ++++++----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeIngredients.vue b/frontend/components/Domain/Recipe/RecipeIngredients.vue
index f69d6ab2c73..8be0b433a3d 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredients.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredients.vue
@@ -54,7 +54,7 @@ export default defineComponent({
     const ingredientCopyText = computed(() => {
       return props.value
         .map((ingredient) => {
-          return `${parseIngredientText(ingredient, props.disableAmount, props.scale)}`;
+          return `${parseIngredientText(ingredient, props.disableAmount, props.scale, false)}`;
         })
         .join("\n");
     });
diff --git a/frontend/composables/recipes/use-recipe-ingredients.test.ts b/frontend/composables/recipes/use-recipe-ingredients.test.ts
index 499e2b2db2f..c7e6900bea7 100644
--- a/frontend/composables/recipes/use-recipe-ingredients.test.ts
+++ b/frontend/composables/recipes/use-recipe-ingredients.test.ts
@@ -31,7 +31,16 @@ describe(parseIngredientText.name, () => {
   test("ingredient text with fraction", () => {
     const ingredient = createRecipeIngredient({ quantity: 1.5, unit: { fraction: true, id: "1", name: "cup" } });
 
-    expect(parseIngredientText(ingredient, false)).contain("1 <sup>1</sup>").and.to.contain("<sub>2</sub>");
+    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);
+
+    expect(result).not.contain("<");
+    expect(result).not.contain(">");
+    expect(result).contain("1 1/2");
   });
 
   test("sanitizes html", () => {
diff --git a/frontend/composables/recipes/use-recipe-ingredients.ts b/frontend/composables/recipes/use-recipe-ingredients.ts
index 36b9bc9f082..d975adc4ddd 100644
--- a/frontend/composables/recipes/use-recipe-ingredients.ts
+++ b/frontend/composables/recipes/use-recipe-ingredients.ts
@@ -10,7 +10,7 @@ function sanitizeIngredientHTML(rawHtml: string) {
   });
 }
 
-export function useParsedIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale = 1) {
+export function useParsedIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale = 1, includeFormating = true) {
   if (disableAmount) {
     return {
       name: ingredient.note ? sanitizeIngredientHTML(ingredient.note) : undefined,
@@ -35,7 +35,9 @@ export function useParsedIngredientText(ingredient: RecipeIngredient, disableAmo
       }
 
       if (fraction[1] > 0) {
-        returnQty += ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>`;
+        returnQty += includeFormating ?
+          ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>` :
+          ` ${fraction[1]}/${fraction[2]}`;
       }
     } else {
       returnQty = (quantity * scale).toString();
@@ -54,8 +56,8 @@ export function useParsedIngredientText(ingredient: RecipeIngredient, disableAmo
   };
 }
 
-export function parseIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale = 1): string {
-  const { quantity, unit, name, note } = useParsedIngredientText(ingredient, disableAmount, scale);
+export function parseIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale = 1, includeFormating = true): string {
+  const { quantity, unit, name, note } = useParsedIngredientText(ingredient, disableAmount, scale, includeFormating);
 
   const text = `${quantity || ""} ${unit || ""} ${name || ""} ${note || ""}`.replace(/ {2,}/g, " ").trim();
   return sanitizeIngredientHTML(text);