Add delegates and node scope policies to Sidebar

radicle-dev · May 30, 2024 · 275a73d · 275a73d
1 parent 3d13bc0
commit 275a73d
Show file tree

Hide file tree

Showing 15 changed files with 356 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"