From f8fac1294b343447f611e7305f47dbe1d10d3705 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 24 Dec 2022 01:11:11 +0800
Subject: [PATCH] Fixes & adjustments to statuses in Status page

---
 src/app.css          | 18 ++++++++++++------
 src/pages/status.jsx | 22 +++++++++++++++++-----
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/app.css b/src/app.css
index 7fcdd8ee..22b0bf02 100644
--- a/src/app.css
+++ b/src/app.css
@@ -164,14 +164,14 @@ a.mention span {
   > .status-link
   + .replies
   > summary {
-  margin-left: calc(50px + 16px + 16px);
+  margin-left: calc(50px + 16px + 12px);
 }
 .timeline.contextual
   > li.descendant.thread
   > .status-link
   + .replies
   .status-link {
-  padding-left: calc(50px + 16px + 16px);
+  padding-left: calc(50px + 16px + 12px);
 }
 .timeline.contextual
   > li.descendant:not(.thread)
@@ -209,6 +209,9 @@ a.mention span {
   padding-bottom: 12px;
   font-size: 90%;
 }
+.timeline.contextual > li.thread > .status-link .replies-link {
+  margin-left: calc(50px + 16px + 12px);
+}
 .timeline.contextual > li .replies-link * {
   vertical-align: middle;
 }
@@ -253,9 +256,9 @@ a.mention span {
 .timeline.contextual > li .replies li {
   position: relative;
 }
-.timeline.contextual > li .replies li .status {
+.timeline.contextual > li .replies li {
   --width: 3px;
-  --left: 0px;
+  --left: calc(40px + 16px);
   --right: calc(var(--left) + var(--width));
   background-image: linear-gradient(
     to right,
@@ -268,7 +271,10 @@ a.mention span {
   );
   background-repeat: no-repeat;
 }
-.timeline.contextual > li .replies li:last-child .status {
+.timeline.contextual > li.thread .replies li {
+  --left: calc(50px + 16px + 12px);
+}
+.timeline.contextual > li .replies li:last-child {
   background-size: 100% 20px;
 }
 .timeline.contextual > li .replies li:before {
@@ -287,7 +293,7 @@ a.mention span {
   transform: rotate(45deg);
 }
 .timeline.contextual > li.thread .replies li:before {
-  left: calc(50px + 16px + 16px);
+  left: calc(50px + 16px + 12px);
 }
 .timeline.contextual.loading > li:not(.hero) {
   opacity: 0.5;
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 3a259828..9b958a14 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -129,7 +129,11 @@ function StatusPage({ id }) {
             accountID: s.account.id,
             descendant: true,
             thread: s.account.id === heroStatus.account.id,
-            replies: s.__replies?.map((r) => r.id),
+            replies: s.__replies?.map((r) => ({
+              id: r.id,
+              repliesCount: r.repliesCount,
+              content: r.content,
+            })),
           })),
         ];
 
@@ -380,14 +384,22 @@ function SubComments({
         {replies.length === 1 ? 'y' : 'ies'}
       </summary>
       <ul>
-        {replies.map((replyID) => (
-          <li key={replyID}>
+        {replies.map((r) => (
+          <li key={r.id}>
             <Link
               class="status-link"
-              href={`#/s/${replyID}`}
+              href={`#/s/${r.id}`}
               onClick={onStatusLinkClick}
             >
-              <Status statusID={replyID} withinContext size="s" />
+              <Status statusID={r.id} withinContext size="s" />
+              {r.repliesCount > 0 && (
+                <div class="replies-link">
+                  <Icon icon="comment" />{' '}
+                  <span title={r.repliesCount}>
+                    {shortenNumber(r.repliesCount)}
+                  </span>
+                </div>
+              )}
             </Link>
           </li>
         ))}