chore: Nuxt 4 upgrade (#7426)

frontend/app/pages/g/[groupSlug]/cookbooks/[slug].vue

@@ -0,0 +1,7 @@
+<template>
+  <CookbookPage />
+</template>
+
+<script setup lang="ts">
+import CookbookPage from "@/components/Domain/Cookbook/CookbookPage.vue";
+</script>

frontend/app/pages/g/[groupSlug]/cookbooks/index.vue

@@ -0,0 +1,241 @@
+<template>
+  <div>
+    <!-- Create Dialog -->
+    <BaseDialog
+      v-if="createTarget"
+      v-model="dialogStates.create"
+      width="100%"
+      max-width="1100px"
+      :icon="$globals.icons.pages"
+      :title="$t('cookbook.create-a-cookbook')"
+      :submit-icon="$globals.icons.save"
+      :submit-text="$t('general.save')"
+      :submit-disabled="!createTarget.queryFilterString"
+      can-submit
+      @submit="actions.updateOne(createTarget)"
+      @cancel="deleteCreateTarget()"
+    >
+      <v-card-text>
+        <CookbookEditor :key="createTargetKey" v-model="createTarget" />
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Delete Dialog -->
+    <BaseDialog
+      v-model="dialogStates.delete"
+      :title="$t('general.delete-with-name', { name: $t('cookbook.cookbook') })"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      can-confirm
+      @confirm="deleteCookbook()"
+    >
+      <v-card-text>
+        <p>{{ $t("general.confirm-delete-generic-with-name", { name: $t("cookbook.cookbook") }) }}</p>
+        <p v-if="deleteTarget" class="mt-4 ml-4">
+          {{ deleteTarget.name }}
+        </p>
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Cookbook Page -->
+    <!-- Page Title -->
+    <v-container class="lg-container">
+      <BasePageTitle divider>
+        <template #header>
+          <v-img width="100%" max-height="100" max-width="100" src="/svgs/manage-cookbooks.svg" />
+        </template>
+        <template #title>
+          {{ $t("cookbook.cookbooks") }}
+        </template>
+        {{ $t("cookbook.description") }}
+      </BasePageTitle>
+
+      <div class="my-6">
+        <v-checkbox
+          v-model="cookbookPreferences.hideOtherHouseholds"
+          :label="$t('cookbook.hide-cookbooks-from-other-households')"
+          hide-details
+          color="primary"
+        />
+        <div class="ml-10 mt-n3">
+          <p class="text-subtitle-2 my-0 py-0">
+            {{ $t("cookbook.hide-cookbooks-from-other-households-description") }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Create New -->
+      <BaseButton create @click="createCookbook" />
+
+      <!-- Cookbook List -->
+      <v-expansion-panels class="mt-2">
+        <VueDraggable
+          v-model="myCookbooks"
+          handle=".handle"
+          :delay="250"
+          :delay-on-touch-only="true"
+          style="width: 100%"
+          @end="updateAll(myCookbooks)"
+        >
+          <v-expansion-panel
+            v-for="(cookbook, index) in myCookbooks"
+            :key="cookbook.id"
+            class="my-2 left-border rounded"
+          >
+            <v-expansion-panel-title disable-icon-rotate class="text-h6 opacity-80">
+              <div class="d-flex align-center">
+                <v-icon size="large" start>
+                  {{ $globals.icons.pages }}
+                </v-icon>
+                {{ cookbook.name }}
+              </div>
+              <template #actions>
+                <div class="d-flex align-center">
+                  <v-btn icon variant="text" class="ml-2">
+                    <v-icon>
+                      {{ $globals.icons.edit }}
+                    </v-icon>
+                  </v-btn>
+                  <v-icon class="handle" :size="40">
+                    {{ $globals.icons.arrowUpDown }}
+                  </v-icon>
+                </div>
+              </template>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <CookbookEditor
+                v-model="myCookbooks[index]"
+                :collapsable="false"
+              />
+              <v-card-actions>
+                <v-spacer />
+                <BaseButtonGroup
+                  :buttons="[
+                    {
+                      icon: $globals.icons.delete,
+                      text: $t('general.delete'),
+                      event: 'delete',
+                    },
+                    {
+                      icon: $globals.icons.save,
+                      text: $t('general.save'),
+                      event: 'save',
+                      disabled: !cookbook.queryFilterString,
+                    },
+                  ]"
+                  @delete="deleteEventHandler(myCookbooks[index])"
+                  @save="actions.updateOne(myCookbooks[index])"
+                />
+              </v-card-actions>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </VueDraggable>
+      </v-expansion-panels>
+    </v-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VueDraggable } from "vue-draggable-plus";
+import { useCookbookStore } from "~/composables/store/use-cookbook-store";
+import { useHouseholdSelf } from "@/composables/use-households";
+import CookbookEditor from "~/components/Domain/Cookbook/CookbookEditor.vue";
+import type { CreateCookBook, ReadCookBook } from "~/lib/api/types/cookbook";
+import { useCookbookPreferences } from "~/composables/use-users/preferences";
+
+definePageMeta({
+  middleware: ["group-only"],
+});
+
+const dialogStates = reactive({
+  create: false,
+  delete: false,
+});
+
+const i18n = useI18n();
+
+// Set page title
+useSeoMeta({
+  title: i18n.t("cookbook.cookbooks"),
+});
+
+const auth = useMealieAuth();
+const { store: allCookbooks, actions, updateAll } = useCookbookStore();
+
+// Make a local reactive copy of myCookbooks
+const myCookbooks = ref<ReadCookBook[]>([]);
+watch(
+  allCookbooks,
+  (cookbooks) => {
+    myCookbooks.value
+      = cookbooks?.filter(
+        cookbook => cookbook.householdId === auth.user.value?.householdId,
+      ).sort((a, b) => a.position > b.position) ?? [];
+  },
+  { immediate: true },
+);
+
+const { household } = useHouseholdSelf();
+const cookbookPreferences = useCookbookPreferences();
+
+// create
+const createTargetKey = ref(0);
+const createTarget = ref<ReadCookBook | null>(null);
+async function createCookbook() {
+  const name = i18n.t("cookbook.household-cookbook-name", [
+    household.value?.name || "",
+    String((myCookbooks.value?.length ?? 0) + 1),
+  ]) as string;
+
+  const data = { name } as CreateCookBook;
+  await actions.createOne(data).then((cookbook) => {
+    if (!cookbook) {
+      return;
+    }
+
+    myCookbooks.value.push(cookbook);
+    createTarget.value = cookbook as ReadCookBook;
+    createTargetKey.value++;
+  });
+  dialogStates.create = true;
+}
+
+// delete
+const deleteTarget = ref<ReadCookBook | null>(null);
+function deleteEventHandler(item: ReadCookBook) {
+  deleteTarget.value = item;
+  dialogStates.delete = true;
+}
+async function deleteCookbook() {
+  if (!deleteTarget.value) {
+    return;
+  }
+  await actions.deleteOne(deleteTarget.value.id);
+  myCookbooks.value = myCookbooks.value.filter(c => c.id !== deleteTarget.value?.id);
+  dialogStates.delete = false;
+  deleteTarget.value = null;
+}
+
+async function deleteCreateTarget() {
+  if (!createTarget.value?.id) {
+    return;
+  }
+  await actions.deleteOne(createTarget.value.id);
+  myCookbooks.value = myCookbooks.value.filter(c => c.id !== createTarget.value?.id);
+  dialogStates.create = false;
+  createTarget.value = null;
+}
+function handleUnmount() {
+  if (!createTarget.value?.id || createTarget.value.queryFilterString) {
+    return;
+  }
+  deleteCreateTarget();
+}
+onMounted(() => {
+  window.addEventListener("beforeunload", handleUnmount);
+});
+onBeforeUnmount(() => {
+  handleUnmount();
+  window.removeEventListener("beforeunload", handleUnmount);
+});
+</script>

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

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <RecipeExplorerPage />
+  </div>
+</template>
+
+<script setup lang="ts">
+import RecipeExplorerPage from "~/components/Domain/Recipe/RecipeExplorerPage/RecipeExplorerPage.vue";
+</script>

frontend/app/pages/g/[groupSlug]/r/[slug]/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <RecipePage
+      v-if="recipe"
+      v-model="recipe"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { whenever } from "@vueuse/core";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import { useAsyncKey } from "~/composables/use-utils";
+import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
+import { usePublicExploreApi } from "~/composables/api/api-client";
+import { useRecipe } from "~/composables/recipes";
+import type { Recipe } from "~/lib/api/types/recipe";
+
+const auth = useMealieAuth();
+const { isOwnGroup } = useLoggedInState();
+const route = useRoute();
+const title = ref(route.meta?.title as string || "");
+useSeoMeta({ title });
+
+const router = useRouter();
+const slug = route.params.slug as string;
+
+const recipe = ref<Recipe | null>(null);
+function loadRecipe() {
+  const { recipe: data } = useRecipe(slug);
+  watch(data, (value) => {
+    recipe.value = value;
+  });
+}
+
+async function loadPublicRecipe() {
+  const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
+  const api = usePublicExploreApi(groupSlug.value);
+  const { data } = await useAsyncData(useAsyncKey(), async () => {
+    const { data, error } = await api.explore.recipes.getOne(slug);
+    if (error) {
+      console.error("error loading recipe -> ", error);
+      router.push(`/g/${groupSlug.value}`);
+    }
+
+    return data;
+  });
+  recipe.value = data.value;
+}
+
+if (isOwnGroup.value) {
+  loadRecipe();
+}
+else {
+  onMounted(loadPublicRecipe);
+}
+
+whenever(
+  () => recipe.value,
+  () => {
+    if (recipe.value && recipe.value.name) {
+      title.value = recipe.value.name;
+    }
+  },
+);
+</script>

frontend/app/pages/g/[groupSlug]/r/create.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <v-container class="flex-column">
+      <BasePageTitle divider>
+        <template #header>
+          <v-img
+            width="100%"
+            max-height="175"
+            max-width="175"
+            src="/svgs/recipes-create.svg"
+          />
+        </template>
+        <template #title>
+          {{ $t('recipe.recipe-creation') }}
+        </template>
+        <template #content>
+          <div class="flex-1-1 d-flex flex-column justify-center align-center ga-2">
+            <p>{{ $t('recipe.select-one-of-the-various-ways-to-create-a-recipe') }}</p>
+            <div class="ml-auto">
+              <BaseOverflowButton
+                v-model="subpage"
+                rounded
+                :items="subpages"
+              />
+            </div>
+          </div>
+        </template>
+      </BasePageTitle>
+      <section>
+        <NuxtPage />
+      </section>
+    </v-container>
+
+    <AdvancedOnly>
+      <v-container class="d-flex justify-center align-center my-4">
+        <router-link
+          :to="`/group/migrations`"
+          class="text-primary"
+        > {{ $t('recipe.looking-for-migrations') }}</router-link>
+      </v-container>
+    </AdvancedOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem } from "~/components/global/BaseOverflowButton.vue";
+import AdvancedOnly from "~/components/global/AdvancedOnly.vue";
+
+definePageMeta({
+  middleware: ["group-only"],
+});
+
+const i18n = useI18n();
+const auth = useMealieAuth();
+const { $appInfo, $globals } = useNuxtApp();
+
+useSeoMeta({
+  title: i18n.t("general.create"),
+});
+
+const subpages = computed<MenuItem[]>(() => [
+  {
+    icon: $globals.icons.link,
+    text: i18n.t("recipe.import-with-url"),
+    value: "url",
+  },
+  {
+    icon: $globals.icons.link,
+    text: i18n.t("recipe.bulk-url-import"),
+    value: "bulk",
+  },
+  {
+    icon: $globals.icons.codeTags,
+    text: i18n.t("recipe.import-from-html-or-json"),
+    value: "html",
+  },
+  {
+    icon: $globals.icons.fileImage,
+    text: i18n.t("recipe.create-from-images"),
+    value: "image",
+    hide: !$appInfo.enableOpenaiImageServices,
+  },
+  {
+    icon: $globals.icons.edit,
+    text: i18n.t("recipe.create-recipe"),
+    value: "new",
+  },
+  {
+    icon: $globals.icons.zip,
+    text: i18n.t("recipe.import-with-zip"),
+    value: "zip",
+  },
+  {
+    icon: $globals.icons.robot,
+    text: i18n.t("recipe.debug-scraper"),
+    value: "debug",
+  },
+]);
+
+const route = useRoute();
+const router = useRouter();
+const groupSlug = computed(() => route.params.groupSlug || auth.user.value?.groupSlug || "");
+
+const subpage = computed({
+  set(subpage: string) {
+    router.push({ path: `/g/${groupSlug.value}/r/create/${subpage}`, query: route.query });
+  },
+  get() {
+    return route.path.split("/").pop() ?? "url";
+  },
+});
+</script>

frontend/app/pages/g/[groupSlug]/r/create/bulk.vue

@@ -0,0 +1,228 @@
+<template>
+  <div>
+    <div>
+      <v-card-title class="headline">
+        {{ $t('recipe.recipe-bulk-importer') }}
+      </v-card-title>
+      <v-card-text>
+        {{ $t('recipe.recipe-bulk-importer-description') }}
+      </v-card-text>
+      <div class="px-4">
+        <section class="mt-2">
+          <v-row
+            v-for="(_, idx) in bulkUrls"
+            :key="'bulk-url' + idx"
+            class="my-1"
+            density="compact"
+          >
+            <v-col
+              cols="12"
+              xs="12"
+              sm="12"
+              md="12"
+            >
+              <v-text-field
+                v-model="bulkUrls[idx].url"
+                :label="$t('new-recipe.recipe-url')"
+                density="compact"
+                single-line
+                validate-on="blur"
+                autofocus
+                variant="solo-filled"
+                hide-details
+                clearable
+                :prepend-inner-icon="$globals.icons.link"
+                rounded
+                class="rounded-lg"
+              >
+                <template #append>
+                  <v-btn
+                    style="margin-top: -2px"
+                    icon
+                    size="small"
+                    @click="bulkUrls.splice(idx, 1)"
+                  >
+                    <v-icon>
+                      {{ $globals.icons.delete }}
+                    </v-icon>
+                  </v-btn>
+                </template>
+              </v-text-field>
+            </v-col>
+            <template v-if="state.showCatTags">
+              <v-col
+                cols="12"
+                xs="12"
+                sm="6"
+                class="py-0"
+              >
+                <RecipeOrganizerSelector
+                  v-model="bulkUrls[idx].categories"
+                  selector-type="categories"
+                  :input-attrs="{
+                    variant: 'filled',
+                    singleLine: true,
+                    density: 'compact',
+                    rounded: true,
+                    class: 'rounded-lg',
+                    hideDetails: true,
+                    clearable: true,
+                  }"
+                />
+              </v-col>
+              <v-col
+                cols="12"
+                xs="12"
+                sm="6"
+                class="pt-0 pb-4"
+              >
+                <RecipeOrganizerSelector
+                  v-model="bulkUrls[idx].tags"
+                  selector-type="tags"
+                  :input-attrs="{
+                    variant: 'filled',
+                    singleLine: true,
+                    density: 'compact',
+                    rounded: true,
+                    class: 'rounded-lg',
+                    hideDetails: true,
+                    clearable: true,
+                  }"
+                />
+              </v-col>
+            </template>
+          </v-row>
+          <v-card-actions class="justify-end flex-wrap mt-3 pa-0">
+            <BaseButton
+              class="mt-1 pr-4"
+              delete
+              @click="
+                bulkUrls = [];
+                lockBulkImport = false;
+              "
+            >
+              {{ $t('general.clear') }}
+            </BaseButton>
+            <v-spacer />
+            <BaseButton
+              class="mr-1 mb-1"
+              color="info"
+              @click="bulkUrls.push({ url: '', categories: [], tags: [] })"
+            >
+              <template #icon>
+                {{ $globals.icons.createAlt }}
+              </template>
+              {{ $t('general.new') }}
+            </BaseButton>
+            <RecipeDialogBulkAdd
+              v-model="state.bulkDialog"
+              class="mr-1 mr-sm-0 mb-1"
+              @bulk-data="assignUrls"
+            />
+          </v-card-actions>
+          <div class="px-0">
+            <v-checkbox
+              v-model="state.showCatTags"
+              hide-details
+              :label="$t('recipe.set-categories-and-tags')"
+            />
+          </div>
+          <v-card-actions class="justify-center">
+            <div style="width: 250px">
+              <BaseButton
+                :disabled="bulkUrls.length === 0 || lockBulkImport"
+                rounded
+                block
+                @click="bulkCreate"
+              >
+                <template #icon>
+                  {{ $globals.icons.check }}
+                </template>
+              </BaseButton>
+            </div>
+          </v-card-actions>
+        </section>
+        <section class="mt-12">
+          <BaseCardSectionTitle :title="$t('recipe.bulk-imports')" />
+          <ReportTable
+            :items="reports"
+            @delete="deleteReport"
+          />
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { whenever } from "@vueuse/shared";
+import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast";
+import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
+import type { ReportSummary } from "~/lib/api/types/reports";
+import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
+
+const state = reactive({
+  showCatTags: false,
+  bulkDialog: false,
+});
+
+whenever(
+  () => !state.showCatTags,
+  () => {
+    console.log("showCatTags changed");
+  },
+);
+
+const api = useUserApi();
+const i18n = useI18n();
+
+const bulkUrls = ref([{ url: "", categories: [], tags: [] }]);
+const lockBulkImport = ref(false);
+
+async function bulkCreate() {
+  if (bulkUrls.value.length === 0) {
+    return;
+  }
+
+  const { response } = await api.recipes.createManyByUrl({ imports: bulkUrls.value });
+
+  if (response?.status === 202) {
+    alert.success(i18n.t("recipe.bulk-import-process-has-started"));
+    lockBulkImport.value = true;
+  }
+  else {
+    alert.error(i18n.t("recipe.bulk-import-process-has-failed"));
+  }
+
+  fetchReports();
+}
+
+// =========================================================
+// Reports
+
+const reports = ref<ReportSummary[]>([]);
+
+async function fetchReports() {
+  const { data } = await api.groupReports.getAll("bulk_import");
+  reports.value = data ?? [];
+}
+
+async function deleteReport(id: string) {
+  console.log(id);
+  const { response } = await api.groupReports.deleteOne(id);
+
+  if (response?.status === 200) {
+    fetchReports();
+  }
+  else {
+    alert.error(i18n.t("recipe.report-deletion-failed"));
+  }
+}
+
+fetchReports();
+
+function assignUrls(urls: string[]) {
+  bulkUrls.value = urls.map(url => ({ url, categories: [], tags: [] }));
+}
+</script>

frontend/app/pages/g/[groupSlug]/r/create/debug.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <v-form
+      ref="domUrlForm"
+      @submit.prevent="debugUrl(recipeUrl)"
+    >
+      <div>
+        <v-card-title class="headline">
+          {{ $t('recipe.recipe-debugger') }}
+        </v-card-title>
+        <v-card-text>
+          {{ $t('recipe.recipe-debugger-description') }}
+          <v-text-field
+            v-model="recipeUrl"
+            :label="$t('new-recipe.recipe-url')"
+            validate-on="blur"
+            :prepend-inner-icon="$globals.icons.link"
+            autofocus
+            variant="solo-filled"
+            clearable
+            rounded
+            class="rounded-lg mt-2"
+            :rules="[validators.url]"
+            :hint="$t('new-recipe.url-form-hint')"
+            persistent-hint
+          />
+        </v-card-text>
+        <v-card-text v-if="$appInfo.enableOpenai">
+          {{ $t('recipe.recipe-debugger-use-openai-description') }}
+          <v-checkbox
+            v-model="state.useOpenAI"
+            :label="$t('recipe.use-openai')"
+          />
+        </v-card-text>
+        <v-card-actions class="justify-center">
+          <div style="width: 250px">
+            <BaseButton
+              :disabled="recipeUrl === null"
+              rounded
+              block
+              type="submit"
+              color="info"
+              :loading="state.loading"
+            >
+              <template #icon>
+                {{ $globals.icons.robot }}
+              </template>
+              {{ $t('recipe.debug') }}
+            </BaseButton>
+          </div>
+        </v-card-actions>
+      </div>
+    </v-form>
+    <section v-if="debugData">
+      <v-checkbox
+        v-model="debugTreeView"
+        :label="$t('recipe.tree-view')"
+      />
+      <RecipeJsonEditor
+        v-model="debugData"
+        height="700px"
+        :mode="debugTreeView ? 'tree' : 'text'"
+        :main-menu-bar="false"
+        :read-only="true"
+      />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserApi } from "~/composables/api";
+import { validators } from "~/composables/use-validators";
+import type { Recipe } from "~/lib/api/types/recipe";
+
+const state = reactive({
+  loading: false,
+  useOpenAI: false,
+});
+
+const api = useUserApi();
+const route = useRoute();
+const router = useRouter();
+
+const recipeUrl = computed({
+  set(recipe_import_url: string | null) {
+    if (recipe_import_url !== null) {
+      recipe_import_url = recipe_import_url.trim();
+      router.replace({ query: { ...route.query, recipe_import_url } });
+    }
+  },
+  get() {
+    return route.query.recipe_import_url as string | null;
+  },
+});
+
+const debugTreeView = ref(false);
+
+const debugData = ref<Recipe | null>(null);
+
+async function debugUrl(url: string | null) {
+  if (url === null) {
+    return;
+  }
+
+  state.loading = true;
+
+  const { data } = await api.recipes.testCreateOneUrl(url, state.useOpenAI);
+
+  state.loading = false;
+  debugData.value = data;
+}
+</script>

frontend/app/pages/g/[groupSlug]/r/create/html.vue

@@ -0,0 +1,204 @@
+<template>
+  <v-form
+    ref="domUrlForm"
+    @submit.prevent="createFromHtmlOrJson(newRecipeData, importKeywordsAsTags, importCategories, newRecipeUrl)"
+  >
+    <div>
+      <v-card-title class="headline">
+        {{ $t('recipe.import-from-html-or-json') }}
+      </v-card-title>
+      <v-card-text>
+        <p>
+          {{ $t("recipe.import-from-html-or-json-description") }}
+        </p>
+        <p>
+          {{ $t("recipe.json-import-format-description-colon") }}
+          <a
+            href="https://schema.org/Recipe"
+            target="_blank"
+          >https://schema.org/Recipe</a>
+        </p>
+        <v-switch
+          v-model="state.isEditJSON"
+          :label="$t('recipe.json-editor')"
+          color="primary"
+          class="mt-2"
+          @change="handleIsEditJson"
+        />
+        <v-text-field
+          v-model="newRecipeUrl"
+          :label="$t('new-recipe.recipe-url')"
+          :prepend-inner-icon="$globals.icons.link"
+          validate-on="blur"
+          variant="solo-filled"
+          clearable
+          rounded
+          :rules="[validators.urlOptional]"
+          :hint="$t('new-recipe.copy-and-paste-the-source-url-of-your-data-optional')"
+          persistent-hint
+          class="mt-10 mb-4"
+          style="max-width: 500px"
+        />
+        <RecipeJsonEditor
+          v-if="state.isEditJSON"
+          v-model="newRecipeData"
+          height="250px"
+          mode="code"
+          :main-menu-bar="false"
+        />
+        <v-textarea
+          v-else
+          v-model="newRecipeData"
+          :label="$t('new-recipe.recipe-html-or-json')"
+          :prepend-inner-icon="$globals.icons.codeTags"
+          validate-on="blur"
+          autofocus
+          variant="solo-filled"
+          clearable
+          rounded
+        />
+        <v-checkbox
+          v-model="importKeywordsAsTags"
+          color="primary"
+          hide-details
+          :label="$t('recipe.import-original-keywords-as-tags')"
+        />
+        <v-checkbox
+          v-model="importCategories"
+          color="primary"
+          hide-details
+          :label="$t('recipe.import-original-categories')"
+        />
+        <v-checkbox
+          v-model="stayInEditMode"
+          color="primary"
+          hide-details
+          :label="$t('recipe.stay-in-edit-mode')"
+        />
+        <v-checkbox
+          v-model="parseRecipe"
+          color="primary"
+          hide-details
+          :label="$t('recipe.parse-recipe-ingredients-after-import')"
+        />
+      </v-card-text>
+      <v-card-actions class="justify-center">
+        <div style="width: 100%" class="text-center">
+          <div style="width: 250px; margin: 0 auto">
+            <BaseButton
+              :disabled="!newRecipeData"
+              rounded
+              block
+              type="submit"
+              :loading="state.loading"
+            />
+          </div>
+          <v-card-text class="py-2">
+            <!-- render &nbsp; to maintain layout -->
+            {{ createStatus }}&nbsp;
+          </v-card-text>
+        </div>
+      </v-card-actions>
+    </div>
+  </v-form>
+</template>
+
+<script setup lang="ts">
+import type { AxiosResponse } from "axios";
+import { useTagStore } from "~/composables/store/use-tag-store";
+import { useUserApi } from "~/composables/api";
+import { useNewRecipeOptions } from "~/composables/use-new-recipe-options";
+import { validators } from "~/composables/use-validators";
+import type { VForm } from "~/types/auto-forms";
+
+const state = reactive({
+  error: false,
+  loading: false,
+  isEditJSON: false,
+});
+const auth = useMealieAuth();
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
+const domUrlForm = ref<VForm | null>(null);
+
+const api = useUserApi();
+const tags = useTagStore();
+
+const {
+  importKeywordsAsTags,
+  importCategories,
+  stayInEditMode,
+  parseRecipe,
+  navigateToRecipe,
+} = useNewRecipeOptions();
+
+function handleResponse(response: AxiosResponse<string> | null, refreshTags = false) {
+  if (response?.status !== 201) {
+    state.error = true;
+    state.loading = false;
+    return;
+  }
+  if (refreshTags) {
+    tags.actions.refresh();
+  }
+
+  navigateToRecipe(response.data, groupSlug.value, `/g/${groupSlug.value}/r/create/html`);
+}
+
+const newRecipeData = ref<string | object | null>(null);
+const newRecipeUrl = ref<string | null>(null);
+
+function handleIsEditJson() {
+  if (state.isEditJSON) {
+    if (newRecipeData.value) {
+      try {
+        newRecipeData.value = JSON.parse(newRecipeData.value as string);
+      }
+      catch {
+        newRecipeData.value = { data: newRecipeData.value };
+      }
+    }
+    else {
+      newRecipeData.value = {};
+    }
+  }
+  else if (newRecipeData.value && Object.keys(newRecipeData.value).length > 0) {
+    newRecipeData.value = JSON.stringify(newRecipeData.value);
+  }
+  else {
+    newRecipeData.value = null;
+  }
+}
+handleIsEditJson();
+
+const createStatus = ref<string | null>(null);
+async function createFromHtmlOrJson(htmlOrJsonData: string | object | null, importKeywordsAsTags: boolean, importCategories: boolean, url: string | null = null) {
+  if (!htmlOrJsonData) {
+    return;
+  }
+
+  const isValid = await domUrlForm.value?.validate();
+  if (!isValid?.valid) {
+    return;
+  }
+
+  let dataString;
+  if (typeof htmlOrJsonData === "string") {
+    dataString = htmlOrJsonData;
+  }
+  else {
+    dataString = JSON.stringify(htmlOrJsonData);
+  }
+
+  state.loading = true;
+  const { response } = await api.recipes.createOneByHtmlOrJson(
+    dataString,
+    importKeywordsAsTags,
+    importCategories,
+    url,
+    (message: string) => createStatus.value = message,
+  );
+  createStatus.value = null;
+  handleResponse(response, importKeywordsAsTags);
+}
+</script>

frontend/app/pages/g/[groupSlug]/r/create/image.vue

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <v-form ref="domUrlForm" @submit.prevent="createRecipe">
+      <div>
+        <v-card-title class="headline">
+          {{ $t("recipe.create-recipe-from-an-image") }}
+        </v-card-title>
+        <v-card-text>
+          <p>{{ $t("recipe.create-recipe-from-an-image-description") }}</p>
+          <v-container class="px-0">
+            <AppButtonUpload
+              class="ml-auto"
+              url="none"
+              file-name="images"
+              accept="image/*"
+              :text="uploadedImages.length ? $t('recipe.upload-more-images') : $t('recipe.upload-images')"
+              :text-btn="false"
+              :post="false"
+              :multiple="true"
+              @uploaded="uploadImages"
+            />
+            <div v-if="uploadedImages.length" class="mt-3">
+              <p class="my-2">
+                {{ $t("recipe.crop-and-rotate-the-image") }}
+              </p>
+              <v-row>
+                <v-col
+                  v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
+                  :key="index"
+                  cols="12"
+                  sm="6"
+                  lg="4"
+                  xl="3"
+                >
+                  <v-col>
+                    <ImageCropper
+                      :img="imageUrl"
+                      cropper-height="100%"
+                      cropper-width="100%"
+                      :submitted="state.loading"
+                      class="mt-4 mb-2"
+                      @save="(croppedImage) => updateUploadedImage(index, croppedImage)"
+                      @delete="clearImage(index)"
+                    />
+
+                    <v-btn
+                      v-if="uploadedImages.length > 1"
+                      :disabled="state.loading || index === 0"
+                      color="primary"
+                      @click="() => setCoverImage(index)"
+                    >
+                      <v-icon start>
+                        {{ index === 0 ? $globals.icons.check : $globals.icons.fileImage }}
+                      </v-icon>
+
+                      {{ index === 0 ? $t("recipe.cover-image") : $t("recipe.set-as-cover-image") }}
+                    </v-btn>
+                  </v-col>
+                </v-col>
+              </v-row>
+            </div>
+          </v-container>
+          <v-checkbox
+            v-if="uploadedImages.length"
+            v-model="shouldTranslate"
+            color="primary"
+            hide-details
+            :label="$t('recipe.should-translate-description')"
+            :disabled="state.loading"
+          />
+          <v-checkbox
+            v-if="uploadedImages.length"
+            v-model="parseRecipe"
+            color="primary"
+            hide-details
+            :label="$t('recipe.parse-recipe-ingredients-after-import')"
+            :disabled="state.loading"
+          />
+        </v-card-text>
+        <v-card-actions v-if="uploadedImages.length">
+          <div class="w-100 d-flex flex-column align-center">
+            <p style="width: 250px">
+              <BaseButton rounded block type="submit" :loading="state.loading" />
+            </p>
+            <p v-if="state.loading" class="mb-0">
+              {{
+                uploadedImages.length > 1
+                  ? $t("recipe.please-wait-images-processing")
+                  : $t("recipe.please-wait-image-procesing")
+              }}
+            </p>
+          </div>
+        </v-card-actions>
+      </div>
+    </v-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast";
+import { useNewRecipeOptions } from "~/composables/use-new-recipe-options";
+import type { VForm } from "~/types/auto-forms";
+
+const state = reactive({
+  loading: false,
+});
+
+const i18n = useI18n();
+const api = useUserApi();
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug || "");
+
+const domUrlForm = ref<VForm | null>(null);
+const uploadedImages = ref<(Blob | File)[]>([]);
+const uploadedImageNames = ref<string[]>([]);
+const uploadedImagesPreviewUrls = ref<string[]>([]);
+const shouldTranslate = ref(true);
+
+const { parseRecipe, navigateToRecipe } = useNewRecipeOptions();
+
+function uploadImages(files: File[]) {
+  uploadedImages.value = [...uploadedImages.value, ...files];
+  uploadedImageNames.value = [...uploadedImageNames.value, ...files.map(file => file.name)];
+  uploadedImagesPreviewUrls.value = [
+    ...uploadedImagesPreviewUrls.value,
+    ...files.map(file => URL.createObjectURL(file)),
+  ];
+}
+
+function clearImage(index: number) {
+  // Revoke _before_ splicing
+  URL.revokeObjectURL(uploadedImagesPreviewUrls.value[index]);
+
+  uploadedImages.value.splice(index, 1);
+  uploadedImageNames.value.splice(index, 1);
+  uploadedImagesPreviewUrls.value.splice(index, 1);
+}
+
+async function createRecipe() {
+  if (uploadedImages.value.length === 0) {
+    return;
+  }
+
+  state.loading = true;
+
+  const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
+  const { data, error } = await api.recipes.createOneFromImages(uploadedImages.value, translateLanguage?.value);
+  if (error || !data) {
+    alert.error(i18n.t("events.something-went-wrong"));
+    state.loading = false;
+  }
+  else {
+    navigateToRecipe(data, groupSlug.value, `/g/${groupSlug.value}/r/create/image`);
+  }
+}
+
+function updateUploadedImage(index: number, croppedImage: Blob) {
+  uploadedImages.value[index] = croppedImage;
+  uploadedImagesPreviewUrls.value[index] = URL.createObjectURL(croppedImage);
+}
+
+function swapItem(array: any[], i: number, j: number) {
+  if (i < 0 || j < 0 || i >= array.length || j >= array.length) {
+    return;
+  }
+
+  const temp = array[i];
+  array[i] = array[j];
+  array[j] = temp;
+}
+
+function swapImages(i: number, j: number) {
+  swapItem(uploadedImages.value, i, j);
+  swapItem(uploadedImageNames.value, i, j);
+  swapItem(uploadedImagesPreviewUrls.value, i, j);
+}
+
+// Put the intended cover image at the start of the array
+// The backend currently sets the first image as the cover image
+function setCoverImage(index: number) {
+  if (index < 0 || index >= uploadedImages.value.length || index === 0) {
+    return;
+  }
+
+  swapImages(0, index);
+}
+</script>

frontend/app/pages/g/[groupSlug]/r/create/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+const router = useRouter();
+onMounted(() => {
+  // Force redirect to first valid page
+  router.replace("/r/create/url");
+});
+</script>

frontend/app/pages/g/[groupSlug]/r/create/new.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <v-card-title class="headline">
+      {{ $t('recipe.create-recipe') }}
+    </v-card-title>
+    <v-card-text>
+      {{ $t('recipe.create-a-recipe-by-providing-the-name-all-recipes-must-have-unique-names') }}
+      <v-form
+        ref="domCreateByName"
+        @submit.prevent
+      >
+        <v-text-field
+          v-model="newRecipeName"
+          :label="$t('recipe.recipe-name')"
+          :prepend-inner-icon="$globals.icons.primary"
+          validate-on="blur"
+          autofocus
+          variant="solo-filled"
+          clearable
+          class="rounded-lg mt-2"
+          color="primary"
+          rounded
+          :rules="[validators.required]"
+          :hint="$t('recipe.new-recipe-names-must-be-unique')"
+          persistent-hint
+          @keyup.enter="createByName(newRecipeName)"
+        />
+      </v-form>
+    </v-card-text>
+    <v-card-actions class="justify-center">
+      <div style="width: 250px">
+        <BaseButton
+          :disabled="newRecipeName.trim() === ''"
+          rounded
+          block
+          :loading="state.loading"
+          @click="createByName(newRecipeName)"
+        />
+      </div>
+    </v-card-actions>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AxiosResponse } from "axios";
+import { useUserApi } from "~/composables/api";
+import { validators } from "~/composables/use-validators";
+import type { VForm } from "~/types/auto-forms";
+
+const state = reactive({
+  error: false,
+  loading: false,
+});
+const auth = useMealieAuth();
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
+
+const api = useUserApi();
+const router = useRouter();
+
+function handleResponse(response: AxiosResponse<string> | null, edit = false) {
+  if (response?.status !== 201) {
+    state.error = true;
+    state.loading = false;
+    return;
+  }
+  router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`);
+}
+
+const newRecipeName = ref("");
+const domCreateByName = ref<VForm | null>(null);
+
+async function createByName(name: string) {
+  if (!domCreateByName.value?.validate() || name === "") {
+    return;
+  }
+  const { response } = await api.recipes.createOne({ name });
+  handleResponse(response as any, true);
+}
+</script>

frontend/app/pages/g/[groupSlug]/r/create/url.vue

@@ -0,0 +1,267 @@
+<template>
+  <div>
+    <v-form
+      ref="domUrlForm"
+      @submit.prevent="createByUrl(recipeUrl, importKeywordsAsTags, importCategories)"
+    >
+      <div>
+        <v-card-title class="headline">
+          {{ $t('recipe.scrape-recipe') }}
+        </v-card-title>
+        <v-card-text>
+          <v-card-text class="pa-0">
+            <p>{{ $t('recipe.scrape-recipe-description') }}</p>
+            <p v-if="$appInfo.enableOpenaiTranscriptionServices">
+              {{ $t('recipe.scrape-recipe-description-transcription') }}
+            </p>
+          </v-card-text>
+          <v-card-text class="px-0">
+            <p>
+              {{ $t('recipe.scrape-recipe-have-a-lot-of-recipes') }}
+              <router-link :to="bulkImporterTarget">{{ $t('recipe.scrape-recipe-suggest-bulk-importer') }}</router-link>.
+            </p>
+            <p>
+              {{ $t('recipe.scrape-recipe-have-raw-html-or-json-data') }}
+              <router-link :to="htmlOrJsonImporterTarget">{{ $t('recipe.scrape-recipe-you-can-import-from-raw-data-directly') }}</router-link>.
+            </p>
+          </v-card-text>
+          <v-text-field
+            v-model="recipeUrl"
+            :label="$t('new-recipe.recipe-url')"
+            :prepend-inner-icon="$globals.icons.link"
+            validate-on="blur"
+            autofocus
+            variant="solo-filled"
+            clearable
+            class="rounded-lg mt-2"
+            rounded
+            :rules="[validators.url]"
+            :hint="$t('new-recipe.url-form-hint')"
+            persistent-hint
+          />
+        </v-card-text>
+        <v-checkbox
+          v-model="importKeywordsAsTags"
+          color="primary"
+          hide-details
+          :label="$t('recipe.import-original-keywords-as-tags')"
+        />
+        <v-checkbox
+          v-model="importCategories"
+          color="primary"
+          hide-details
+          :label="$t('recipe.import-original-categories')"
+        />
+        <v-checkbox
+          v-model="stayInEditMode"
+          color="primary"
+          hide-details
+          :label="$t('recipe.stay-in-edit-mode')"
+        />
+        <v-checkbox
+          v-model="parseRecipe"
+          color="primary"
+          hide-details
+          :label="$t('recipe.parse-recipe-ingredients-after-import')"
+        />
+        <v-card-actions class="justify-center">
+          <div style="width: 100%" class="text-center">
+            <div style="width: 250px; margin: 0 auto">
+              <BaseButton
+                :disabled="recipeUrl === null"
+                rounded
+                block
+                type="submit"
+                :loading="state.loading"
+              />
+            </div>
+            <v-card-text class="py-2">
+              <!-- render &nbsp; to maintain layout -->
+              {{ createStatus }}&nbsp;
+            </v-card-text>
+          </div>
+        </v-card-actions>
+      </div>
+    </v-form>
+    <v-expand-transition>
+      <v-alert
+        v-if="state.error"
+        color="error"
+        class="mt-6 white--text"
+      >
+        <v-card-title class="ma-0 pa-0">
+          <v-icon
+            start
+            color="white"
+            size="x-large"
+          >
+            {{ $globals.icons.robot }}
+          </v-icon>
+          {{ $t("new-recipe.error-title") }}
+        </v-card-title>
+        <v-divider class="my-3 mx-2" />
+
+        <div class="force-url-white">
+          <p>
+            {{ $t("recipe.scrape-recipe-website-being-blocked") }}
+            <router-link :to="htmlOrJsonImporterTarget">{{ $t("recipe.scrape-recipe-try-importing-raw-html-instead") }}</router-link>
+          </p>
+          <br>
+          <p>
+            {{ $t("new-recipe.error-details") }}
+          </p>
+        </div>
+        <div class="d-flex row justify-space-around my-3 force-url-white">
+          <a
+            class="dark"
+            href="https://developers.google.com/search/docs/data-types/recipe"
+            target="_blank"
+            rel="noreferrer nofollow"
+          >
+            {{ $t("new-recipe.google-ld-json-info") }}
+          </a>
+          <a
+            href="https://github.com/mealie-recipes/mealie/issues"
+            target="_blank"
+            rel="noreferrer nofollow"
+          >
+            {{ $t("new-recipe.github-issues") }}
+          </a>
+          <a
+            href="https://schema.org/Recipe"
+            target="_blank"
+            rel="noreferrer nofollow"
+          >
+            {{ $t("new-recipe.recipe-markup-specification") }}
+          </a>
+        </div>
+      </v-alert>
+    </v-expand-transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AxiosResponse } from "axios";
+import { useUserApi } from "~/composables/api";
+import { useTagStore } from "~/composables/store/use-tag-store";
+import { useNewRecipeOptions } from "~/composables/use-new-recipe-options";
+import { validators } from "~/composables/use-validators";
+import type { VForm } from "~/types/auto-forms";
+
+definePageMeta({
+  key: route => route.path,
+});
+const state = reactive({
+  error: false,
+  loading: false,
+});
+
+const auth = useMealieAuth();
+const api = useUserApi();
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
+
+const router = useRouter();
+const tags = useTagStore();
+
+const {
+  importKeywordsAsTags,
+  importCategories,
+  stayInEditMode,
+  parseRecipe,
+  navigateToRecipe,
+} = useNewRecipeOptions();
+
+const bulkImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/bulk`);
+const htmlOrJsonImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/html`);
+
+function handleResponse(response: AxiosResponse<string> | null, refreshTags = false) {
+  if (response?.status !== 201) {
+    state.error = true;
+    state.loading = false;
+    return;
+  }
+  if (refreshTags) {
+    tags.actions.refresh();
+  }
+
+  navigateToRecipe(response.data, groupSlug.value, `/g/${groupSlug.value}/r/create/url`);
+}
+
+const recipeUrl = computed({
+  set(recipe_import_url: string | null) {
+    if (recipe_import_url !== null) {
+      recipe_import_url = recipe_import_url.trim();
+      router.replace({ query: { ...route.query, recipe_import_url } });
+    }
+  },
+  get() {
+    return route.query.recipe_import_url as string | null;
+  },
+});
+
+onMounted(() => {
+  if (recipeUrl.value && recipeUrl.value.includes("https")) {
+    // Check if we have a query params for using keywords as tags or staying in edit mode.
+    // We don't use these in the app anymore, but older automations such as Bookmarklet might still use them,
+    // and they're easy enough to support.
+    const importKeywordsAsTagsParam = route.query.use_keywords;
+    if (importKeywordsAsTagsParam === "1") {
+      importKeywordsAsTags.value = true;
+    }
+    else if (importKeywordsAsTagsParam === "0") {
+      importKeywordsAsTags.value = false;
+    }
+
+    const stayInEditModeParam = route.query.edit;
+    if (stayInEditModeParam === "1") {
+      stayInEditMode.value = true;
+    }
+    else if (stayInEditModeParam === "0") {
+      stayInEditMode.value = false;
+    }
+
+    createByUrl(recipeUrl.value, importKeywordsAsTags.value, false);
+    return;
+  }
+});
+
+const domUrlForm = ref<VForm | null>(null);
+
+// Remove import URL from query params when leaving the page
+const isLeaving = ref(false);
+onBeforeRouteLeave((to) => {
+  if (isLeaving.value) {
+    return;
+  }
+  isLeaving.value = true;
+  router.replace({ query: undefined }).then(() => router.push(to));
+});
+
+const createStatus = ref<string | null>(null);
+async function createByUrl(url: string | null, importKeywordsAsTags: boolean, importCategories: boolean) {
+  if (url === null) {
+    return;
+  }
+
+  if (!domUrlForm.value?.validate() || url === "") {
+    console.log("Invalid URL", url);
+    return;
+  }
+  state.loading = true;
+  const { response } = await api.recipes.createOneByUrl(
+    url,
+    importKeywordsAsTags,
+    importCategories,
+    (message: string) => createStatus.value = message,
+  );
+  createStatus.value = null;
+  handleResponse(response, importKeywordsAsTags);
+}
+</script>
+
+<style scoped>
+.force-url-white a {
+  color: white !important;
+}
+</style>

frontend/app/pages/g/[groupSlug]/r/create/zip.vue

@@ -0,0 +1,80 @@
+<template>
+  <v-form>
+    <div>
+      <v-card-title class="headline">
+        {{ $t('recipe.import-from-zip') }}
+      </v-card-title>
+      <v-card-text>
+        {{ $t('recipe.import-from-zip-description') }}
+        <v-file-input
+          v-model="newRecipeZip"
+          accept=".zip"
+          label=".zip"
+          variant="solo-filled"
+          clearable
+          class="rounded-lg mt-2"
+          rounded
+          truncate-length="100"
+          :hint="$t('recipe.zip-files-must-have-been-exported-from-mealie')"
+          persistent-hint
+          prepend-icon=""
+          :prepend-inner-icon="$globals.icons.zip"
+        />
+      </v-card-text>
+      <v-card-actions class="justify-center">
+        <div style="width: 250px">
+          <BaseButton
+            :disabled="newRecipeZip === null"
+            rounded
+            block
+            :loading="state.loading"
+            @click="createByZip"
+          />
+        </div>
+      </v-card-actions>
+    </div>
+  </v-form>
+</template>
+
+<script setup lang="ts">
+import { useUserApi } from "~/composables/api";
+import { useGlobalI18n } from "~/composables/use-global-i18n";
+import { alert } from "~/composables/use-toast";
+
+const state = reactive({
+  loading: false,
+});
+const auth = useMealieAuth();
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
+
+const api = useUserApi();
+const router = useRouter();
+
+const newRecipeZip = ref<File | null>(null);
+const newRecipeZipFileName = "archive";
+
+async function createByZip() {
+  if (!newRecipeZip.value) {
+    return;
+  }
+  const formData = new FormData();
+  formData.append(newRecipeZipFileName, newRecipeZip.value);
+
+  try {
+    const response = await api.upload.file("/api/recipes/create/zip", formData);
+    if (response?.status !== 201) {
+      throw new Error("Failed to upload zip");
+    }
+    router.push(`/g/${groupSlug.value}/r/${response.data}`);
+  }
+  catch (error) {
+    console.error(error);
+    const i18n = useGlobalI18n();
+    alert.error(i18n.t("events.something-went-wrong"));
+  }
+  finally {
+    state.loading = false;
+  }
+}
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <v-container>
+    <RecipeOrganizerPage
+      v-if="store"
+      :items="store"
+      :icon="$globals.icons.categories"
+      item-type="categories"
+      @delete="actions.deleteOne"
+      @update="actions.updateOne"
+    >
+      <template #title>
+        {{ $t("category.categories") }}
+      </template>
+    </RecipeOrganizerPage>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import RecipeOrganizerPage from "~/components/Domain/Recipe/RecipeOrganizerPage.vue";
+import { useCategoryStore } from "~/composables/store";
+
+definePageMeta({
+  middleware: ["group-only"],
+});
+
+const { store, actions } = useCategoryStore();
+const i18n = useI18n();
+
+useSeoMeta({
+  title: i18n.t("category.categories"),
+});
+</script>

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

@@ -0,0 +1,687 @@
+<template>
+  <v-container>
+    <BasePageTitle divider>
+      <template #header>
+        <v-img
+          width="100"
+          max-height="100"
+          max-width="100"
+          src="/svgs/manage-cookbooks.svg"
+        />
+      </template>
+      <template #title>
+        {{ $t('recipe-finder.recipe-finder') }}
+      </template>
+
+      <template #content>
+        {{ $t('recipe-finder.recipe-finder-description') }}
+      </template>
+    </BasePageTitle>
+    <v-container v-if="state.ready">
+      <v-row>
+        <v-col :cols="useMobile ? 12 : 3">
+          <v-container class="ma-0 pa-0">
+            <v-row no-gutters>
+              <v-col
+                cols="12"
+                no-gutters
+                :class="attrs.searchFilter.colClass"
+              >
+                <SearchFilter
+                  v-if="foods"
+                  v-model="selectedFoods"
+                  :items="foods"
+                  :class="attrs.searchFilter.filterClass"
+                >
+                  <v-icon start>
+                    {{ $globals.icons.foods }}
+                  </v-icon>
+                  {{ $t("general.foods") }}
+                </SearchFilter>
+                <SearchFilter
+                  v-if="tools"
+                  v-model="selectedTools"
+                  :items="tools"
+                  :class="attrs.searchFilter.filterClass"
+                >
+                  <v-icon start>
+                    {{ $globals.icons.potSteam }}
+                  </v-icon>
+                  {{ $t("tool.tools") }}
+                </SearchFilter>
+                <div :class="attrs.searchFilter.filterClass">
+                  <v-badge
+                    :model-value="!!state.queryFilterJSON.parts && state.queryFilterJSON.parts.length > 0"
+                    size="small"
+                    color="primary"
+                    :content="(state.queryFilterJSON.parts || []).length"
+                  >
+                    <v-btn
+                      size="small"
+                      color="accent"
+                      dark
+                      @click="state.queryFilterMenu = !state.queryFilterMenu"
+                    >
+                      <v-icon start>
+                        {{ $globals.icons.filter }}
+                      </v-icon>
+                      {{ $t("recipe-finder.other-filters") }}
+                      <BaseDialog
+                        v-model="state.queryFilterMenu"
+                        :title="$t('recipe-finder.other-filters')"
+                        :icon="$globals.icons.filter"
+                        width="100%"
+                        max-width="1100px"
+                        :submit-disabled="!state.queryFilterEditorValue"
+                        can-confirm
+                        @confirm="saveQueryFilter"
+                      >
+                        <v-card-text>
+                          <QueryFilterBuilder
+                            :key="state.queryFilterMenuKey"
+                            :initial-query-filter="state.queryFilterJSON"
+                            :field-defs="queryFilterBuilderFields"
+                            @input="(value) => state.queryFilterEditorValue = value"
+                            @input-j-s-o-n="(value) => state.queryFilterEditorValueJSON = value"
+                          />
+                        </v-card-text>
+                        <template #custom-card-action>
+                          <BaseButton
+                            color="error"
+                            type="submit"
+                            @click="clearQueryFilter"
+                          >
+                            <template #icon>
+                              {{ $globals.icons.close }}
+                            </template>
+                            {{ $t("search.clear-selection") }}
+                          </BaseButton>
+                        </template>
+                      </BaseDialog>
+                    </v-btn>
+                  </v-badge>
+                </div>
+              </v-col>
+            </v-row>
+            <!-- Settings Menu -->
+            <v-row
+              no-gutters
+              class="mb-2"
+            >
+              <v-col
+                cols="12"
+                :class="attrs.settings.colClass"
+              >
+                <v-menu
+                  v-model="state.settingsMenu"
+                  offset-y
+                  nudge-bottom="3"
+                  :close-on-content-click="false"
+                >
+                  <template #activator="{ props }">
+                    <v-btn
+                      size="small"
+                      color="primary"
+                      dark
+                      v-bind="props"
+                    >
+                      <v-icon start>
+                        {{ $globals.icons.cog }}
+                      </v-icon>
+                      {{ $t("general.settings") }}
+                    </v-btn>
+                  </template>
+                  <v-card>
+                    <v-card-text>
+                      <div>
+                        <v-number-input
+                          v-model="state.settings.maxMissingFoods"
+                          :precision="null"
+                          :min="0"
+                          control-variant="stacked"
+                          inset
+                          hide-details
+                          :label="$t('recipe-finder.max-missing-ingredients')"
+                        />
+                        <v-number-input
+                          v-model="state.settings.maxMissingTools"
+                          :precision="null"
+                          :min="0"
+                          control-variant="stacked"
+                          inset
+                          hide-details
+                          :label="$t('recipe-finder.max-missing-tools')"
+                          class="mt-4"
+                        />
+                      </div>
+                      <div class="mt-1">
+                        <v-checkbox
+                          v-if="isOwnGroup"
+                          v-model="state.settings.includeFoodsOnHand"
+                          density="compact"
+                          size="small"
+                          hide-details
+                          class="my-auto"
+                          :label="$t('recipe-finder.include-ingredients-on-hand')"
+                        />
+                        <v-checkbox
+                          v-if="isOwnGroup"
+                          v-model="state.settings.includeToolsOnHand"
+                          density="compact"
+                          size="small"
+                          hide-details
+                          class="my-auto"
+                          :label="$t('recipe-finder.include-tools-on-hand')"
+                        />
+                      </div>
+                    </v-card-text>
+                  </v-card>
+                </v-menu>
+              </v-col>
+            </v-row>
+            <v-row
+              no-gutters
+              class="my-2"
+            >
+              <v-col cols="12">
+                <v-divider />
+              </v-col>
+            </v-row>
+            <v-row
+              no-gutters
+              class="mt-5"
+            >
+              <v-card-title class="ma-0 pa-0">
+                {{ $t("recipe-finder.selected-ingredients") }}
+              </v-card-title>
+              <v-container
+                class="ma-0 pa-0"
+                style="max-height: 60vh; overflow-y: auto;"
+              >
+                <v-card-text
+                  v-if="!selectedFoods.length"
+                  class="ma-0 pa-0"
+                >
+                  {{ $t("recipe-finder.no-ingredients-selected") }}
+                </v-card-text>
+                <div v-if="useMobile">
+                  <v-row no-gutters>
+                    <v-col
+                      cols="12"
+                      class="d-flex flex-wrap justify-end"
+                    >
+                      <v-chip
+                        v-for="food in selectedFoods"
+                        :key="food.id"
+                        label
+                        class="ma-1"
+                        color="accent custom-transparent"
+                        closable
+                        variant="flat"
+                        @click:close="removeFood(food)"
+                      >
+                        <span class="text-hide-overflow">{{ food.pluralName || food.name }}</span>
+                      </v-chip>
+                    </v-col>
+                  </v-row>
+                </div>
+                <div v-else>
+                  <v-row
+                    v-for="food in selectedFoods"
+                    :key="food.id"
+                    no-gutters
+                    class="mb-1"
+                  >
+                    <v-col cols="12">
+                      <v-chip
+                        label
+                        color="accent custom-transparent"
+                        variant="flat"
+                        closable
+                        @click:close="removeFood(food)"
+                      >
+                        <span class="text-hide-overflow">{{ food.pluralName || food.name }}</span>
+                      </v-chip>
+                    </v-col>
+                  </v-row>
+                </div>
+              </v-container>
+            </v-row>
+            <v-row
+              v-if="selectedTools.length"
+              no-gutters
+              class="mt-5"
+            >
+              <v-card-title class="ma-0 pa-0">
+                {{ $t("recipe-finder.selected-tools") }}
+              </v-card-title>
+              <v-container class="ma-0 pa-0">
+                <div v-if="useMobile">
+                  <v-row no-gutters>
+                    <v-col
+                      cols="12"
+                      class="d-flex flex-wrap justify-end"
+                    >
+                      <v-chip
+                        v-for="tool in selectedTools"
+                        :key="tool.id"
+                        label
+                        class="ma-1"
+                        color="accent custom-transparent"
+                        closeable
+                        variant="flat"
+                        @click:close="removeTool(tool)"
+                      >
+                        <span class="text-hide-overflow">{{ tool.name }}</span>
+                      </v-chip>
+                    </v-col>
+                  </v-row>
+                </div>
+                <div v-else>
+                  <v-row
+                    v-for="tool in selectedTools"
+                    :key="tool.id"
+                    no-gutters
+                    class="mb-1"
+                  >
+                    <v-col cols="12">
+                      <v-chip
+                        label
+                        color="accent custom-transparent"
+                        closable
+                        variant="flat"
+                        @click:close="removeTool(tool)"
+                      >
+                        <span class="text-hide-overflow">{{ tool.name }}</span>
+                      </v-chip>
+                    </v-col>
+                  </v-row>
+                </div>
+              </v-container>
+            </v-row>
+          </v-container>
+        </v-col>
+        <v-col
+          :cols="useMobile ? 12 : 9"
+          :style="useMobile ? '' : 'max-height: 70vh; overflow-y: auto'"
+        >
+          <v-container
+            v-if="recipeSuggestions.readyToMake.length || recipeSuggestions.missingItems.length"
+            class="ma-0 pa-0"
+          >
+            <v-row
+              v-if="recipeSuggestions.readyToMake.length"
+              density="compact"
+            >
+              <v-col cols="12">
+                <v-card-title :class="attrs.title.class.readyToMake">
+                  {{ $t("recipe-finder.ready-to-make") }}
+                </v-card-title>
+              </v-col>
+              <v-col
+                v-for="(item, idx) in recipeSuggestions.readyToMake"
+                :key="`${idx}-ready`"
+                cols="12"
+              >
+                <v-lazy>
+                  <RecipeSuggestion
+                    :recipe="item.recipe"
+                    :missing-foods="item.missingFoods"
+                    :missing-tools="item.missingTools"
+                    :disable-checkbox="state.loading"
+                    @add-food="addFood"
+                    @remove-food="removeFood"
+                    @add-tool="addTool"
+                    @remove-tool="removeTool"
+                  />
+                </v-lazy>
+              </v-col>
+            </v-row>
+            <v-row
+              v-if="recipeSuggestions.missingItems.length"
+              density="compact"
+            >
+              <v-col cols="12">
+                <v-card-title :class="attrs.title.class.missingItems">
+                  {{ $t("recipe-finder.almost-ready-to-make") }}
+                </v-card-title>
+              </v-col>
+              <v-col
+                v-for="(item, idx) in recipeSuggestions.missingItems"
+                :key="`${idx}-missing`"
+                cols="12"
+              >
+                <v-lazy>
+                  <RecipeSuggestion
+                    :recipe="item.recipe"
+                    :missing-foods="item.missingFoods"
+                    :missing-tools="item.missingTools"
+                    :disable-checkbox="state.loading"
+                    @add-food="addFood"
+                    @remove-food="removeFood"
+                    @add-tool="addTool"
+                    @remove-tool="removeTool"
+                  />
+                </v-lazy>
+              </v-col>
+            </v-row>
+          </v-container>
+          <v-container v-else-if="!state.recipesReady">
+            <v-row>
+              <v-col
+                cols="12"
+                class="d-flex justify-center"
+              >
+                <div class="text-center">
+                  <AppLoader waiting-text="" />
+                </div>
+              </v-col>
+            </v-row>
+          </v-container>
+          <v-container v-else>
+            <v-row>
+              <v-col
+                cols="12"
+                class="d-flex flex-column justify-center align-center ga-1"
+              >
+                <v-card-title class="ma-0 pa-0">
+                  {{ $t("recipe-finder.no-recipes-found") }}
+                </v-card-title>
+                <v-card-text class="ma-0 pa-0 text-center">
+                  {{ $t("recipe-finder.no-recipes-found-description") }}
+                </v-card-text>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-container v-else>
+      <v-row>
+        <v-col
+          cols="12"
+          class="d-flex justify-center"
+        >
+          <div class="text-center">
+            <AppLoader waiting-text="" />
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { watchDebounced } from "@vueuse/core";
+import { useUserApi } from "~/composables/api";
+import { usePublicExploreApi } from "~/composables/api/api-client";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import { useFoodStore, usePublicFoodStore, useToolStore, usePublicToolStore } from "~/composables/store";
+import type { IngredientFood, RecipeSuggestionQuery, RecipeSuggestionResponseItem, RecipeTool } from "~/lib/api/types/recipe";
+import { Organizer } from "~/lib/api/types/non-generated";
+import QueryFilterBuilder from "~/components/Domain/QueryFilterBuilder.vue";
+import RecipeSuggestion from "~/components/Domain/Recipe/RecipeSuggestion.vue";
+import SearchFilter from "~/components/Domain/SearchFilter.vue";
+import type { QueryFilterJSON } from "~/lib/api/types/non-generated";
+import type { FieldDefinition } from "~/composables/use-query-filter-builder";
+import { useRecipeFinderPreferences } from "~/composables/use-users/preferences";
+
+interface RecipeSuggestions {
+  readyToMake: RecipeSuggestionResponseItem[];
+  missingItems: RecipeSuggestionResponseItem[];
+}
+
+const display = useDisplay();
+const i18n = useI18n();
+const auth = useMealieAuth();
+const route = useRoute();
+
+useSeoMeta({
+  title: i18n.t("recipe-finder.recipe-finder"),
+});
+
+const useMobile = computed(() => display.smAndDown.value);
+
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
+const { isOwnGroup } = useLoggedInState();
+const api = isOwnGroup.value ? useUserApi() : usePublicExploreApi(groupSlug.value).explore;
+
+const preferences = useRecipeFinderPreferences();
+const state = reactive({
+  ready: false,
+  loading: false,
+  recipesReady: false,
+  settingsMenu: false,
+  queryFilterMenu: false,
+  queryFilterMenuKey: 0,
+  queryFilterEditorValue: "",
+  queryFilterEditorValueJSON: {},
+  queryFilterJSON: preferences.value.queryFilterJSON,
+  settings: {
+    maxMissingFoods: preferences.value.maxMissingFoods,
+    maxMissingTools: preferences.value.maxMissingTools,
+    includeFoodsOnHand: preferences.value.includeFoodsOnHand,
+    includeToolsOnHand: preferences.value.includeToolsOnHand,
+    queryFilter: preferences.value.queryFilter,
+    limit: 20,
+  },
+});
+
+onMounted(() => {
+  if (!isOwnGroup.value) {
+    state.settings.includeFoodsOnHand = false;
+    state.settings.includeToolsOnHand = false;
+  }
+});
+
+watch(
+  () => state,
+  (newState) => {
+    preferences.value.queryFilter = newState.settings.queryFilter;
+    preferences.value.queryFilterJSON = newState.queryFilterJSON;
+    preferences.value.maxMissingFoods = newState.settings.maxMissingFoods;
+    preferences.value.maxMissingTools = newState.settings.maxMissingTools;
+    preferences.value.includeFoodsOnHand = newState.settings.includeFoodsOnHand;
+    preferences.value.includeToolsOnHand = newState.settings.includeToolsOnHand;
+  },
+  {
+    deep: true,
+  },
+);
+
+const attrs = computed(() => {
+  return {
+    title: {
+      class: {
+        readyToMake: "ma-0 pa-0",
+        missingItems: recipeSuggestions.value.readyToMake.length ? "ma-0 pa-0 mt-5" : "ma-0 pa-0",
+      },
+    },
+    searchFilter: {
+      colClass: useMobile.value ? "d-flex flex-wrap justify-end" : "d-flex flex-wrap justify-start",
+      filterClass: useMobile.value ? "ml-4 mb-2" : "mr-4 mb-2",
+    },
+    settings: {
+      colClass: useMobile.value ? "d-flex flex-wrap justify-end" : "d-flex flex-wrap justify-start",
+    },
+  };
+});
+
+const foodStore = isOwnGroup.value ? useFoodStore() : usePublicFoodStore(groupSlug.value);
+const foods = foodStore.store.value;
+const selectedFoods = ref<IngredientFood[]>([]);
+function addFood(food: IngredientFood) {
+  selectedFoods.value = [...selectedFoods.value, food];
+  handleFoodUpdates();
+}
+function removeFood(food: IngredientFood) {
+  selectedFoods.value = selectedFoods.value.filter(f => f.id !== food.id);
+  handleFoodUpdates();
+}
+function handleFoodUpdates() {
+  selectedFoods.value.sort((a, b) => (a.pluralName || a.name).localeCompare(b.pluralName || b.name));
+  preferences.value.foodIds = selectedFoods.value.map(food => food.id);
+}
+watch(
+  () => selectedFoods.value,
+  () => {
+    handleFoodUpdates();
+  },
+);
+
+const toolStore = isOwnGroup.value ? useToolStore() : usePublicToolStore(groupSlug.value);
+const tools = toolStore.store.value;
+const selectedTools = ref<RecipeTool[]>([]);
+function addTool(tool: RecipeTool) {
+  selectedTools.value = [...selectedTools.value, tool];
+  handleToolUpdates();
+}
+function removeTool(tool: RecipeTool) {
+  selectedTools.value = selectedTools.value.filter(t => t.id !== tool.id);
+  handleToolUpdates();
+}
+function handleToolUpdates() {
+  selectedTools.value.sort((a, b) => a.name.localeCompare(b.name));
+  preferences.value.toolIds = selectedTools.value.map(tool => tool.id);
+}
+watch(
+  () => selectedTools.value,
+  () => {
+    handleToolUpdates();
+  },
+);
+
+async function hydrateFoods() {
+  if (!preferences.value.foodIds.length) {
+    return;
+  }
+  if (!foodStore.store.value.length) {
+    await foodStore.actions.refresh();
+  }
+
+  const foods = preferences.value.foodIds
+    .map(foodId => foodStore.store.value.find(food => food.id === foodId))
+    .filter(food => !!food);
+
+  selectedFoods.value = foods;
+}
+
+async function hydrateTools() {
+  if (!preferences.value.toolIds.length) {
+    return;
+  }
+  if (!toolStore.store.value.length) {
+    await toolStore.actions.refresh();
+  }
+
+  const tools = preferences.value.toolIds
+    .map(toolId => toolStore.store.value.find(tool => tool.id === toolId))
+    .filter(tool => !!tool);
+
+  selectedTools.value = tools;
+}
+
+onMounted(async () => {
+  await Promise.all([hydrateFoods(), hydrateTools()]);
+  state.ready = true;
+  if (!selectedFoods.value.length) {
+    state.recipesReady = true;
+  };
+});
+
+const recipeResponseItems = ref<RecipeSuggestionResponseItem[]>([]);
+const recipeSuggestions = computed<RecipeSuggestions>(() => {
+  const readyToMake: RecipeSuggestionResponseItem[] = [];
+  const missingItems: RecipeSuggestionResponseItem[] = [];
+  recipeResponseItems.value.forEach((responseItem) => {
+    if (responseItem.missingFoods.length === 0 && responseItem.missingTools.length === 0) {
+      readyToMake.push(responseItem);
+    }
+    else {
+      missingItems.push(responseItem);
+    };
+  });
+
+  return {
+    readyToMake,
+    missingItems,
+  };
+});
+
+watchDebounced(
+  [selectedFoods, selectedTools, state.settings], async () => {
+    // don't search for suggestions if no foods are selected
+    if (!selectedFoods.value.length) {
+      recipeResponseItems.value = [];
+      state.recipesReady = true;
+      return;
+    }
+
+    state.loading = true;
+    const { data } = await api.recipes.getSuggestions(
+      {
+        limit: state.settings.limit,
+        queryFilter: state.settings.queryFilter,
+        maxMissingFoods: state.settings.maxMissingFoods,
+        maxMissingTools: state.settings.maxMissingTools,
+        includeFoodsOnHand: state.settings.includeFoodsOnHand,
+        includeToolsOnHand: state.settings.includeToolsOnHand,
+      } as RecipeSuggestionQuery,
+      selectedFoods.value.map(food => food.id),
+      selectedTools.value.map(tool => tool.id),
+    );
+    state.loading = false;
+    if (!data) {
+      return;
+    }
+    recipeResponseItems.value = data.items;
+    state.recipesReady = true;
+  },
+  {
+    debounce: 500,
+  },
+);
+
+const queryFilterBuilderFields: FieldDefinition[] = [
+  {
+    name: "recipe_category.id",
+    label: i18n.t("category.categories"),
+    type: Organizer.Category,
+  },
+  {
+    name: "tags.id",
+    label: i18n.t("tag.tags"),
+    type: Organizer.Tag,
+  },
+  {
+    name: "household_id",
+    label: i18n.t("household.households"),
+    type: Organizer.Household,
+  },
+  {
+    name: "user_id",
+    label: i18n.t("user.users"),
+    type: Organizer.User,
+  },
+  {
+    name: "last_made",
+    label: i18n.t("general.last-made"),
+    type: "relativeDate",
+  },
+];
+
+function clearQueryFilter() {
+  state.queryFilterEditorValue = "";
+  state.queryFilterEditorValueJSON = { parts: [] } as QueryFilterJSON;
+  state.settings.queryFilter = "";
+  state.queryFilterJSON = { parts: [] } as QueryFilterJSON;
+  state.queryFilterMenu = false;
+  state.queryFilterMenuKey += 1;
+}
+
+function saveQueryFilter() {
+  state.settings.queryFilter = state.queryFilterEditorValue || "";
+  state.queryFilterJSON = state.queryFilterEditorValueJSON || { parts: [] } as QueryFilterJSON;
+  state.queryFilterMenu = false;
+}
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <v-container>
+    <RecipeOrganizerPage
+      v-if="store"
+      :items="store"
+      :icon="$globals.icons.tags"
+      item-type="tags"
+      @delete="actions.deleteOne"
+      @update="actions.updateOne"
+    >
+      <template #title>
+        {{ $t("tag.tags") }}
+      </template>
+    </RecipeOrganizerPage>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import RecipeOrganizerPage from "~/components/Domain/Recipe/RecipeOrganizerPage.vue";
+import { useTagStore } from "~/composables/store";
+
+definePageMeta({
+  middleware: ["group-only"],
+});
+
+const { store, actions } = useTagStore();
+const i18n = useI18n();
+
+useSeoMeta({
+  title: i18n.t("tag.tags"),
+});
+</script>

frontend/app/pages/g/[groupSlug]/recipes/timeline.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <BasePageTitle
+      v-if="groupName"
+      class="mt-n4 pt-8"
+    >
+      <template #header>
+        <v-img
+          width="100%"
+          max-height="200"
+          max-width="150"
+          src="/svgs/manage-members.svg"
+        />
+      </template>
+      <template #title>
+        {{ $t("recipe.group-global-timeline", { groupName }) }}
+      </template>
+    </BasePageTitle>
+    <v-sheet
+      :class="$vuetify.display.smAndDown ? 'pa-0' : 'px-3 py-0'"
+      style="background-color: transparent;"
+    >
+      <RecipeTimeline
+        v-if="queryFilter"
+        v-model="ready"
+        show-recipe-cards
+        :query-filter="queryFilter"
+      />
+    </v-sheet>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserApi } from "~/composables/api";
+import RecipeTimeline from "~/components/Domain/Recipe/RecipeTimeline.vue";
+
+definePageMeta({
+  middleware: ["group-only"],
+});
+
+const i18n = useI18n();
+const api = useUserApi();
+const ready = ref<boolean>(false);
+
+useSeoMeta({
+  title: i18n.t("recipe.timeline"),
+});
+
+const groupName = ref<string>("");
+const queryFilter = ref<string>("");
+async function fetchHousehold() {
+  const { data } = await api.households.getCurrentUserHousehold();
+  if (data) {
+    queryFilter.value = `recipe.group_id="${data.groupId}"`;
+    groupName.value = data.group;
+  }
+
+  ready.value = true;
+}
+
+useAsyncData("house-hold", fetchHousehold);
+</script>

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>

frontend/app/pages/g/[groupSlug]/shared/r/[id].vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <client-only>
+      <RecipePage
+        v-if="recipe"
+        v-model="recipe"
+      />
+    </client-only>
+  </div>
+</template>
+
+<script setup lang="ts">
+import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
+import { usePublicApi } from "~/composables/api/api-client";
+
+definePageMeta({
+  layout: "basic",
+});
+
+const auth = useMealieAuth();
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
+
+const router = useRouter();
+const recipeId = route.params.id as string;
+const api = usePublicApi();
+
+const title = ref(route.meta?.title as string ?? "");
+useSeoMeta({
+  title,
+});
+
+const { data: recipe } = await useAsyncData("recipe", async () => {
+  const { data, error } = await api.shared.getShared(recipeId);
+
+  if (error) {
+    console.error("error loading recipe -> ", error);
+    router.push(`/g/${groupSlug.value}`);
+  }
+
+  if (data) {
+    title.value = data?.name || "";
+  }
+
+  return data;
+});
+</script>