this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Smarter collapsing, show total comments count, show 3 avatars

+41 -10
+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
··· 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 + &middot;{' '} 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) => (