Add links to NodeIds to the new user page

radicle-dev · Jul 29, 2024 · e6f4a28 · e6f4a28
1 parent db05592
commit e6f4a28
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 24 deletions.
diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Comment } from "@http-client";
+  import type { BaseUrl, Comment } from "@http-client";
 
   import * as utils from "@app/lib/utils";
 
@@ -11,6 +11,7 @@
   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";
@@ -107,7 +108,7 @@
     {/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)}>

diff --git a/src/components/NodeId.svelte b/src/components/NodeId.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+  import type { BaseUrl } from "@http-client";
   import { formatNodeId, parseNodeId, truncateId } from "@app/lib/utils";
 
   import Avatar from "./Avatar.svelte";
   import Link from "./Link.svelte";
 
+  export let baseUrl: BaseUrl;
   export let nodeId: string;
   export let alias: string | undefined = undefined;
 </script>
@@ -12,7 +14,6 @@
   .avatar-alias {
     display: flex;
     align-items: center;
-    justify-content: center;
     gap: 0.375rem;
     height: 1rem;
     font-family: var(--font-family-monospace);
@@ -24,9 +25,9 @@
   }
 </style>
 
-<Id id={nodeId} style="none">
-  <div class="avatar-alias">
-    <Avatar {nodeId} />
+<div class="avatar-alias">
+  <Avatar {nodeId} />
+  <Link route={{ resource: "users", did: nodeId, baseUrl }}>
     {#if alias}
       <span class="txt-overflow">
         {alias}
@@ -39,5 +40,5 @@
         {truncateId(parseNodeId(nodeId)?.pubkey || "")}
       </span>
     {/if}
-  </div>
-</Id>
+  </Link>
+</div>
diff --git a/src/views/projects/Cob/Reviews.svelte b/src/views/projects/Cob/Reviews.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+  import type { BaseUrl } from "@http-client";
   import type { PatchReviews } from "../Patch.svelte";
 
   import IconSmall from "@app/components/IconSmall.svelte";
   import NodeId from "@app/components/NodeId.svelte";
 
+  export let baseUrl: BaseUrl;
   export let reviews: PatchReviews;
 </script>
 
@@ -69,7 +71,10 @@
             <IconSmall name="chat" />
           {/if}
         </span>
-        <NodeId nodeId={review.author.id} alias={review.author.alias} />
+        <NodeId
+          {baseUrl}
+          nodeId={review.author.id}
+          alias={review.author.alias} />
       </div>
     {:else}
       <div class="txt-missing no-reviews">No reviews</div>

diff --git a/src/views/projects/Cob/Revision.svelte b/src/views/projects/Cob/Revision.svelte
@@ -378,7 +378,10 @@
               style:padding="0 0.375rem">
               <IconSmall name="patch" />
             </div>
-            <NodeId nodeId={revisionAuthor.id} alias={revisionAuthor.alias} />
+            <NodeId
+              {baseUrl}
+              nodeId={revisionAuthor.id}
+              alias={revisionAuthor.alias} />
             {#if patchId === revisionId}
               opened this patch on base
               <Id id={revisionBase} style="commit" />
@@ -465,6 +468,7 @@
               </div>
 
               <NodeId
+                {baseUrl}
                 nodeId={element.inner.author.id}
                 alias={element.inner.author.alias}>
               </NodeId>
@@ -489,6 +493,7 @@
             class:positive-review={review.verdict === "accept"}
             class:negative-review={review.verdict === "reject"}>
             <CommentComponent
+              {baseUrl}
               id={review.id}
               rawPath={rawPath(revisionBase)}
               authorId={author}

diff --git a/src/views/projects/Issue.svelte b/src/views/projects/Issue.svelte
@@ -181,7 +181,10 @@
               {issue.state.reason}
             </Badge>
           {/if}
-          <NodeId nodeId={issue.author.id} alias={issue.author.alias} />
+          <NodeId
+            {baseUrl}
+            nodeId={issue.author.id}
+            alias={issue.author.alias} />
           opened
           <Id id={issue.id} />
           <span title={utils.absoluteTimestamp(issue.discussion[0].timestamp)}>

diff --git a/src/views/projects/Issue/IssueTeaser.svelte b/src/views/projects/Issue/IssueTeaser.svelte
@@ -119,7 +119,7 @@
       {/if}
       <div
         style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
-        <NodeId nodeId={issue.author.id} alias={issue.author.alias} />
+        <NodeId {baseUrl} nodeId={issue.author.id} alias={issue.author.alias} />
         opened
         <Id id={issue.id} />
         <span title={absoluteTimestamp(issue.discussion[0].timestamp)}>

diff --git a/src/views/projects/Patch.svelte b/src/views/projects/Patch.svelte
@@ -358,7 +358,10 @@
               insertions={stats.insertions}
               deletions={stats.deletions} />
           </Link>
-          <NodeId nodeId={patch.author.id} alias={patch.author.alias} />
+          <NodeId
+            {baseUrl}
+            nodeId={patch.author.id}
+            alias={patch.author.alias} />
           opened
           <Id id={patch.id} />
           <span title={utils.absoluteTimestamp(patch.revisions[0].timestamp)}>
@@ -379,7 +382,7 @@
           <div
             style:margin-top="2rem"
             style="display: flex; flex-direction: column; gap: 0.5rem;">
-            <Reviews {reviews} />
+            <Reviews {baseUrl} {reviews} />
             <Labels labels={patch.labels} />
             <Embeds embeds={uniqueEmbeds} />
           </div>
@@ -503,7 +506,7 @@
     </div>
 
     <div class="metadata global-hide-on-medium-desktop-down">
-      <Reviews {reviews} />
+      <Reviews {baseUrl} {reviews} />
       <Labels labels={patch.labels} />
       <Embeds embeds={uniqueEmbeds} />
     </div>

diff --git a/src/views/projects/Patch/PatchTeaser.svelte b/src/views/projects/Patch/PatchTeaser.svelte
@@ -133,7 +133,10 @@
         {/if}
         <div
           style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
-          <NodeId nodeId={patch.author.id} alias={patch.author.alias} />
+          <NodeId
+            {baseUrl}
+            nodeId={patch.author.id}
+            alias={patch.author.alias} />
           {patch.revisions.length > 1 ? "updated" : "opened"}
           <Id id={patch.id} />
           {#if patch.revisions.length > 1}

diff --git a/src/views/projects/Sidebar.svelte b/src/views/projects/Sidebar.svelte
@@ -232,6 +232,7 @@
   <div class="bottom">
     <div class="repo box" class:expanded>
       <ContextRepo
+        {baseUrl}
         projectThreshold={project.threshold}
         projectDelegates={project.delegates}
         {seedingPolicy} />
@@ -278,6 +279,7 @@
 
         <div slot="popover" class="txt-small" style:width="18rem">
           <ContextRepo
+            {baseUrl}
             projectThreshold={project.threshold}
             projectDelegates={project.delegates}
             {seedingPolicy} />

diff --git a/src/views/projects/Sidebar/ContextRepo.svelte b/src/views/projects/Sidebar/ContextRepo.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-  import type { Project, SeedingPolicy } from "@http-client";
+  import type { BaseUrl, Project, SeedingPolicy } from "@http-client";
 
   import { capitalize } from "lodash";
 
   import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import NodeId from "@app/components/NodeId.svelte";
 
+  export let baseUrl: BaseUrl;
   export let projectThreshold: number;
   export let projectDelegates: Project["delegates"];
   export let seedingPolicy: SeedingPolicy;
@@ -30,7 +31,7 @@
     margin-bottom: 0;
   }
   .nid {
-    margin: 0.5rem 0;
+    margin: 1rem 0;
   }
 </style>
 
@@ -55,11 +56,13 @@
       changes to be included in the canonical branch.
     {/if}
   </div>
-  {#each projectDelegates as delegate}
-    <div class="nid">
-      <NodeId nodeId={delegate.id} alias={delegate.alias} />
-    </div>
-  {/each}
+  <div class="delegates">
+    {#each projectDelegates as delegate}
+      <div class="nid">
+        <NodeId {baseUrl} nodeId={delegate.id} alias={delegate.alias} />
+      </div>
+    {/each}
+  </div>
 {/if}
 <div class="item-header">
   <span style:text-wrap="nowrap">Seeding Scope</span>

diff --git a/src/views/projects/Source/PeerBranchSelector/Peer.svelte b/src/views/projects/Source/PeerBranchSelector/Peer.svelte
@@ -38,7 +38,10 @@
     <IconButton title="Expand peer" on:click={() => (expanded = !expanded)}>
       <IconSmall name={expanded ? "chevron-down" : "chevron-right"} />
     </IconButton>
-    <NodeId nodeId={peer.remote.id} alias={peer.remote.alias} />
+    <NodeId
+      baseUrl={baseRoute.node}
+      nodeId={peer.remote.id}
+      alias={peer.remote.alias} />
     {#if peer.remote.delegate}
       <Badge size="tiny" variant="delegate">
         <IconSmall name="badge" />