Redesign node view

http-client/index.ts

@@ -39,6 +39,7 @@ import type {
   Revision,
   Verdict,
 } from "./lib/project/patch.js";
+import type { Profile } from "./lib/profile.js";
 import type { RequestOptions } from "./lib/fetcher.js";
 import type { ZodSchema } from "zod";
 
@@ -81,6 +82,7 @@ export type {
   PatchState,
   PatchUpdateAction,
   Project,
+  Profile,
   ProjectListQuery,
   Range,
   Reaction,

http-client/lib/profile.ts

@@ -9,6 +9,12 @@ const profileSchema = object({
     publicExplorer: string(),
     preferredSeeds: array(string()),
     cli: object({ hints: boolean() }),
+    web: object({
+      pinned: object({ repositories: array(string()) }),
+      imageUrl: string().optional(),
+      name: string().optional(),
+      description: string().optional(),
+    }),
     node: nodeConfigSchema,
   }),
   home: string(),

src/App/AppLayout.svelte

@@ -2,6 +2,9 @@
   import Footer from "@app/App/Footer.svelte";
   import Header from "@app/App/Header.svelte";
   import MobileFooter from "@app/App/MobileFooter.svelte";
+
+  export let styleHeaderBorderBottom: string =
+    "1px solid var(--color-fill-separator)";
 </script>
 
 <style>
@@ -10,9 +13,6 @@
     flex-direction: column;
     height: 100%;
   }
-  .header {
-    border-bottom: 1px solid var(--color-fill-separator);
-  }
   .content {
     height: 100%;
     overflow-y: scroll;
@@ -30,7 +30,9 @@
 </style>
 
 <div class="app">
-  <div class="global-hide-on-mobile-down header">
+  <div
+    class="global-hide-on-mobile-down header"
+    style:border-bottom={styleHeaderBorderBottom}>
     <Header />
   </div>
   <div class="content">

src/App/Header/Breadcrumbs.svelte

@@ -22,12 +22,8 @@
   }
 </style>
 
-{#if $activeRouteStore.resource === "booting" || $activeRouteStore.resource === "home" || $activeRouteStore.resource === "session" || $activeRouteStore.resource === "error" || $activeRouteStore.resource === "notFound"}
+{#if $activeRouteStore.resource === "booting" || $activeRouteStore.resource === "home" || $activeRouteStore.resource === "session" || $activeRouteStore.resource === "error" || $activeRouteStore.resource === "notFound" || $activeRouteStore.resource === "nodes"}
   <!-- Don't render breadcrumbs for these routes. -->
-{:else if $activeRouteStore.resource === "nodes"}
-  <div class="breadcrumbs">
-    <NodeSegment baseUrl={$activeRouteStore.params.baseUrl} showLocalNode />
-  </div>
 {:else if $activeRouteStore.resource === "project.source" || $activeRouteStore.resource === "project.history" || $activeRouteStore.resource === "project.commit" || $activeRouteStore.resource === "project.issues" || $activeRouteStore.resource === "project.newIssue" || $activeRouteStore.resource === "project.issue" || $activeRouteStore.resource === "project.patches" || $activeRouteStore.resource === "project.patch"}
   <div class="breadcrumbs">
     <NodeSegment baseUrl={$activeRouteStore.params.baseUrl} />

src/views/nodes/NodeInfo.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { DefaultSeedingPolicy } from "@http-client";
+
+  import IconButton from "@app/components/IconButton.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
+  import Id from "@app/components/Id.svelte";
+  import ScopePolicyExplainer from "@app/components/ScopePolicyExplainer.svelte";
+  import { capitalize } from "lodash";
+  import { formatUserAgent } from "@app/lib/utils";
+
+  export let agent: string;
+  export let seedingPolicy: DefaultSeedingPolicy | undefined = undefined;
+
+  let expandedNode = false;
+
+  $: shortScope =
+    seedingPolicy?.default === "allow" && seedingPolicy?.scope === "all"
+      ? "permissive"
+      : "restrictive";
+</script>
+
+<style>
+  .agent {
+    color: var(--color-fill-gray);
+    font-family: var(--font-family-monospace);
+    font-size: var(--font-size-small);
+  }
+  .policies {
+    font-size: var(--font-size-small);
+    display: flex;
+    flex-direction: column;
+  }
+  .item {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+</style>
+
+<div class="policies">
+  <div class="item">
+    <div class="item" style="justify-content: flex-start;">
+      <span class="no-wrap">Seeding Policy</span>
+    </div>
+    <div
+      style="display: flex; flex-direction: row; gap: 0.5rem; align-items: center;">
+      <div class="txt-bold">
+        {capitalize(shortScope)}
+      </div>
+      <IconButton on:click={() => (expandedNode = !expandedNode)}>
+        <IconSmall name={`chevron-${expandedNode ? "down" : "right"}`} />
+      </IconButton>
+    </div>
+  </div>
+  {#if expandedNode && seedingPolicy}
+    <div style:padding="0 0 1rem 1rem">
+      <ScopePolicyExplainer {seedingPolicy} />
+    </div>
+  {/if}
+</div>
+<div
+  class="item"
+  style="justify-content: space-between; display: flex; text-wrap: nowrap; font-size: var(--font-size-small); ">
+  <span>Radicle version</span>
+  <Id
+    ariaLabel="agent"
+    id={formatUserAgent(agent)}
+    shorten={false}
+    style="none">
+    <div class="agent" style="width: 10rem;">
+      <div class="txt-overflow">{formatUserAgent(agent)}</div>
+    </div>
+  </Id>
+</div>