recipe list and slots for it

frontend/components/Domain/Recipe/RecipeList.vue

@@ -51,40 +51,28 @@
   </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({
+interface Props {
-  props: {
+  recipes: RecipeSummary[];
-    recipes: {
+  listItem?: ShoppingListItemOut;
-      type: Array as () => RecipeSummary[],
+  small?: boolean;
-      required: true,
+  tile?: boolean;
-    },
+  showDescription?: boolean;
-    listItem: {
+  disabled?: boolean;
-      type: Object as () => ShoppingListItemOut | undefined,
+}
-      default: undefined,
+const props = withDefaults(defineProps<Props>(), {
-    },
+  listItem: undefined,
-    small: {
+  small: false,
-      type: Boolean,
+  tile: false,
-      default: false,
+  showDescription: false,
-    },
+  disabled: 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();
@@ -180,12 +168,4 @@ 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">