Fuzzy file search

package.json

@@ -25,6 +25,7 @@
     "comlink": "^4.4.2",
     "dagre": "^0.8.5",
     "dexie": "^4.3.0",
+    "fuse.js": "^7.1.0",
     "monaco-editor": "^0.55.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

src/logic/JarFile.ts

@@ -1,29 +1,47 @@
-import { BehaviorSubject, combineLatest, distinct, distinctUntilChanged, map, Observable, switchMap, throttleTime } from 'rxjs';
+import { combineLatest, distinctUntilChanged, map, Observable } from 'rxjs';
 import { minecraftJar } from './MinecraftApi';
-import { performSearch } from './Search';
 import { searchQuery } from './State';
+import Fuse from 'fuse.js';
 
 export const fileList = minecraftJar.pipe(
     distinctUntilChanged(),
     map(jar => Object.keys(jar.jar.entries))
 );
 
 // File list that only contains outer class files
-export const classesList = fileList.pipe(
+export const outerClassesList = fileList.pipe(
     map(files => files.filter(file => file.endsWith('.class') && !file.includes('$')))
 );
 
+export const outerClassSearch = outerClassesList.pipe(
+    map(classes => {
+        const list = classes.map(className => {
+            let simpleClassName = className;
+
+            const pos = className.lastIndexOf('/');
+            if (pos !== -1) simpleClassName = className.substring(pos);
+
+            return { 'class': simpleClassName, key: className };
+        });
+
+        return new Fuse(list, {
+            minMatchCharLength: 3,
+            keys: ['class']
+        });
+    })
+);
+
 const debouncedSearchQuery: Observable<string> = searchQuery.pipe(
-    throttleTime(200),
     distinctUntilChanged()
 );
 
-export const searchResults: Observable<string[]> = combineLatest([classesList, debouncedSearchQuery]).pipe(
-    switchMap(([classes, query]) => {
-        return [performSearch(query, classes)];
+export const searchResults: Observable<string[]> = combineLatest([outerClassSearch, debouncedSearchQuery]).pipe(
+    map(([search, query]) => {
+        const results = search.search(query);
+        return results.map(r => r.item.key);
     })
 );
 
 export const isSearching = searchQuery.pipe(
     map((query) => query.length > 0)
-);
+);

src/ui/Code.tsx

@@ -4,7 +4,7 @@ import { currentResult, isDecompiling } from '../logic/Decompiler';
 import { useEffect, useRef, useState } from 'react';
 import { editor, Range } from "monaco-editor";
 import { isThin } from '../logic/Browser';
-import { classesList } from '../logic/JarFile';
+import { outerClassesList } from '../logic/JarFile';
 import { getOpenTab } from '../logic/Tabs';
 import { message, Spin } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -40,7 +40,7 @@ const Code = () => {
     const monaco = useMonaco();
 
     const decompileResult = useObservable(currentResult);
-    const classList = useObservable(classesList);
+    const classList = useObservable(outerClassesList);
     const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
     const hideMinimap = useObservable(isThin);
     const decompiling = useObservable(isDecompiling);

src/ui/EmptyState.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { GithubOutlined, SearchOutlined, LinkOutlined, BranchesOutlined, CopyOutlined, CodeOutlined, FileSearchOutlined, AimOutlined } from '@ant-design/icons';
 import { Card, Typography, Space, Tooltip, theme } from 'antd';
-import { classesList } from "../logic/JarFile";
+import { outerClassesList } from "../logic/JarFile";
 import { openTab } from "../logic/Tabs";
 import { useObservable } from "../utils/UseObservable";
 
@@ -10,7 +10,7 @@ const { useToken } = theme;
 
 export const EmptyState = () => {
     const { token } = useToken();
-    const outerClasses = useObservable(classesList);
+    const outerClasses = useObservable(outerClassesList);
 
     const openRandomClass = () => {
         if (outerClasses && outerClasses.length > 0) {

src/ui/FileList.tsx

@@ -3,7 +3,7 @@ import { Tree, Dropdown, message } from 'antd';
 import type { TreeDataNode, TreeProps, MenuProps } from 'antd';
 import { CaretDownFilled } from '@ant-design/icons';
 import { combineLatest, from, map, Observable, shareReplay, switchMap, startWith } from 'rxjs';
-import { classesList } from '../logic/JarFile';
+import { outerClassesList } from '../logic/JarFile';
 import { useObservable } from '../utils/UseObservable';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { Key } from 'antd/es/table/interface';
@@ -30,7 +30,7 @@ const classData: Observable<Map<string, ClassData> | null> = jarIndex.pipe(
 );
 
 const fileTree: Observable<TreeDataNode[]> = combineLatest([
-    classesList,
+    outerClassesList,
     classData,
     compactPackages.observable
 ]).pipe(
@@ -231,7 +231,7 @@ const FileList = () => {
 
     const jar = useObservable(minecraftJar);
     const selectedKeys = useObservable(selectedFileKeys);
-    const classes = useObservable(classesList);
+    const classes = useObservable(outerClassesList);
     const onSelect: TreeProps['onSelect'] = useCallback((selectedKeys: Key[]) => {
         if (selectedKeys.length === 0) return;
         if (!classes || !classes.includes(selectedKeys[0] as string)) return;