From 66216e911e8ac4e2c88590fa650cb92e332a3ae6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 29 Jan 2023 01:29:26 +0800
Subject: [PATCH] At this point, might as well support level 4

Also still need to show the comment icon IF THERE'S LEVEL 5++
---
 src/app.css          | 70 +++++++++++++++++++++++++++++++++++++++++---
 src/pages/status.jsx | 15 +++++++---
 2 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/src/app.css b/src/app.css
index f72ba42a..3b152138 100644
--- a/src/app.css
+++ b/src/app.css
@@ -208,6 +208,18 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
       var(--line-margin-end)
   );
 }
+.timeline.contextual
+  > li.descendant.thread
+  > .status-link
+  + .replies
+  .replies
+  .replies
+  > summary {
+  margin-left: calc(
+    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
+      (var(--line-margin-end) * 2)
+  );
+}
 .timeline.contextual
   > li.descendant.thread
   > .status-link
@@ -228,6 +240,18 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
       var(--line-margin-end)
   );
 }
+.timeline.contextual
+  > li.descendant.thread
+  > .status-link
+  + .replies
+  .replies
+  .replies
+  .status-link {
+  padding-left: calc(
+    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
+      (var(--line-margin-end) * 2)
+  );
+}
 .timeline.contextual
   > li.descendant:not(.thread)
   > .status-link
@@ -245,6 +269,17 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
   );
 }
+.timeline.contextual
+  > li.descendant:not(.thread)
+  > .status-link
+  + .replies
+  .replies
+  .replies
+  > summary {
+  margin-left: calc(
+    var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2)
+  );
+}
 .timeline.contextual
   > li.descendant:not(.thread)
   > .status-link
@@ -258,7 +293,16 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   + .replies
   .replies
   .status-link {
-  --line-margin-end: 32px;
+  padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 2));
+}
+.timeline.contextual
+  > li.descendant:not(.thread)
+  > .status-link
+  + .replies
+  .replies
+  .replies
+  .status-link {
+  padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 3));
 }
 .timeline.contextual > li.descendant:not(.thread):before {
   content: '';
@@ -351,9 +395,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   background-repeat: no-repeat;
 }
 .timeline.contextual > li .replies .replies li {
-  --line-start: calc(
-    var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
-  );
+  --line-start: calc(var(--thread-start) + (var(--line-margin-end) * 2));
+}
+.timeline.contextual > li .replies .replies .replies li {
+  --line-start: calc(var(--thread-start) + (var(--line-margin-end) * 3));
 }
 .timeline.contextual > li.thread .replies li {
   --line-start: calc(
@@ -366,6 +411,12 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
       var(--line-margin-end)
   );
 }
+.timeline.contextual > li.thread .replies .replies .replies li {
+  --line-start: calc(
+    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
+      (var(--line-margin-end) * 2)
+  );
+}
 .timeline.contextual > li .replies li:last-child {
   background-size: 100% 20px;
 }
@@ -387,6 +438,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
   );
 }
+.timeline.contextual > li .replies .replies .replies li:before {
+  --line-start: calc(
+    var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2)
+  );
+}
 .timeline.contextual > li.thread .replies li:before {
   --line-start: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
@@ -398,6 +454,12 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
       var(--line-margin-end)
   );
 }
+.timeline.contextual > li.thread .replies .replies .replies li:before {
+  --line-start: calc(
+    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
+      (var(--line-margin-end) * 2)
+  );
+}
 .timeline.contextual.loading > li:not(.hero) {
   /* opacity: 0.5; */
   pointer-events: none;
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index aee39437..a5602f3b 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -144,8 +144,8 @@ function StatusPage() {
               }
               parent.__replies.push(status);
             } else {
-              // If no parent, it's probably a reply to a reply to a reply, level 3
-              console.warn('[LEVEL 3] No parent found for', status);
+              // If no parent, something is wrong
+              console.warn('No parent found for', status);
             }
           }
         });
@@ -175,6 +175,13 @@ function StatusPage() {
                 account: r2.account,
                 repliesCount: r2.repliesCount,
                 content: r2.content,
+                replies: r2.__replies?.map((r3) => ({
+                  // Level 4
+                  id: r3.id,
+                  account: r3.account,
+                  repliesCount: r3.repliesCount,
+                  content: r3.content,
+                })),
               })),
             })),
           })),
@@ -703,14 +710,14 @@ function SubComments({ hasManyStatuses, replies }) {
               }}
             >
               <Status statusID={r.id} withinContext size="s" />
-              {/* {r.repliesCount > 0 && (
+              {!r.replies?.length && r.repliesCount > 0 && (
                 <div class="replies-link">
                   <Icon icon="comment" />{' '}
                   <span title={r.repliesCount}>
                     {shortenNumber(r.repliesCount)}
                   </span>
                 </div>
-              )} */}
+              )}
             </Link>
             {r.replies?.length && (
               <SubComments