refator: reuse search page component (#2240)

* wip: fix recipe card section

* refactor basic search to share composable

* fix dialog results

* use search for cat/tag/tool pages

* update organizer to support name edits

* fix composable typing

frontend/composables/recipes/use-recipe-search.ts

@@ -0,0 +1,64 @@
+import { Ref, ref } from "@nuxtjs/composition-api";
+import { watchDebounced } from "@vueuse/core";
+import { UserApi } from "~/lib/api";
+import { Recipe } from "~/lib/api/types/recipe";
+
+export interface UseRecipeSearchReturn {
+  query: Ref<string>;
+  error: Ref<string>;
+  loading: Ref<boolean>;
+  data: Ref<Recipe[]>;
+}
+
+/**
+ * `useRecipeSearch` constructs a basic reactive search query
+ * that when `query` is changed, will search for recipes based
+ * on the query. Useful for searchable list views. For advanced
+ * search, use the `useRecipeQuery` composable.
+ */
+export function useRecipeSearch(api: UserApi): UseRecipeSearchReturn {
+  const query = ref("");
+  const error = ref("");
+  const loading = ref(false);
+  const recipes = ref<Recipe[]>([]);
+
+  async function searchRecipes(term: string) {
+    loading.value = true;
+    const { data, error } = await api.recipes.search({
+      search: term,
+      page: 1,
+      orderBy: "name",
+      orderDirection: "asc",
+      perPage: 20,
+    });
+
+    if (error) {
+      console.error(error);
+      loading.value = false;
+      recipes.value = [];
+      return;
+    }
+
+    if (data) {
+      recipes.value= data.items;
+    }
+
+    loading.value = false;
+  }
+
+  watchDebounced(
+    () => query.value,
+    async (term: string) => {
+      await searchRecipes(term);
+    },
+    { debounce: 500 }
+  );
+
+
+  return {
+    query,
+    error,
+    loading,
+    data: recipes,
+  }
+}

frontend/composables/use-context-presents.ts

@@ -7,7 +7,13 @@ export interface ContextMenuItem {
   color?: string;
 }
 
-export function useContextPresets(): { [key: string]: ContextMenuItem } {
+export interface ContextMenuPresets {
+  delete: ContextMenuItem;
+  edit: ContextMenuItem;
+  save: ContextMenuItem;
+}
+
+export function useContextPresets(): ContextMenuPresets {
   const { $globals, i18n } = useContext();
 
   return {