Improve handling unresolved identities

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>

src/base/projects/Issue.svelte

@@ -2,9 +2,10 @@
   import type { Config } from "@app/config";
   import Loading from "@app/Loading.svelte";
   import type { Blob, Project } from "@app/project";
-  import { canonicalize, capitalize, formatTimestamp } from "@app/utils";
+  import { canonicalize, capitalize } from "@app/utils";
   import IssueComment from "@app/base/projects/Issue/IssueComment.svelte";
   import { Issue } from "@app/issue";
+  import IssueAuthorship from "@app/base/projects/Issue/IssueAuthorship.svelte";
 
   export let issue: string;
   export let project: Project;
@@ -97,9 +98,6 @@
   .closed {
     background-color: var(--color-negative-2);
   }
-  .date {
-    color: var(--color-foreground-80);
-  }
   .replies {
     margin-left: 2rem;
   }
@@ -131,13 +129,7 @@
           {capitalize(issue.state.status)}
         </div>
       </div>
-      <div class="text-small">
-        {issue.author.identity.name}
-        <span class="faded">opened on</span>
-        <span class="date">
-          {formatTimestamp(issue.timestamp)}
-        </span>
-      </div>
+      <IssueAuthorship author={issue.author} timestamp={issue.timestamp} caption="opened on" {config} />
     </header>
     <main>
       <div class="comments">

src/base/projects/Issue/IssueAuthorship.svelte

@@ -35,13 +35,13 @@
 <span class="authorship text-xsmall">
   {#if profile}
     <Address resolve address={profile.address} noBadge {noAvatar} compact small {config} {profile} />
-  {:else if author.identity.name}
+  {:else if author.kind === "resolved"}
     <span class="highlight">
       {author.identity.name}
     </span>
-  {:else}
+  {:else if author.urn}
     <span class="highlight">
-      {formatRadicleUrn(author.identity.urn)}
+      {formatRadicleUrn(author.urn)}
     </span>
   {/if}
   <span class="desktop caption">&nbsp;{caption}&nbsp;</span>

src/base/projects/Issue/IssueComment.svelte

@@ -18,11 +18,20 @@
   let profile: Profile | null = null;
 
   onMount(async () => {
-    if (comment.author.identity.ens?.name) {
+    if (comment.author.kind === "resolved" && comment.author.identity.ens?.name) {
       profile = await Profile.get(comment.author.identity.ens.name, ProfileType.Minimal, config);
     }
   });
 
+  $: source = profile?.avatar ||
+    (comment.author.kind === "resolved"
+      ? comment.author.identity.urn
+      : comment.author.urn);
+  $: title = profile?.name ||
+    (comment.author.kind === "resolved"
+      ? comment.author.identity.name
+      : comment.author.urn);
+
   const selectReaction = (event: { detail: string }) => {
     // TODO: Once we allow adding reactions through the http-api, we should call it here.
     console.log(event.detail);
@@ -67,19 +76,21 @@
 
 <div class="comment">
   <div class="person">
-    <Avatar source={profile?.avatar || comment.author.identity.urn} title={profile?.name || comment.author.identity.urn} />
+    <Avatar {source} {title} />
   </div>
   <div class="card">
     <div class="card-header">
-      <IssueAuthorship noAvatar {config}
-        caption="commented on" author={comment.author} {profile} timestamp={comment.timestamp} />
+      <IssueAuthorship noAvatar {config} {profile}
+        caption="commented on" author={comment.author} timestamp={comment.timestamp} />
       <ReactionSelector on:select={selectReaction} />
     </div>
     <div class="card-body">
       <Markdown content={comment.body} {getImage} />
       {#if comment.reactions.length > 0}
         <div class="reactions">
-          <Reactions reactions={comment.reactions} on:click={incrementReaction} />
+          <Reactions
+            reactions={comment.reactions}
+            on:click={incrementReaction} />
         </div>
       {/if}
     </div>

src/base/projects/Issue/IssueTeaser.svelte

@@ -13,7 +13,7 @@
   let profile: Profile | null = null;
 
   onMount(async () => {
-    if (issue.author.identity.ens?.name) {
+    if (issue.author.kind === "resolved" && issue.author.identity.ens?.name) {
       profile = await Profile.get(issue.author.identity.ens.name, ProfileType.Minimal, config);
     }
   });

src/issue.ts

@@ -26,16 +26,24 @@ export interface Comment {
   timestamp: number;
 }
 
-export interface Author {
+export type Author = ResolvedIdentity | UnresolvedIdentity;
+
+export interface ResolvedIdentity {
+  kind: "resolved";
   peer: PeerId;
   identity: {
     urn: string;
-    name?: string;
-    ens?: {
+    name: string;
+    ens: {
       name: string;
-    };
+    } | null;
   };
 }
+export interface UnresolvedIdentity {
+  kind: "unresolved";
+  peer: PeerId;
+  urn: string;
+}
 
 export interface CommentWithReplies extends Comment {
   replies: Comment[];