From a8d4c43467ceb67158683784da34a7f01a9df6c5 Mon Sep 17 00:00:00 2001
From: Kuchenpirat <jojow@gmx.net>
Date: Wed, 30 Jul 2025 11:59:55 +0000
Subject: [PATCH] recipe list and slots for it

---
 .../components/Domain/Recipe/RecipeList.vue   | 226 ++++++++----------
 frontend/pages/shopping-lists/[id].vue        |   4 +
 2 files changed, 107 insertions(+), 123 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeList.vue b/frontend/components/Domain/Recipe/RecipeList.vue
index 73bd53584..667e78cbf 100644
--- a/frontend/components/Domain/Recipe/RecipeList.vue
+++ b/frontend/components/Domain/Recipe/RecipeList.vue
@@ -51,141 +51,121 @@
   </v-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import DOMPurify from "dompurify";
 import { useFraction } from "~/composables/recipes/use-fraction";
 import type { ShoppingListItemOut } from "~/lib/api/types/household";
 import type { RecipeSummary } from "~/lib/api/types/recipe";
 
-export default defineNuxtComponent({
-  props: {
-    recipes: {
-      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,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    const $auth = useMealieAuth();
-    const { frac } = useFraction();
-    const route = useRoute();
-    const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
+interface Props {
+  recipes: RecipeSummary[];
+  listItem?: ShoppingListItemOut;
+  small?: boolean;
+  tile?: boolean;
+  showDescription?: boolean;
+  disabled?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  listItem: undefined,
+  small: false,
+  tile: false,
+  showDescription: false,
+  disabled: false,
+});
 
-    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: "",
-              },
-            },
-          };
-    });
+const $auth = useMealieAuth();
+const { frac } = useFraction();
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
 
-    function sanitizeHTML(rawHtml: string) {
-      return DOMPurify.sanitize(rawHtml, {
-        USE_PROFILES: { html: true },
-        ALLOWED_TAGS: ["strong", "sup"],
-      });
+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();
     }
 
-    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(_ => "");
-      }
+    if (props.listItem.unit) {
+      const unitDisplay = props.listItem.unit.useAbbreviation && props.listItem.unit.abbreviation
+        ? props.listItem.unit.abbreviation
+        : props.listItem.unit.name;
 
-      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);
+      listItemDescription += ` ${unitDisplay}`;
+    }
 
-        let listItemDescription = "";
-        if (props.listItem.unit?.fraction) {
-          const fraction = frac(quantity, 10, true);
-          if (fraction[0] !== undefined && fraction[0] > 0) {
-            listItemDescription += fraction[0];
-          }
+    if (itemRef.recipeNote) {
+      listItemDescription += `, ${itemRef.recipeNote}`;
+    }
 
-          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();
-        }
+    listItemDescriptions.push(sanitizeHTML(listItemDescription));
+  }
 
-        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,
-      groupSlug,
-      listItemDescriptions,
-    };
-  },
+  return listItemDescriptions;
 });
 </script>
diff --git a/frontend/pages/shopping-lists/[id].vue b/frontend/pages/shopping-lists/[id].vue
index 8188e7326..b67aad4c7 100644
--- a/frontend/pages/shopping-lists/[id].vue
+++ b/frontend/pages/shopping-lists/[id].vue
@@ -371,6 +371,8 @@
               <v-btn
                 v-if="recipe"
                 icon
+                flat
+                class="bg-transparent"
                 :disabled="isOffline"
                 @click.prevent="removeRecipeReferenceToList(recipe.id!)"
               >
@@ -386,6 +388,8 @@
               <v-btn
                 icon
                 :disabled="isOffline"
+                flat
+                class="bg-transparent"
                 @click.prevent="addRecipeReferenceToList(recipe.id!)"
               >
                 <v-icon color="grey-lighten-1">