this repo has no description
Group filtered carousel items
+72
-2
+9
src/app.css
+9
src/app.css
···
1113
1113
padding: 6px;
1114
1114
}
1115
1115
1116
+
.status-carousel.boosts-carousel .timeline-item-carousel-group {
1117
+
flex-direction: column;
1118
+
gap: 8px;
1119
+
1120
+
&:before {
1121
+
content: '';
1122
+
}
1123
+
}
1124
+
1116
1125
.ui-state {
1117
1126
padding: 16px;
1118
1127
text-align: center;
+63
-2
src/components/timeline.jsx
+63
-2
src/components/timeline.jsx
···
572
572
: `/s/${actualStatusID}`;
573
573
574
574
if (items) {
575
-
const fItems = filteredItems(items, filterContext);
575
+
let fItems = filteredItems(items, filterContext);
576
576
let title = '';
577
577
if (type === 'boosts') {
578
578
title = `${fItems.length} Boosts`;
···
581
581
}
582
582
const isCarousel = type === 'boosts' || type === 'pinned';
583
583
if (isCarousel) {
584
+
const filteredItemsIDs = new Set();
584
585
// Here, we don't hide filtered posts, but we sort them last
585
586
fItems.sort((a, b) => {
586
587
// if (a._filtered && !b._filtered) {
···
591
592
// }
592
593
const aFiltered = isFiltered(a.filtered, filterContext);
593
594
const bFiltered = isFiltered(b.filtered, filterContext);
595
+
if (aFiltered) filteredItemsIDs.add(a.id);
596
+
if (bFiltered) filteredItemsIDs.add(b.id);
594
597
if (aFiltered && !bFiltered) {
595
598
return 1;
596
599
}
···
599
602
}
600
603
return 0;
601
604
});
605
+
606
+
if (filteredItemsIDs.size >= 2) {
607
+
const GROUP_SIZE = 5;
608
+
// If 2 or more, group filtered items into one, limit to GROUP_SIZE in a group
609
+
const unfiltered = [];
610
+
const filtered = [];
611
+
fItems.forEach((item) => {
612
+
if (filteredItemsIDs.has(item.id)) {
613
+
filtered.push(item);
614
+
} else {
615
+
unfiltered.push(item);
616
+
}
617
+
});
618
+
const filteredItems = [];
619
+
for (let i = 0; i < filtered.length; i += GROUP_SIZE) {
620
+
filteredItems.push({
621
+
_grouped: true,
622
+
posts: filtered.slice(i, i + GROUP_SIZE),
623
+
});
624
+
}
625
+
fItems = unfiltered.concat(filteredItems);
626
+
}
627
+
602
628
return (
603
629
<li key={`timeline-${statusID}`} class="timeline-item-carousel">
604
630
<StatusCarousel title={title} class={`${type}-carousel`}>
605
631
{fItems.map((item) => {
606
-
const { id: statusID, reblog, _pinned } = item;
632
+
const { id: statusID, reblog, _pinned, _grouped } = item;
633
+
if (_grouped) {
634
+
return (
635
+
<li key={statusID} class="timeline-item-carousel-group">
636
+
{item.posts.map((item) => {
637
+
const { id: statusID, reblog, _pinned } = item;
638
+
const actualStatusID = reblog?.id || statusID;
639
+
const url = instance
640
+
? `/${instance}/s/${actualStatusID}`
641
+
: `/s/${actualStatusID}`;
642
+
if (_pinned) useItemID = false;
643
+
return (
644
+
<Link
645
+
class="status-carousel-link timeline-item-alt"
646
+
to={url}
647
+
>
648
+
{useItemID ? (
649
+
<Status
650
+
statusID={statusID}
651
+
instance={instance}
652
+
size="s"
653
+
/>
654
+
) : (
655
+
<Status
656
+
status={item}
657
+
instance={instance}
658
+
size="s"
659
+
/>
660
+
)}
661
+
</Link>
662
+
);
663
+
})}
664
+
</li>
665
+
);
666
+
}
667
+
607
668
const actualStatusID = reblog?.id || statusID;
608
669
const url = instance
609
670
? `/${instance}/s/${actualStatusID}`