It's time to level up ALL replies

When reach level 4, horizontal scrolling will kick in!

src/app.css

@@ -216,21 +216,40 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .timeline.contextual > li.descendant:not(.thread) > .status-link {
   padding-left: 40px;
 }
+.timeline.contextual .replies[data-comments-level='4'] {
+  overflow: auto;
+}
+.timeline.contextual .replies[data-comments-level='4']:has(.replies) {
+  overflow: auto;
+  mask-image: linear-gradient(to left, transparent, black 32px);
+}
 .timeline.contextual
-  > li.descendant.thread
+  .replies[data-comments-level='4']:has(.replies)
-  > .status-link
+  > .replies-summary {
-  + .replies
+  border-top: 2px dashed var(--divider-color);
-  > summary {
+}
-  margin-left: calc(
+.timeline.contextual
-    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
+  .replies[data-comments-level='4']
-  );
+  .replies[data-comments-level-overflow='true']
+  .status {
+  min-width: min(15em, 75vw);
 }
 .timeline.contextual
+  > li.descendant.thread
+  > .status-link
+  + .replies
+  .replies-summary {
+  margin-left: calc(
+    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
+      (var(--line-margin-end) * (var(--comments-level) - 1))
+  );
+}
+/* .timeline.contextual
   > li.descendant.thread
   > .status-link
   + .replies
   .replies
-  > summary {
+  > .replies-summary {
   margin-left: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
       var(--line-margin-end)
@@ -242,22 +261,23 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   + .replies
   .replies
   .replies
-  > summary {
+  > .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
   + .replies
   .status-link {
   padding-left: calc(
-    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
+    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
+      (var(--line-margin-end) * (var(--comments-level) - 1))
   );
 }
-.timeline.contextual
+/* .timeline.contextual
   > li.descendant.thread
   > .status-link
   + .replies
@@ -279,20 +299,22 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
       (var(--line-margin-end) * 2)
   );
-}
+} */
 .timeline.contextual
   > li.descendant:not(.thread)
   > .status-link
   + .replies
-  > summary {
+  .replies-summary {
-  margin-left: calc(var(--thread-start) + var(--line-margin-end));
+  margin-left: calc(
+    var(--thread-start) + var(--line-margin-end) * var(--comments-level)
+  );
 }
-.timeline.contextual
+/* .timeline.contextual
   > li.descendant:not(.thread)
   > .status-link
   + .replies
   .replies
-  > summary {
+  > .replies-summary {
   margin-left: calc(
     var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
   );
@@ -303,19 +325,21 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   + .replies
   .replies
   .replies
-  > summary {
+  > .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
   + .replies
   .status-link {
-  padding-left: calc(var(--thread-start) + var(--line-margin-end));
+  padding-left: calc(
+    var(--thread-start) + var(--line-margin-end) * var(--comments-level)
+  );
 }
-.timeline.contextual
+/* .timeline.contextual
   > li.descendant:not(.thread)
   > .status-link
   + .replies
@@ -331,7 +355,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   .replies
   .status-link {
   padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 3));
-}
+} */
 .timeline.contextual > li.descendant:not(.thread):before {
   content: '';
   position: absolute;
@@ -368,7 +392,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   padding: 0;
   list-style: none;
 }
-.timeline.contextual > li .replies > summary {
+.timeline.contextual > li .replies > .replies-summary {
   padding: 8px;
   background-color: var(--bg-faded-color);
   display: inline-block;
@@ -384,17 +408,17 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   list-style: none;
   white-space: nowrap;
 }
-.timeline.contextual > li .replies > summary::-webkit-details-marker {
+.timeline.contextual > li .replies > .replies-summary::-webkit-details-marker {
   display: none;
 }
-.timeline.contextual > li .replies > summary > * {
+.timeline.contextual > li .replies > .replies-summary > * {
   vertical-align: middle;
 }
-.timeline.contextual > li .replies > summary .avatars {
+.timeline.contextual > li .replies > .replies-summary .avatars {
   margin-right: 8px;
 }
-.timeline.contextual > li .replies > summary:active,
+.timeline.contextual > li .replies > .replies-summary:active,
-.timeline.contextual > li .replies[open] > summary {
+.timeline.contextual > li .replies[open] > .replies-summary {
   color: var(--text-color);
   background-color: var(--comment-line-color);
   background-image: linear-gradient(
@@ -403,17 +427,19 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     var(--bg-faded-color)
   );
 }
-.timeline.contextual > li .replies[open] > summary {
+.timeline.contextual > li .replies[open] > .replies-summary {
   border-bottom-left-radius: 0;
 }
-.timeline.contextual > li .replies summary[hidden] {
+.timeline.contextual > li .replies .replies-summary[hidden] {
   display: none;
 }
 .timeline.contextual > li .replies li {
   position: relative;
 }
 .timeline.contextual > li .replies li {
-  --line-start: calc(var(--thread-start) + var(--line-margin-end));
+  --line-start: calc(
+    var(--thread-start) + var(--line-margin-end) * var(--comments-level)
+  );
   --line-end: calc(var(--line-start) + var(--line-width));
   background-image: linear-gradient(
     to right,
@@ -426,18 +452,19 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   );
   background-repeat: no-repeat;
 }
-.timeline.contextual > li .replies .replies li {
+/* .timeline.contextual > li .replies .replies li {
   --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(
-    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
+    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
+      (var(--line-margin-end) * (var(--comments-level) - 1))
   );
 }
-.timeline.contextual > li.thread .replies .replies li {
+/* .timeline.contextual > li.thread .replies .replies li {
   --line-start: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
       var(--line-margin-end)
@@ -448,7 +475,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     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;
 }
@@ -465,7 +492,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   border-color: transparent transparent var(--comment-line-color) transparent;
   transform: rotate(45deg);
 }
-.timeline.contextual > li .replies .replies li:before {
+/* .timeline.contextual > li .replies .replies li:before {
   --line-start: calc(
     var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
   );
@@ -474,13 +501,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   --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)
+    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
+      (var(--line-margin-end) * (var(--comments-level) - 1))
   );
 }
-.timeline.contextual > li.thread .replies .replies li:before {
+/* .timeline.contextual > li.thread .replies .replies li:before {
   --line-start: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
       var(--line-margin-end)
@@ -491,7 +519,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     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;

src/pages/status.jsx

@@ -170,6 +170,16 @@ function StatusPage() {
 
         console.log({ ancestors, descendants, nestedDescendants });
 
+        function expandReplies(_replies) {
+          return _replies?.map((_r) => ({
+            id: _r.id,
+            account: _r.account,
+            repliesCount: _r.repliesCount,
+            content: _r.content,
+            replies: expandReplies(_r.__replies),
+          }));
+        }
+
         const allStatuses = [
           ...ancestors.map((s) => ({
             id: s.id,
@@ -182,26 +192,7 @@ function StatusPage() {
             accountID: s.account.id,
             descendant: true,
             thread: s.account.id === heroStatus.account.id,
-            replies: s.__replies?.map((r) => ({
+            replies: expandReplies(s.__replies),
-              id: r.id,
-              account: r.account,
-              repliesCount: r.repliesCount,
-              content: r.content,
-              replies: r.__replies?.map((r2) => ({
-                // Level 3
-                id: r2.id,
-                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,
-                })),
-              })),
-            })),
           })),
         ];
 
@@ -754,6 +745,7 @@ function StatusPage() {
                       hasManyStatuses={hasManyStatuses}
                       replies={replies}
                       hasParentThread={thread}
+                      level={1}
                     />
                   )}
                   {uiState === 'loading' &&
@@ -833,7 +825,13 @@ function StatusPage() {
   );
 }
 
-function SubComments({ hasManyStatuses, replies, instance, hasParentThread }) {
+function SubComments({
+  hasManyStatuses,
+  replies,
+  instance,
+  hasParentThread,
+  level,
+}) {
   // Set isBrief = true:
   // - if less than or 2 replies
   // - if replies have no sub-replies
@@ -883,8 +881,13 @@ function SubComments({ hasManyStatuses, replies, instance, hasParentThread }) {
         // use first reply as ID
         cachedRepliesToggle[replies[0].id] = open;
       }}
+      style={{
+        '--comments-level': level,
+      }}
+      data-comments-level={level}
+      data-comments-level-overflow={level > 4}
     >
-      <summary hidden={open}>
+      <summary class="replies-summary" hidden={open}>
         <span class="avatars">
           {accounts.map((a) => (
             <Avatar
@@ -942,6 +945,7 @@ function SubComments({ hasManyStatuses, replies, instance, hasParentThread }) {
                 instance={instance}
                 hasManyStatuses={hasManyStatuses}
                 replies={r.replies}
+                level={level + 1}
               />
             )}
           </li>