Stash, list aliases

package.json

@@ -14,12 +14,14 @@
     "@heroicons/react": "^2.0.18",
     "@tailwindcss/forms": "^0.5.6",
     "@tanstack/react-query": "^4.35.3",
+    "ramda": "^0.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-select": "^5.7.5",
     "react-window": "^1.8.9"
   },
   "devDependencies": {
+    "@types/ramda": "^0.29.5",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/react-window": "^1.8.6",

src/TA.tsx

@@ -1,7 +1,8 @@
-import {ReactNode, useCallback} from "react";
+import {ReactNode, useCallback, useState} from "react";
 import AsyncSelect from "react-select/async";
 import {FixedSizeList as List} from "react-window";
 import Select, {createFilter, MenuListProps} from "react-select";
+import * as R from 'ramda';
 
 import {useQuery} from "@tanstack/react-query";
 
@@ -70,8 +71,12 @@ const TestSelect = (vendorOptions: any) => {
 }
 
 interface Option {
-    value: string,
     label: string,
+    value: string,
+    data: {
+        backlinks: unknown[]
+        aliases?: string[]
+    }
 }
 
 export function LargeSelect() {
@@ -85,19 +90,23 @@ export function LargeSelect() {
             const response = await fetch("http://100.115.154.44:9002/metadata")
             const fullData: any[] = await response.json();
 
-            return fullData.map(md => ({
-                value: md.relativePath as string,
-                label: md.fileName as string
-            }) as Option);
+            return R.sortBy(v => -(v.data.backlinks?.length ?? 0), fullData.map(md => ({
+                value: md.relativePath,
+                label: md.fileName,
+                data: md,
+            }) as Option));
         },
     });
 
+    const [selected, setSelected] = useState<Option | null>(null);
+
     const onChange = useCallback((value: Option) => {
+        setSelected(value);
         navigator.clipboard.writeText(`[[${value.label}]]`)
     }, []);
 
     return (
-        <div className={"m-5"}>
+        <div className={"m-5 text-lg"}>
             <Select
                 onChange={onChange as any}
                 components={{MenuList}}
@@ -105,6 +114,32 @@ export function LargeSelect() {
                 options={options}
                 filterOption={createFilter({ignoreAccents: false})}
             />
+
+            {selected && <div className={"mt-2"}>
+                {selected.data.aliases?.map(alias => (
+                    <div className="py-1">
+                        <span className={"rounded-md p-1 hover:bg-slate-100"}>
+                            <span className={"text-slate-300 p-0.5"}>[[</span>
+                            <span>{selected.label}</span>
+                            <span className={"text-slate-300 p-0.5"}>|</span>
+                            <span>{alias}</span>
+                            <span className={"text-slate-300 p-0.5"}>]]</span>
+                        </span>
+                    </div>
+                ))}
+
+                <div className="py-1">
+                    <span className={"rounded-md p-1 hover:bg-slate-100"}>
+                        <span className={"text-slate-300 p-0.5"}>[[</span>
+                        <span>{selected.label}</span>
+                        <span className={"text-slate-300 p-0.5"}>|</span>
+                        <span>
+                            <input className={"border-none m-0 p-0 max-width-fit"}/>
+                        </span>
+                        <span className={"text-slate-300 p-0.5"}>]]</span>
+                    </span>
+                </div>
+            </div>}
         </div>
     )
 }