feat(rule): fuzzy filter

package.json

@@ -56,6 +56,7 @@
     "ky": "^1.0.1",
     "lint-staged": "^14.0.1",
     "lodash": "^4.17.21",
+    "match-sorter": "^6.3.1",
     "prettier": "^3.0.3",
     "prettier-plugin-organize-imports": "^3.2.3",
     "prettier-plugin-tailwindcss": "^0.5.4",

pnpm-lock.yaml

@@ -131,6 +131,9 @@ dependencies:
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
+  match-sorter:
+    specifier: ^6.3.1
+    version: 6.3.1
   prettier:
     specifier: ^3.0.3
     version: 3.0.3
@@ -4579,6 +4582,13 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /match-sorter@6.3.1:
+    resolution: {integrity: sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==}
+    dependencies:
+      '@babel/runtime': 7.22.15
+      remove-accents: 0.4.2
+    dev: false
+
   /meow@8.1.2:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}

src/pages/Rules.tsx

@@ -1,11 +1,13 @@
 import { IconReload } from '@tabler/icons-solidjs'
 import { createVirtualizer } from '@tanstack/solid-virtual'
+import { matchSorter } from 'match-sorter'
 import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { Button } from '~/components'
 import { useStringBooleanMap } from '~/helpers'
 import { useI18n } from '~/i18n'
 import { formatTimeFromNow, useRules } from '~/signals'
+import { Rule, RuleProvider } from '~/types'
 
 enum ActiveTab {
   ruleProviders = 'ruleProviders',
@@ -60,25 +62,19 @@ export default () => {
   const [globalFilter, setGlobalFilter] = createSignal('')
 
   const filteredRules = createMemo(() =>
-    rules().filter((rule) => {
+    globalFilter()
-      if (!globalFilter()) {
+      ? matchSorter(rules(), globalFilter(), {
-        return true
+          keys: ['type', 'payload', 'type'] as (keyof Rule)[],
-      }
+        })
-
+      : rules(),
-      return rule.payload.toLowerCase().includes(globalFilter().toLowerCase())
-    }),
   )
 
   const filteredRuleProviders = createMemo(() =>
-    ruleProviders().filter((ruleProvider) => {
+    globalFilter()
-      if (!globalFilter()) {
+      ? matchSorter(ruleProviders(), globalFilter(), {
-        return true
+          keys: ['name', 'vehicleType', 'behavior'] as (keyof RuleProvider)[],
-      }
+        })
-
+      : ruleProviders(),
-      return ruleProvider.name
-        .toLowerCase()
-        .includes(globalFilter().toLowerCase())
-    }),
   )
 
   let scrollElementRef: HTMLDivElement | undefined