wip

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

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}

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>

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