fix(navbar): change wording & switch to auto-complete

Author: dvcol

src/components/views/calendar/CalendarNavbar.vue

@@ -69,7 +69,7 @@ const open = ref(false);
         <NInput
           v-model:value="debouncedSearch"
           class="search-input"
-          :placeholder="i18n('search', 'navbar')"
+          :placeholder="i18n('filter', 'navbar')"
           autosize
           clearable
         >

src/components/views/history/HistoryNavbar.vue

@@ -64,7 +64,7 @@ const open = ref(false);
     <NInput
       v-model:value="debouncedSearch"
       class="search-input"
-      :placeholder="i18n('search')"
+      :placeholder="i18n('filter')"
       autosize
       clearable
     >

src/components/views/search/SearchNavbar.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import {
+  NAutoComplete,
   NFlex,
   NIcon,
-  NInput,
-  NPopselect,
   NSelect,
   NSwitch,
   NTooltip,
@@ -58,11 +57,6 @@ const historyOptions = computed(() =>
   filteredHistory.value.map(value => ({ value, label: value })),
 );
 
-const showHistory = computed(() => {
-  if (!inputFocus.value) return false;
-  return !!filteredHistory.value.length;
-});
-
 defineProps({
   parentElement: {
     type: HTMLElement,
@@ -201,29 +195,24 @@ onActivated(() => {
         </NFlex>
       </NFlex>
       <template #trigger>
-        <NPopselect
+        <NAutoComplete
+          ref="inputRef"
           v-model:value="debouncedSearch"
+          class="search-input"
+          :loading="loading"
+          :disabled="loading"
+          :placeholder="i18n('search', 'navbar')"
+          autosize
+          clearable
+          :on-input-focus="() => toggleFocus(true)"
+          :on-input-blur="() => toggleFocus(false)"
           :options="historyOptions"
           :to="parentElement"
-          :show="showHistory"
         >
-          <NInput
-            ref="inputRef"
-            v-model:value="debouncedSearch"
-            class="search-input"
-            :loading="loading"
-            :disabled="loading"
-            :placeholder="i18n('search', 'navbar')"
-            autosize
-            clearable
-            :on-input-focus="() => toggleFocus(true)"
-            :on-input-blur="() => toggleFocus(false)"
-          >
-            <template #prefix>
-              <NIcon :component="IconLoop" />
-            </template>
-          </NInput>
-        </NPopselect>
+          <template #prefix>
+            <NIcon :component="IconLoop" />
+          </template>
+        </NAutoComplete>
       </template>
     </NTooltip>
 

src/components/views/watchlist/WatchlistNavbar.vue

@@ -100,7 +100,7 @@ const renderTag = ({ option }: { option: SelectOption }) => option.label?.toStri
     <NInput
       v-model:value="debouncedSearch"
       class="search-input"
-      :placeholder="i18n('search', 'navbar')"
+      :placeholder="i18n('filter', 'navbar')"
       autosize
       clearable
     >

src/i18n/en/navbar/navbar.json

@@ -6,5 +6,9 @@
   "navbar__search": {
     "message": "Search",
     "description": "Search placeholder."
+  },
+  "navbar__filter": {
+    "message": "Filter",
+    "description": "Search placeholder."
   }
 }