Show edited label on edited comments and issues

If a comment or an issue had at least one additional edit, we show a `edited` label,
which on hover shows the standard tooltip with more information on
who edited it and when.

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(),

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>

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}

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(

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}