Show seed policy and scope in "online" button — radicle-explorer

👉 Preview
👉 Workflow runs
👉 Branch on GitHub

         </div>
       </Popover>
     {:else}
       <NodeInfo running={$httpdStore.node.state === "running"} />
       <NodeInfo node={$httpdStore.node} />
       <Authenticate />
     {/if}
   </div>

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

     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}

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

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

 import type { Node } from "@httpd-client";
 import { get, writable } from "svelte/store";
 import { withTimeout, Mutex, E_CANCELED, E_TIMEOUT } from "async-mutex";

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

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

           publicKey: params.publicKey,
           alias: sess.alias,
         },
         node: { state, id },
         node,
       });
       return true;
     } catch (error) {

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

           ) {
             update({
               state: "running",
               node: { state, id },
               node,
             });
           } else {
             update(httpdState);

   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;