feat: Migrate to Nuxt 3 framework (#5184)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

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

@@ -0,0 +1,11 @@
+<template>
+  <CookbookPage />
+</template>
+
+<script lang="ts">
+import CookbookPage from "@/components/Domain/Cookbook/CookbookPage.vue";
+
+export default defineNuxtComponent({
+  components: { CookbookPage },
+});
+</script>

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

@@ -0,0 +1,260 @@
+<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" :actions="actions" />
+      </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="px-12" max-width="1000">
+      <BasePageTitle divider>
+        <template #header>
+          <v-img width="100%" max-height="100" max-width="100" :src="require('~/static/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="actions.updateOrder(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]"
+                :actions="actions"
+                :collapsable="false"
+                @delete="deleteEventHandler"
+              />
+              <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 lang="ts">
+import { VueDraggable } from "vue-draggable-plus";
+import { useCookbooks } from "@/composables/use-group-cookbooks";
+import { useHouseholdSelf } from "@/composables/use-households";
+import CookbookEditor from "~/components/Domain/Cookbook/CookbookEditor.vue";
+import type { ReadCookBook } from "~/lib/api/types/cookbook";
+import { useCookbookPreferences } from "~/composables/use-users/preferences";
+
+export default defineNuxtComponent({
+  components: { CookbookEditor, VueDraggable },
+  middleware: ["sidebase-auth", "group-only"],
+  setup() {
+    const dialogStates = reactive({
+      create: false,
+      delete: false,
+    });
+
+    const i18n = useI18n();
+
+    // Set page title
+    useSeoMeta({
+      title: i18n.t("cookbook.cookbooks"),
+    });
+
+    const $auth = useMealieAuth();
+    const { cookbooks: allCookbooks, actions } = useCookbooks();
+
+    // 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,
+          ) ?? [];
+      },
+      { 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;
+      await actions.createOne(name).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);
+    });
+
+    return {
+      myCookbooks,
+      cookbookPreferences,
+      actions,
+      dialogStates,
+      // create
+      createTargetKey,
+      createTarget,
+      createCookbook,
+
+      // delete
+      deleteTarget,
+      deleteEventHandler,
+      deleteCookbook,
+      deleteCreateTarget,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <RecipeExplorerPage />
+  </div>
+</template>
+
+<script lang="ts">
+import RecipeExplorerPage from "~/components/Domain/Recipe/RecipeExplorerPage.vue";
+
+export default defineNuxtComponent({
+  components: { RecipeExplorerPage },
+});
+</script>

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

@@ -0,0 +1,58 @@
+<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 ?? "");
+useSeoMeta({ title });
+
+const router = useRouter();
+const slug = route.params.slug as string;
+
+const recipe = ref<Recipe | null>(null);
+if (isOwnGroup.value) {
+  const { recipe: data } = useRecipe(slug);
+  watch(data, (value) => {
+    recipe.value = value;
+  });
+}
+else {
+  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;
+}
+
+whenever(
+  () => recipe.value,
+  () => {
+    if (recipe.value && recipe.value.name) {
+      title.value = recipe.value.name;
+    }
+  },
+);
+</script>

frontend/pages/g/[groupSlug]/r/[slug]/ingredient-parser.vue

@@ -0,0 +1,440 @@
+<template>
+  <v-container v-if="recipe">
+    <v-container>
+      <BaseCardSectionTitle :title="$t('recipe.parser.ingredient-parser')">
+        <div class="mt-4">
+          {{ $t("recipe.parser.explanation") }}
+        </div>
+
+        <div class="my-4">
+          {{ $t("recipe.parser.alerts-explainer") }}
+        </div>
+        <div class="d-flex align-center mb-n4">
+          <div class="mb-4">
+            {{ $t("recipe.parser.select-parser") }}
+          </div>
+          <BaseOverflowButton
+            v-model="parser"
+            btn-class="mx-2 mb-4"
+            :items="availableParsers"
+          />
+        </div>
+      </BaseCardSectionTitle>
+
+      <div
+        class="d-flex mt-n3 mb-4 justify-end"
+        style="gap: 5px"
+      >
+        <BaseButton
+          cancel
+          class="mr-auto"
+          @click="$router.go(-1)"
+        />
+        <BaseButton
+          color="info"
+          :disabled="parserLoading"
+          @click="fetchParsed"
+        >
+          <template #icon>
+            {{ $globals.icons.foods }}
+          </template>
+          {{ $t("recipe.parser.parse-all") }}
+        </BaseButton>
+        <BaseButton
+          save
+          :disabled="parserLoading"
+          @click="saveAll"
+        />
+      </div>
+
+      <div v-if="parserLoading">
+        <AppLoader
+          v-if="parserLoading"
+          :loading="parserLoading"
+          waiting-text=""
+        />
+      </div>
+      <div v-else>
+        <v-expansion-panels
+          v-model="panels"
+          multiple
+        >
+          <VueDraggable
+            v-if="parsedIng.length > 0"
+            v-model="parsedIng"
+            handle=".handle"
+            :delay="250"
+            :delay-on-touch-only="true"
+            :style="{ width: '100%' }"
+            ghost-class="ghost"
+          >
+            <v-expansion-panel
+              v-for="(ing, index) in parsedIng"
+              :key="index"
+            >
+              <v-expansion-panel-title
+                class="my-0 py-0"
+                disable-icon-rotate
+              >
+                <template #default="{ expanded }">
+                  <v-fade-transition>
+                    <span
+                      v-if="!expanded"
+                      key="0"
+                    > {{ ing.input }} </span>
+                  </v-fade-transition>
+                </template>
+                <template #actions>
+                  <v-icon
+                    start
+                    :color="isError(ing) ? 'error' : 'success'"
+                  >
+                    {{ isError(ing) ? $globals.icons.alert : $globals.icons.check }}
+                  </v-icon>
+                  <div
+                    class="my-auto"
+                    :color="isError(ing) ? 'error-text' : 'success-text'"
+                  >
+                    {{ ing.confidence ? asPercentage(ing.confidence.average!) : "" }}
+                  </div>
+                </template>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text class="pb-0 mb-0">
+                <RecipeIngredientEditor
+                  v-model="parsedIng[index].ingredient"
+                  allow-insert-ingredient
+                  @insert-ingredient="insertIngredient(index)"
+                  @delete="deleteIngredient(index)"
+                />
+                {{ ing.input }}
+                <v-card-actions>
+                  <v-spacer />
+                  <BaseButton
+                    v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''"
+                    color="warning"
+                    size="small"
+                    @click="createUnit(ing.ingredient.unit!, index)"
+                  >
+                    {{ errors[index].unitErrorMessage }}
+                  </BaseButton>
+                  <BaseButton
+                    v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''"
+                    color="warning"
+                    size="small"
+                    @click="createFood(ing.ingredient.food!, index)"
+                  >
+                    {{ errors[index].foodErrorMessage }}
+                  </BaseButton>
+                </v-card-actions>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </VueDraggable>
+        </v-expansion-panels>
+      </div>
+    </v-container>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { invoke, until } from "@vueuse/core";
+import { VueDraggable } from "vue-draggable-plus";
+import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
+import { alert } from "~/composables/use-toast";
+import { useAppInfo, useUserApi } from "~/composables/api";
+import { useRecipe } from "~/composables/recipes";
+import { useFoodData, useFoodStore, useUnitData, useUnitStore } from "~/composables/store";
+import { useParsingPreferences } from "~/composables/use-users/preferences";
+import { uuid4 } from "~/composables/use-utils";
+import type {
+  CreateIngredientFood,
+  CreateIngredientUnit,
+  IngredientFood,
+  IngredientUnit,
+  ParsedIngredient,
+  RecipeIngredient,
+} from "~/lib/api/types/recipe";
+import type { Parser } from "~/lib/api/user/recipes/recipe";
+
+interface Error {
+  ingredientIndex: number;
+  unitError: boolean;
+  unitErrorMessage: string;
+  foodError: boolean;
+  foodErrorMessage: string;
+}
+
+export default defineNuxtComponent({
+  components: {
+    RecipeIngredientEditor,
+    VueDraggable,
+  },
+  middleware: ["sidebase-auth", "group-only"],
+  setup() {
+    const i18n = useI18n();
+    const $auth = useMealieAuth();
+    const panels = ref<number[]>([]);
+
+    const route = useRoute();
+    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+
+    const router = useRouter();
+    const slug = route.params.slug as string;
+    const api = useUserApi();
+    const appInfo = useAppInfo();
+
+    const { recipe, loading } = useRecipe(slug);
+    const parserLoading = ref(false);
+
+    invoke(async () => {
+      await until(recipe).not.toBeNull();
+
+      fetchParsed();
+    });
+
+    const ingredients = ref<any[]>([]);
+
+    const availableParsers = computed(() => {
+      return [
+        {
+          text: i18n.t("recipe.parser.natural-language-processor"),
+          value: "nlp",
+        },
+        {
+          text: i18n.t("recipe.parser.brute-parser"),
+          value: "brute",
+        },
+        {
+          text: i18n.t("recipe.parser.openai-parser"),
+          value: "openai",
+          hide: !appInfo.value?.enableOpenai,
+        },
+      ];
+    });
+
+    // =========================================================
+    // Parser Logic
+    const parserPreferences = useParsingPreferences();
+    const parser = ref<Parser>(parserPreferences.value.parser || "nlp");
+    const parsedIng = ref<ParsedIngredient[]>([]);
+    watch(parser, (val) => {
+      parserPreferences.value.parser = val;
+    });
+
+    function processIngredientError(ing: ParsedIngredient, index: number): Error {
+      const unitError = !checkForUnit(ing.ingredient.unit!);
+      const foodError = !checkForFood(ing.ingredient.food!);
+
+      let unitErrorMessage = "";
+      let foodErrorMessage = "";
+
+      if (unitError || foodError) {
+        if (unitError) {
+          if (ing?.ingredient?.unit?.name) {
+            const unit = ing.ingredient.unit.name || i18n.t("recipe.parser.no-unit");
+            unitErrorMessage = i18n.t("recipe.parser.missing-unit", { unit }).toString();
+          }
+        }
+
+        if (foodError) {
+          if (ing?.ingredient?.food?.name) {
+            const food = ing.ingredient.food.name || i18n.t("recipe.parser.no-food");
+            foodErrorMessage = i18n.t("recipe.parser.missing-food", { food }).toString();
+          }
+        }
+      }
+      panels.value.push(index);
+
+      return {
+        ingredientIndex: index,
+        unitError,
+        unitErrorMessage,
+        foodError,
+        foodErrorMessage,
+      } as Error;
+    }
+
+    async function fetchParsed() {
+      if (!recipe.value || !recipe.value.recipeIngredient) {
+        return;
+      }
+      const raw = recipe.value.recipeIngredient.map(ing => ing.note ?? "");
+
+      parserLoading.value = true;
+      const { data } = await api.recipes.parseIngredients(parser.value, raw);
+      parserLoading.value = false;
+
+      if (data) {
+        // When we send the recipe ingredient text to be parsed, we lose the reference to the original unparsed ingredient.
+        // Generally this is fine, but if the unparsed ingredient had a title, we lose it; we add back the title for each ingredient here.
+        try {
+          for (let i = 0; i < recipe.value.recipeIngredient.length; i++) {
+            data[i].ingredient.title = recipe.value.recipeIngredient[i].title;
+          }
+        }
+        catch {
+          console.error("Index Mismatch Error during recipe ingredient parsing; did the number of ingredients change?");
+        }
+
+        parsedIng.value = data;
+
+        errors.value = data.map((ing, index: number) => {
+          return processIngredientError(ing, index);
+        });
+      }
+      else {
+        alert.error(i18n.t("events.something-went-wrong") as string);
+        parsedIng.value = [];
+      }
+    }
+
+    function isError(ing: ParsedIngredient) {
+      if (!ing?.confidence?.average) {
+        return true;
+      }
+      return !(ing.confidence.average >= 0.75);
+    }
+
+    function asPercentage(num: number | undefined): string {
+      if (!num) {
+        return "0%";
+      }
+
+      return Math.round(num * 100).toFixed(2) + "%";
+    }
+
+    // =========================================================
+    // Food and Ingredient Logic
+
+    const foodStore = useFoodStore();
+    const foodData = useFoodData();
+    const unitStore = useUnitStore();
+    const unitData = useUnitData();
+
+    const errors = ref<Error[]>([]);
+
+    function checkForUnit(unit?: IngredientUnit | CreateIngredientUnit) {
+      return !!unit?.id;
+    }
+
+    function checkForFood(food?: IngredientFood | CreateIngredientFood) {
+      return !!food?.id;
+    }
+
+    async function createFood(food: CreateIngredientFood | undefined, index: number) {
+      if (!food) {
+        return;
+      }
+
+      foodData.data.name = food.name;
+      parsedIng.value[index].ingredient.food = await foodStore.actions.createOne(foodData.data) || undefined;
+      errors.value[index].foodError = false;
+
+      foodData.reset();
+    }
+
+    async function createUnit(unit: CreateIngredientUnit | undefined, index: number) {
+      if (!unit) {
+        return;
+      }
+
+      unitData.data.name = unit.name;
+      parsedIng.value[index].ingredient.unit = await unitStore.actions.createOne(unitData.data) || undefined;
+      errors.value[index].unitError = false;
+
+      unitData.reset();
+    }
+
+    function insertIngredient(index: number) {
+      if (!recipe.value?.recipeIngredient) {
+        return;
+      }
+
+      const ing = {
+        input: "",
+        confidence: {},
+        ingredient: {
+          quantity: 1.0,
+          disableAmount: false,
+          referenceId: uuid4(),
+        },
+      } as ParsedIngredient;
+
+      parsedIng.value.splice(index, 0, ing);
+      recipe.value.recipeIngredient.splice(index, 0, ing.ingredient);
+
+      errors.value = parsedIng.value.map((ing, index: number) => {
+        return processIngredientError(ing, index);
+      });
+    }
+
+    function deleteIngredient(index: number) {
+      parsedIng.value.splice(index, 1);
+      recipe.value?.recipeIngredient?.splice(index, 1);
+
+      errors.value = parsedIng.value.map((ing, index: number) => {
+        return processIngredientError(ing, index);
+      });
+    }
+
+    // =========================================================
+    // Save All Logic
+    async function saveAll() {
+      const ingredients = parsedIng.value.map((ing) => {
+        if (!checkForFood(ing.ingredient.food!)) {
+          ing.ingredient.food = undefined;
+        }
+
+        if (!checkForUnit(ing.ingredient.unit!)) {
+          ing.ingredient.unit = undefined;
+        }
+
+        return {
+          ...ing.ingredient,
+          originalText: ing.input,
+        } as RecipeIngredient;
+      });
+
+      if (!recipe.value || !recipe.value.slug) {
+        return;
+      }
+
+      recipe.value.recipeIngredient = ingredients;
+      if (recipe.value.settings) {
+        recipe.value.settings.disableAmount = false;
+      }
+
+      const { response } = await api.recipes.updateOne(recipe.value.slug, recipe.value);
+
+      if (response?.status === 200) {
+        router.push(`/g/${groupSlug.value}/r/${recipe.value.slug}`);
+      }
+    }
+
+    useSeoMeta({
+      title: i18n.t("recipe.parser.ingredient-parser"),
+    });
+
+    return {
+      parser,
+      availableParsers,
+      saveAll,
+      createFood,
+      createUnit,
+      deleteIngredient,
+      insertIngredient,
+      errors,
+      actions: foodStore.actions,
+      workingFoodData: foodData,
+      isError,
+      panels,
+      asPercentage,
+      fetchParsed,
+      parsedIng,
+      recipe,
+      loading,
+      parserLoading,
+      ingredients,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <v-container class="flex-column">
+      <BasePageTitle divider>
+        <template #header>
+          <v-img
+            width="100%"
+            max-height="175"
+            max-width="175"
+            :src="require('~/static/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 lang="ts">
+import { useAppInfo } from "~/composables/api";
+import type { MenuItem } from "~/components/global/BaseOverflowButton.vue";
+import AdvancedOnly from "~/components/global/AdvancedOnly.vue";
+
+export default defineNuxtComponent({
+  components: { AdvancedOnly },
+  middleware: ["sidebase-auth", "group-only"],
+  setup() {
+    const i18n = useI18n();
+    const $auth = useMealieAuth();
+    const $globals = useNuxtApp().$globals;
+
+    useSeoMeta({
+      title: i18n.t("general.create"),
+    });
+
+    const appInfo = useAppInfo();
+    const enableOpenAIImages = computed(() => appInfo.value?.enableOpenaiImageServices);
+
+    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-image"),
+        value: "image",
+        hide: !enableOpenAIImages.value,
+      },
+      {
+        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";
+      },
+    });
+
+    return {
+      groupSlug,
+      subpages,
+      subpage,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,237 @@
+<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>
+    <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="showCatTags">
+          <v-col
+            cols="12"
+            xs="12"
+            sm="6"
+          >
+            <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"
+          >
+            <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 mb-1">
+        <BaseButton
+          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="bulkDialog"
+          class="mr-1 mr-sm-0 mb-1"
+          @bulk-data="assignUrls"
+        />
+      </v-card-actions>
+      <div class="px-1">
+        <v-checkbox
+          v-model="showCatTags"
+          hide-details
+          :label="$t('recipe.set-categories-and-tags')"
+        />
+      </div>
+      <v-card-actions class="justify-end">
+        <BaseButton
+          :disabled="bulkUrls.length === 0 || lockBulkImport"
+          @click="bulkCreate"
+        >
+          <template #icon>
+            {{ $globals.icons.check }}
+          </template>
+          {{ $t('general.submit') }}
+        </BaseButton>
+      </v-card-actions>
+    </section>
+    <section class="mt-12">
+      <BaseCardSectionTitle :title="$t('recipe.bulk-imports')" />
+      <ReportTable
+        :items="reports"
+        @delete="deleteReport"
+      />
+    </section>
+  </div>
+</template>
+
+<script 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";
+
+export default defineNuxtComponent({
+  components: { RecipeOrganizerSelector, RecipeDialogBulkAdd },
+  setup() {
+    const state = reactive({
+      error: false,
+      loading: false,
+      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: [] }));
+    }
+
+    return {
+      assignUrls,
+      reports,
+      deleteReport,
+      bulkCreate,
+      bulkUrls,
+      lockBulkImport,
+      ...toRefs(state),
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,128 @@
+<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 && appInfo.enableOpenai">
+          {{ $t('recipe.recipe-debugger-use-openai-description') }}
+          <v-checkbox
+            v-model="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="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 lang="ts">
+import { useAppInfo, useUserApi } from "~/composables/api";
+import { validators } from "~/composables/use-validators";
+import type { Recipe } from "~/lib/api/types/recipe";
+
+export default defineNuxtComponent({
+  setup() {
+    const state = reactive({
+      error: false,
+      loading: false,
+      useOpenAI: false,
+    });
+
+    const api = useUserApi();
+    const route = useRoute();
+    const router = useRouter();
+    const appInfo = useAppInfo();
+
+    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;
+    }
+
+    return {
+      appInfo,
+      recipeUrl,
+      debugTreeView,
+      debugUrl,
+      debugData,
+      ...toRefs(state),
+      validators,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,185 @@
+<template>
+  <v-form
+    ref="domUrlForm"
+    @submit.prevent="createFromHtmlOrJson(newRecipeData, importKeywordsAsTags, stayInEditMode)"
+  >
+    <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="isEditJSON"
+          :label="$t('recipe.json-editor')"
+          class="mt-2"
+          @change="handleIsEditJson"
+        />
+        <RecipeJsonEditor
+          v-if="isEditJSON"
+          v-model="newRecipeData"
+          height="250px"
+          class="mt-10"
+          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
+          class="rounded-lg mt-2"
+          rounded
+          :hint="$t('new-recipe.url-form-hint')"
+          persistent-hint
+        />
+        <v-checkbox
+          v-model="importKeywordsAsTags"
+          hide-details
+          :label="$t('recipe.import-original-keywords-as-tags')"
+        />
+        <v-checkbox
+          v-model="stayInEditMode"
+          hide-details
+          :label="$t('recipe.stay-in-edit-mode')"
+        />
+      </v-card-text>
+      <v-card-actions class="justify-center">
+        <div style="width: 250px">
+          <BaseButton
+            :disabled="!newRecipeData"
+            large
+            rounded
+            block
+            type="submit"
+            :loading="loading"
+          />
+        </div>
+      </v-card-actions>
+    </div>
+  </v-form>
+</template>
+
+<script lang="ts">
+import type { AxiosResponse } from "axios";
+import { useTagStore } from "~/composables/store/use-tag-store";
+import { useUserApi } from "~/composables/api";
+import { validators } from "~/composables/use-validators";
+import type { VForm } from "~/types/auto-forms";
+
+export default defineNuxtComponent({
+  setup() {
+    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 router = useRouter();
+    const tags = useTagStore();
+
+    const importKeywordsAsTags = computed({
+      get() {
+        return route.query.use_keywords === "1";
+      },
+      set(v: boolean) {
+        router.replace({ query: { ...route.query, use_keywords: v ? "1" : "0" } });
+      },
+    });
+
+    const stayInEditMode = computed({
+      get() {
+        return route.query.edit === "1";
+      },
+      set(v: boolean) {
+        router.replace({ query: { ...route.query, edit: v ? "1" : "0" } });
+      },
+    });
+
+    function handleResponse(response: AxiosResponse<string> | null, edit = false, refreshTags = false) {
+      if (response?.status !== 201) {
+        state.error = true;
+        state.loading = false;
+        return;
+      }
+      if (refreshTags) {
+        tags.actions.refresh();
+      }
+
+      router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`);
+    }
+
+    const newRecipeData = ref<string | object | 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();
+
+    async function createFromHtmlOrJson(htmlOrJsonData: string | object | null, importKeywordsAsTags: boolean, stayInEditMode: boolean) {
+      if (!htmlOrJsonData || !domUrlForm.value?.validate()) {
+        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);
+      handleResponse(response, stayInEditMode, importKeywordsAsTags);
+    }
+
+    return {
+      domUrlForm,
+      importKeywordsAsTags,
+      stayInEditMode,
+      newRecipeData,
+      handleIsEditJson,
+      createFromHtmlOrJson,
+      ...toRefs(state),
+      validators,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,176 @@
+<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="pa-0">
+            <v-row>
+              <v-col
+                cols="auto"
+                align-self="center"
+              >
+                <AppButtonUpload
+                  v-if="!uploadedImage"
+                  class="ml-auto"
+                  url="none"
+                  file-name="image"
+                  accept="image/*"
+                  :text="$t('recipe.upload-image')"
+                  :text-btn="false"
+                  :post="false"
+                  @uploaded="uploadImage"
+                />
+                <v-btn
+                  v-if="!!uploadedImage"
+                  color="error"
+                  @click="clearImage"
+                >
+                  <v-icon start>
+                    {{ $globals.icons.close }}
+                  </v-icon>
+                  {{ $t('recipe.remove-image') }}
+                </v-btn>
+              </v-col>
+              <v-spacer />
+            </v-row>
+
+            <div
+              v-if="uploadedImage && uploadedImagePreviewUrl"
+              class="mt-3"
+            >
+              <v-row>
+                <v-col
+                  cols="12"
+                  class="pb-0"
+                >
+                  <v-card-text class="pa-0">
+                    <p class="mb-0">
+                      {{ $t('recipe.crop-and-rotate-the-image') }}
+                    </p>
+                  </v-card-text>
+                </v-col>
+              </v-row>
+              <v-row style="max-width: 600px;">
+                <v-spacer />
+                <v-col cols="12">
+                  <ImageCropper
+                    :img="uploadedImagePreviewUrl"
+                    cropper-height="50vh"
+                    cropper-width="100%"
+                    @save="updateUploadedImage"
+                  />
+                </v-col>
+                <v-spacer />
+              </v-row>
+            </div>
+          </v-container>
+        </v-card-text>
+        <v-card-actions v-if="uploadedImage">
+          <div>
+            <p style="width: 250px">
+              <BaseButton
+                rounded
+                block
+                type="submit"
+                :loading="loading"
+              />
+            </p>
+            <p>
+              <v-checkbox
+                v-model="shouldTranslate"
+                hide-details
+                :label="$t('recipe.should-translate-description')"
+                :disabled="loading"
+              />
+            </p>
+            <p
+              v-if="loading"
+              class="mb-0"
+            >
+              {{ $t('recipe.please-wait-image-procesing') }}
+            </p>
+          </div>
+        </v-card-actions>
+      </div>
+    </v-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast";
+import type { VForm } from "~/types/auto-forms";
+
+export default defineNuxtComponent({
+  setup() {
+    const state = reactive({
+      loading: false,
+    });
+
+    const i18n = useI18n();
+    const api = useUserApi();
+    const route = useRoute();
+    const router = useRouter();
+    const groupSlug = computed(() => route.params.groupSlug || "");
+
+    const domUrlForm = ref<VForm | null>(null);
+    const uploadedImage = ref<Blob | File>();
+    const uploadedImageName = ref<string>("");
+    const uploadedImagePreviewUrl = ref<string>();
+    const shouldTranslate = ref(true);
+
+    function uploadImage(fileObject: File) {
+      uploadedImage.value = fileObject;
+      uploadedImageName.value = fileObject.name;
+      uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
+    }
+
+    function updateUploadedImage(fileObject: Blob) {
+      uploadedImage.value = fileObject;
+      uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
+    }
+
+    function clearImage() {
+      uploadedImage.value = undefined;
+      uploadedImageName.value = "";
+      uploadedImagePreviewUrl.value = undefined;
+    }
+
+    async function createRecipe() {
+      if (!uploadedImage.value) {
+        return;
+      }
+
+      state.loading = true;
+      const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
+      const { data, error } = await api.recipes.createOneFromImage(uploadedImage.value, uploadedImageName.value, translateLanguage);
+      if (error || !data) {
+        alert.error(i18n.t("events.something-went-wrong"));
+        state.loading = false;
+      }
+      else {
+        router.push(`/g/${groupSlug.value}/r/${data}`);
+      };
+    }
+
+    return {
+      ...toRefs(state),
+      domUrlForm,
+      uploadedImage,
+      uploadedImagePreviewUrl,
+      shouldTranslate,
+      uploadImage,
+      updateUploadedImage,
+      clearImage,
+      createRecipe,
+    };
+  },
+});
+</script>

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

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

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

@@ -0,0 +1,91 @@
+<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="loading"
+          @click="createByName(newRecipeName)"
+        />
+      </div>
+    </v-card-actions>
+  </div>
+</template>
+
+<script 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";
+
+export default defineNuxtComponent({
+  setup() {
+    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);
+    }
+    return {
+      domCreateByName,
+      newRecipeName,
+      createByName,
+      ...toRefs(state),
+      validators,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <v-form
+      ref="domUrlForm"
+      @submit.prevent="createByUrl(recipeUrl, importKeywordsAsTags, stayInEditMode)"
+    >
+      <div>
+        <v-card-title class="headline">
+          {{ $t('recipe.scrape-recipe') }}
+        </v-card-title>
+        <v-card-text>
+          <p>{{ $t('recipe.scrape-recipe-description') }}</p>
+          <p>
+            {{ $t('recipe.scrape-recipe-have-a-lot-of-recipes') }}
+            <a :href="bulkImporterTarget">{{ $t('recipe.scrape-recipe-suggest-bulk-importer') }}</a>.
+            <br>
+            {{ $t('recipe.scrape-recipe-have-raw-html-or-json-data') }}
+            <a :href="htmlOrJsonImporterTarget">{{ $t('recipe.scrape-recipe-you-can-import-from-raw-data-directly') }}</a>.
+          </p>
+          <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="stayInEditMode"
+          color="primary"
+          hide-details
+          :label="$t('recipe.stay-in-edit-mode')"
+        />
+        <v-card-actions class="justify-center">
+          <div style="width: 250px">
+            <BaseButton
+              :disabled="recipeUrl === null"
+              rounded
+              block
+              type="submit"
+              :loading="loading"
+            />
+          </div>
+        </v-card-actions>
+      </div>
+    </v-form>
+    <v-expand-transition>
+      <v-alert
+        v-if="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" />
+
+        <p>
+          {{ $t("new-recipe.error-details") }}
+        </p>
+        <div class="d-flex row justify-space-around my-3 force-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/hay-kot/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 lang="ts">
+import type { AxiosResponse } from "axios";
+import { useUserApi } from "~/composables/api";
+import { useTagStore } from "~/composables/store/use-tag-store";
+import { validators } from "~/composables/use-validators";
+import type { VForm } from "~/types/auto-forms";
+
+export default defineNuxtComponent({
+  setup() {
+    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 bulkImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/bulk`);
+    const htmlOrJsonImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/html`);
+
+    function handleResponse(response: AxiosResponse<string> | null, edit = false, refreshTags = false) {
+      if (response?.status !== 201) {
+        state.error = true;
+        state.loading = false;
+        return;
+      }
+      if (refreshTags) {
+        tags.actions.refresh();
+      }
+
+      // we clear the query params first so if the user hits back, they don't re-import the recipe
+      router.replace({ query: {} }).then(
+        () => router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`),
+      );
+    }
+
+    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 importKeywordsAsTags = computed({
+      get() {
+        return route.query.use_keywords === "1";
+      },
+      set(v: boolean) {
+        router.replace({ query: { ...route.query, use_keywords: v ? "1" : "0" } });
+      },
+    });
+
+    const stayInEditMode = computed({
+      get() {
+        return route.query.edit === "1";
+      },
+      set(v: boolean) {
+        router.replace({ query: { ...route.query, edit: v ? "1" : "0" } });
+      },
+    });
+
+    onMounted(() => {
+      if (!recipeUrl.value) {
+        return;
+      }
+
+      if (recipeUrl.value.includes("https")) {
+        createByUrl(recipeUrl.value, importKeywordsAsTags.value, stayInEditMode.value);
+      }
+    });
+
+    const domUrlForm = ref<VForm | null>(null);
+
+    async function createByUrl(url: string | null, importKeywordsAsTags: boolean, stayInEditMode: 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);
+      handleResponse(response, stayInEditMode, importKeywordsAsTags);
+    }
+
+    return {
+      bulkImporterTarget,
+      htmlOrJsonImporterTarget,
+      recipeUrl,
+      importKeywordsAsTags,
+      stayInEditMode,
+      domUrlForm,
+      createByUrl,
+      ...toRefs(state),
+      validators,
+    };
+  },
+});
+</script>
+
+<style>
+.force-white > a {
+  color: white !important;
+}
+</style>

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

@@ -0,0 +1,89 @@
+<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"
+            large
+            rounded
+            block
+            :loading="loading"
+            @click="createByZip"
+          />
+        </div>
+      </v-card-actions>
+    </div>
+  </v-form>
+</template>
+
+<script lang="ts">
+import type { AxiosResponse } from "axios";
+import { useUserApi } from "~/composables/api";
+import { validators } from "~/composables/use-validators";
+
+export default defineNuxtComponent({
+  setup() {
+    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 newRecipeZip = ref<File | null>(null);
+    const newRecipeZipFileName = "archive";
+
+    async function createByZip() {
+      if (!newRecipeZip.value) {
+        return;
+      }
+      const formData = new FormData();
+      formData.append(newRecipeZipFileName, newRecipeZip.value);
+
+      const { response } = await api.upload.file("/api/recipes/create/zip", formData);
+      handleResponse(response);
+    }
+
+    return {
+      newRecipeZip,
+      createByZip,
+      ...toRefs(state),
+      validators,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,41 @@
+<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 lang="ts">
+import RecipeOrganizerPage from "~/components/Domain/Recipe/RecipeOrganizerPage.vue";
+import { useCategoryStore } from "~/composables/store";
+
+export default defineNuxtComponent({
+  components: {
+    RecipeOrganizerPage,
+  },
+  middleware: ["sidebase-auth", "group-only"],
+  setup() {
+    const { store, actions } = useCategoryStore();
+    const i18n = useI18n();
+
+    useSeoMeta({
+      title: i18n.t("category.categories"),
+    });
+
+    return {
+      store,
+      actions,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,693 @@
+<template>
+  <v-container>
+    <BasePageTitle divider>
+      <template #header>
+        <v-img
+          width="100"
+          max-height="100"
+          max-width="100"
+          :src="require('~/static/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="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="!!queryFilterJSON.parts && queryFilterJSON.parts.length > 0"
+                    size="small"
+                    color="primary"
+                    :content="(queryFilterJSON.parts || []).length"
+                  >
+                    <v-btn
+                      size="small"
+                      color="accent"
+                      dark
+                      @click="queryFilterMenu = !queryFilterMenu"
+                    >
+                      <v-icon start>
+                        {{ $globals.icons.filter }}
+                      </v-icon>
+                      {{ $t("recipe-finder.other-filters") }}
+                      <BaseDialog
+                        v-model="queryFilterMenu"
+                        :title="$t('recipe-finder.other-filters')"
+                        :icon="$globals.icons.filter"
+                        width="100%"
+                        max-width="1100px"
+                        :submit-disabled="!queryFilterEditorValue"
+                        can-confirm
+                        @confirm="saveQueryFilter"
+                      >
+                        <QueryFilterBuilder
+                          :key="queryFilterMenuKey"
+                          :initial-query-filter="queryFilterJSON"
+                          :field-defs="queryFilterBuilderFields"
+                          @input="(value) => queryFilterEditorValue = value"
+                          @input-j-s-o-n="(value) => queryFilterEditorValueJSON = value"
+                        />
+                        <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="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-text-field
+                          v-model="settings.maxMissingFoods"
+                          type="number"
+                          hide-details
+                          hide-spin-buttons
+                          :label="$t('recipe-finder.max-missing-ingredients')"
+                        />
+                        <v-text-field
+                          v-model="settings.maxMissingTools"
+                          type="number"
+                          hide-details
+                          hide-spin-buttons
+                          :label="$t('recipe-finder.max-missing-tools')"
+                          class="mt-4"
+                        />
+                      </div>
+                      <div class="mt-1">
+                        <v-checkbox
+                          v-if="isOwnGroup"
+                          v-model="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="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="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="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="!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 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/response";
+import type { FieldDefinition } from "~/composables/use-query-filter-builder";
+import { useRecipeFinderPreferences } from "~/composables/use-users/preferences";
+
+interface RecipeSuggestions {
+  readyToMake: RecipeSuggestionResponseItem[];
+  missingItems: RecipeSuggestionResponseItem[];
+}
+
+export default defineNuxtComponent({
+  components: { QueryFilterBuilder, RecipeSuggestion, SearchFilter },
+  setup() {
+    const { $vuetify } = useNuxtApp();
+    const i18n = useI18n();
+    const $auth = useMealieAuth();
+    const route = useRoute();
+
+    useSeoMeta({
+      title: i18n.t("recipe-finder.recipe-finder"),
+    });
+
+    const useMobile = computed(() => $vuetify.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 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 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,
+      },
+    ];
+
+    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;
+    }
+
+    return {
+      ...toRefs(state),
+      useMobile,
+      attrs,
+      isOwnGroup,
+      foods: foodStore.store,
+      selectedFoods,
+      addFood,
+      removeFood,
+      tools: toolStore.store,
+      selectedTools,
+      addTool,
+      removeTool,
+      recipeSuggestions,
+      queryFilterBuilderFields,
+      clearQueryFilter,
+      saveQueryFilter,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,41 @@
+<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 lang="ts">
+import RecipeOrganizerPage from "~/components/Domain/Recipe/RecipeOrganizerPage.vue";
+import { useTagStore } from "~/composables/store";
+
+export default defineNuxtComponent({
+  components: {
+    RecipeOrganizerPage,
+  },
+  middleware: ["sidebase-auth", "group-only"],
+  setup() {
+    const { store, actions } = useTagStore();
+    const i18n = useI18n();
+
+    useSeoMeta({
+      title: i18n.t("tag.tags"),
+    });
+
+    return {
+      store,
+      actions,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <BasePageTitle
+      v-if="groupName"
+      class="bg-grey-darken-4 mt-n4 pt-8"
+    >
+      <template #header>
+        <v-img
+          width="100%"
+          max-height="200"
+          max-width="150"
+          :src="require('~/static/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'">
+      <RecipeTimeline
+        v-if="queryFilter"
+        v-model="ready"
+        show-recipe-cards
+        :query-filter="queryFilter"
+      />
+    </v-sheet>
+  </div>
+</template>
+
+<script lang="ts">
+import { useUserApi } from "~/composables/api";
+import RecipeTimeline from "~/components/Domain/Recipe/RecipeTimeline.vue";
+
+export default defineNuxtComponent({
+  components: { RecipeTimeline },
+  middleware: ["sidebase-auth", "group-only"],
+  setup() {
+    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);
+
+    return {
+      groupName,
+      queryFilter,
+      ready,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,79 @@
+<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 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;
+}
+
+export default defineNuxtComponent({
+  components: {
+    RecipeOrganizerPage,
+  },
+  middleware: ["sidebase-auth", "group-only"],
+  setup() {
+    const $auth = useMealieAuth();
+    const toolStore = useToolStore();
+    const dialog = ref(false);
+    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);
+    }
+
+    return {
+      dialog,
+      tools,
+      deleteOne,
+      updateOne,
+    };
+  },
+});
+</script>

frontend/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 ?? "");
+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>