Support deleting draft review comments

src/components/Comment.svelte

@@ -34,6 +34,7 @@
     emptyBodyTooltip?: string;
     editComment?: (body: string, embeds: Embed[]) => Promise<void>;
     reactOnComment?: (authors: Author[], reaction: string) => Promise<void>;
+    deleteComment?: () => Promise<void>;
     styleWidth?: string;
     // See `ExtendedTextarea`
     disableAttachments?: boolean | string;
@@ -55,6 +56,7 @@
     disallowEmptyBody = false,
     editComment,
     reactOnComment,
+    deleteComment,
     styleWidth,
     emptyBodyTooltip,
     disableAttachments,
@@ -122,9 +124,7 @@
     font-size: var(--font-size-small);
     color: var(--color-fill-gray);
   }
-  .edit-buttons {
-    display: flex;
-    gap: 0.25rem;
+  .icon-button {
     cursor: pointer;
   }
 </style>
@@ -157,10 +157,15 @@
       {/if}
       <div class="header-right">
         {#if editComment}
-          <div class="edit-buttons">
+          <div class="icon-button">
             <Icon name="pen" onclick={toggleEdit} />
           </div>
         {/if}
+        {#if deleteComment}
+          <div class="icon-button">
+            <Icon name="cross" onclick={deleteComment} />
+          </div>
+        {/if}
         {#if reactions && reactOnComment}
           <ReactionSelector
             popoverPositionRight="0"

src/components/Diff.svelte

@@ -21,6 +21,7 @@
       authors: Author[],
       reaction: string,
     ) => Promise<void>;
+    deleteComment?: (commentId: string) => Promise<void>;
     // Defaults to `true`.
     canReply?: boolean;
     // See `ExtendedTextarea`.
@@ -446,7 +447,8 @@
           roles.isDelegateOrAuthor,
           codeComments.config.publicKey,
           codeComments.repoDelegates.map(delegate => delegate.did),
-        )} />
+        )}
+        deleteComment={codeComments.deleteComment} />
     </div>
   {/if}
 

src/components/Review.svelte

@@ -273,6 +273,15 @@
       await loadReview();
     }
   }
+
+  async function deleteDraftComment(commentId: string) {
+    if (!("draft" in review)) {
+      throw new Error("Cannot change comment status for draft review");
+    }
+
+    draftReviewStorage.deleteComment(review.id, commentId);
+    await loadReview();
+  }
 </script>
 
 <style>
@@ -478,6 +487,7 @@
       createComment,
       editComment,
       reactOnComment: "draft" in review ? undefined : reactOnComment,
+      deleteComment: "draft" in review ? deleteDraftComment : undefined,
       repoDelegates: repo.delegates,
       canReply: false,
       disableAttachments:

src/components/Thread.svelte

@@ -32,6 +32,7 @@
       authors: Author[],
       reaction: string,
     ) => Promise<void>;
+    deleteComment?: (commentId: string) => Promise<void>;
     inline?: boolean;
   }
 
@@ -42,6 +43,7 @@
     editComment,
     createReply,
     reactOnComment,
+    deleteComment,
     inline = false,
   }: Props = $props();
 
@@ -152,7 +154,8 @@
       body={root.edits.slice(-1)[0].body}
       editComment={canEditComment(root.author.did) &&
         editComment?.bind(null, root.id)}
-      reactOnComment={reactOnComment?.bind(null, root.id)}>
+      reactOnComment={reactOnComment?.bind(null, root.id)}
+      deleteComment={deleteComment?.bind(null, root.id)}>
       {#snippet actions()}
         {#if createReply}
           <Icon name="reply" onclick={toggleReply} />

src/lib/draftReviewStorage.ts

@@ -116,6 +116,15 @@ export const draftReviewStorage = {
     storage.value = draftPatches;
   },
 
+  deleteComment(id: string, commentId: string) {
+    const draftReviews = storage.value;
+    const index = draftReviews[id].comments.findIndex(
+      comment => comment.id === commentId,
+    );
+    draftReviews[id].comments.splice(index, 1);
+    storage.value = draftReviews;
+  },
+
   addComment(
     id: string,
     comment: {