From 261657d343b576b3868a4314b231da2b8154bb68 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Sun, 10 May 2026 19:45:56 +0200
Subject: [PATCH] Move search form to the search bar component

---
 src/features/search/components/Searchbar.vue | 37 ++++++++++++++------
 src/views/SearchView.vue                     | 13 +++----
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/features/search/components/Searchbar.vue b/src/features/search/components/Searchbar.vue
index 4fb1ee9..53a2ffa 100644
--- a/src/features/search/components/Searchbar.vue
+++ b/src/features/search/components/Searchbar.vue
@@ -16,20 +16,35 @@ limitations under the License.
 
 <script setup>
 const searchQuery = defineModel();
+
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+const props = defineProps(['autoSubmit'])
+
+const submitSearch = function () {
+    if (props.autoSubmit !== undefined) {
+        router.push({
+            name: 'searchResults',
+            query: { q: searchQuery.value }
+        });
+    };
+}
 </script>
 
 <template>
-    <div class="search-wrapper">
-        <input
-            v-model="searchQuery"
-            type="search"
-            name="search"
-            placeholder="Search..."
-            required
-        />
-        <button type="submit" class="search-button">Search</button>
-    </div>
-</template>
+    <form @submit.prevent="submitSearch">
+        <div class="search-wrapper">
+            <input
+                v-model="searchQuery"
+                type="search"
+                placeholder="Search..."
+                required
+            />
+            <button type="submit" class="search-button">Search</button>
+        </div>
+    </form>
+    </template>
 
 <style scoped>
 .search-wrapper {
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index f3bc445..0b5c58c 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -25,10 +25,7 @@ const router = useRouter();
 const searchQuery = ref('');
 
 const submitSearch = function () {
-    router.push({
-        name: 'searchResults',
-        query: { q: searchQuery.value }
-    })
+
 };
 </script>
 
@@ -41,9 +38,9 @@ const submitSearch = function () {
             </span>
         </header>
     
-        <form class="search-form" @submit.prevent="submitSearch">
-            <Searchbar v-model="searchQuery" ref="searchbar" />
-        </form>
+        <div class="search-container">
+            <Searchbar v-model="searchQuery" ref="searchbar" auto-submit />
+        </div>
     </div>
 </template>
 
@@ -79,7 +76,7 @@ const submitSearch = function () {
     font-size: small;
 }
 
-.search-form {
+.search-container {
     width: 70%;
     max-width: 624px;
 }