diff --git a/src/app.css b/src/app.css
index d633c18d..f499a08f 100644
--- a/src/app.css
+++ b/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
- > .status-link
- + .replies
- > summary {
- margin-left: calc(
- var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
- );
+ .replies[data-comments-level='4']:has(.replies)
+ > .replies-summary {
+ border-top: 2px dashed var(--divider-color);
+}
+.timeline.contextual
+ .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 {
- margin-left: calc(var(--thread-start) + var(--line-margin-end));
+ .replies-summary {
+ 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[open] > summary {
+.timeline.contextual > li .replies > .replies-summary:active,
+.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;
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 2047d49e..be6aa0b8 100644
--- a/src/pages/status.jsx
+++ b/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) => ({
- 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,
- })),
- })),
- })),
+ replies: expandReplies(s.__replies),
})),
];
@@ -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>