From 7decbe7cbee5124e6eddf94fdfe989a4faa4a686 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Tue, 17 Dec 2024 21:26:39 +0100
Subject: [PATCH] autofocus search field on search page

---
 components/recipe/search.vue |  6 +++++-
 pages/search.vue             | 35 +++++++++++++++++++++++------------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/components/recipe/search.vue b/components/recipe/search.vue
index 9d07d31..0e16db7 100644
--- a/components/recipe/search.vue
+++ b/components/recipe/search.vue
@@ -9,7 +9,8 @@
       placeholder="Search recipes..."
       @focus="isFocused = true"
       @blur="isFocused = false"
-    >
+      :autofocus="autofocus"
+    />
     <kbd
       class="hidden md:inline-block kbd kbd-sm"
       :class="{ 'opacity-50': !isFocused }"
@@ -27,6 +28,9 @@
 
 <script setup lang="ts">
 const model = defineModel<string>();
+const props = defineProps<{
+  autofocus?: boolean;
+}>();
 const isFocused = ref(false);
 
 // Debounced navigation
diff --git a/pages/search.vue b/pages/search.vue
index 882e102..2e872f6 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -4,18 +4,24 @@ import type { Recipe } from "~/types/recipe";
 const route = useRoute();
 const searchQuery = computed(() => route.query.q as string);
 const searchResults = ref<Recipe[]>([]);
+const loading = ref(false);
 
-const { data, status, error } = await useRecipeSearch(searchQuery.value || "");
-if (error.value) {
-  throw createError({
-    statusCode: 500,
-    message: error.value.message,
-  });
+if (searchQuery.value) {
+  loading.value = true;
+  const { data, error } = await useRecipeSearch(searchQuery.value);
+  if (error.value) {
+    throw createError({
+      statusCode: 500,
+      message: error.value.message,
+    });
+  }
+
+  searchResults.value = data.value!;
+  loading.value = false;
 }
 
-searchResults.value = data.value;
-
 watch(searchQuery, async (newQuery) => {
+  loading.value = true;
   const { data, error } = await useRecipeSearch(newQuery.trim());
   if (error.value) {
     throw createError({
@@ -24,21 +30,26 @@ watch(searchQuery, async (newQuery) => {
     });
   }
 
-  searchResults.value = data.value;
+  searchResults.value = data.value!;
+  loading.value = false;
 });
 </script>
 
 <template>
   <div class="container mx-auto px-4">
-    <div v-if="status === 'pending'" class="flex justify-center my-8">
+    <recipe-search
+      class="md:hidden mb-6"
+      :initial-query="searchQuery"
+      :autofocus="true"
+    />
+    <div v-if="loading" class="flex justify-center my-8">
       <span class="loading loading-spinner loading-lg text-primary" />
     </div>
 
     <div
-      v-else-if="searchResults.length > 0"
+      v-if="searchResults.length > 0"
       class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8"
     >
-      <recipe-search class="md:hidden mb-6" :initial-query="searchQuery" />
       <div
         v-for="recipe in searchResults"
         :key="recipe.id"