chore: refactor searchfields into one component (#145)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

src/components.d.ts

@@ -34,6 +34,7 @@ declare module '@vue/runtime-core' {
     Progress: typeof import('./components/Progress.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SearchBar: typeof import('./components/SearchBar.vue')['default']
     SearchElectron: typeof import('./components/electron/SearchElectron.vue')['default']
     SettingsCollectionsList: typeof import('./components/SettingsCollectionsList.vue')['default']
     WithNavbar: typeof import('./components/WithNavbar.vue')['default']

src/components/Drawer.vue

@@ -1,17 +1,22 @@
 <script setup lang='ts'>
-import { categorySearch, sortedCollectionsInfo, specialTabs } from '../data'
-import { isFavoritedCollection, recentIconIds, sortAlphabetically, toggleFavoriteCollection } from '../store'
+import { categorySearch, filteredCollections, sortedCollectionsInfo, specialTabs } from '../data'
+import { isFavoritedCollection, recentIconIds, toggleFavoriteCollection } from '../store'
 import { isElectron } from '../env'
 
 const route = useRoute()
 const current = computed(() => route.path.split('/').slice(-1)[0])
 
 const collections = computed(() => {
-  return [
-    { id: 'all', name: 'All' },
-    { id: 'recent', name: 'Recent' },
-    ...sortedCollectionsInfo.value,
-  ]
+  if (categorySearch.value) {
+    return filteredCollections.value
+  }
+  else {
+    return [
+      { id: 'all', name: 'All' },
+      { id: 'recent', name: 'Recent' },
+      ...sortedCollectionsInfo.value,
+    ]
+  }
 })
 </script>
 
@@ -33,34 +38,13 @@ const collections = computed(() => {
       </div>
 
       <!-- Searching -->
-      <div class="flex outline-none py-1 px-4" border="b base">
-        <Icon icon="carbon:search" class="m-auto flex-none opacity-60" />
-        <form action="/collection/all" class="flex-auto" role="search" method="get" @submit.prevent>
-          <input
-            v-model="categorySearch"
-            aria-label="Search"
-            class="text-xs outline-none w-full py-1 px-4 m-0 bg-transparent font-normal"
-            name="s"
-            placeholder="Search category..."
-            autofocus
-            autocomplete="off"
-          >
-        </form>
-
-        <button
-          class="flex items-center transition"
-          :class="{
-            'text-gray-500 hover:text-gray-600': sortAlphabetically,
-            'text-gray-300 hover:text-gray-400': !sortAlphabetically,
-          }"
-          @click="sortAlphabetically = !sortAlphabetically"
-        >
-          <Icon
-            icon="mdi:sort-alphabetical-ascending"
-            class="m-auto text-lg -mr-1 "
-          />
-        </button>
-      </div>
+      <SearchBar
+        v-model:search="categorySearch"
+        placeholder="Search category..."
+        input-class="text-xs"
+        :border="false"
+        class="border-b border-base"
+      />
     </div>
 
     <!-- Collections -->

src/components/IconSet.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable no-console -->
 <script setup lang='ts'>
 import { useRoute, useRouter } from 'vue-router'
 import { activeMode, bags, getSearchResults, iconSize, isCurrentCollectionLoading, listType, showHelp, toggleBag } from '../store'
@@ -9,7 +10,7 @@ const showBag = $ref(false)
 let copied = $ref(false)
 let current = $ref('')
 let max = $ref(isLocalMode ? 500 : 200)
-const input = $ref<HTMLInputElement>()
+const searchbar = ref<{ input: HTMLElement }>()
 
 const route = useRoute()
 const router = useRouter()
@@ -108,7 +109,7 @@ onMounted(() => {
 })
 
 function focusSearch() {
-  input?.focus()
+  searchbar.value?.input.focus()
 }
 
 onMounted(focusSearch)
@@ -122,13 +123,13 @@ router.afterEach((to) => {
 
 onKeyStroke('/', (e) => {
   e.preventDefault()
-  input?.focus()
+  focusSearch()
 })
 
 onKeyStroke('Escape', () => {
   if (current !== '') {
     current = ''
-    input?.focus()
+    focusSearch()
   }
 })
 
@@ -223,28 +224,11 @@ useEventListener(categoriesContainer, 'wheel', (e: WheelEvent) => {
         </div>
 
         <!-- Searching -->
-        <div
-          class="
-            mx-8 my-2 hidden md:flex shadow rounded outline-none py-1 px-4
-            border border-base
-          "
-        >
-          <Icon icon="carbon:search" class="m-auto flex-none opacity-60" />
-          <form action="/collection/all" class="flex-auto" role="search" method="get" @submit.prevent>
-            <input
-              ref="input"
-              v-model="search"
-              aria-label="Search"
-              class="text-base outline-none w-full py-1 px-4 m-0 bg-transparent"
-              name="s"
-              placeholder="Search..."
-              autofocus
-              autocomplete="off"
-            >
-          </form>
-
-          <Icon v-if="search" icon="carbon:close" class="m-auto text-lg -mr-1 opacity-60" @click="search = ''" />
-        </div>
+        <SearchBar
+          ref="searchbar"
+          v-model:search="search"
+          class="mx-8 my-2 hidden md:flex"
+        />
 
         <!-- Variants --->
         <div v-if="collection.variants" class="py1 mx-8 overflow-x-overlay flex flex-nowrap gap-2 select-none items-center">

src/components/Navbar.vue

@@ -66,16 +66,12 @@ export default defineComponent(() => {
     </template>
 
     <!-- Searching -->
-    <div v-if="collection" class="flex w-full">
-      <form action="/collection/all" role="search" method="get" class="w-full" @submit.prevent>
-        <input
-          v-model="search"
-          aria-label="Search"
-          class="color-base text-base outline-none px-4 flex-auto m-0 w-full bg-transparent"
-          name="s"
-          placeholder="Search..."
-        >
-      </form>
-    </div>
+    <SearchBar
+      v-if="collection"
+      v-model:search="search"
+      class="flex w-full"
+      :style="false"
+      :icon="false"
+    />
   </nav>
 </template>

src/components/SearchBar.vue

@@ -0,0 +1,71 @@
+<script setup lang='ts'>
+defineProps({
+  search: {
+    type: String,
+    default: undefined,
+  },
+  placeholder: {
+    type: String,
+    default: 'Search...',
+  },
+  style: {
+    type: Boolean,
+    default: true,
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  },
+  icon: {
+    type: [String, Boolean],
+    default: 'carbon:search',
+  },
+  inputClass: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['update:search', 'onKeydown'])
+
+const input = ref<HTMLInputElement>()
+defineExpose({ input })
+
+function onKeydown(event: any) {
+  emit('onKeydown', event)
+}
+
+function update(event: any) {
+  emit('update:search', event.target.value)
+}
+
+function clear() {
+  emit('update:search', '')
+}
+</script>
+
+<template>
+  <div :class="style ? ['md:flex md:shadow md:rounded outline-none md:py-1 py-3 px-4', { 'border-b border-x border-b md:border-t border-base': border }] : ''">
+    <Icon v-if="icon" :icon="icon" class="m-auto flex-none opacity-60" />
+    <form action="/collection/all" class="flex-auto" role="search" method="get" @submit.prevent>
+      <input
+        ref="input"
+        :value="search"
+        aria-label="Search"
+        :class="inputClass"
+        class="text-base outline-none w-full py-1 px-4 m-0 bg-transparent"
+        name="s"
+        :placeholder="placeholder"
+        autofocus
+        autocomplete="off"
+        @input="update"
+        @keydown="onKeydown"
+      >
+    </form>
+
+    <button class="flex items-center opacity-60 hover:opacity-80">
+      <Icon v-if="search" icon="carbon:close" class="m-auto text-lg -mr-1" @click="clear" />
+    </button>
+    <slot name="actions" />
+  </div>
+</template>

src/data/index.ts

@@ -2,7 +2,7 @@ import type { IconifyJSON } from 'iconify-icon'
 import { notNullish } from '@antfu/utils'
 import { addCollection } from 'iconify-icon'
 import { AsyncFzf } from 'fzf'
-import { favoritedCollectionIds, inProgress, isExcludedCollection, isFavoritedCollection, isRecentCollection, progressMessage, recentCollectionIds, sortAlphabetically } from '../store'
+import { favoritedCollectionIds, inProgress, isExcludedCollection, isFavoritedCollection, isRecentCollection, progressMessage, recentCollectionIds } from '../store'
 import { isLocalMode, staticPath } from '../env'
 import { loadCollection, saveCollection } from '../store/indexedDB'
 import infoJSON from './collections-info.json'
@@ -55,13 +55,7 @@ watch([categorySearch, enabledCollections], ([q]) => {
   }
   else {
     fzf.find(q).then((result) => {
-      filteredCollections.value = result
-        .map(i => i.item)
-        .sort((a, b) => {
-          if (sortAlphabetically.value)
-            return a.name.localeCompare(b.name)
-          return 0
-        })
+      filteredCollections.value = result.map(i => i.item)
     }).catch(() => {
       // The search is canceled
     })

src/pages/index.vue

@@ -1,33 +1,45 @@
 <script setup lang='ts'>
 import type { PresentType } from '../data'
-import { sortAlphabetically } from '../store'
 import { categories, categorySearch, favoritedCollections, filteredCollections, recentCollections } from '../data'
 
-const input = ref<HTMLInputElement>()
-const categorized = computed(() => [
-  {
-    name: 'Favorites',
-    type: 'favorite' as PresentType,
-    collections: favoritedCollections.value,
-  },
-  {
-    name: 'Recent',
-    type: 'recent' as PresentType,
-    collections: recentCollections.value,
-  },
-  ...categories.map(category => ({
-    name: category,
-    type: 'normal' as PresentType,
-    collections: filteredCollections.value.filter(collection => collection.category === category),
-  })),
-])
+const searchbar = ref<{ input: HTMLElement }>()
+const categorized = computed(() => {
+  if (categorySearch.value) {
+    return [
+      {
+        name: 'Result',
+        type: 'result' as PresentType,
+        collections: filteredCollections.value,
+      },
+    ]
+  }
+  else {
+    return [
+      {
+        name: 'Favorites',
+        type: 'favorite' as PresentType,
+        collections: favoritedCollections.value,
+      },
+      {
+        name: 'Recent',
+        type: 'recent' as PresentType,
+        collections: recentCollections.value,
+      },
+      ...categories.map(category => ({
+        name: category,
+        type: 'normal' as PresentType,
+        collections: filteredCollections.value.filter(collection => collection.category === category),
+      })),
+    ]
+  }
+})
 
 const router = useRouter()
 onKeyStroke('/', (e) => {
   e.preventDefault()
   router.replace('/collection/all')
 })
-onMounted(() => input.value?.focus())
+onMounted(() => searchbar.value?.input.focus())
 
 const isMacOS = navigator.platform.toUpperCase().includes('MAC')
 
@@ -43,39 +55,13 @@ function onKeydown(e: KeyboardEvent) {
   <WithNavbar>
     <!-- Searching -->
     <div mb--3 md:mx-6 md:mt-6>
-      <div class="border-b py-3  flex md:shadow md:rounded outline-none md:py-1 px-4 border-x border-b md:border-t border-base">
-        <Icon icon="carbon:search" class="m-auto flex-none opacity-60" />
-        <form action="/collection/all" class="flex-auto" role="search" method="get" @submit.prevent>
-          <input
-            ref="input"
-            v-model="categorySearch"
-            aria-label="Search"
-            class="text-base outline-none w-full py-1 px-4 m-0 bg-transparent"
-            name="s"
-            placeholder="Search category..."
-            autofocus
-            autocomplete="off"
-            @keydown="onKeydown"
-          >
-        </form>
-
-        <button class="flex items-center opacity-60 hover:opacity-80">
-          <Icon v-if="categorySearch" icon="carbon:close" class="m-auto text-lg -mr-1" @click="categorySearch = ''" />
-        </button>
-        <button
-          class="flex items-center transition ml-4"
-          :class="{
-            'opacity-50 hover:opacity-70': sortAlphabetically,
-            'opacity-30 hover:opacity-50': !sortAlphabetically,
-          }"
-          @click="sortAlphabetically = !sortAlphabetically"
-        >
-          <Icon
-            icon="mdi:sort-alphabetical-ascending"
-            class="m-auto text-lg -mr-1 "
-          />
-        </button>
-      </div>
+      <SearchBar
+        ref="searchbar"
+        v-model:search="categorySearch"
+        placeholder="Search category..."
+        flex
+        @on-keydown="onKeydown"
+      />
       <RouterLink
         :class="categorySearch ? '' : 'op0 pointer-events-none'"
         px4 py2 w-full mt--1px text-sm z--1 h-10

src/store/localstorage.ts

@@ -18,7 +18,6 @@ export const recentIconIds = useStorage<string[]>('icones-recent-icons', [])
 export const bags = useStorage<string[]>('icones-bags', [])
 export const activeMode = useStorage<ActiveMode>('active-mode', 'normal')
 export const preferredCase = useStorage<IdCase>('icones-preferfed-case', 'iconify')
-export const sortAlphabetically = useStorage('icones-alpha-sort-collections', false)
 
 export const excludedCollectionIds = useStorage<string[]>('icones-excluded-collections', [])
 export const excludedCategories = useStorage<string[]>('icones-excluded-categories', [