chore: Nuxt 4 upgrade (#7426)

frontend/app/pages/g/[groupSlug]/recipes/tools/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-container>
+    <RecipeOrganizerPage
+      v-if="tools"
+      :icon="$globals.icons.potSteam"
+      :items="tools"
+      item-type="tools"
+      @delete="deleteOne"
+      @update="updateOne"
+    >
+      <template #title>
+        {{ $t("tool.tools") }}
+      </template>
+    </RecipeOrganizerPage>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import RecipeOrganizerPage from "~/components/Domain/Recipe/RecipeOrganizerPage.vue";
+import { useToolStore } from "~/composables/store";
+import type { RecipeTool } from "~/lib/api/types/recipe";
+
+interface RecipeToolWithOnHand extends RecipeTool {
+  onHand: boolean;
+}
+
+definePageMeta({
+  middleware: ["group-only"],
+});
+
+const auth = useMealieAuth();
+const toolStore = useToolStore();
+const i18n = useI18n();
+
+useSeoMeta({
+  title: i18n.t("tool.tools"),
+});
+
+const userHousehold = computed(() => auth.user.value?.householdSlug || "");
+const tools = computed(() => toolStore.store.value.map(tool => (
+  {
+    ...tool,
+    onHand: tool.householdsWithTool?.includes(userHousehold.value) || false,
+  } as RecipeToolWithOnHand
+)));
+
+async function deleteOne(id: string | number) {
+  await toolStore.actions.deleteOne(id);
+}
+
+async function updateOne(tool: RecipeToolWithOnHand) {
+  if (userHousehold.value) {
+    if (tool.onHand && !tool.householdsWithTool?.includes(userHousehold.value)) {
+      if (!tool.householdsWithTool) {
+        tool.householdsWithTool = [userHousehold.value];
+      }
+      else {
+        tool.householdsWithTool.push(userHousehold.value);
+      }
+    }
+    else if (!tool.onHand && tool.householdsWithTool?.includes(userHousehold.value)) {
+      tool.householdsWithTool = tool.householdsWithTool.filter(household => household !== userHousehold.value);
+    }
+  }
+  await toolStore.actions.updateOne(tool);
+}
+</script>