feat: present filters and selected icons in query string

src/components/IconSet.vue

@@ -1,19 +1,27 @@
 <!-- eslint-disable no-console -->
 <script setup lang='ts'>
-import { useRoute, useRouter } from 'vue-router'
 import { activeMode, bags, drawerCollapsed, getSearchResults, iconSize, isCurrentCollectionLoading, listType, showHelp, toggleBag } from '../store'
 import { isLocalMode } from '../env'
 import { cacheCollection, specialTabs } from '../data'
 import { getIconSnippet } from '../utils/icons'
+import {cleanupQuery} from '../utils/query'
+
+const route = useRoute()
+const router = useRouter()
 
 const showBag = ref(false)
 const copied = ref(false)
-const current = ref('')
+const current = computed({
+  get() {
+    return (route.query.icon as string) || ''
+  },
+  set(value) {
+    router.replace({ query: cleanupQuery({ ...route.query, icon: value }) })
+  },
+})
 const max = ref(isLocalMode ? 500 : 200)
 const searchbar = ref<{ input: HTMLElement }>()
 
-const route = useRoute()
-const router = useRouter()
 
 const { search, icons, category, collection, variant } = getSearchResults()
 const loading = isCurrentCollectionLoading()
@@ -102,21 +110,6 @@ watch(
   () => max.value = maxMap.get(namespace.value) || 200,
 )
 
-onMounted(() => {
-  search.value = route.query.s as string || ''
-  watch([search], () => {
-    synchronizeSearchQuery()
-  })
-  watch([collection], () => {
-    if (search.value)
-      synchronizeSearchQuery()
-  })
-})
-
-function synchronizeSearchQuery() {
-  router.replace({ query: { s: search.value } })
-}
-
 function focusSearch() {
   searchbar.value?.input.focus()
 }

src/hooks/search.ts

@@ -4,11 +4,36 @@ import { computed, markRaw, ref, watch } from 'vue'
 import type { CollectionMeta } from '../data'
 import { specialTabs } from '../data'
 import { searchAlias } from '../data/search-alias'
+import { cleanupQuery } from '../utils/query'
 
 export function useSearch(collection: Ref<CollectionMeta | null>) {
-  const category = ref('')
-  const variant = ref('')
-  const search = ref('')
+  const route = useRoute()
+  const router = useRouter()
+
+  const category = computed({
+    get() {
+      return route.query.category as string || ''
+    },
+    set(value: string) {
+      router.replace({ query: cleanupQuery({ ...route.query, category: value }) })
+    },
+  })
+  const variant = computed({
+    get() {
+      return route.query.variant as string || ''
+    },
+    set(value: string) {
+      router.replace({ query: cleanupQuery({ ...route.query, variant: value }) })
+    },
+  })
+  const search = computed({
+    get() {
+      return route.query.s as string || ''
+    },
+    set(value: string) {
+      router.replace({ query: cleanupQuery({ ...route.query, s: value }) })
+    },
+  })
 
   const isAll = computed(() => collection.value && specialTabs.includes(collection.value.id))
   const searchParts = computed(() => search.value.trim().toLowerCase().split(' ').filter(Boolean))

src/store/collection.ts

@@ -16,11 +16,10 @@ const currentCollectionId = ref('')
 const loaded = ref(false)
 const installed = ref(false)
 const collection = shallowRef<CollectionMeta | null>(null)
-const searchResult = useSearch(collection)
 
-export function getSearchResults() {
-  return searchResult
-}
+export const getSearchResults = createSharedComposable(() => {
+  return useSearch(collection)
+})
 
 export function useCurrentCollection() {
   return collection

src/utils/query.ts

@@ -0,0 +1,8 @@
+
+export function cleanupQuery(query: Record<string, string | undefined | null>) {
+  for (const key of Object.keys(query)) {
+    if (!query[key])
+      delete query[key]
+  }
+  return query
+}