Add ShareButton to project source

httpd-client/index.ts

@@ -34,12 +34,13 @@ import type {
 import type { RequestOptions } from "./lib/fetcher.js";
 import type { ZodSchema } from "zod";
 
-import { z, array, boolean, literal, number, object, string, union } from "zod";
+import { z, array, literal, number, object, string, union } from "zod";
 
 import * as project from "./lib/project.js";
+import * as profile from "./lib/profile.js";
 import * as session from "./lib/session.js";
 import { Fetcher } from "./lib/fetcher.js";
-import { successResponseSchema } from "./lib/shared.js";
+import { nodeConfigSchema, successResponseSchema } from "./lib/shared.js";
 
 export type {
   BaseUrl,
@@ -76,34 +77,8 @@ export type Node = z.infer<typeof nodeSchema>;
 
 const nodeSchema = object({
   id: string(),
-  config: object({
-    alias: string(),
-    peers: union([
-      object({ type: literal("static") }),
-      object({ type: literal("dynamic"), target: number() }),
-    ]),
-    connect: array(string()),
-    externalAddresses: array(string()),
-    network: union([literal("main"), literal("test")]),
-    relay: boolean(),
-    limits: object({
-      routingMaxSize: number(),
-      routingMaxAge: number(),
-      fetchConcurrency: number(),
-      rate: object({
-        inbound: object({
-          fillRate: number(),
-          capacity: number(),
-        }),
-        outbound: object({
-          fillRate: number(),
-          capacity: number(),
-        }),
-      }),
-    }),
-    policy: union([literal("allow"), literal("block")]),
-    scope: union([literal("followed"), literal("all")]),
-  }).nullable(),
+  version: string(),
+  config: nodeConfigSchema,
   state: union([literal("running"), literal("stopped")]),
 });
 
@@ -113,7 +88,7 @@ const nodeInfoSchema = object({
   message: string(),
   service: string(),
   version: string(),
-  node: nodeSchema.pick({ id: true }),
+  nid: string(),
   path: string(),
   links: array(
     object({
@@ -154,13 +129,15 @@ export class HttpdClient {
 
   public baseUrl: BaseUrl;
   public project: project.Client;
+  public profile: profile.Client;
   public session: session.Client;
 
   public constructor(baseUrl: BaseUrl) {
     this.baseUrl = baseUrl;
     this.#fetcher = new Fetcher(this.baseUrl);
 
     this.project = new project.Client(this.#fetcher);
+    this.profile = new profile.Client(this.#fetcher);
     this.session = new session.Client(this.#fetcher);
   }
 

httpd-client/lib/profile.ts

@@ -0,0 +1,36 @@
+import type { Fetcher, RequestOptions } from "./fetcher.js";
+import type { z } from "zod";
+
+import { array, boolean, object, string } from "zod";
+import { nodeConfigSchema } from "./shared.js";
+
+const profileSchema = object({
+  config: object({
+    publicExplorer: string(),
+    preferredSeeds: array(string()),
+    cli: object({ hints: boolean() }),
+    node: nodeConfigSchema,
+  }),
+  home: string(),
+});
+
+export type Profile = z.infer<typeof profileSchema>;
+
+export class Client {
+  #fetcher: Fetcher;
+
+  public constructor(fetcher: Fetcher) {
+    this.#fetcher = fetcher;
+  }
+
+  public async getProfile(options?: RequestOptions): Promise<Profile> {
+    return this.#fetcher.fetchOk(
+      {
+        method: "GET",
+        path: `profile`,
+        options,
+      },
+      profileSchema,
+    );
+  }
+}

httpd-client/lib/shared.ts

@@ -1,6 +1,6 @@
 import type { ZodSchema } from "zod";
 
-import { literal, object } from "zod";
+import { array, boolean, literal, number, object, string, union } from "zod";
 
 export interface SuccessResponse {
   success: true;
@@ -9,3 +9,33 @@ export interface SuccessResponse {
 export const successResponseSchema = object({
   success: literal(true),
 }) satisfies ZodSchema<SuccessResponse>;
+
+export const nodeConfigSchema = object({
+  alias: string(),
+  peers: union([
+    object({ type: literal("static") }),
+    object({ type: literal("dynamic"), target: number() }),
+  ]),
+  listen: array(string()),
+  connect: array(string()),
+  externalAddresses: array(string()),
+  network: union([literal("main"), literal("test")]),
+  relay: boolean(),
+  limits: object({
+    routingMaxSize: number(),
+    routingMaxAge: number(),
+    fetchConcurrency: number(),
+    rate: object({
+      inbound: object({
+        fillRate: number(),
+        capacity: number(),
+      }),
+      outbound: object({
+        fillRate: number(),
+        capacity: number(),
+      }),
+    }),
+  }),
+  policy: union([literal("allow"), literal("block")]),
+  scope: union([literal("followed"), literal("all")]),
+});

src/components/Icon.svelte

@@ -20,6 +20,7 @@
     | "desert"
     | "device"
     | "diff"
+    | "globe"
     | "download"
     | "ellipsis"
     | "empty-file"
@@ -718,6 +719,11 @@
       16.5ZM18 16.5C17.1716 16.5 16.5 17.1716 16.5 18C16.5 18.8284 17.1716 19.5
       18 19.5C18.8284 19.5 19.5 18.8284 19.5 18C19.5 17.1716 18.8284 16.5 18
       16.5Z" />
+  {:else if name === "globe"}
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.4424 6.38689C4.03734 6.07787 4.81337 5.8403 5.68923 5.68926C5.73546 5.42115 5.78981 5.16239 5.85182 4.91533C5.99241 4.35527 6.17243 3.85525 6.38686 3.44243C5.01515 3.92794 3.92791 5.01518 3.4424 6.38689ZM7.99999 2.16669C4.77833 2.16669 2.16666 4.77836 2.16666 8.00002C2.16666 11.2217 4.77833 13.8334 7.99999 13.8334C11.2217 13.8334 13.8333 11.2217 13.8333 8.00002C13.8333 4.77836 11.2217 2.16669 7.99999 2.16669ZM7.99999 3.16669C7.86865 3.16669 7.59893 3.29241 7.29002 3.87344C7.10927 4.21341 6.94711 4.65475 6.8174 5.17614C6.78706 5.2981 6.75849 5.42444 6.73188 5.55489C7.13996 5.51895 7.56447 5.50002 7.99999 5.50002C8.43551 5.50002 8.86002 5.51895 9.2681 5.55489C9.24022 5.41825 9.2102 5.28611 9.17825 5.15879C9.04926 4.64495 8.8887 4.20963 8.70996 3.87344C8.40105 3.29241 8.13133 3.16669 7.99999 3.16669ZM10.1537 4.93762C10.0123 4.36853 9.83039 3.86072 9.61312 3.44243C10.9848 3.92794 12.0721 5.01518 12.5576 6.38689C11.9626 6.07787 11.1866 5.8403 10.3108 5.68926C10.2659 5.4292 10.2134 5.17795 10.1537 4.93762ZM9.42501 6.575C8.97388 6.52628 8.49569 6.50002 7.99999 6.50002C7.50429 6.50002 7.0261 6.52628 6.57497 6.575C6.52625 7.02613 6.49999 7.50432 6.49999 8.00002C6.49999 8.49572 6.52625 8.97391 6.57497 9.42504C7.02609 9.47376 7.50429 9.50002 7.99999 9.50002C8.49569 9.50002 8.97388 9.47376 9.42501 9.42504C9.47373 8.97391 9.49999 8.49572 9.49999 8.00002C9.49999 7.50432 9.47372 7.02612 9.42501 6.575ZM9.2681 10.4452C8.86002 10.4811 8.43551 10.5 7.99999 10.5C7.56447 10.5 7.13996 10.4811 6.73188 10.4452C6.87227 11.1333 7.06699 11.7071 7.29002 12.1266C7.59893 12.7076 7.86865 12.8334 7.99999 12.8334C8.13133 12.8334 8.40105 12.7076 8.70996 12.1266C8.93299 11.7071 9.12771 11.1333 9.2681 10.4452ZM9.61312 12.5576C9.92214 11.9627 10.1597 11.1866 10.3108 10.3108C11.1866 10.1597 11.9626 9.92217 12.5576 9.61315C12.0721 10.9849 10.9848 12.0721 9.61312 12.5576ZM12.8333 8.00002C12.8333 7.86868 12.7076 7.59896 12.1266 7.29005C11.7071 7.06702 11.1332 6.8723 10.4451 6.73191C10.4811 7.13999 10.5 7.5645 10.5 8.00002C10.5 8.43554 10.4811 8.86005 10.4451 9.26813C11.1333 9.12774 11.7071 8.93302 12.1266 8.70999C12.7076 8.40108 12.8333 8.13136 12.8333 8.00002ZM6.38686 12.5576C5.01515 12.0721 3.92791 10.9849 3.4424 9.61315C4.03734 9.92218 4.81337 10.1597 5.68923 10.3108C5.84027 11.1866 6.07784 11.9627 6.38686 12.5576ZM5.55486 9.26813C4.86673 9.12774 4.2929 8.93302 3.87341 8.70999C3.29238 8.40108 3.16666 8.13136 3.16666 8.00002C3.16666 7.86868 3.29238 7.59896 3.87341 7.29005C4.2929 7.06702 4.86673 6.8723 5.55486 6.73191C5.51892 7.13999 5.49999 7.5645 5.49999 8.00002C5.49999 8.43554 5.51892 8.86005 5.55486 9.26813Z" />
   {:else if name === "review"}
     <path
       fill-rule="evenodd"

src/views/projects/Header/ShareButton.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" strictEvents>
+  import debounce from "lodash/debounce";
+  import { createEventDispatcher } from "svelte";
+
+  import { toClipboard } from "@app/lib/utils";
+
+  import IconSmall from "@app/components/IconSmall.svelte";
+  import Button from "@app/components/Button.svelte";
+
+  export let text: string;
+  export let tooltip: string | undefined = undefined;
+
+  const dispatch = createEventDispatcher<{ copied: null }>();
+
+  let icon: "globe" | "checkmark" = "globe";
+
+  const restoreIcon = debounce(() => {
+    icon = "globe";
+  }, 800);
+
+  export async function copy() {
+    await toClipboard(text);
+    dispatch("copied");
+    icon = "checkmark";
+    restoreIcon();
+  }
+</script>
+
+<Button variant="outline" size="large" on:click={copy} title={tooltip}>
+  <IconSmall name={icon} />
+  Share
+</Button>

src/views/projects/Source.svelte

@@ -25,6 +25,7 @@
   export let revision: string | undefined;
   export let tree: Tree;
   export let seeding: boolean;
+  export let publicExplorer: string;
 
   let mobileFileTree = false;
 
@@ -109,7 +110,12 @@
 </style>
 
 <Layout {baseUrl} {project} activeTab="source">
-  <ProjectNameHeader {project} {baseUrl} {seeding} slot="header" />
+  <ProjectNameHeader
+    {project}
+    {baseUrl}
+    {seeding}
+    {publicExplorer}
+    slot="header" />
 
   <div style:margin="1rem 0 1rem 1rem" slot="subheader">
     <Header

src/views/projects/Source/ProjectNameHeader.svelte

@@ -12,10 +12,12 @@
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import Link from "@app/components/Link.svelte";
   import SeedButton from "../Header/SeedButton.svelte";
+  import ShareButton from "../Header/ShareButton.svelte";
 
   export let project: Project;
   export let baseUrl: BaseUrl;
   export let seeding: boolean;
+  export let publicExplorer: string;
 
   let editSeedingInProgress = false;
 
@@ -106,6 +108,7 @@
   <div
     class="global-hide-on-mobile"
     style="margin-left: auto; display: flex; gap: 0.5rem;">
+    <ShareButton text={publicExplorer} />
     <SeedButton
       {seeding}
       disabled={editSeedingInProgress}

src/views/projects/router.ts

@@ -117,6 +117,7 @@ export type ProjectLoadedRoute =
         rawPath: (commit?: string) => string;
         blobResult: BlobResult;
         seeding: boolean;
+        publicExplorer: string;
       };
     }
   | {
@@ -411,7 +412,8 @@ async function loadTreeView(
       route.project
     }${commit ? `/${commit}` : ""}`;
 
-  const [project, peers, branchMap, seeding] = await Promise.all([
+  const [profile, project, peers, branchMap, seeding] = await Promise.all([
+    api.profile.getProfile(),
     api.project.getById(route.project),
     api.project.getAllRemotes(route.project),
     getPeerBranches(api, route.project, route.peer),
@@ -453,6 +455,9 @@ async function loadTreeView(
       path,
       blobResult,
       seeding,
+      publicExplorer: profile.config.publicExplorer
+        .replace("$host", `${api.baseUrl.hostname}:${api.baseUrl.port}`)
+        .replace("$rid", project.id),
     },
   };
 }