UI enhancements for Catch-up

src/pages/catchup.css

@@ -668,6 +668,28 @@
     animation: none;
   }
 
+  &:is(.catchup-group-account, .catchup-selected-author):is(
+      .catchup-filter-original,
+      .catchup-filter-reply
+    )
+    > li {
+    margin-bottom: 0;
+
+    &:first-child ~ li {
+      .post-author:not(:has(.post-reblog-avatar)) {
+        opacity: 0.25;
+
+        @media (min-width: 40em) {
+          opacity: 0;
+        }
+      }
+
+      &.separator + li .post-author {
+        opacity: 1;
+      }
+    }
+  }
+
   .post-peek {
     grid-area: content;
     display: flex;
@@ -955,12 +977,18 @@
 
   .post-stats {
     display: inline-flex;
-    gap: 2px;
+    gap: 4px;
     align-items: center;
 
     &:empty {
       display: none;
     }
+
+    > span {
+      display: inline-flex;
+      gap: 2px;
+      align-items: center;
+    }
   }
   @media (hover: hover) {
     .post-stats {
@@ -972,6 +1000,63 @@
       transform: translateX(0);
     }
   }
+  &.catchup-sort-repliesCount {
+    .post-stats {
+      opacity: 1;
+      transform: translateX(0);
+
+      .post-stat-replies {
+        order: 2;
+      }
+
+      > *:not(.post-stat-replies) {
+        opacity: 0;
+      }
+    }
+    @media (hover: hover) {
+      .post-line:hover .post-stats > * {
+        opacity: 1;
+      }
+    }
+  }
+  &.catchup-sort-favouritesCount {
+    .post-stats {
+      opacity: 1;
+      transform: translateX(0);
+
+      .post-stat-likes {
+        order: 2;
+      }
+
+      > *:not(.post-stat-likes) {
+        opacity: 0;
+      }
+    }
+    @media (hover: hover) {
+      .post-line:hover .post-stats > * {
+        opacity: 1;
+      }
+    }
+  }
+  &.catchup-sort-reblogsCount {
+    .post-stats {
+      opacity: 1;
+      transform: translateX(0);
+
+      .post-stat-boosts {
+        order: 2;
+      }
+
+      > *:not(.post-stat-boosts) {
+        opacity: 0;
+      }
+    }
+    @media (hover: hover) {
+      .post-line:hover .post-stats > * {
+        opacity: 1;
+      }
+    }
+  }
 
   + footer {
     min-height: 15vh;

src/pages/catchup.jsx

@@ -1176,7 +1176,15 @@ function Catchup() {
                   }
                 </div>
               )}
-              <ul class="catchup-list">
+              <ul
+                class={`catchup-list catchup-filter-${
+                  FILTER_VALUES[selectedFilterCategory] || ''
+                } ${sortBy ? `catchup-sort-${sortBy}` : ''} ${
+                  selectedAuthor && authors[selectedAuthor]
+                    ? `catchup-selected-author`
+                    : ''
+                } ${groupBy ? `catchup-group-${groupBy}` : ''}`}
+              >
                 {sortedFilteredPosts.map((post, i) => {
                   const id = post.reblog?.id || post.id;
                   let showSeparator = false;
@@ -1568,19 +1576,19 @@ function PostStats({ post }) {
   return (
     <span class="post-stats">
       {repliesCount > 0 && (
-        <>
+        <span class="post-stat-replies">
           <Icon icon="comment2" size="s" /> {shortenNumber(repliesCount)}
-        </>
+        </span>
       )}
       {favouritesCount > 0 && (
-        <>
+        <span class="post-stat-likes">
           <Icon icon="heart" size="s" /> {shortenNumber(favouritesCount)}
-        </>
+        </span>
       )}
       {reblogsCount > 0 && (
-        <>
+        <span class="post-stat-boosts">
           <Icon icon="rocket" size="s" /> {shortenNumber(reblogsCount)}
-        </>
+        </span>
       )}
     </span>
   );