Stash

src/App.tsx

@@ -5,6 +5,7 @@ import * as R from 'ramda';
 
 import {useQuery} from "@tanstack/react-query";
 import {LinkCollection, Option} from "./aliases";
+import AsyncSelect from "react-select/async";
 
 // TODO: Fix this for wrapping items, esp on phones
 const height = 35;
@@ -62,26 +63,85 @@ function NaiveSelect({setSelected}: {
         navigator.clipboard.writeText(`[[${value.label}]]`)
     }, []);
 
-    return (
+    return (<Select
-        <Select
+        classNames={{input: () => 'select-input-wrapper'}}
-            classNames={{input: () => 'select-input-wrapper'}}
+        onChange={onChange as any}
-            onChange={onChange as any}
+        components={{MenuList}}
-            components={{MenuList}}
+        isDisabled={isLoading}
-            isDisabled={isLoading}
+        isLoading={isLoading}
-            isLoading={isLoading}
+        isClearable={true}
-            isClearable={true}
+        options={options}
-            options={options}
+        filterOption={createFilter({ignoreAccents: false})}
-            filterOption={createFilter({ignoreAccents: false})}
+    />)
-        />
-    )
 }
 
-export function LargeSelect() {
+type ResultNoteApi = {
+    score: number
+    vault: string
+    path: string
+    basename: string
+    foundWords: string[]
+    matches: SearchMatchApi[]
+}
+
+type SearchMatchApi = {
+    match: string
+    offset: number
+}
+
+export function OmnisearchSelect({ setSelected }: { setSelected: (value: Option) => void }) {
+    const {
+        data: metadata,
+        isLoading,
+    } = useQuery({
+        queryKey: ['obsidian-metadata'],
+        initialData: [],
+        queryFn: async () => {
+            const response = await fetch("/metadata")
+            const fullData: any[] = await response.json();
+
+            return R.sortBy(v => -(v.data.backlinks?.length ?? 0), fullData.map(md => ({
+                value: md.relativePath,
+                label: md.fileName,
+                data: md,
+            }) as Option));
+        },
+    });
+
+    const onChange = useCallback((value: Option) => {
+        setSelected(value);
+        navigator.clipboard.writeText(`[[${value.label}]]`)
+    }, []);
+
+    return <AsyncSelect
+        isDisabled={isLoading}
+        loadOptions={async (inputValue) => {
+            const response = await fetch(`/search?q=${encodeURIComponent(inputValue)}`)
+            const fullData: ResultNoteApi[] = await response.json();
+
+            return fullData.map(item => ({
+                value: item.path,
+                label: item.basename,
+                data: metadata!.find(md => md.value == item.path)!.data
+            } satisfies Option))
+        }}
+        onChange={onChange as any}
+        components={{MenuList}}
+        isClearable={true}
+        filterOption={(option, inputValue) => {
+            console.log(option, inputValue);
+            return true;
+        }}
+    />
+}
+
+export function App() {
     const [selected, setSelected] = useState<Option | null>(null);
 
     return (
         <div className={"m-5 text-lg"}>
-            <NaiveSelect setSelected={setSelected}/>
+            {/*<NaiveSelect setSelected={setSelected}/>*/}
+            <OmnisearchSelect setSelected={setSelected}/>
 
             {selected && <LinkCollection selected={selected}/>}
         </div>

src/main.tsx

@@ -2,14 +2,14 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
-import {LargeSelect} from "./App.tsx";
+import {App} from "./App.tsx";
 
 const queryClient = new QueryClient()
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
         <QueryClientProvider client={queryClient}>
-            <LargeSelect/>
+            <App/>
         </QueryClientProvider>
     </React.StrictMode>,
 )

vite.config.ts

@@ -14,6 +14,9 @@ export default defineConfig(({ command, mode }) => {
             proxy: {
                 '/metadata': {
                     target: env['OBSIDIAN_BEACHHEAD_SERVER']
+                },
+                '/search': {
+                    target: env['OBSIDIAN_BEACHHEAD_SERVER']
                 }
             }
         }