Add New Review button to Reviews section in patch revisions

src/components/ReviewTeaser.svelte

@@ -18,44 +18,89 @@
 
   const { rid, review }: Props = $props();
 
-  const backgroundColor = {
-    review: "var(--color-background-float)",
-    accept: "var(--color-fill-diff-green-light)",
-    reject: "var(--color-fill-diff-red-light)",
-  };
+  const backgroundColor = $derived.by(() => {
+    if (review.verdict === "accept") {
+      return "var(--color-fill-diff-green-light)";
+    } else if (review.verdict === "reject") {
+      return "var(--color-fill-diff-red-light)";
+    } else {
+      return "var(--color-fill-float-hover)";
+    }
+  });
+
+  const header = $derived.by(() => {
+    if (!review.verdict) {
+      return "published a review";
+    }
+
+    return `${review.verdict ? `${review.verdict}ed` : "reviewed"} revision with a review`;
+  });
+
+  const icon = $derived.by(() => {
+    if (review.verdict === "accept") {
+      return "comment-checkmark";
+    } else if (review.verdict === "reject") {
+      return "comment-cross";
+    } else {
+      return "comment";
+    }
+  });
 </script>
 
 <style>
   .review {
     clip-path: var(--2px-corner-fill);
+    display: flex;
+    align-items: flex-start;
     padding: 0.5rem 0.75rem;
+    gap: 1rem;
+  }
+  .review-content {
+    width: 100%;
     font-size: var(--font-size-small);
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
+  .timestamp {
+    color: var(--color-foreground-dim);
+  }
+  .review-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+  .icon {
+    padding-top: 0.25rem;
+  }
 </style>
 
-<div
-  class="review"
-  style:background-color={backgroundColor[review.verdict ?? "review"]}>
-  <div class="global-flex">
-    <NodeId {...authorForNodeId(review.author)} />
-    {review.verdict ? `${review.verdict}ed` : "reviewed"} revision
-    <div title={absoluteTimestamp(review.timestamp)}>
-      {formatTimestamp(review.timestamp)}
-    </div>
-    {#if review.comments.length > 0}
-      <div class="global-flex" style:gap="0.25rem" style:margin-left="auto">
-        <Icon name="comment" />{review.comments.length}
-      </div>
-    {/if}
+<div class="review" style:background-color={backgroundColor}>
+  <div class="icon">
+    <Icon name={icon} />
   </div>
-  <div>
-    {#if review.summary?.trim()}
-      <Markdown {rid} breaks content={review.summary} />
-    {:else}
-      <span class="txt-missing">No summary.</span>
-    {/if}
+  <div class="review-content">
+    <div class="review-header">
+      <div class="global-flex">
+        <NodeId {...authorForNodeId(review.author)} />
+        <span>{header}</span>
+        <div class="timestamp" title={absoluteTimestamp(review.timestamp)}>
+          {formatTimestamp(review.timestamp)}
+        </div>
+        {#if review.comments.length > 0}
+          <div class="global-flex" style:gap="0.25rem" style:margin-left="auto">
+            <Icon name="comment" />{review.comments.length}
+          </div>
+        {/if}
+      </div>
+    </div>
+    <div>
+      {#if review.summary?.trim()}
+        <Markdown {rid} breaks content={review.summary} />
+      {:else}
+        <span class="txt-missing">No summary.</span>
+      {/if}
+    </div>
   </div>
 </div>

src/components/Revision.svelte

@@ -14,7 +14,11 @@
   import { announce } from "@app/components/AnnounceSwitch.svelte";
   import { invoke } from "@app/lib/invoke";
   import { nodeRunning } from "@app/lib/events";
-  import { publicKeyFromDid, scrollIntoView } from "@app/lib/utils";
+  import {
+    didFromPublicKey,
+    publicKeyFromDid,
+    scrollIntoView,
+  } from "@app/lib/utils";
 
   import Changeset from "@app/components/Changeset.svelte";
   import CobCommitTeaser from "./CobCommitTeaser.svelte";
@@ -41,6 +45,15 @@
     $props();
   /* eslint-enable prefer-const */
 
+  const hasOwnReview = $derived(
+    Boolean(
+      revision.reviews &&
+        revision.reviews.some(
+          value => value.author.did === didFromPublicKey(config.publicKey),
+        ),
+    ),
+  );
+
   let focusReply: boolean = $state(false);
   let hideChanges = $state(false);
   let hideDiscussion = $state(false);
@@ -128,6 +141,27 @@
     }
   }
 
+  async function createReview() {
+    try {
+      await invoke("edit_patch", {
+        rid: rid,
+        cobId: patchId,
+        action: {
+          type: "review",
+          revision: revision.id,
+          // We need to pass an empty string to create a review without a verdict.
+          summary: "",
+          labels: [],
+        },
+        opts: { announce: $nodeRunning && $announce },
+      });
+    } catch (error) {
+      console.error("Creating a review failed: ", error);
+    } finally {
+      await reload();
+    }
+  }
+
   async function editComment(commentId: string, body: string, embeds: Embed[]) {
     try {
       await invoke("edit_patch", {
@@ -143,7 +177,7 @@
         opts: { announce: $nodeRunning && $announce },
       });
     } catch (error) {
-      console.error("Eediting comment failed: ", error);
+      console.error("Editing comment failed: ", error);
     } finally {
       await reload();
     }
@@ -293,6 +327,11 @@
     left: -18.5px;
     background-color: var(--color-fill-separator);
   }
+  .review-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 </style>
 
 <div class="txt-small patch-body">
@@ -360,24 +399,38 @@
   </div>
 </div>
 
-{#if revision.reviews && revision.reviews.length}
-  <div style:margin="1rem 0">
-    <div class="global-flex" style:margin-bottom="1rem">
+<div style:margin="1rem 0">
+  <div class="review-row">
+    <div
+      class="global-flex"
+      style:margin-bottom={hideReviews || revision.reviews?.length === 0
+        ? undefined
+        : "1rem"}>
       <NakedButton
         stylePadding="0 4px"
         variant="ghost"
         onclick={() => (hideReviews = !hideReviews)}>
-        <Icon name={hideReviews ? "chevron-right" : "chevron-down"} />
+        <Icon
+          name={hideReviews || revision.reviews?.length === 0
+            ? "chevron-right"
+            : "chevron-down"} />
         <div class="txt-semibold global-flex txt-regular">Reviews</div>
       </NakedButton>
     </div>
-    <div class:hide={hideReviews} style:margin-top="1rem">
+    <NakedButton variant="ghost" disabled={hasOwnReview} onclick={createReview}>
+      <Icon name="plus" />
+      <span class="txt-small">New Review</span>
+    </NakedButton>
+  </div>
+
+  {#if revision.reviews && revision.reviews.length}
+    <div class:hide={hideReviews}>
       {#each revision.reviews as review}
         <ReviewTeaser {rid} {review} />
       {/each}
     </div>
-  </div>
-{/if}
+  {/if}
+</div>
 
 <div
   class="txt-semibold global-flex"