recipe list and slots for it

frontend/components/Domain/Recipe/RecipeList.vue

@@ -51,46 +51,34 @@
   </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(() => {
+const $auth = useMealieAuth();
+const { frac } = useFraction();
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
+
+const attrs = computed(() => {
   return props.small
     ? {
         class: {
@@ -122,16 +110,16 @@ export default defineNuxtComponent({
           },
         },
       };
-    });
+});
 
-    function sanitizeHTML(rawHtml: string) {
+function sanitizeHTML(rawHtml: string) {
   return DOMPurify.sanitize(rawHtml, {
     USE_PROFILES: { html: true },
     ALLOWED_TAGS: ["strong", "sup"],
   });
-    }
+}
 
-    const listItemDescriptions = computed<string[]>(() => {
+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
@@ -179,13 +167,5 @@ export default defineNuxtComponent({
   }
 
   return listItemDescriptions;
-    });
-
-    return {
-      attrs,
-      groupSlug,
-      listItemDescriptions,
-    };
-  },
 });
 </script>

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