Show seed policy and scope in "online" button

src/App/Header.svelte

@@ -76,7 +76,7 @@
         </div>
       </Popover>
     {:else}
-      <NodeInfo running={$httpdStore.node.state === "running"} />
+      <NodeInfo node={$httpdStore.node} />
       <Authenticate />
     {/if}
   </div>

src/App/Header/NodeInfo.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
+  import type { Node } from "@httpd-client";
+
+  import { capitalize } from "lodash";
+
   import Button from "@app/components/Button.svelte";
   import Command from "@app/components/Command.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Popover from "@app/components/Popover.svelte";
+  import ScopePolicyExplainer from "@app/components/ScopePolicyExplainer.svelte";
 
-  export let running: boolean = false;
+  export let node: Node;
 </script>
 
 <style>
@@ -14,11 +19,19 @@
     font-weight: var(--font-weight-regular);
     margin-bottom: 0.75rem;
   }
+  .scope-policy {
+    padding: 1rem 0;
+    border-top: 1px solid var(--color-fill-separator);
+    border-bottom: 1px solid var(--color-fill-separator);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    margin-bottom: 1rem;
+  }
 </style>
 
 <Popover popoverPositionTop="3rem" popoverPositionRight="0">
   <Button slot="toggle" let:toggle on:click={toggle} variant={"naked-toggle"}>
-    {#if running}
+    {#if node.state === "running"}
       <IconSmall name="online" />
       Online
     {:else}
@@ -28,10 +41,30 @@
   </Button>
 
   <div slot="popover" style:width="18rem">
-    {#if running}
+    {#if node.state === "running"}
       <div class="label">
         Your node is running and syncing with the network.
       </div>
+
+      {#if node.config?.scope && node.config?.policy}
+        <div class="scope-policy">
+          <div style:display="flex">
+            Seeding Policy: <span style:margin-left="auto" class="txt-semibold">
+              {capitalize(node.config.policy)}
+            </span>
+          </div>
+          <div style:display="flex" style:margin-bottom="1rem">
+            Scope:
+            <span style:margin-left="auto" class="txt-semibold">
+              {capitalize(node.config.scope)}
+            </span>
+          </div>
+
+          <ScopePolicyExplainer
+            scope={node.config.scope}
+            policy={node.config.policy} />
+        </div>
+      {/if}
       <div class="label">
         Shut down your node if you want to stop sharing and receiving updates.
       </div>

src/components/ScopePolicyExplainer.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Scope, Policy } from "@httpd-client";
+
+  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 repos, made by any peer, will be synced.
+{:else if scope === "followed"}
+  and only changes made by explicitly followed peers will be synced.
+{/if}

src/lib/httpd.ts

@@ -1,3 +1,5 @@
+import type { Node } from "@httpd-client";
+
 import { get, writable } from "svelte/store";
 import { withTimeout, Mutex, E_CANCELED, E_TIMEOUT } from "async-mutex";
 
@@ -11,15 +13,13 @@ export interface Session {
   alias: string;
 }
 
-type NodeState = { state: "running" | "stopped"; id: string };
-
 export type HttpdState =
   | { state: "stopped" }
-  | { state: "running"; node: NodeState }
+  | { state: "running"; node: Node }
   | {
       state: "authenticated";
       session: Session;
-      node: NodeState;
+      node: Node;
     };
 
 const HTTPD_STATE_STORAGE_KEY = "httpdState";
@@ -60,7 +60,7 @@ export async function authenticate(params: {
         sig: params.signature,
         pk: params.publicKey,
       });
-      const { id, state } = await api.getNode();
+      const node = await api.getNode();
       const sess = await api.session.getById(params.id);
       update({
         state: "authenticated",
@@ -69,7 +69,7 @@ export async function authenticate(params: {
           publicKey: params.publicKey,
           alias: sess.alias,
         },
-        node: { state, id },
+        node,
       });
       return true;
     } catch (error) {
@@ -91,10 +91,10 @@ export async function disconnect() {
 
       try {
         await api.session.delete(httpd.session.id);
-        const { id, state } = await api.getNode();
+        const node = await api.getNode();
         update({
           state: "running",
-          node: { state, id },
+          node,
         });
       } catch (error) {
         console.error(error);
@@ -126,10 +126,10 @@ async function checkState() {
   await stateMutex
     .runExclusive(async () => {
       try {
-        const { id, state } = await api.getNode();
+        const node = await api.getNode();
 
         if (httpdState && httpdState.state !== "stopped") {
-          httpdState.node = { state, id };
+          httpdState.node = node;
         }
 
         if (httpdState && httpdState.state === "authenticated") {
@@ -141,7 +141,7 @@ async function checkState() {
           ) {
             update({
               state: "running",
-              node: { state, id },
+              node,
             });
           } else {
             update(httpdState);
@@ -149,7 +149,7 @@ async function checkState() {
         } else {
           update({
             state: "running",
-            node: { state, id },
+            node,
           });
         }
       } catch (error) {

src/views/nodes/View.svelte

@@ -12,6 +12,7 @@
   import CopyableId from "@app/components/CopyableId.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import ProjectCard from "@app/components/ProjectCard.svelte";
+  import ScopePolicyExplainer from "@app/components/ScopePolicyExplainer.svelte";
   import HoverPopover from "@app/components/HoverPopover.svelte";
 
   export let baseUrl: BaseUrl;
@@ -178,18 +179,7 @@
                 </div>
 
                 <div slot="popover" class="popover">
-                  {#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 repos, made by any peer, will be
-                    synced.
-                  {:else if scope === "followed"}
-                    and only changes made by explicitly followed peers will be
-                    synced.
-                  {/if}
+                  <ScopePolicyExplainer {scope} {policy} />
                 </div>
               </HoverPopover>
             </span>