Overhaul peer and branch selector

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",

public/index.css

@@ -96,6 +96,11 @@ pre {
   height: 100%;
   background-color: var(--color-fill-ghost);
 }
+.global-flex-item {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
 
 /*
   Breakpoints

src/components/DropdownList/DropdownListItem.svelte

@@ -2,6 +2,7 @@
   export let selected: boolean;
   export let disabled: boolean = false;
   export let title: string | undefined = undefined;
+  export let style: string | undefined = undefined;
 </script>
 
 <style>
@@ -49,6 +50,7 @@
   class="item"
   class:selected
   class:disabled
+  {style}
   {title}
   on:click>
   <slot />

src/lib/search.ts

@@ -0,0 +1,21 @@
+import FuzzySearch from "@leeoniya/ufuzzy";
+
+const uf = new FuzzySearch();
+const infoThresh = 1e3;
+
+export function search(haystack: string[], needle: string) {
+  const idxs = uf.filter(haystack, needle);
+
+  if (idxs !== null && idxs.length > 0) {
+    // sort/rank only when <= infoThresh
+    if (idxs.length <= infoThresh) {
+      const info = uf.info(idxs, haystack, needle);
+      const order = uf.sort(info, haystack, needle);
+      return order.map((_o, i) => haystack[info.idx[order[i]]]);
+    } else {
+      return idxs.map((_o, i) => haystack[idxs[i]]);
+    }
+  }
+
+  return [];
+}

src/views/projects/History.svelte

@@ -7,7 +7,7 @@
     Node,
     Tree,
   } from "@http-client";
-  import type { Route } from "@app/lib/router";
+  import type { ProjectRoute } from "./router";
 
   import { COMMITS_PER_PAGE } from "./router";
   import { HttpdClient } from "@http-client";
@@ -26,7 +26,6 @@
   export let baseUrl: BaseUrl;
   export let node: Node;
   export let commit: string;
-  export let branches: string[];
   export let commitHeaders: CommitHeader[];
   export let peer: string | undefined;
   export let peers: Remote[];
@@ -43,6 +42,11 @@
   let loading = false;
   let allCommitHeaders: CommitHeader[];
 
+  $: baseRoute = {
+    resource: "project.history",
+    node: baseUrl,
+    project: project.id,
+  } as Extract<ProjectRoute, { resource: "project.history" }>;
   $: {
     allCommitHeaders = commitHeaders;
     page = 0;
@@ -63,28 +67,6 @@
     }
     loading = false;
   }
-
-  $: peersWithRoute = peers.map(remote => ({
-    remote,
-    selected: remote.id === peer,
-    route: {
-      resource: "project.history",
-      node: baseUrl,
-      project: project.id,
-      peer: remote.id,
-    } as Route,
-  }));
-
-  $: branchesWithRoute = branches.map(name => ({
-    name,
-    route: {
-      resource: "project.history",
-      node: baseUrl,
-      project: project.id,
-      peer,
-      revision: name,
-    } as Route,
-  }));
 </script>
 
 <style>
@@ -111,15 +93,16 @@
 <Layout {node} {baseUrl} {project} activeTab="source">
   <ProjectNameHeader {project} {baseUrl} {seeding} slot="header" />
 
-  <div style:margin="1rem 0 1rem 1rem" slot="subheader">
+  <div style:margin="1rem 1rem 1rem 1rem" slot="subheader">
     <Header
-      node={baseUrl}
+      {baseRoute}
       {commit}
+      {peers}
+      {peer}
       {project}
-      peers={peersWithRoute}
-      branches={branchesWithRoute}
       {revision}
       {tree}
+      node={baseUrl}
       filesLinkActive={false}
       historyLinkActive={true} />
   </div>

src/views/projects/Source.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { BaseUrl, Node, Project, Remote, Tree } from "@http-client";
-  import type { BlobResult } from "./router";
-  import type { Route } from "@app/lib/router";
+  import type { BlobResult, ProjectRoute } from "./router";
 
   import { HttpdClient } from "@http-client";
 
@@ -15,18 +14,17 @@
   import ProjectNameHeader from "./Source/ProjectNameHeader.svelte";
 
   export let baseUrl: BaseUrl;
-  export let node: Node;
-  export let commit: string;
-  export let rawPath: (commit?: string) => string;
   export let blobResult: BlobResult;
-  export let branches: string[];
+  export let commit: string;
+  export let node: Node;
   export let path: string;
   export let peer: string | undefined;
   export let peers: Remote[];
   export let project: Project;
+  export let rawPath: (commit?: string) => string;
   export let revision: string | undefined;
-  export let tree: Tree;
   export let seeding: boolean;
+  export let tree: Tree;
 
   let mobileFileTree = false;
 
@@ -47,30 +45,12 @@
       });
   };
 
-  $: peersWithRoute = peers.map(remote => ({
-    remote,
-    selected: remote.id === peer,
-    route: {
-      resource: "project.source",
-      node: baseUrl,
-      project: project.id,
-      peer: remote.id,
-      revision: remote.heads[project.defaultBranch]
-        ? undefined
-        : Object.keys(remote.heads)[0],
-    } as Route,
-  }));
-
-  $: branchesWithRoute = branches.map(name => ({
-    name,
-    route: {
-      resource: "project.source",
-      node: baseUrl,
-      project: project.id,
-      peer,
-      revision: name,
-    } as Route,
-  }));
+  $: baseRoute = {
+    resource: "project.source",
+    node: baseUrl,
+    project: project.id,
+    path: "/",
+  } as Extract<ProjectRoute, { resource: "project.source" }>;
 </script>
 
 <style>
@@ -134,17 +114,18 @@
 <Layout {node} {baseUrl} {project} activeTab="source" stylePaddingBottom="0">
   <ProjectNameHeader {project} {baseUrl} {seeding} slot="header" />
 
-  <div style:margin="1rem 0 1rem 1rem" slot="subheader">
+  <div style:margin="1rem 1rem 1rem 1rem" slot="subheader">
     <Header
+      filesLinkActive={true}
+      historyLinkActive={false}
       node={baseUrl}
       {commit}
+      {baseRoute}
+      {peers}
+      {peer}
       {project}
-      peers={peersWithRoute}
-      branches={branchesWithRoute}
       {revision}
-      {tree}
-      filesLinkActive={true}
-      historyLinkActive={false} />
+      {tree} />
   </div>
   <div class="global-hide-on-medium-desktop-up">
     {#if tree.entries.length > 0}