fix: Refactor and Optimize Explore Page Search (#6070)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeExplorerPage/RecipeExplorerPage.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-container
+    fluid
+    class="px-0"
+  >
+    <RecipeExplorerPageSearch
+      ref="searchComponent"
+      @ready="onSearchReady"
+    />
+    <v-divider />
+    <v-container class="mt-6 px-md-6">
+      <RecipeCardSection
+        v-if="ready"
+        class="mt-n5"
+        :icon="$globals.icons.silverwareForkKnife"
+        :title="$t('general.recipes')"
+        :recipes="recipes"
+        :query="searchQuery"
+        disable-sort
+        @item-selected="onItemSelected"
+        @replace-recipes="replaceRecipes"
+        @append-recipes="appendRecipes"
+      />
+    </v-container>
+  </v-container>
+</template>
+
+<script lang="ts">
+import RecipeExplorerPageSearch from "./RecipeExplorerPageParts/RecipeExplorerPageSearch.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
+import { useLazyRecipes } from "~/composables/recipes";
+
+export default defineNuxtComponent({
+  components: { RecipeCardSection, RecipeExplorerPageSearch },
+  setup() {
+    const $auth = useMealieAuth();
+    const route = useRoute();
+
+    const { isOwnGroup } = useLoggedInState();
+    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+
+    const { recipes, appendRecipes, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
+
+    const ready = ref(false);
+    const searchComponent = ref<InstanceType<typeof RecipeExplorerPageSearch>>();
+
+    const searchQuery = computed(() => {
+      return searchComponent.value?.passedQueryWithSeed || {};
+    });
+
+    function onSearchReady() {
+      ready.value = true;
+    }
+
+    function onItemSelected(item: any, urlPrefix: string) {
+      searchComponent.value?.filterItems(item, urlPrefix);
+    }
+
+    return {
+      ready,
+      searchComponent,
+      searchQuery,
+      recipes,
+      appendRecipes,
+      replaceRecipes,
+      onSearchReady,
+      onItemSelected,
+    };
+  },
+});
+</script>