Add user profile page — radicle-explorer

Also adds some links to navigate from peer branch selector to the user page

👉 Preview 👉 Workflow runs 👉 Branch on GitHub

   description: string().optional(),
 });
 export type NodeIdentity = z.infer<typeof nodeIdentitySchema>;
 const nodeIdentitySchema = object({
   alias: string().nullable(),
   did: string(),
   ssh: object({
     full: string(),
     hash: string(),
   }),
 });
 export type NodeInfo = z.infer<typeof nodeInfoSchema>;
 const nodeInfoSchema = object({

     );
   }
   public async getPoliciesById(
   public async getPolicyById(
     id: string,
     options?: RequestOptions,
   ): Promise<SeedingPolicy> {

       nodeSchema,
     );
   }
   public async getNodeIdentity(
     id: string,
     options?: RequestOptions,
   ): Promise<NodeIdentity> {
     return this.#fetcher.fetchOk(
       {
         method: "GET",
         path: `nodes/${id}`,
         options,
       },
       nodeIdentitySchema,
     );
   }
   public async getNodeInventory(
     id: string,
     options?: RequestOptions,
   ): Promise<string[]> {
     return this.#fetcher.fetchOk(
       {
         method: "GET",
         path: `nodes/${id}/inventory`,
         options,
       },
       array(string()),
     );
   }
 }

   public async getByDelegate(
     delegateId: string,
     query?: ProjectListQuery,
     options?: RequestOptions,
   ): Promise<Project[]> {
     return this.#fetcher.fetchOk(
       {
         method: "GET",
         path: `delegates/${delegateId}/projects`,
         query,
         options,
       },
       projectsSchema,

   import Patch from "@app/views/projects/Patch.svelte";
   import Patches from "@app/views/projects/Patches.svelte";
   import Source from "@app/views/projects/Source.svelte";
   import Users from "@app/views/users/View.svelte";
   import Error from "@app/views/error/View.svelte";
   import Loading from "@app/components/Loading.svelte";

   </div>
 {:else if $activeRouteStore.resource === "nodes"}
   <Nodes {...$activeRouteStore.params} />
 {:else if $activeRouteStore.resource === "users"}
   <Users {...$activeRouteStore.params} />
 {:else if $activeRouteStore.resource === "project.source"}
   <Source {...$activeRouteStore.params} />
 {:else if $activeRouteStore.resource === "project.history"}

   import { createIcon } from "@app/lib/blockies";
   export let nodeId: string;
   export let inline = false;
   export let variant: "small" | "large";
   function createContainer(source: string) {
     source = source.replace("did:key:", "");

 <style>
   .avatar {
     display: block;
     border-radius: var(--border-radius-round);
     box-shadow: 0 0 0 1px var(--color-border-match-background);
     min-width: 1rem;
     min-height: 1rem;
     height: 100%;
     width: inherit;
     object-fit: cover;
     background-size: cover;
     background-repeat: no-repeat;
   }
   .inline {
     display: inline-block !important;
   .small {
     width: 1rem;
     height: 1rem;
     border-radius: var(--border-radius-round);
   }
   .large {
     width: 4rem;
     border-radius: var(--border-radius-small);
   }
 </style>

   title={nodeId}
   src={createContainer(nodeId)}
   class="avatar"
   alt="avatar"
   class:inline />
   class:small={variant === "small"}
   class:large={variant === "large"}
   alt="avatar" />

 <script lang="ts">
   import type { Comment } from "@http-client";
   import type { BaseUrl, Comment } from "@http-client";
   import * as utils from "@app/lib/utils";

   export let id: string;
   export let authorId: string;
   export let authorAlias: string | undefined = undefined;
   export let baseUrl: BaseUrl;
   export let body: string;
   export let reactions: Comment["reactions"] | undefined = undefined;
   export let caption = "commented";

     {/if}
     <div class="card-header" class:card-header-no-icon={isReply}>
       <slot class="icon" name="icon" />
       <NodeId nodeId={authorId} alias={authorAlias} />
       <NodeId {baseUrl} nodeId={authorId} alias={authorAlias} />
       <slot name="caption">{caption}</slot>
       <Id {id} />
       <span class="timestamp" title={utils.absoluteTimestamp(timestamp)}>

   export let shorten: boolean = true;
   export let style: "oid" | "commit" | "none" = "oid";
   export let ariaLabel: string | undefined = undefined;
   export let styleWidth: string | undefined = undefined;
   let icon: ComponentProps<Icon>["name"] = "clipboard";
   const text = "Click to copy";

   }
 </style>
 <div class="container">
 <div class="container" style:width={styleWidth}>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     on:mouseenter={() => {

 <script lang="ts">
   import type { BaseUrl } from "@http-client";
   import { formatNodeId, parseNodeId, truncateId } from "@app/lib/utils";
   import Avatar from "./Avatar.svelte";
   import Id from "./Id.svelte";
   import Link from "./Link.svelte";
   export let baseUrl: BaseUrl;
   export let nodeId: string;
   export let alias: string | undefined = undefined;
 </script>

   .avatar-alias {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.375rem;
     height: 1rem;
     font-family: var(--font-family-monospace);

   }
 </style>
 <Id id={nodeId} style="none">
   <div class="avatar-alias">
     <Avatar {nodeId} />
 <div class="avatar-alias">
   <Avatar variant="small" {nodeId} />
   <Link styleHoverState route={{ resource: "users", did: nodeId, baseUrl }}>
     {#if alias}
       <span class="txt-overflow">
         {alias}

         {truncateId(parseNodeId(nodeId)?.pubkey || "")}
       </span>
     {/if}
   </div>
 </Id>
   </Link>
 </div>

   import Link from "@app/components/Link.svelte";
   export let compact = false;
   export let projectInfo: ProjectInfo;
   $: project = projectInfo.project;

               <Icon name="lock" />
             </div>
           {/if}
           <slot name="delegate" />
           <Badge
             variant="neutral"
             size="tiny"

 export async function fetchProjectInfos(
   baseUrl: BaseUrl,
   query?: ProjectListQuery,
   delegate?: string,
 ): Promise<ProjectInfo[]> {
   const api = new HttpdClient(baseUrl);
   const projects = await api.project.getAll(query);
   let projects: Project[];
   if (delegate) {
     projects = await api.project.getByDelegate(delegate, query);
   } else {
     projects = await api.project.getAll(query);
   }
   const info = await Promise.all(
     projects.map(async project => {
       const [activity, lastCommit] = await Promise.all([

     replies: Comment[];
   };
   export let rawPath: string;
   export let baseUrl: BaseUrl;
   $: root = thread.root;
   $: replies = thread.replies;

 <div class="comments">
   <div class="top-level-comment" class:has-replies={replies.length > 0}>
     <CommentComponent
       {baseUrl}
       {rawPath}
       id={root.id}
       lastEdit={root.edits.length > 1 ? root.edits.pop() : undefined}

     <div class="replies">
       {#each replies as reply}
         <CommentComponent
           {baseUrl}
           {rawPath}
           lastEdit={reply.edits.length > 1 ? reply.edits.pop() : undefined}
           id={reply.id}

 } from "@app/views/projects/router";
 import { loadRoute } from "@app/lib/router/definitions";
 import { nodePath } from "@app/views/nodes/router";
 import { userRouteToPath, userTitle } from "@app/views/users/router";
 export { type Route };

   } else if (loadedRoute.resource === "error") {
     title.push("Error");
     title.push("Radicle");
   } else if (loadedRoute.resource === "users") {
     title.push(...userTitle(loadedRoute));
   } else if (loadedRoute.resource === "notFound") {
     title.push("Page not found");
     title.push("Radicle");

       if (hostAndPort) {
         const baseUrl = extractBaseUrl(hostAndPort);
         const id = segments.shift();
         if (id) {
         if (id === "users") {
           const did = segments.shift();
           if (did) {
             return { resource: "users", baseUrl, did };
           }
           return null;
         } else if (id) {
           return resolveProjectRoute(baseUrl, id, segments, url.search);
         } else {
           return {

     } else {
       return nodePath(route.params.baseUrl);
     }
   } else if (route.resource === "users") {
     return userRouteToPath(route);
   } else if (
     route.resource === "project.source" ||
     route.resource === "project.history" ||

   ProjectLoadedRoute,
   ProjectRoute,
 } from "@app/views/projects/router";
 import type { UserLoadedRoute, UserRoute } from "@app/views/users/router";
 import type { NodesRoute, NodesLoadedRoute } from "@app/views/nodes/router";
 import type { ComponentProps } from "svelte";
 import type IconLarge from "@app/components/IconLarge.svelte";
 import { loadProjectRoute } from "@app/views/projects/router";
 import { loadUserRoute } from "@app/views/users/router";
 import { loadNodeRoute } from "@app/views/nodes/router";
 interface BootingRoute {

 export type Route =
   | BootingRoute
   | UserRoute
   | ErrorRoute
   | NotFoundRoute
   | ProjectRoute

   } edited ${absoluteTimestamp(timestamp)}`;
 }
 export function formatDid({
   prefix,
   pubkey,
 }: {
   prefix: string;
   pubkey: string;
 }): string {
   return `${prefix}${pubkey}`;
 }
 export function baseUrlToString(baseUrl: BaseUrl): string {
   return `${baseUrl.scheme}://${baseUrl.hostname}:${baseUrl.port}`;
 }

   import Button from "@app/components/Button.svelte";
   import Command from "@app/components/Command.svelte";
   import Help from "@app/App/Help.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   import Icon from "@app/components/Icon.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   import Link from "@app/components/Link.svelte";
   import Loading from "@app/components/Loading.svelte";
   import MobileFooter from "@app/App/MobileFooter.svelte";
   import Placeholder from "@app/components/Placeholder.svelte";
   import Popover from "@app/components/Popover.svelte";
   import ProjectCard from "@app/components/ProjectCard.svelte";

                 </div>
               {:else}
                 <div class="empty-state">
                   This node doesn't have any pinned repositories.
                   <Placeholder
                     iconName="desert"
                     caption="This node doesn't have any pinned repositories." />
                 </div>
               {/if}
             {:catch error}

               styleWidth="100%"
               let:toggle
               on:click={toggle}>
               <Icon name="seedling" />
               <Icon name="info" />
             </Button>
             <div slot="popover" style:width="20rem">

     {#each assignees as { id }}
       <Badge variant="neutral" size="small">
         <div class="assignee">
           <Avatar inline nodeId={id} />
           <Avatar variant="small" nodeId={id} />
           <span>{formatNodeId(id)}</span>
         </div>
       </Badge>