From 6da853c0f5e74259b151ee7106a330b2a08c74b5 Mon Sep 17 00:00:00 2001
From: Lars Noack <lars@webcontact.de>
Date: Thu, 4 Jul 2024 17:41:04 +0200
Subject: [PATCH] feat: implemented bang preview

---
 src/components/CustomSearch.vue |  5 -----
 src/stores/search.js            | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/CustomSearch.vue b/src/components/CustomSearch.vue
index 8d5ca73..c7e989f 100644
--- a/src/components/CustomSearch.vue
+++ b/src/components/CustomSearch.vue
@@ -1,9 +1,4 @@
 <template>
-    <div style="background-color: wheat;">
-        {{ searchInput }}
-
-    </div>
-
     <div class="search">
         <div class="search__form" role="form" method="post" autocomplete="off">
             <input v-model="searchInput" @keyup.arrow-down="nextSearchEngine" @keyup.arrow-up="previousSearchEngine"
diff --git a/src/stores/search.js b/src/stores/search.js
index f6bd811..06e96a7 100644
--- a/src/stores/search.js
+++ b/src/stores/search.js
@@ -48,6 +48,11 @@ const searchEngines = {
   }
 }
 
+const bangToEngine = Object.keys(searchEngines).reduce((acc, engine) => {
+  acc[searchEngines[engine].bang] = engine
+  return acc
+}, {})
+
 export const useSearchStore = defineStore({
   id: 'search',
   state: () => ({
@@ -56,11 +61,23 @@ export const useSearchStore = defineStore({
   }),
   getters: {
     currentEngine: (state) => {
+      if (bangToEngine[state.searchBang]) {
+        return bangToEngine[state.searchBang]
+      }
+
       return state.searchEnginePriorities[0]
     },
     currentEngineData: (state) => {
       return searchEngines[state.currentEngine]
     },
+    searchBang: (state) => {
+      // if the search input starts with an exclamation mark
+      // we assume it's a bang and we want to change the search engine, so we return the contents behind the exclamation mark till the first space
+      if (state.searchInput.startsWith('!')) {
+        return state.searchInput.slice(1).split(' ')[0]
+      }
+      return ''
+    },
     searchQuery: (state) => {
       return state.searchInput.trim()
     },
@@ -69,7 +86,20 @@ export const useSearchStore = defineStore({
     },
 
     searchEngineData: (state) => {
-      return state.searchEnginePriorities.map((engine) => {
+      let priorities
+
+      if (bangToEngine[state.searchBang]) {
+        priorities = [
+          bangToEngine[state.searchBang],
+          ...state.searchEnginePriorities.filter(
+            (engine) => engine !== bangToEngine[state.searchBang]
+          )
+        ]
+      } else {
+        priorities = state.searchEnginePriorities
+      }
+
+      return priorities.map((engine) => {
         return [engine, searchEngines[engine]]
       })
     }