448c762 Show edited label on edited comments and issues — radicle-explorer

Radicle web interface

Show edited label on edited comments and issues

Sebastian Martinez committed 2 years ago

commit 448c76283156f0929aaa52bc54a6a965cdb14f8c
parent 10c54ace672321e4c682d3f8e31e722e842b7a9b

5 files changed +46 -3

modified httpd-client/lib/project/comment.ts

@@ -8,6 +8,14 @@ export const commentSchema = object({

   id: string(),
   author: object({ id: string(), alias: string().optional() }),
   body: string(),
   edits: array(
     object({
       author: object({ id: string(), alias: string().optional() }),
       body: string(),
       embeds: array(object({ name: string(), content: string() })),
       timestamp: number(),
     }),
   ),
   embeds: array(object({ name: string(), content: string() })),
   reactions: array(tuple([string(), string()])),
   timestamp: number(),

modified src/components/Comment.svelte

@@ -1,5 +1,5 @@

 <script lang="ts" strictEvents>
   import type { Embed } from "@httpd-client";
   import type { Comment, Embed } from "@httpd-client";
   import type { GroupedReactions } from "@app/lib/reactions";
   import { tick } from "svelte";

@@ -27,6 +27,7 @@

   export let timestamp: number;
   export let isReply: boolean = false;
   export let isLastReply: boolean = false;
   export let lastEdit: Comment["edits"][0] | undefined = undefined;
   let state: "read" | "edit" | "submit" = "read";

@@ -68,7 +69,7 @@

   .icon {
     color: var(--color-fill-gray);
   }
   .timestamp {
   .card-metadata {
     color: var(--color-fill-gray);
     font-size: var(--font-size-small);
   }

@@ -123,6 +124,12 @@

       </div>
       <NodeId nodeId={authorId} alias={authorAlias} />
       {caption}
       {#if lastEdit}
         <div class="card-metadata">•</div>
         <div class="card-metadata" title={utils.formatEditedCaption(lastEdit)}>
           edited
         </div>
       {/if}
       <div class="header-right">
         {#if id && editComment && state === "read"}
           <div class="edit-buttons">

@@ -131,7 +138,7 @@

             </IconButton>
           </div>
         {/if}
         <div class="timestamp" title={utils.absoluteTimestamp(timestamp)}>
         <div class="card-metadata" title={utils.absoluteTimestamp(timestamp)}>
           {utils.formatTimestamp(timestamp)}
         </div>
       </div>

modified src/components/Thread.svelte

@@ -92,6 +92,7 @@

       {enableAttachments}
       {rawPath}
       id={root.id}
       lastEdit={root.edits.length > 1 ? root.edits.pop() : undefined}
       authorId={root.author.id}
       authorAlias={root.author.alias}
       reactions={root.reactions}

@@ -111,6 +112,7 @@

         <CommentComponent
           {enableAttachments}
           {rawPath}
           lastEdit={reply.edits.length > 1 ? reply.edits.pop() : undefined}
           id={reply.id}
           authorId={reply.author.id}
           authorAlias={reply.author.alias}

modified src/lib/utils.ts

@@ -1,3 +1,5 @@

 import type { Comment } from "@httpd-client";
 import md5 from "md5";
 import bs58 from "bs58";
 import twemojiModule from "twemoji";

@@ -83,6 +85,14 @@ export function formatCommit(oid: string): string {

   return oid.substring(0, 7);
 }
 export function formatEditedCaption(lastEdit: Comment["edits"][0]) {
   return ` ${
     lastEdit.author.alias
       ? lastEdit.author.alias
       : formatNodeId(lastEdit.author.id)
   } edited ${formatTimestamp(lastEdit.timestamp / 1000)}`;
 }
 // Takes a path, eg. "../images/image.png", and a base from where to start resolving, e.g. "static/images/index.html".
 // Returns the resolved path.
 export function canonicalize(

modified src/views/projects/Issue.svelte

@@ -387,6 +387,10 @@

     $httpdStore.state === "authenticated" && utils.isLocal(baseUrl.hostname)
       ? $httpdStore.session
       : undefined;
   $: lastDescriptionEdit =
     issue.discussion[0].edits.length > 1
       ? issue.discussion[0].edits.pop()
       : undefined;
   type State = "read" | "edit" | "submit";

@@ -425,6 +429,10 @@

     flex-wrap: nowrap;
     gap: 0.5rem;
   }
   .author-metadata {
     color: var(--color-fill-gray);
     font-size: var(--font-size-small);
   }
   .title {
     overflow: hidden;
     text-overflow: ellipsis;

@@ -571,6 +579,14 @@

             nodeId={issue.author.id}
             alias={issue.author.alias} />
           {utils.formatTimestamp(issue.discussion[0].timestamp)}
           {#if lastDescriptionEdit}
             <div class="author-metadata">•</div>
             <div
               class="author-metadata"
               title={utils.formatEditedCaption(lastDescriptionEdit)}>
               edited
             </div>
           {/if}
         </div>
       </CobHeader>
       {#if threads.length > 0}