From 8091b141bdbb81f632321ec6da38ac324cfa7c69 Mon Sep 17 00:00:00 2001
From: Samuel Shuert <me@thecoded.prof>
Date: Wed, 2 Oct 2024 19:26:26 -0400
Subject: [PATCH] fix(web): Provide visual response to old reviews

Previously radicle-explorer kept old reviews the exact same style as new
ones (greyed out text like). This change sets the new review color to be
the same as users are normally while greying out old ones (both the user
and the icon).

To provide further clarity we've added a tooltip for explaining that a
review is old, and started sorting the reviews so that outdated reviews
sink to the bottom/end.

In review, it was mentioned that this would go well with jumping to the
review by clicking on the checks/crosses. This is a larger and
more-different change than we believe fits in this patch. We'll make
a followup for it in the future.
---
 src/views/repos/Cob/Reviews.svelte | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/views/repos/Cob/Reviews.svelte b/src/views/repos/Cob/Reviews.svelte
index a1ef6547f..d28e26c73 100644
--- a/src/views/repos/Cob/Reviews.svelte
+++ b/src/views/repos/Cob/Reviews.svelte
@@ -21,7 +21,6 @@
     font-size: var(--font-size-small);
   }
   .review {
-    color: var(--color-fill-gray);
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
@@ -32,6 +31,10 @@
   .review-reject {
     color: var(--color-foreground-red);
   }
+  .txt-missing .review-accept,
+  .txt-missing .review-reject {
+    color: var(--color-foreground-dim);
+  }
   @media (max-width: 1349.98px) {
     .wrapper {
       display: flex;
@@ -58,8 +61,21 @@
 <div class="wrapper">
   <div class="header">Reviews</div>
   <div class="body">
-    {#each Object.values(reviews) as { latest, review }}
-      <div class="review" class:txt-missing={!latest}>
+    {#each Array.from(Object.values(reviews)).sort((a, b) => {
+      if (a.latest === b.latest) {
+        return 0;
+      } else if (b.latest) {
+        return 1;
+      } else {
+        return -1;
+      }
+    }) as { latest, review }}
+      <div
+        class="review"
+        class:txt-missing={!latest}
+        title={!latest
+          ? `This review was on a previous revision. Please ask ${review.author.alias} to re-review`
+          : ""}>
         <span
           class:review-accept={review.verdict === "accept"}
           class:review-reject={review.verdict === "reject"}>