From 275a73d1c760fc3fcd163901e628fdafe351830d Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Tue, 28 May 2024 10:18:19 +0200
Subject: [PATCH] Add delegates and node scope policies to Sidebar

---
 src/components/IconSmall.svelte               |  38 ++++++
 src/components/ScopePolicyExplainer.svelte    |  44 ++++--
 src/views/nodes/View.svelte                   |  37 +++--
 src/views/projects/Commit.svelte              |   5 +-
 src/views/projects/History.svelte             |   4 +-
 src/views/projects/Issue.svelte               |   4 +-
 src/views/projects/Issue/New.svelte           |   5 +-
 src/views/projects/Issues.svelte              |  11 +-
 src/views/projects/Layout.svelte              |   7 +-
 src/views/projects/Patch.svelte               |   4 +-
 src/views/projects/Patches.svelte             |  11 +-
 src/views/projects/Sidebar.svelte             |  54 +++++++-
 src/views/projects/Sidebar/ContextRepo.svelte | 129 ++++++++++++++++++
 src/views/projects/Source.svelte              |   5 +-
 src/views/projects/router.ts                  |  45 +++++-
 15 files changed, 356 insertions(+), 47 deletions(-)
 create mode 100644 src/views/projects/Sidebar/ContextRepo.svelte

diff --git a/src/components/IconSmall.svelte b/src/components/IconSmall.svelte
index a9238c0e6e..c8ac1299da 100644
--- a/src/components/IconSmall.svelte
+++ b/src/components/IconSmall.svelte
@@ -53,6 +53,7 @@
     | "online"
     | "patch"
     | "plus"
+    | "quorum"
     | "repo"
     | "seedling"
     | "settings"
@@ -499,6 +500,43 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M13.1667 8C13.1667 8.27614 12.9428 8.5 12.6667 8.5L3.33334 8.5C3.0572 8.5 2.83334 8.27614 2.83334 8C2.83334 7.72386 3.0572 7.5 3.33334 7.5L12.6667 7.5C12.9428 7.5 13.1667 7.72386 13.1667 8Z" />
+  {:else if name === "quorum"}
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 4C12.5523 4 13 3.55228 13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3C11 3.55228 11.4477 4 12 4ZM12 5C13.1046 5 14 4.10457 14 3C14 1.89543 13.1046 1 12 1C10.8954 1 10 1.89543 10 3C10 4.10457 10.8954 5 12 5Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4 14C4.55228 14 5 13.5523 5 13C5 12.4477 4.55228 12 4 12C3.44772 12 3 12.4477 3 13C3 13.5523 3.44772 14 4 14ZM4 15C5.10457 15 6 14.1046 6 13C6 11.8954 5.10457 11 4 11C2.89543 11 2 11.8954 2 13C2 14.1046 2.89543 15 4 15Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4 4C4.55228 4 5 3.55228 5 3C5 2.44772 4.55228 2 4 2C3.44772 2 3 2.44772 3 3C3 3.55228 3.44772 4 4 4ZM4 5C5.10457 5 6 4.10457 6 3C6 1.89543 5.10457 1 4 1C2.89543 1 2 1.89543 2 3C2 4.10457 2.89543 5 4 5Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14ZM12 15C13.1046 15 14 14.1046 14 13C14 11.8954 13.1046 11 12 11C10.8954 11 10 11.8954 10 13C10 14.1046 10.8954 15 12 15Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 3.5C8.15738 3.5 8.30557 3.5741 8.4 3.7L11.4 7.7C11.5333 7.87778 11.5333 8.12222 11.4 8.3L8.4 12.3C8.30557 12.4259 8.15738 12.5 8 12.5C7.84262 12.5 7.69443 12.4259 7.6 12.3L4.6 8.3C4.46667 8.12222 4.46667 7.87778 4.6 7.7L7.6 3.7C7.69443 3.5741 7.84262 3.5 8 3.5ZM5.625 8L8 11.1667L10.375 8L8 4.83333L5.625 8Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.49592 11.5631L6.0103 9.64167L6.79568 10.2607L5.2813 12.1821L4.49592 11.5631Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.09293 5.6512L10.6073 3.7298L11.3927 4.34882L9.87831 6.27021L9.09293 5.6512Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.3927 11.5631L9.87831 9.64167L9.09293 10.2607L10.6073 12.1821L11.3927 11.5631Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.79568 5.6512L5.28129 3.7298L4.49591 4.34882L6.0103 6.27021L6.79568 5.6512Z" />
   {:else if name === "repo"}
     <path
       fill-rule="evenodd"
diff --git a/src/components/ScopePolicyExplainer.svelte b/src/components/ScopePolicyExplainer.svelte
index 91fef3841c..5c217c1f05 100644
--- a/src/components/ScopePolicyExplainer.svelte
+++ b/src/components/ScopePolicyExplainer.svelte
@@ -1,17 +1,41 @@
 <script lang="ts">
   import type { Scope, Policy } from "@httpd-client";
 
+  import { capitalize } from "lodash";
+
   export let scope: Scope;
   export let policy: Policy;
 </script>
 
-{#if policy === "allow"}
-  All discovered repositories will get seeded,
-{:else if policy === "block"}
-  Only repositories marked as such will get seeded,
-{/if}
-{#if scope === "all"}
-  and all changes in those repositories, made by any peer, will be synced.
-{:else if scope === "followed"}
-  and only changes made by explicitly followed peers will be synced.
-{/if}
+<style>
+  .section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+  }
+</style>
+
+<div class="section">
+  Scope:
+  <span class="txt-bold">{capitalize(scope)}</span>
+</div>
+<div class="txt-missing">
+  {#if scope === "all"}
+    All changes in seeded repositories, made by any peer, will be synced.
+  {:else if scope === "followed"}
+    Only changes made by explicitly followed peers will be synced.
+  {/if}
+</div>
+
+<div class="section">
+  Policy:
+  <span class="txt-bold">{capitalize(policy)}</span>
+</div>
+<div class="txt-missing">
+  {#if policy === "allow"}
+    All discovered repositories will get seeded.
+  {:else if policy === "block"}
+    Only repositories marked as such will get seeded.
+  {/if}
+</div>
diff --git a/src/views/nodes/View.svelte b/src/views/nodes/View.svelte
index 0a60ca6d27..1092587153 100644
--- a/src/views/nodes/View.svelte
+++ b/src/views/nodes/View.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { BaseUrl, NodeStats, Policy, Scope } from "@httpd-client";
 
+  import { capitalize } from "lodash";
+
   import * as router from "@app/lib/router";
   import { api, httpdStore } from "@app/lib/httpd";
   import { baseUrlToString, isLocal, truncateId } from "@app/lib/utils";
@@ -10,9 +12,12 @@
 
   import AppLayout from "@app/App/AppLayout.svelte";
   import CopyableId from "@app/components/CopyableId.svelte";
+  import IconButton from "@app/components/IconButton.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
   import Loading from "@app/components/Loading.svelte";
+  import Popover from "@app/components/Popover.svelte";
   import ProjectCard from "@app/components/ProjectCard.svelte";
-  import ScopePolicyPopover from "@app/views/nodes/ScopePolicyPopover.svelte";
+  import ScopePolicyExplainer from "@app/components/ScopePolicyExplainer.svelte";
 
   export let baseUrl: BaseUrl;
   export let nid: string;
@@ -22,6 +27,8 @@
   export let policy: Policy | undefined = undefined;
   export let scope: Scope | undefined = undefined;
 
+  $: shortScope =
+    scope === "all" && policy === "allow" ? "permissive" : "restrictive";
   $: hostname = isLocal(baseUrl.hostname) ? "Local Node" : baseUrl.hostname;
   $: session =
     $httpdStore.state === "authenticated" && isLocal(api.baseUrl.hostname)
@@ -68,6 +75,11 @@
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-small);
   }
+  .seeding-policies {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
 
   .project-grid {
     display: grid;
@@ -138,21 +150,28 @@
         </div>
       </div>
 
-      <div class="subtitle">
+      <div class="subtitle" style:justify-content="space-between">
         <div class="txt-semibold">
           {isLocal(baseUrl.hostname) ? "Seeded" : "Pinned"} projects
         </div>
-        <div class="global-hide-on-mobile-down" style:margin-left="auto">
+        <div class="seeding-policies">
           {#if policy && scope}
-            <ScopePolicyPopover {scope} {policy} popoverPositionRight="0" />
+            <span class="txt-bold">Seeding Policies:</span>
+            {capitalize(shortScope)}
+            <div class="global-hide-on-mobile-down">
+              <Popover
+                popoverPositionBottom="0"
+                popoverPositionLeft="-17rem"
+                popoverPositionRight="2rem">
+                <IconButton slot="toggle" let:toggle on:click={toggle}>
+                  <IconSmall name="help" />
+                </IconButton>
+                <ScopePolicyExplainer slot="popover" {scope} {policy} />
+              </Popover>
+            </div>
           {/if}
         </div>
       </div>
-      <div class="subtitle global-hide-on-small-desktop-up">
-        {#if policy && scope}
-          <ScopePolicyPopover {scope} {policy} popoverPositionRight="-4.5rem" />
-        {/if}
-      </div>
 
       <div style:margin-top="1rem" style:padding-bottom="2.5rem">
         {#await fetchProjectInfos( baseUrl, { show: isLocal(baseUrl.hostname) ? "all" : "pinned", perPage: stats.repos.total }, )}
diff --git a/src/views/projects/Commit.svelte b/src/views/projects/Commit.svelte
index eaa9dc6da0..4e1d9f9f6d 100644
--- a/src/views/projects/Commit.svelte
+++ b/src/views/projects/Commit.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { BaseUrl, Commit, Project } from "@httpd-client";
+  import type { BaseUrl, Commit, Node, Project } from "@httpd-client";
 
   import { formatCommit } from "@app/lib/utils";
 
@@ -14,6 +14,7 @@
   import Share from "./Share.svelte";
 
   export let baseUrl: BaseUrl;
+  export let node: Node;
   export let commit: Commit;
   export let project: Project;
 
@@ -46,7 +47,7 @@
   }
 </style>
 
-<Layout {baseUrl} {project}>
+<Layout {node} {baseUrl} {project}>
   <div class="commit">
     <div class="header">
       <div style="display:flex; flex-direction: column; gap: 0.5rem;">
diff --git a/src/views/projects/History.svelte b/src/views/projects/History.svelte
index 19a101625e..c177b52049 100644
--- a/src/views/projects/History.svelte
+++ b/src/views/projects/History.svelte
@@ -4,6 +4,7 @@
     CommitHeader,
     Project,
     Remote,
+    Node,
     Tree,
   } from "@httpd-client";
   import type { Route } from "@app/lib/router";
@@ -23,6 +24,7 @@
   import ProjectNameHeader from "./Source/ProjectNameHeader.svelte";
 
   export let baseUrl: BaseUrl;
+  export let node: Node;
   export let commit: string;
   export let branches: string[];
   export let commitHeaders: CommitHeader[];
@@ -106,7 +108,7 @@
   }
 </style>
 
-<Layout {baseUrl} {project} activeTab="source">
+<Layout {node} {baseUrl} {project} activeTab="source">
   <ProjectNameHeader {project} {baseUrl} {seeding} slot="header" />
 
   <div style:margin="1rem 0 1rem 1rem" slot="subheader">
diff --git a/src/views/projects/Issue.svelte b/src/views/projects/Issue.svelte
index 7253522bbf..33bfade73c 100644
--- a/src/views/projects/Issue.svelte
+++ b/src/views/projects/Issue.svelte
@@ -7,6 +7,7 @@
     Issue,
     IssueState,
     Project,
+    Node,
   } from "@httpd-client";
   import type { Session } from "@app/lib/httpd";
 
@@ -48,6 +49,7 @@
   import ThreadComponent from "@app/components/Thread.svelte";
 
   export let baseUrl: BaseUrl;
+  export let node: Node;
   export let issue: Issue;
   export let project: Project;
   export let rawPath: (commit?: string) => string;
@@ -482,7 +484,7 @@
   }
 </style>
 
-<Layout {baseUrl} {project} activeTab="issues" stylePaddingBottom="0">
+<Layout {node} {baseUrl} {project} activeTab="issues" stylePaddingBottom="0">
   <div class="issue">
     <div class="main">
       <CobHeader>
diff --git a/src/views/projects/Issue/New.svelte b/src/views/projects/Issue/New.svelte
index 9827ac3b6e..e596ec9600 100644
--- a/src/views/projects/Issue/New.svelte
+++ b/src/views/projects/Issue/New.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { BaseUrl, Embed, Project, Reaction } from "@httpd-client";
+  import type { BaseUrl, Embed, Node, Project, Reaction } from "@httpd-client";
 
   import * as modal from "@app/lib/modal";
   import * as router from "@app/lib/router";
@@ -17,6 +17,7 @@
   import TextInput from "@app/components/TextInput.svelte";
 
   export let baseUrl: BaseUrl;
+  export let node: Node;
   export let project: Project;
   export let rawPath: (commit?: string) => string;
 
@@ -99,7 +100,7 @@
   }
 </style>
 
-<Layout {baseUrl} {project} activeTab="issues">
+<Layout {node} {baseUrl} {project} activeTab="issues">
   {#if session}
     {@const session_ = session}
     <div class="form">
diff --git a/src/views/projects/Issues.svelte b/src/views/projects/Issues.svelte
index bbde97444d..c6d7f81aeb 100644
--- a/src/views/projects/Issues.svelte
+++ b/src/views/projects/Issues.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-  import type { BaseUrl, Issue, IssueState, Project } from "@httpd-client";
+  import type {
+    BaseUrl,
+    Issue,
+    IssueState,
+    Node,
+    Project,
+  } from "@httpd-client";
 
   import capitalize from "lodash/capitalize";
   import { HttpdClient } from "@httpd-client";
@@ -24,6 +30,7 @@
   import Share from "./Share.svelte";
 
   export let baseUrl: BaseUrl;
+  export let node: Node;
   export let issues: Issue[];
   export let project: Project;
   export let state: IssueState["status"];
@@ -105,7 +112,7 @@
   }
 </style>
 
-<Layout {baseUrl} {project} activeTab="issues">
+<Layout {node} {baseUrl} {project} activeTab="issues">
   <div slot="header" style:display="flex" style:padding="1rem">
     <Popover
       popoverPadding="0"
diff --git a/src/views/projects/Layout.svelte b/src/views/projects/Layout.svelte
index 2af4463a31..9cb7b5d3df 100644
--- a/src/views/projects/Layout.svelte
+++ b/src/views/projects/Layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ActiveTab } from "./Header.svelte";
-  import type { BaseUrl, Project } from "@httpd-client";
+  import type { BaseUrl, Node, Project } from "@httpd-client";
 
   import AppHeader from "@app/App/Header.svelte";
 
@@ -11,6 +11,7 @@
   import Sidebar from "@app/views/projects/Sidebar.svelte";
 
   export let activeTab: ActiveTab | undefined = undefined;
+  export let node: Node;
   export let baseUrl: BaseUrl;
   export let project: Project;
   export let stylePaddingBottom: string = "2.5rem";
@@ -65,11 +66,11 @@
   </div>
 
   <div class="sidebar global-hide-on-medium-desktop-down">
-    <Sidebar {activeTab} {baseUrl} {project} />
+    <Sidebar {node} {activeTab} {baseUrl} {project} />
   </div>
 
   <div class="sidebar global-hide-on-mobile-down global-hide-on-desktop-up">
-    <Sidebar {activeTab} {baseUrl} {project} collapsedOnly />
+    <Sidebar {node} {activeTab} {baseUrl} {project} collapsedOnly />
   </div>
 
   <div class="content" style:padding-bottom={stylePaddingBottom}>
diff --git a/src/views/projects/Patch.svelte b/src/views/projects/Patch.svelte
index 21c305edea..50d7d80a3c 100644
--- a/src/views/projects/Patch.svelte
+++ b/src/views/projects/Patch.svelte
@@ -8,6 +8,7 @@
     PatchState,
     Revision,
     Diff,
+    Node,
   } from "@httpd-client";
 
   interface Thread {
@@ -91,6 +92,7 @@
   import { closeFocused } from "@app/components/Popover.svelte";
 
   export let baseUrl: BaseUrl;
+  export let node: Node;
   export let patch: Patch;
   export let stats: Diff["stats"];
   export let rawPath: (commit?: string) => string;
@@ -706,7 +708,7 @@
   }
 </style>
 
-<Layout {baseUrl} {project} activeTab="patches" stylePaddingBottom="0">
+<Layout {node} {baseUrl} {project} activeTab="patches" stylePaddingBottom="0">
   <div class="patch">
     <div class="main">
       <CobHeader>
diff --git a/src/views/projects/Patches.svelte b/src/views/projects/Patches.svelte
index c253f12057..6992e44976 100644
--- a/src/views/projects/Patches.svelte
+++ b/src/views/projects/Patches.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-  import type { BaseUrl, Patch, PatchState, Project } from "@httpd-client";
+  import type {
+    BaseUrl,
+    Node,
+    Patch,
+    PatchState,
+    Project,
+  } from "@httpd-client";
 
   import { HttpdClient } from "@httpd-client";
   import capitalize from "lodash/capitalize";
@@ -25,6 +31,7 @@
   import Command from "@app/components/Command.svelte";
 
   export let baseUrl: BaseUrl;
+  export let node: Node;
   export let patches: Patch[];
   export let project: Project;
   export let state: PatchState["status"];
@@ -120,7 +127,7 @@
   }
 </style>
 
-<Layout {baseUrl} {project} activeTab="patches">
+<Layout {node} {baseUrl} {project} activeTab="patches">
   <div slot="header" style:display="flex" style:padding="1rem">
     <Popover
       popoverPadding="0"
diff --git a/src/views/projects/Sidebar.svelte b/src/views/projects/Sidebar.svelte
index 4275237ff0..22b6a04c5b 100644
--- a/src/views/projects/Sidebar.svelte
+++ b/src/views/projects/Sidebar.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
   import type { ActiveTab } from "./Header.svelte";
-  import type { BaseUrl, Project } from "@httpd-client";
+  import type { BaseUrl, Node, Project } from "@httpd-client";
+
+  import { onMount } from "svelte";
 
   import { experimental } from "@app/lib/appearance";
-  import { queryProject } from "@app/lib/projects";
   import { httpdStore, api } from "@app/lib/httpd";
   import { isLocal } from "@app/lib/utils";
-  import { onMount } from "svelte";
+  import { queryProject } from "@app/lib/projects";
 
   import Button from "@app/components/Button.svelte";
   import ContextHelp from "@app/views/projects/Sidebar/ContextHelp.svelte";
+  import ContextRepo from "@app/views/projects/Sidebar/ContextRepo.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Link from "@app/components/Link.svelte";
   import Loading from "@app/components/Loading.svelte";
@@ -21,6 +23,7 @@
   const SIDEBAR_STATE_KEY = "sidebarState";
 
   export let activeTab: ActiveTab | undefined = undefined;
+  export let node: Node;
   export let baseUrl: BaseUrl;
   export let project: Project;
   export let collapsedOnly = false;
@@ -129,11 +132,14 @@
     justify-content: space-between;
     width: 100%;
   }
+  .repo,
   .help {
-    z-index: 10;
+    z-index: -1;
     opacity: 0;
   }
+  .repo.expanded,
   .help.expanded {
+    z-index: 10;
     opacity: 1;
     transition: opacity 150ms;
     transition-delay: 150ms;
@@ -147,6 +153,9 @@
     font-size: var(--font-size-small);
     border-radius: var(--border-radius-small);
   }
+  .repo-box {
+    margin-bottom: 0.5rem;
+  }
   .vertical-buttons {
     opacity: 1;
     height: fit-content;
@@ -170,6 +179,13 @@
     opacity: 1;
     transition: opacity 150ms ease-in-out;
   }
+  .collapse-label {
+    display: none;
+  }
+  .collapse-label.expanded {
+    display: block;
+    transition: opacity 30ms ease-in-out;
+  }
   .icon {
     transform: rotate(180deg);
     transition: transform 150ms ease-in-out;
@@ -185,6 +201,7 @@
 </style>
 
 <div class="sidebar" class:expanded>
+  <!-- Top Navigation Items -->
   <div class="project-navigation">
     <Link
       title="Source"
@@ -258,9 +275,10 @@
       </Button>
     </Link>
   </div>
+  <!-- Context and other information section -->
   <div class="bottom">
     <div class="help" class:expanded>
-      {#if !hideContextHelp && expanded && $experimental}
+      {#if !hideContextHelp && $experimental}
         {#if !localProject}
           <div
             style="display: flex; justify-content: center; align-items: center; height: 2rem;">
@@ -279,6 +297,11 @@
         {/if}
       {/if}
     </div>
+    <div class="repo" class:expanded>
+      <div class="repo-box">
+        <ContextRepo {project} {baseUrl} {node} />
+      </div>
+    </div>
     <div class="vertical-buttons" class:expanded style:gap="0.5rem">
       <Popover popoverPositionBottom="0" popoverPositionLeft="3rem">
         <Button
@@ -308,6 +331,22 @@
         <Help slot="popover" />
       </Popover>
 
+      <Popover popoverPositionBottom="0" popoverPositionLeft="2rem">
+        <Button
+          stylePadding="0 0.75rem"
+          variant="background"
+          title="Info"
+          slot="toggle"
+          let:toggle
+          on:click={toggle}>
+          <IconSmall name="info" />
+        </Button>
+
+        <div slot="popover">
+          <ContextRepo disablePopovers {node} {baseUrl} {project} />
+        </div>
+      </Popover>
+
       {#if !hideContextHelp && $experimental}
         {#if !localProject}
           <div
@@ -339,6 +378,7 @@
         {/if}
       {/if}
     </div>
+    <!-- Footer -->
     {#if !collapsedOnly}
       <div class="sidebar-footer" style:flex-direction="row">
         <Button
@@ -348,8 +388,8 @@
           <div class="icon" class:expanded>
             <IconSmall name="chevron-left" />
           </div>
+          <span class="collapse-label" class:expanded>Collapse</span>
         </Button>
-        <div style:width="1.5rem" />
         <div class="horizontal-buttons" class:expanded>
           <Popover popoverPositionBottom="2.5rem" popoverPositionLeft="0">
             <Button
@@ -364,6 +404,8 @@
 
             <Settings slot="popover" />
           </Popover>
+        </div>
+        <div class="horizontal-buttons" class:expanded>
           <Popover popoverPositionBottom="2.5rem" popoverPositionLeft="0">
             <Button
               variant="background"
diff --git a/src/views/projects/Sidebar/ContextRepo.svelte b/src/views/projects/Sidebar/ContextRepo.svelte
new file mode 100644
index 0000000000..97fd71abe4
--- /dev/null
+++ b/src/views/projects/Sidebar/ContextRepo.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+  import type { BaseUrl, Node, Project } from "@httpd-client";
+
+  import IconButton from "@app/components/IconButton.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
+  import NodeId from "@app/components/NodeId.svelte";
+  import Popover from "@app/components/Popover.svelte";
+  import ScopePolicyExplainer from "@app/components/ScopePolicyExplainer.svelte";
+  import { isLocal } from "@app/lib/utils";
+  import { capitalize } from "lodash";
+
+  export let disablePopovers: boolean = false;
+  export let project: Project;
+  export let baseUrl: BaseUrl;
+  export let node: Node;
+
+  let expandedNode = false;
+
+  $: shortSeedingPolicy =
+    node.config?.scope === "all" && node.config?.policy === "allow"
+      ? "permissive"
+      : "restrictive";
+</script>
+
+<style>
+  .nids {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0.5rem 0;
+  }
+
+  .node {
+    display: flex;
+    margin-top: 0.5rem;
+    flex-direction: column;
+    gap: 1rem;
+    padding-top: 0.5rem;
+  }
+  .policies {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .item {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+  .no-wrap {
+    text-wrap: nowrap;
+  }
+</style>
+
+<div class="delegates txt-small">
+  <div class="item" style:height="2rem">
+    <div class="item">
+      <IconSmall name="badge" />
+      <span class="txt-bold">Delegates</span>
+      <span class="txt-missing">{project.delegates.length}</span>
+    </div>
+    <div class="item">
+      <IconSmall name="quorum" />
+      <span class="txt-bold">
+        {project.threshold}/{project.delegates.length}
+      </span>
+      {#if !disablePopovers}
+        <Popover
+          popoverPositionBottom="0"
+          popoverPositionLeft="2rem"
+          popoverPositionRight="-17rem">
+          <IconButton slot="toggle" let:toggle on:click={toggle}>
+            <IconSmall name="help" />
+          </IconButton>
+
+          <div slot="popover">
+            {project.threshold} out of {project.delegates.length} delegates have
+            to accept changes to be included in the canonical branch.
+          </div>
+        </Popover>
+      {/if}
+    </div>
+  </div>
+  <div class="nids">
+    {#each project.delegates as { id: nodeId, alias }}
+      <div style:width="fit-content">
+        <NodeId {alias} {nodeId} stylePopoverPositionLeft="-0.8rem" />
+      </div>
+    {/each}
+  </div>
+</div>
+<div class="txt-small node">
+  <div class="item no-wrap txt-bold" style="justify-content: flex-start; ">
+    {#if isLocal(baseUrl.hostname)}
+      <IconSmall name="device" />Local Node
+    {:else}
+      <IconSmall name="seedling" />{baseUrl.hostname}
+    {/if}
+  </div>
+
+  <div class="policies">
+    <div class="item">
+      <div class="item" style="justify-content: flex-start;">
+        <IconButton on:click={() => (expandedNode = !expandedNode)}>
+          <IconSmall name={`chevron-${expandedNode ? "down" : "right"}`} />
+        </IconButton>
+        <span class="no-wrap">Seeding Policy</span>
+      </div>
+      <div class="txt-bold">
+        {capitalize(shortSeedingPolicy)}
+      </div>
+    </div>
+    {#if expandedNode && node.config}
+      <div style:padding-left="2.3rem">
+        <ScopePolicyExplainer
+          scope={node.config.scope}
+          policy={node.config.policy} />
+      </div>
+    {/if}
+    <div class="item txt-overflow" style:padding-top="0.5rem">
+      Radicle version
+      <span class="txt-missing txt-overflow txt-monospace" title={node.version}>
+        {node.version}
+      </span>
+    </div>
+  </div>
+</div>
diff --git a/src/views/projects/Source.svelte b/src/views/projects/Source.svelte
index 548f306eb5..75102443fc 100644
--- a/src/views/projects/Source.svelte
+++ b/src/views/projects/Source.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { BaseUrl, Project, Remote, Tree } from "@httpd-client";
+  import type { BaseUrl, Node, Project, Remote, Tree } from "@httpd-client";
   import type { BlobResult } from "./router";
   import type { Route } from "@app/lib/router";
 
@@ -15,6 +15,7 @@
   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;
@@ -130,7 +131,7 @@
   }
 </style>
 
-<Layout {baseUrl} {project} activeTab="source" stylePaddingBottom="0">
+<Layout {node} {baseUrl} {project} activeTab="source" stylePaddingBottom="0">
   <ProjectNameHeader {project} {baseUrl} {seeding} slot="header" />
 
   <div style:margin="1rem 0 1rem 1rem" slot="subheader">
diff --git a/src/views/projects/router.ts b/src/views/projects/router.ts
index 08006b99f5..b0b96d91b2 100644
--- a/src/views/projects/router.ts
+++ b/src/views/projects/router.ts
@@ -13,6 +13,7 @@ import type {
   DiffBlob,
   Issue,
   IssueState,
+  Node,
   Patch,
   PatchState,
   Project,
@@ -113,6 +114,7 @@ export type ProjectLoadedRoute =
       resource: "project.source";
       params: {
         baseUrl: BaseUrl;
+        node: Node;
         commit: string;
         project: Project;
         peers: Remote[];
@@ -130,6 +132,7 @@ export type ProjectLoadedRoute =
       resource: "project.history";
       params: {
         baseUrl: BaseUrl;
+        node: Node;
         commit: string;
         project: Project;
         peers: Remote[];
@@ -145,6 +148,7 @@ export type ProjectLoadedRoute =
       resource: "project.commit";
       params: {
         baseUrl: BaseUrl;
+        node: Node;
         project: Project;
         commit: Commit;
       };
@@ -153,6 +157,7 @@ export type ProjectLoadedRoute =
       resource: "project.issue";
       params: {
         baseUrl: BaseUrl;
+        node: Node;
         project: Project;
         rawPath: (commit?: string) => string;
         issue: Issue;
@@ -162,6 +167,7 @@ export type ProjectLoadedRoute =
       resource: "project.issues";
       params: {
         baseUrl: BaseUrl;
+        node: Node;
         project: Project;
         issues: Issue[];
         state: IssueState["status"];
@@ -171,6 +177,7 @@ export type ProjectLoadedRoute =
       resource: "project.newIssue";
       params: {
         baseUrl: BaseUrl;
+        node: Node;
         project: Project;
         rawPath: (commit?: string) => string;
       };
@@ -179,6 +186,7 @@ export type ProjectLoadedRoute =
       resource: "project.patches";
       params: {
         baseUrl: BaseUrl;
+        node: Node;
         project: Project;
         patches: Patch[];
         state: PatchState["status"];
@@ -188,6 +196,7 @@ export type ProjectLoadedRoute =
       resource: "project.patch";
       params: {
         baseUrl: BaseUrl;
+        node: Node;
         project: Project;
         rawPath: (commit?: string) => string;
         patch: Patch;
@@ -270,6 +279,16 @@ export async function loadProjectRoute(
   previousLoaded: LoadedRoute,
 ): Promise<ProjectLoadedRoute | ErrorRoute | NotFoundRoute> {
   const api = new HttpdClient(route.node);
+  let node: Node | undefined = undefined;
+  if (
+    "params" in previousLoaded &&
+    "node" in previousLoaded.params &&
+    route.node.hostname === previousLoaded.params.baseUrl.hostname
+  ) {
+    node = previousLoaded.params.node;
+  } else {
+    node = await api.getNode();
+  }
   const rawPath = (commit?: string) =>
     `${route.node.scheme}://${route.node.hostname}:${route.node.port}/raw/${
       route.project
@@ -277,9 +296,9 @@ export async function loadProjectRoute(
 
   try {
     if (route.resource === "project.source") {
-      return await loadTreeView(route, previousLoaded);
+      return await loadTreeView(route, previousLoaded, node);
     } else if (route.resource === "project.history") {
-      return await loadHistoryView(route);
+      return await loadHistoryView(route, node);
     } else if (route.resource === "project.commit") {
       const [project, commit] = await Promise.all([
         api.project.getById(route.project),
@@ -290,28 +309,30 @@ export async function loadProjectRoute(
         resource: "project.commit",
         params: {
           baseUrl: route.node,
+          node,
           project,
           commit,
         },
       };
     } else if (route.resource === "project.issue") {
-      return await loadIssueView(route);
+      return await loadIssueView(route, node);
     } else if (route.resource === "project.patch") {
-      return await loadPatchView(route);
+      return await loadPatchView(route, node);
     } else if (route.resource === "project.issues") {
-      return await loadIssuesView(route);
+      return await loadIssuesView(route, node);
     } else if (route.resource === "project.newIssue") {
       const project = await api.project.getById(route.project);
       return {
         resource: "project.newIssue",
         params: {
           baseUrl: route.node,
+          node,
           project,
           rawPath,
         },
       };
     } else if (route.resource === "project.patches") {
-      return await loadPatchesView(route);
+      return await loadPatchesView(route, node);
     } else {
       return unreachable(route);
     }
@@ -330,6 +351,7 @@ export async function loadProjectRoute(
 
 async function loadPatchesView(
   route: ProjectPatchesRoute,
+  node: Node,
 ): Promise<ProjectLoadedRoute> {
   const api = new HttpdClient(route.node);
   const searchParams = new URLSearchParams(route.search || "");
@@ -348,6 +370,7 @@ async function loadPatchesView(
     resource: "project.patches",
     params: {
       baseUrl: route.node,
+      node,
       patches,
       state,
       project,
@@ -357,6 +380,7 @@ async function loadPatchesView(
 
 async function loadIssuesView(
   route: ProjectIssuesRoute,
+  node: Node,
 ): Promise<ProjectLoadedRoute> {
   const api = new HttpdClient(route.node);
   const state = route.state || "open";
@@ -375,6 +399,7 @@ async function loadIssuesView(
     resource: "project.issues",
     params: {
       baseUrl: route.node,
+      node,
       issues,
       state,
       project,
@@ -385,6 +410,7 @@ async function loadIssuesView(
 async function loadTreeView(
   route: ProjectTreeRoute,
   previousLoaded: LoadedRoute,
+  node: Node,
 ): Promise<ProjectLoadedRoute | NotFoundRoute> {
   const api = new HttpdClient(route.node);
   const rawPath = (commit?: string) =>
@@ -450,6 +476,7 @@ async function loadTreeView(
     resource: "project.source",
     params: {
       baseUrl: route.node,
+      node,
       commit,
       project,
       peers: peers.filter(remote => Object.keys(remote.heads).length > 0),
@@ -516,6 +543,7 @@ async function loadBlob(
 }
 async function loadHistoryView(
   route: ProjectHistoryRoute,
+  node: Node,
 ): Promise<ProjectLoadedRoute> {
   const api = new HttpdClient(route.node);
 
@@ -554,6 +582,7 @@ async function loadHistoryView(
     resource: "project.history",
     params: {
       baseUrl: route.node,
+      node,
       commit: commitId,
       project,
       peers: peers.filter(remote => Object.keys(remote.heads).length > 0),
@@ -569,6 +598,7 @@ async function loadHistoryView(
 
 async function loadIssueView(
   route: ProjectIssueRoute,
+  node: Node,
 ): Promise<ProjectLoadedRoute> {
   const api = new HttpdClient(route.node);
   const rawPath = (commit?: string) =>
@@ -584,6 +614,7 @@ async function loadIssueView(
     resource: "project.issue",
     params: {
       baseUrl: route.node,
+      node,
       project,
       rawPath,
       issue,
@@ -593,6 +624,7 @@ async function loadIssueView(
 
 async function loadPatchView(
   route: ProjectPatchRoute,
+  node: Node,
 ): Promise<ProjectLoadedRoute> {
   const api = new HttpdClient(route.node);
   const rawPath = (commit?: string) =>
@@ -658,6 +690,7 @@ async function loadPatchView(
     resource: "project.patch",
     params: {
       baseUrl: route.node,
+      node,
       project,
       rawPath,
       patch,