From a173f458ce61915ca7c33da4a1511900ad08bcf0 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Fri, 14 Jun 2024 11:38:55 +0200
Subject: [PATCH] Overhaul peer and branch selector

---
 package-lock.json                             |   6 +
 package.json                                  |   1 +
 public/index.css                              |   5 +
 .../DropdownList/DropdownListItem.svelte      |   2 +
 src/lib/search.ts                             |  21 ++
 src/views/projects/History.svelte             |  32 +--
 src/views/projects/Source.svelte              |  47 +---
 .../projects/Source/BranchSelector.svelte     | 100 -------
 src/views/projects/Source/Header.svelte       |  37 ++-
 src/views/projects/Source/PeerSelector.svelte | 130 ---------
 .../projects/Source/SourceSelector.svelte     | 261 ++++++++++++++++++
 .../Source/SourceSelector/PeerItem.svelte     |  94 +++++++
 .../projects/components/CommitButton.svelte   |   2 +-
 src/views/projects/router.ts                  |  11 +-
 14 files changed, 427 insertions(+), 322 deletions(-)
 create mode 100644 src/lib/search.ts
 delete mode 100644 src/views/projects/Source/BranchSelector.svelte
 delete mode 100644 src/views/projects/Source/PeerSelector.svelte
 create mode 100644 src/views/projects/Source/SourceSelector.svelte
 create mode 100644 src/views/projects/Source/SourceSelector/PeerItem.svelte

diff --git a/package-lock.json b/package-lock.json
index a6118c7e39..2611f9b130 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "hasInstallScript": true,
       "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",
@@ -693,6 +694,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@leeoniya/ufuzzy": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@leeoniya/ufuzzy/-/ufuzzy-1.0.14.tgz",
+      "integrity": "sha512-/xF4baYuCQMo+L/fMSUrZnibcu0BquEGnbxfVPiZhs/NbJeKj4c/UmFpQzW9Us0w45ui/yYW3vyaqawhNYsTzA=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/package.json b/package.json
index af27987aa9..d8dc660c3d 100644
--- a/package.json
+++ b/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",
diff --git a/public/index.css b/public/index.css
index 9ab8efbd77..f6101c2720 100644
--- a/public/index.css
+++ b/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
diff --git a/src/components/DropdownList/DropdownListItem.svelte b/src/components/DropdownList/DropdownListItem.svelte
index a670d74b54..a2a3d0e9e2 100644
--- a/src/components/DropdownList/DropdownListItem.svelte
+++ b/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 />
diff --git a/src/lib/search.ts b/src/lib/search.ts
new file mode 100644
index 0000000000..a7aed59b3b
--- /dev/null
+++ b/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 [];
+}
diff --git a/src/views/projects/History.svelte b/src/views/projects/History.svelte
index 43981f70f6..b0db5cc08a 100644
--- a/src/views/projects/History.svelte
+++ b/src/views/projects/History.svelte
@@ -7,7 +7,6 @@
     Node,
     Tree,
   } from "@http-client";
-  import type { Route } from "@app/lib/router";
 
   import { COMMITS_PER_PAGE } from "./router";
   import { HttpdClient } from "@http-client";
@@ -26,7 +25,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[];
@@ -63,28 +61,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 +87,15 @@
 <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}
       {commit}
+      {peers}
+      {peer}
       {project}
-      peers={peersWithRoute}
-      branches={branchesWithRoute}
       {revision}
       {tree}
+      node={baseUrl}
       filesLinkActive={false}
       historyLinkActive={true} />
   </div>
diff --git a/src/views/projects/Source.svelte b/src/views/projects/Source.svelte
index d2b4256086..602142b28d 100644
--- a/src/views/projects/Source.svelte
+++ b/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 { 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;
 
@@ -46,31 +44,6 @@
         return undefined;
       });
   };
-
-  $: 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,
-  }));
 </script>
 
 <style>
@@ -134,17 +107,17 @@
 <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}
+      {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}
diff --git a/src/views/projects/Source/BranchSelector.svelte b/src/views/projects/Source/BranchSelector.svelte
deleted file mode 100644
index e9c9482cc9..0000000000
--- a/src/views/projects/Source/BranchSelector.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<script lang="ts">
-  import type { BaseUrl, Commit, Project } from "@http-client";
-  import type { Route } from "@app/lib/router";
-
-  import { activeUnloadedRouteStore } from "@app/lib/router";
-  import { closeFocused } from "@app/components/Popover.svelte";
-
-  import Badge from "@app/components/Badge.svelte";
-  import Button from "@app/components/Button.svelte";
-  import CommitButton from "@app/views/projects/components/CommitButton.svelte";
-  import DropdownList from "@app/components/DropdownList.svelte";
-  import DropdownListItem from "@app/components/DropdownList/DropdownListItem.svelte";
-  import IconSmall from "@app/components/IconSmall.svelte";
-  import Link from "@app/components/Link.svelte";
-  import Popover from "@app/components/Popover.svelte";
-
-  export let onCanonical: boolean;
-  export let branches: Array<{ name: string; route: Route }>;
-  export let node: BaseUrl;
-  export let project: Project;
-  export let selectedBranch: string | undefined;
-  export let selectedCommit: Commit["commit"];
-</script>
-
-<style>
-  .branch {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .identifier {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-</style>
-
-<div class="branch">
-  {#if selectedBranch}
-    <Popover
-      popoverPadding="0"
-      popoverPositionTop="2.5rem"
-      popoverBorderRadius="var(--border-radius-tiny)">
-      <Button
-        variant="gray-white"
-        let:expanded
-        let:toggle
-        on:click={toggle}
-        slot="toggle"
-        styleBorderRadius="var(--border-radius-tiny) 0 0 var(--border-radius-tiny)"
-        title="Change branch">
-        <IconSmall name="branch" />
-        <div class="identifier">{selectedBranch}</div>
-        {#if onCanonical}
-          <Badge title="Canonical branch" variant="foreground-emphasized">
-            Canonical
-          </Badge>
-        {/if}
-        <IconSmall name={expanded ? "chevron-up" : "chevron-down"} />
-      </Button>
-
-      <DropdownList
-        slot="popover"
-        styleDropdownMinWidth="7.5rem"
-        items={branches}>
-        <svelte:fragment slot="item" let:item>
-          <Link route={item.route} on:afterNavigate={() => closeFocused()}>
-            <DropdownListItem selected={item.name === selectedBranch}>
-              <IconSmall name="branch" />
-              <div class="identifier">
-                {item.name}
-              </div>
-              {#if onCanonical}
-                <Badge title="Canonical branch" variant="foreground-emphasized">
-                  Canonical
-                </Badge>
-              {/if}
-            </DropdownListItem>
-          </Link>
-        </svelte:fragment>
-        <svelte:fragment slot="empty">
-          <Link
-            route={$activeUnloadedRouteStore}
-            on:afterNavigate={() => closeFocused()}>
-            <DropdownListItem selected>
-              <IconSmall name="branch" />
-              <div class="identifier">
-                {project.defaultBranch}
-              </div>
-            </DropdownListItem>
-          </Link>
-        </svelte:fragment>
-      </DropdownList>
-    </Popover>
-  {/if}
-
-  <div class="global-spacer" />
-  <CommitButton projectId={project.id} commit={selectedCommit} baseUrl={node} />
-</div>
diff --git a/src/views/projects/Source/Header.svelte b/src/views/projects/Source/Header.svelte
index 81e0d4e4d8..afb5e659f3 100644
--- a/src/views/projects/Source/Header.svelte
+++ b/src/views/projects/Source/Header.svelte
@@ -1,26 +1,24 @@
 <script lang="ts">
   import type { BaseUrl, Project, Remote, Tree } from "@http-client";
-  import type { Route } from "@app/lib/router";
 
   import { HttpdClient } from "@http-client";
 
-  import BranchSelector from "./BranchSelector.svelte";
-  import PeerSelector from "./PeerSelector.svelte";
-
   import Button from "@app/components/Button.svelte";
+  import CommitButton from "../components/CommitButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Link from "@app/components/Link.svelte";
   import Loading from "@app/components/Loading.svelte";
+  import SourceSelector from "./SourceSelector.svelte";
 
-  export let node: BaseUrl;
   export let commit: string;
-  export let branches: Array<{ name: string; route: Route }>;
-  export let peers: Array<{ remote: Remote; selected: boolean; route: Route }>;
   export let filesLinkActive: boolean;
   export let historyLinkActive: boolean;
+  export let node: BaseUrl;
+  export let peer: string | undefined;
+  export let peers: Remote[];
+  export let project: Project;
   export let revision: string | undefined;
   export let tree: Tree;
-  export let project: Project;
 
   const api = new HttpdClient(node);
   let selectedBranch: string | undefined;
@@ -34,7 +32,6 @@
   }
 
   $: lastCommit = tree.lastCommit;
-  $: peer = peers.find(p => p.selected)?.remote.id;
 </script>
 
 <style>
@@ -42,8 +39,9 @@
     display: flex;
     align-items: center;
     justify-content: left;
-    flex-wrap: wrap;
+    row-gap: 0.5rem;
     gap: 1rem;
+    flex-wrap: wrap;
     margin-bottom: 2rem;
   }
 
@@ -86,17 +84,18 @@
 </style>
 
 <div class="top-header">
-  {#if peers.length > 0}
-    <PeerSelector {peers} {project} {node} />
-  {/if}
-
-  <BranchSelector
-    {branches}
-    {project}
-    {node}
+  <SourceSelector
+    {peers}
+    {peer}
     onCanonical={Boolean(!peer && selectedBranch === project.defaultBranch)}
-    selectedCommit={lastCommit}
+    {node}
+    {project}
     {selectedBranch} />
+  <CommitButton
+    projectId={project.id}
+    commit={lastCommit}
+    baseUrl={node}
+    styleRoundBorders />
 </div>
 
 <div class="header">
diff --git a/src/views/projects/Source/PeerSelector.svelte b/src/views/projects/Source/PeerSelector.svelte
deleted file mode 100644
index fd9160ad2a..0000000000
--- a/src/views/projects/Source/PeerSelector.svelte
+++ /dev/null
@@ -1,130 +0,0 @@
-<script lang="ts">
-  import type { BaseUrl, Project, Remote } from "@http-client";
-  import type { Route } from "@app/lib/router";
-
-  import { closeFocused } from "@app/components/Popover.svelte";
-  import { formatNodeId } from "@app/lib/utils";
-  import { httpdStore } from "@app/lib/httpd";
-
-  import NodeId from "@app/components/NodeId.svelte";
-  import Badge from "@app/components/Badge.svelte";
-  import DropdownList from "@app/components/DropdownList.svelte";
-  import DropdownListItem from "@app/components/DropdownList/DropdownListItem.svelte";
-  import Popover from "@app/components/Popover.svelte";
-  import IconSmall from "@app/components/IconSmall.svelte";
-  import Link from "@app/components/Link.svelte";
-  import Button from "@app/components/Button.svelte";
-  import Avatar from "@app/components/Avatar.svelte";
-
-  export let peers: Array<{ remote: Remote; selected: boolean; route: Route }>;
-  export let project: Project;
-  export let node: BaseUrl;
-
-  $: selectedPeer = peers.find(p => p.selected)?.remote;
-
-  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`;
-  }
-</script>
-
-<style>
-  .counter {
-    border-radius: var(--border-radius-tiny);
-    background-color: var(--color-fill-counter);
-    color: var(--color-foreground-contrast);
-    padding: 0 0.25rem;
-  }
-  .no-alias {
-    color: var(--color-foreground-dim);
-  }
-</style>
-
-<div style="display: flex; gap: 1px;">
-  <Popover
-    popoverPadding="0"
-    popoverPositionTop="2.5rem"
-    popoverBorderRadius="var(--border-radius-small)">
-    <Button
-      slot="toggle"
-      let:expanded
-      let:toggle
-      styleBorderRadius="var(--border-radius-tiny) 0 0 var(--border-radius-tiny)"
-      on:click={toggle}
-      title="Change peer"
-      disabled={!peers}>
-      {#if !selectedPeer}
-        <IconSmall name="delegate" />
-      {/if}
-
-      {#if selectedPeer}
-        <NodeId
-          nodeId={selectedPeer.id}
-          alias={selectedPeer.alias}
-          stylePopoverPositionLeft="-0.75rem" />
-        {#if selectedPeer.delegate}
-          <Badge size="tiny" variant="delegate">
-            <IconSmall name="badge" />
-            Delegate
-          </Badge>
-        {/if}
-      {:else}
-        Remotes
-        <div class="counter">
-          {peers.length}
-        </div>
-      {/if}
-      <IconSmall name={expanded ? "chevron-up" : "chevron-down"} />
-    </Button>
-
-    <DropdownList slot="popover" items={peers}>
-      <svelte:fragment slot="item" let:item>
-        <Link on:afterNavigate={() => closeFocused()} route={item.route}>
-          <DropdownListItem
-            selected={item.selected}
-            title={createTitle(item.remote)}>
-            <div style:height="1rem">
-              <Avatar nodeId={item.remote.id} />
-            </div>
-            <span
-              style:font-family="var(--font-family-monospace)"
-              class:no-alias={!item.remote.alias}>
-              {item.remote.alias || formatNodeId(item.remote.id)}
-            </span>
-            {#if $httpdStore.state !== "stopped" && item.remote.id === $httpdStore.node.id}
-              <Badge
-                style="background-color: var(--color-fill-ghost-hover)"
-                variant="neutral"
-                size="tiny">
-                You
-              </Badge>
-            {/if}
-            {#if item.remote.delegate}
-              <Badge size="tiny" variant="delegate">
-                <IconSmall name="badge" />
-                Delegate
-              </Badge>
-            {/if}
-          </DropdownListItem>
-        </Link>
-      </svelte:fragment>
-    </DropdownList>
-  </Popover>
-  {#if selectedPeer}
-    <Link
-      route={{
-        resource: "project.source",
-        project: project.id,
-        node,
-        path: "/",
-      }}>
-      <Button
-        variant="not-selected"
-        styleBorderRadius="0 var(--border-radius-tiny) var(--border-radius-tiny) 0">
-        <IconSmall name="cross" />
-      </Button>
-    </Link>
-  {/if}
-</div>
diff --git a/src/views/projects/Source/SourceSelector.svelte b/src/views/projects/Source/SourceSelector.svelte
new file mode 100644
index 0000000000..2cc98221cd
--- /dev/null
+++ b/src/views/projects/Source/SourceSelector.svelte
@@ -0,0 +1,261 @@
+<script lang="ts">
+  import type { BaseUrl, Project, Remote } from "@http-client";
+
+  import { closeFocused } from "@app/components/Popover.svelte";
+  import { formatCommit, formatNodeId } from "@app/lib/utils";
+  import { search } from "@app/lib/search";
+
+  import Avatar from "@app/components/Avatar.svelte";
+  import Badge from "@app/components/Badge.svelte";
+  import Button from "@app/components/Button.svelte";
+  import DropdownListItem from "@app/components/DropdownList/DropdownListItem.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
+  import Link from "@app/components/Link.svelte";
+  import NodeId from "@app/components/NodeId.svelte";
+  import PeerItem from "./SourceSelector/PeerItem.svelte";
+  import Popover from "@app/components/Popover.svelte";
+  import TextInput from "@app/components/TextInput.svelte";
+
+  export let node: BaseUrl;
+  export let onCanonical: boolean;
+  export let peer: string | undefined;
+  export let peers: Remote[];
+  export let project: Project;
+  export let selectedBranch: string | undefined;
+
+  let searchInput = "";
+  let searchResults: string[] = [];
+
+  const subgridStyle =
+    "display: grid; grid-template-columns: subgrid; grid-column: span 2;";
+
+  $: selectedPeer = peers.find(p => p.id === peer);
+</script>
+
+<style>
+  .dropdown {
+    border-radius: var(--border-radius-small);
+    width: 40rem;
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 0.25rem;
+  }
+  .subgrid-item {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: span 2;
+  }
+  .dropdown-grid {
+    display: grid;
+    column-gap: 2rem;
+    grid-template-columns: [branch] minmax(20ch, 1fr) [commit] 10ch;
+  }
+  .dropdown-header {
+    display: grid;
+    grid-template-columns: subgrid;
+    font-size: var(--font-size-tiny);
+    padding: 0.5rem;
+    color: var(--color-foreground-dim);
+  }
+  .container {
+    display: flex;
+    gap: 1px;
+    min-width: 0;
+    flex-wrap: nowrap;
+  }
+  @media (max-width: 719.98px) {
+    .dropdown {
+      width: 100%;
+    }
+  }
+</style>
+
+<div class="container">
+  <Popover
+    popoverContainerMinWidth="0"
+    popoverPadding="0"
+    popoverPositionTop="2.5rem"
+    popoverBorderRadius="var(--border-radius-small)">
+    <Button
+      slot="toggle"
+      let:expanded
+      let:toggle
+      styleBorderRadius="var(--border-radius-tiny) 0 0 var(--border-radius-tiny)"
+      styleWidth="100%"
+      on:click={toggle}
+      title="Change peer"
+      disabled={!peers}>
+      {#if selectedPeer}
+        <div class="global-hide-on-medium-desktop-up" style="height: 1rem;">
+          <Avatar nodeId={selectedPeer.id} />
+        </div>
+        <div class="global-hide-on-small-desktop-down global-flex-item">
+          <NodeId
+            nodeId={selectedPeer.id}
+            alias={selectedPeer.alias}
+            stylePopoverPositionLeft="-0.75rem" />
+          {#if selectedPeer.delegate}
+            <Badge size="tiny" variant="delegate">
+              <IconSmall name="badge" />
+              Delegate
+            </Badge>
+          {/if}
+        </div>
+      {/if}
+      {#if selectedPeer && selectedBranch}
+        <span>/</span>
+      {/if}
+      {#if selectedBranch}
+        <IconSmall name="branch" />
+        <span class="txt-overflow">
+          {selectedBranch}
+        </span>
+        {#if onCanonical}
+          <Badge title="Canonical branch" variant="foreground-emphasized">
+            Canonical
+          </Badge>
+        {/if}
+      {/if}
+      <IconSmall name={expanded ? "chevron-up" : "chevron-down"} />
+    </Button>
+
+    <div slot="popover" class="dropdown">
+      <TextInput
+        placeholder="Search"
+        bind:value={searchInput}
+        on:input={() => {
+          searchResults = search(
+            [
+              JSON.stringify({
+                peer: undefined,
+                revision: project.defaultBranch,
+                head: project.head,
+              }),
+              ...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>
+
+        {#if searchInput}
+          {#each searchResults as result}
+            {@const parsedResult = JSON.parse(result)}
+            <Link
+              style={subgridStyle}
+              route={{
+                resource: "project.source",
+                node,
+                project: project.id,
+                peer: parsedResult.peer?.id,
+                revision: parsedResult.revision,
+                path: "/",
+              }}
+              on:afterNavigate={() => {
+                closeFocused();
+                searchInput = "";
+              }}>
+              <DropdownListItem
+                selected={selectedPeer?.id === parsedResult.peer?.id &&
+                  selectedBranch === parsedResult.revision}
+                style={`${subgridStyle} gap: inherit;`}>
+                <div class="global-flex-item">
+                  <IconSmall name="branch" />
+                  <span class="txt-overflow">
+                    {#if parsedResult.peer}
+                      {parsedResult.peer.alias ||
+                        formatNodeId(parsedResult.peer.id)} / {parsedResult.revision}
+                    {:else}
+                      <div class="global-flex-item">
+                        {parsedResult.revision}
+                        <Badge
+                          title="Canonical branch"
+                          variant="foreground-emphasized">
+                          Canonical
+                        </Badge>
+                      </div>
+                    {/if}
+                  </span>
+                </div>
+                <div
+                  class="txt-monospace"
+                  style="color: var(--color-foreground-dim); padding-left: 0.5rem;">
+                  {formatCommit(parsedResult.head)}
+                </div>
+              </DropdownListItem>
+            </Link>
+          {:else}
+            <div
+              style="gap: inherit; padding: 0.5rem 0.375rem;"
+              class="subgrid-item txt-missing txt-small">
+              No entries found
+            </div>
+          {/each}
+        {:else}
+          <Link
+            style={subgridStyle}
+            route={{
+              resource: "project.source",
+              revision: project.defaultBranch,
+              project: project.id,
+              node,
+              path: "/",
+            }}
+            on:afterNavigate={() => {
+              closeFocused();
+              searchInput = "";
+            }}>
+            <DropdownListItem
+              selected={onCanonical}
+              style={`${subgridStyle} gap: inherit;`}>
+              <div class="global-flex-item">
+                <IconSmall name="branch" />
+                {project.defaultBranch}
+                <Badge title="Canonical branch" variant="foreground-emphasized">
+                  Canonical
+                </Badge>
+              </div>
+              <div
+                class="txt-monospace"
+                style="color: var(--color-foreground-dim); padding-left: 0.5rem;">
+                {formatCommit(project.head)}
+              </div>
+            </DropdownListItem>
+          </Link>
+          {#each peers as peer}
+            <PeerItem
+              projectId={project.id}
+              {node}
+              revision={selectedBranch}
+              peer={{ remote: peer, selected: selectedPeer?.id === peer.id }} />
+          {/each}
+        {/if}
+      </div>
+    </div>
+  </Popover>
+  {#if selectedPeer}
+    <Link
+      route={{
+        resource: "project.source",
+        project: project.id,
+        node,
+        path: "/",
+      }}>
+      <Button
+        variant="not-selected"
+        styleBorderRadius="0 var(--border-radius-tiny) var(--border-radius-tiny) 0">
+        <IconSmall name="cross" />
+      </Button>
+    </Link>
+  {/if}
+</div>
diff --git a/src/views/projects/Source/SourceSelector/PeerItem.svelte b/src/views/projects/Source/SourceSelector/PeerItem.svelte
new file mode 100644
index 0000000000..22714a1fe8
--- /dev/null
+++ b/src/views/projects/Source/SourceSelector/PeerItem.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+  import type { BaseUrl, Remote } from "@http-client";
+
+  import { closeFocused } from "@app/components/Popover.svelte";
+  import { formatCommit, formatNodeId } from "@app/lib/utils";
+  import { replace } from "@app/lib/router";
+
+  import Avatar from "@app/components/Avatar.svelte";
+  import Badge from "@app/components/Badge.svelte";
+  import DropdownListItem from "@app/components/DropdownList/DropdownListItem.svelte";
+  import IconButton from "@app/components/IconButton.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
+  import Link from "@app/components/Link.svelte";
+
+  export let node: BaseUrl;
+  export let peer: { remote: Remote; selected: boolean };
+  export let projectId: string;
+  export let revision: string | undefined = undefined;
+
+  const subgridStyle =
+    "display: grid; grid-template-columns: subgrid; grid-column: span 2;";
+  let expanded = false;
+</script>
+
+<style>
+  .subgrid-item {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: span 2;
+  }
+  .no-alias {
+    color: var(--color-foreground-dim);
+  }
+</style>
+
+<div class="subgrid-item">
+  <div class="global-flex-item" style="padding: 0.5rem 0">
+    <IconButton on:click={() => (expanded = !expanded)}>
+      <IconSmall name={`chevron-${expanded ? "down" : "right"}`} />
+    </IconButton>
+    <div style:height="1rem">
+      <Avatar nodeId={peer.remote.id} />
+    </div>
+    <span
+      style:font-family="var(--font-family-monospace)"
+      class="txt-small"
+      class:no-alias={!peer.remote.alias}>
+      {peer.remote.alias || formatNodeId(peer.remote.id)}
+    </span>
+    {#if peer.remote.delegate}
+      <Badge size="tiny" variant="delegate">
+        <IconSmall name="badge" />
+        Delegate
+      </Badge>
+    {/if}
+  </div>
+</div>
+{#if expanded}
+  {#each Object.entries(peer.remote.heads) as [name, head]}
+    <Link
+      style={subgridStyle}
+      route={{
+        resource: "project.source",
+        peer: peer.remote.id,
+        revision: name,
+        project: projectId,
+        node,
+      }}
+      on:afterNavigate={() => closeFocused()}>
+      <DropdownListItem
+        selected={peer.selected && revision === name}
+        on:click={() =>
+          replace({
+            resource: "project.source",
+            peer: peer.remote.id,
+            revision: name,
+            project: projectId,
+            node,
+          })}
+        style={`${subgridStyle} padding-left: 2.3rem; gap: inherit;`}>
+        <div class="txt-overflow">
+          {name}
+        </div>
+        <div class="global-flex-item">
+          <span
+            class="txt-monospace"
+            style="color: var(--color-foreground-dim);">
+            {formatCommit(head)}
+          </span>
+        </div>
+      </DropdownListItem>
+    </Link>
+  {/each}
+{/if}
diff --git a/src/views/projects/components/CommitButton.svelte b/src/views/projects/components/CommitButton.svelte
index d6b851e3a8..648c0f6e1e 100644
--- a/src/views/projects/components/CommitButton.svelte
+++ b/src/views/projects/components/CommitButton.svelte
@@ -43,7 +43,7 @@
       <div class="identifier global-commit">
         {commitShortId}
       </div>
-      <span class="global-hide-on-small-desktop-down">
+      <span>
         {commit.summary}
       </span>
     </div>
diff --git a/src/views/projects/router.ts b/src/views/projects/router.ts
index 27cf29af9d..a01e80252e 100644
--- a/src/views/projects/router.ts
+++ b/src/views/projects/router.ts
@@ -438,7 +438,9 @@ async function loadTreeView(
     isLocalNodeSeeding(route),
   ]);
 
-  let branchMap: Record<string, string>;
+  let branchMap: Record<string, string> = {
+    [project.defaultBranch]: project.head,
+  };
   if (route.peer) {
     const peer = peers.find(peer => peer.id === route.peer);
     if (!peer) {
@@ -449,15 +451,10 @@ async function loadTreeView(
     } else {
       branchMap = peer.heads;
     }
-  } else {
-    branchMap = { [project.defaultBranch]: project.head };
   }
 
   if (route.route) {
-    const { revision, path } = detectRevision(
-      route.route,
-      branchMap || { [project.defaultBranch]: project.head },
-    );
+    const { revision, path } = detectRevision(route.route, branchMap);
     route.revision = revision;
     route.path = path;
   }