From 393d82b71e704dfdb6377d438c6e5926780304f6 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Wed, 12 Jun 2024 16:05:19 +0200
Subject: [PATCH] wip

---
 .../DropdownList/DropdownListItem.svelte      |   2 +
 src/views/projects/Source.svelte              |  37 +----
 .../projects/Source/BranchSelector.svelte     |   4 -
 src/views/projects/Source/Header.svelte       |  50 ++++--
 src/views/projects/Source/PeerSelector.svelte | 130 ----------------
 .../projects/Source/SourceSelector.svelte     | 145 ++++++++++++++++++
 .../Source/SourceSelector/PeerItem.svelte     |  84 ++++++++++
 src/views/projects/router.ts                  |  11 +-
 8 files changed, 274 insertions(+), 189 deletions(-)
 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/src/components/DropdownList/DropdownListItem.svelte b/src/components/DropdownList/DropdownListItem.svelte
index a670d74b54..cf1957b629 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>
@@ -46,6 +47,7 @@
 <div
   role="button"
   tabindex="0"
+  {style}
   class="item"
   class:selected
   class:disabled
diff --git a/src/views/projects/Source.svelte b/src/views/projects/Source.svelte
index d2b4256086..ae732ae74a 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";
 
@@ -46,31 +45,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>
@@ -136,15 +110,16 @@
 
   <div style:margin="1rem 0 1rem 1rem" slot="subheader">
     <Header
+      filesLinkActive={true}
+      historyLinkActive={false}
       node={baseUrl}
+      {branches}
       {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
index e9c9482cc9..07562da32e 100644
--- a/src/views/projects/Source/BranchSelector.svelte
+++ b/src/views/projects/Source/BranchSelector.svelte
@@ -7,7 +7,6 @@
 
   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";
@@ -94,7 +93,4 @@
       </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..cdbb338e82 100644
--- a/src/views/projects/Source/Header.svelte
+++ b/src/views/projects/Source/Header.svelte
@@ -1,21 +1,19 @@
 <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 IconSmall from "@app/components/IconSmall.svelte";
   import Link from "@app/components/Link.svelte";
   import Loading from "@app/components/Loading.svelte";
+  import CommitButton from "../components/CommitButton.svelte";
+  import SourceSelector from "./SourceSelector.svelte";
 
+  export let peers: Remote[];
   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 peer: string | undefined;
   export let filesLinkActive: boolean;
   export let historyLinkActive: boolean;
   export let revision: string | undefined;
@@ -34,7 +32,28 @@
   }
 
   $: lastCommit = tree.lastCommit;
-  $: peer = peers.find(p => p.selected)?.remote.id;
+  // $: peersWithRoute = peers.map(remote => ({
+  //   remote,
+  //   route: {
+  //     resource: "project.source",
+  //     node,
+  //     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,
+  //     project: project.id,
+  //     peer,
+  //     revision: name,
+  //   } as Route,
+  // }));
 </script>
 
 <style>
@@ -43,7 +62,6 @@
     align-items: center;
     justify-content: left;
     flex-wrap: wrap;
-    gap: 1rem;
     margin-bottom: 2rem;
   }
 
@@ -86,17 +104,15 @@
 </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} />
+  <div class="global-spacer" />
+  <CommitButton projectId={project.id} commit={lastCommit} baseUrl={node} />
 </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..265facc43e
--- /dev/null
+++ b/src/views/projects/Source/SourceSelector.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { BaseUrl, Project, Remote } from "@http-client";
+
+  import { formatCommit } from "@app/lib/utils";
+
+  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 NodeId from "@app/components/NodeId.svelte";
+  import PeerItem from "./SourceSelector/PeerItem.svelte";
+  import Popover, { closeFocused } from "@app/components/Popover.svelte";
+  import TextInput from "@app/components/TextInput.svelte";
+  import Link from "@app/components/Link.svelte";
+  import { activeUnloadedRouteStore } from "@app/lib/router";
+
+  // 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;
+
+  // 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>
+
+<style>
+  .dropdown {
+    border-radius: var(--border-radius-small);
+    min-width: 25rem;
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 0.25rem;
+  }
+  .dropdown-grid {
+    display: grid;
+    column-gap: 2rem;
+    grid-template-columns: [branch] minmax(20ch, 1fr) [commit] minmax(10ch 1fr);
+  }
+  .dropdown-header {
+    display: grid;
+    grid-template-columns: subgrid;
+    font-size: var(--font-size-tiny);
+    padding: 0.5rem;
+    color: var(--color-foreground-dim);
+  }
+  .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}
+        <NodeId
+          nodeId={selectedPeer.id}
+          alias={selectedPeer.alias}
+          stylePopoverPositionLeft="-0.75rem" />
+        {#if selectedPeer.delegate}
+          <Badge size="tiny" variant="delegate">
+            <IconSmall name="badge" />
+            Delegate
+          </Badge>
+        {/if}
+      {/if}
+      {#if selectedPeer && selectedBranch}
+        <span>/</span>
+      {/if}
+      {#if selectedBranch}
+        <IconSmall name="branch" />
+        {selectedBranch}
+        {#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" />
+      <div class="dropdown-grid">
+        <div class="dropdown-header">Branch</div>
+        <div class="dropdown-header">Head</div>
+
+        <Link
+          style="display: grid; grid-template-columns: subgrid; grid-column: span 2;"
+          route={{
+            ...$activeUnloadedRouteStore,
+            resource: "project.source",
+            peer: undefined,
+            revision: project.defaultBranch,
+            project: project.id,
+            node,
+          }}
+          on:afterNavigate={() => closeFocused()}>
+          <DropdownListItem
+            selected={false}
+            style="display: grid; gap: inherit; grid-template-columns: subgrid; grid-column: span 2;">
+            <div style="display: flex; align-items: center; gap: 0.5rem;">
+              <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);">
+              {formatCommit(project.head)}
+            </div>
+          </DropdownListItem>
+        </Link>
+
+        {#each peers as peer}
+          <PeerItem
+            projectId={project.id}
+            {node}
+            peer={{ remote: peer, selected: selectedPeer?.id === peer.id }} />
+        {/each}
+      </div>
+    </div>
+  </Popover>
+</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..a5e9e083f4
--- /dev/null
+++ b/src/views/projects/Source/SourceSelector/PeerItem.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import type { BaseUrl, Remote } from "@http-client";
+
+  import { formatCommit, formatNodeId } from "@app/lib/utils";
+  import { activeUnloadedRouteStore, replace } from "@app/lib/router";
+  import { closeFocused } from "@app/components/Popover.svelte";
+
+  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 peer: { remote: Remote; selected: boolean };
+  export let projectId: string;
+  export let node: BaseUrl;
+
+  let expanded = false;
+</script>
+
+<div
+  style="display: grid; grid-template-columns: subgrid; grid-column: span 2;">
+  <div
+    style="display: flex; align-items: center; gap: 0.5rem; 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="display: grid; grid-template-columns: subgrid; grid-column: span 2;"
+      route={{
+        ...$activeUnloadedRouteStore,
+        resource: "project.source",
+        peer: peer.remote.id,
+        revision: name,
+        project: projectId,
+        node,
+      }}
+      on:afterNavigate={() => closeFocused()}>
+      <DropdownListItem
+        on:click={() =>
+          replace({
+            ...$activeUnloadedRouteStore,
+            resource: "project.source",
+            peer: peer.remote.id,
+            revision: name,
+            project: projectId,
+            node,
+          })}
+        selected={false}
+        style="display: grid; padding-left: 2.3rem; gap: inherit; grid-template-columns: subgrid; grid-column: span 2;">
+        <div class="txt-overflow">
+          {name}
+        </div>
+        <div style="display: flex; align-items: center; gap: 0.5rem;">
+          <span
+            class="txt-monospace"
+            style="color: var(--color-foreground-dim);">
+            {formatCommit(head)}
+          </span>
+        </div>
+      </DropdownListItem>
+    </Link>
+  {/each}
+{/if}
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;
   }