this repo has no description
Smarter collapsing, show total comments count, show 3 avatars
+41
-10
+3
-2
src/app.css
+3
-2
src/app.css
···
344
344
list-style: none;
345
345
}
346
346
.timeline.contextual > li .replies > summary {
347
-
padding: 8px 16px;
347
+
padding: 8px;
348
348
background-color: var(--bg-faded-color);
349
349
display: inline-block;
350
350
border-radius: 8px;
351
351
cursor: pointer;
352
352
text-transform: uppercase;
353
-
font-weight: bold;
353
+
font-weight: 500;
354
354
font-size: 12px;
355
355
color: var(--text-insignificant-color);
356
356
user-select: none;
357
357
box-shadow: 0 0 0 2px var(--bg-color);
358
358
position: relative;
359
359
list-style: none;
360
+
white-space: nowrap;
360
361
}
361
362
.timeline.contextual > li .replies > summary::-webkit-details-marker {
362
363
display: none;
+38
-8
src/pages/status.jsx
+38
-8
src/pages/status.jsx
···
671
671
}
672
672
673
673
function SubComments({ hasManyStatuses, replies }) {
674
-
// If less than or 2 replies and total number of characters of content from replies is less than 500
674
+
// Set isBrief = true:
675
+
// - if less than or 2 replies
676
+
// - if replies have no sub-replies
677
+
// - if total number of characters of content from replies is less than 500
675
678
let isBrief = false;
676
679
if (replies.length <= 2) {
677
-
let totalLength = replies.reduce((acc, reply) => {
678
-
const { content } = reply;
679
-
const length = htmlContentLength(content);
680
-
return acc + length;
681
-
}, 0);
682
-
isBrief = totalLength < 500;
680
+
const containsSubReplies = replies.some(
681
+
(r) => r.repliesCount > 0 || r.replies?.length > 0,
682
+
);
683
+
if (!containsSubReplies) {
684
+
let totalLength = replies.reduce((acc, reply) => {
685
+
const { content } = reply;
686
+
const length = htmlContentLength(content);
687
+
return acc + length;
688
+
}, 0);
689
+
isBrief = totalLength < 500;
690
+
}
683
691
}
684
692
693
+
// Total comments count, including sub-replies
694
+
const diveDeep = (replies) => {
695
+
return replies.reduce((acc, reply) => {
696
+
const { repliesCount, replies } = reply;
697
+
const count = replies?.length || repliesCount;
698
+
return acc + count + diveDeep(replies || []);
699
+
}, 0);
700
+
};
701
+
const totalComments = replies.length + diveDeep(replies);
702
+
const sameCount = replies.length === totalComments;
703
+
685
704
// Get the first 3 accounts, unique by id
686
705
const accounts = replies
687
706
.map((r) => r.account)
688
707
.filter((a, i, arr) => arr.findIndex((b) => b.id === a.id) === i)
689
-
.slice(0, 5);
708
+
.slice(0, 3);
690
709
691
710
const open = isBrief || !hasManyStatuses;
692
711
···
707
726
repl
708
727
{replies.length === 1 ? 'y' : 'ies'}
709
728
</span>
729
+
{!sameCount && totalComments > 1 && (
730
+
<>
731
+
{' '}
732
+
·{' '}
733
+
<span>
734
+
<span title={totalComments}>{shortenNumber(totalComments)}</span>{' '}
735
+
comment
736
+
{totalComments === 1 ? '' : 's'}
737
+
</span>
738
+
</>
739
+
)}
710
740
</summary>
711
741
<ul>
712
742
{replies.map((r) => (