Add discover page

src/lib/components/Icon.svelte

@@ -19,12 +19,14 @@
   import CompassBig from "@assets/icons/Compass Big.svg?dataurl"
   import FireMinimalistic from "@assets/icons/Fire Minimalistic.svg?dataurl"
   import GallerySend from "@assets/icons/Gallery Send.svg?dataurl"
+  import Ghost from "@assets/icons/Ghost.svg?dataurl"
   import HandPills from "@assets/icons/Hand Pills.svg?dataurl"
   import HomeSmile from "@assets/icons/Home Smile.svg?dataurl"
   import InfoCircle from "@assets/icons/Info Circle.svg?dataurl"
   import LinkRound from "@assets/icons/Link Round.svg?dataurl"
   import Login from "@assets/icons/Login.svg?dataurl"
   import Login2 from "@assets/icons/Login 2.svg?dataurl"
+  import Magnifer from "@assets/icons/Magnifer.svg?dataurl"
   import Pallete2 from "@assets/icons/Pallete 2.svg?dataurl"
   import Plain from "@assets/icons/Plain.svg?dataurl"
   import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.svg?dataurl"
@@ -52,12 +54,14 @@
     "compass-big": CompassBig,
     "fire-minimalistic": FireMinimalistic,
     "gallery-send": GallerySend,
+    "ghost": Ghost,
     "hand-pills": HandPills,
     "home-smile": HomeSmile,
     "info-circle": InfoCircle,
     "link-round": LinkRound,
     "login": Login,
     "login-2": Login2,
+    'magnifer': Magnifer,
     'pallete-2': Pallete2,
     plain: Plain,
     'remote-controller-minimalistic': RemoteControllerMinimalistic,

src/lib/util.ts

@@ -1,6 +1,9 @@
+import Fuse from "fuse.js"
+import type {IFuseOptions, FuseResult} from 'fuse.js'
 import {throttle} from 'throttle-debounce'
-import {browser} from '$app/environment'
 import {writable} from 'svelte/store'
+import {sortBy} from '@welshman/lib'
+import {browser} from '$app/environment'
 
 export const parseJson = (json: string) => {
   if (!json) return null
@@ -29,3 +32,31 @@ export const synced = <T>(key: string, defaultValue: T, delay = 300) => {
 
   return store
 }
+
+export type SearchOptions<V, T> = {
+  getValue: (item: T) => V
+  fuseOptions?: IFuseOptions<T>
+  sortFn?: (items: FuseResult<T>) => any
+}
+
+export const createSearch = <V, T>(data: T[], opts: SearchOptions<V, T>) => {
+  const fuse = new Fuse(data, {...opts.fuseOptions, includeScore: true})
+  const map = new Map<V, T>(data.map(item => [opts.getValue(item), item]))
+
+  const search = (term: string) => {
+    let results = term ? fuse.search(term) : data.map(item => ({item, score: 1}) as FuseResult<T>)
+
+    if (opts.sortFn) {
+      results = sortBy(opts.sortFn, results)
+    }
+
+    return results.map(result => result.item)
+  }
+
+  return {
+    getValue: opts.getValue,
+    getOption: (value: V) => map.get(value),
+    searchOptions: (term: string) => search(term),
+    searchValues: (term: string) => search(term).map(opts.getValue),
+  }
+}