start with search

package.json

@@ -56,6 +56,7 @@
   },
   "dependencies": {
     "@efstajas/svelte-stored-writable": "^0.2.0",
+    "@leeoniya/ufuzzy": "^1.0.14",
     "@radicle/gray-matter": "4.1.0",
     "@wooorm/starry-night": "^3.3.0",
     "async-mutex": "^0.5.0",

src/lib/search.ts

@@ -0,0 +1,27 @@
+import FuzzySearch from "@leeoniya/ufuzzy";
+
+const uf = new FuzzySearch();
+const infoThresh = 1e3;
+
+export function search(haystack: string[], needle: string) {
+  // pre-filter
+  const idxs = uf.filter(haystack, needle);
+
+  // idxs can be null when the needle is non-searchable (has no alpha-numeric chars)
+  if (idxs !== null && idxs.length > 0) {
+    // sort/rank only when <= 1,000 items
+    if (idxs.length <= infoThresh) {
+      const info = uf.info(idxs, haystack, needle);
+      // order is a double-indirection array (a re-order of the passed-in idxs)
+      // this allows corresponding info to be grabbed directly by idx, if needed
+      const order = uf.sort(info, haystack, needle);
+      // render post-filtered & ordered matches
+      return order.map((_o, i) => haystack[info.idx[order[i]]]);
+    } else {
+      // render pre-filtered but unordered matches
+      return idxs.map((_o, i) => haystack[idxs[i]]);
+    }
+  }
+
+  return [];
+}

src/views/projects/Source.svelte

@@ -18,7 +18,6 @@
   export let commit: string;
   export let rawPath: (commit?: string) => string;
   export let blobResult: BlobResult;
-  export let branches: string[];
   export let path: string;
   export let peer: string | undefined;
   export let peers: Remote[];
@@ -113,7 +112,6 @@
       filesLinkActive={true}
       historyLinkActive={false}
       node={baseUrl}
-      {branches}
       {commit}
       {peers}
       {peer}

src/views/projects/Source/SourceSelector.svelte

@@ -13,23 +13,27 @@
   import TextInput from "@app/components/TextInput.svelte";
   import Link from "@app/components/Link.svelte";
   import { activeUnloadedRouteStore } from "@app/lib/router";
+  import { search } from "@app/lib/search";
 
-  // export let branches: string[];
   export let peers: Remote[];
   export let peer: string | undefined;
   export let node: BaseUrl;
   export let onCanonical: boolean;
   export let project: Project;
   export let selectedBranch: string | undefined;
 
+  let searchInput = "";
+  let searchResults: string[] = [];
+
+  $: console.log(searchResults);
+
   // function createTitle(p: Remote): string {
   //   const nodeId = formatNodeId(p.id);
   //   return p.delegate
   //     ? `${nodeId} is a delegate of this project`
   //     : `${nodeId} is a peer followed by this node`;
   // }
 
-  $: console.log(peer);
   $: selectedPeer = peers.find(p => p.id === peer);
 </script>
 
@@ -53,9 +57,9 @@
     padding: 0.5rem;
     color: var(--color-foreground-dim);
   }
-  .no-alias {
+  /* .no-alias {
     color: var(--color-foreground-dim);
-  }
+  } */
 </style>
 
 <div style="display: flex; gap: 1px;">
@@ -99,7 +103,23 @@
     </Button>
 
     <div slot="popover" class="dropdown">
-      <TextInput placeholder="Search" />
+      <TextInput
+        placeholder="Search"
+        bind:value={searchInput}
+        on:input={() => {
+          searchResults = search(
+            peers.flatMap(peer =>
+              Object.entries(peer.heads).map(([name, head]) =>
+                JSON.stringify({
+                  peer: { alias: peer.alias, id: peer.id },
+                  revision: name,
+                  head,
+                }),
+              ),
+            ),
+            searchInput,
+          );
+        }} />
       <div class="dropdown-grid">
         <div class="dropdown-header">Branch</div>
         <div class="dropdown-header">Head</div>
@@ -133,12 +153,44 @@
           </DropdownListItem>
         </Link>
 
-        {#each peers as peer}
-          <PeerItem
-            projectId={project.id}
-            {node}
-            peer={{ remote: peer, selected: selectedPeer?.id === peer.id }} />
-        {/each}
+        {#if searchResults.length > 0}
+          {#each searchResults as result}
+            {@const parsedResult = JSON.parse(result)}
+            <Link
+              style="display: grid; grid-template-columns: subgrid; grid-column: span 2;"
+              route={{
+                ...$activeUnloadedRouteStore,
+                resource: "project.source",
+                node,
+                project: project.id,
+                peer: parsedResult.peer.id,
+                revision: parsedResult.revision,
+                path: "/",
+              }}
+              on:afterNavigate={() => closeFocused()}>
+              <DropdownListItem
+                selected={false}
+                style="display: grid; gap: inherit; grid-template-columns: subgrid; grid-column: span 2;">
+                <div style="display: flex; gap: 0.5rem;">
+                  <IconSmall name="branch" />
+                  {parsedResult.peer.alias || parsedResult.peer.id} / {parsedResult.revision}
+                </div>
+                <div
+                  class="txt-monospace"
+                  style="color: var(--color-foreground-dim);">
+                  {formatCommit(parsedResult.head)}
+                </div>
+              </DropdownListItem>
+            </Link>
+          {/each}
+        {:else}
+          {#each peers as peer}
+            <PeerItem
+              projectId={project.id}
+              {node}
+              peer={{ remote: peer, selected: selectedPeer?.id === peer.id }} />
+          {/each}
+        {/if}
       </div>
     </div>
   </Popover>