diff --git a/src/app.css b/src/app.css index 089a11a4..47e04d6a 100644 --- a/src/app.css +++ b/src/app.css @@ -1113,6 +1113,15 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { padding: 6px; } +.status-carousel.boosts-carousel .timeline-item-carousel-group { + flex-direction: column; + gap: 8px; + + &:before { + content: ''; + } +} + .ui-state { padding: 16px; text-align: center; diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index d35692fb..9113f650 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -572,7 +572,7 @@ const TimelineItem = memo( : `/s/${actualStatusID}`; if (items) { - const fItems = filteredItems(items, filterContext); + let fItems = filteredItems(items, filterContext); let title = ''; if (type === 'boosts') { title = `${fItems.length} Boosts`; @@ -581,6 +581,7 @@ const TimelineItem = memo( } const isCarousel = type === 'boosts' || type === 'pinned'; if (isCarousel) { + const filteredItemsIDs = new Set(); // Here, we don't hide filtered posts, but we sort them last fItems.sort((a, b) => { // if (a._filtered && !b._filtered) { @@ -591,6 +592,8 @@ const TimelineItem = memo( // } const aFiltered = isFiltered(a.filtered, filterContext); const bFiltered = isFiltered(b.filtered, filterContext); + if (aFiltered) filteredItemsIDs.add(a.id); + if (bFiltered) filteredItemsIDs.add(b.id); if (aFiltered && !bFiltered) { return 1; } @@ -599,11 +602,69 @@ const TimelineItem = memo( } return 0; }); + + if (filteredItemsIDs.size >= 2) { + const GROUP_SIZE = 5; + // If 2 or more, group filtered items into one, limit to GROUP_SIZE in a group + const unfiltered = []; + const filtered = []; + fItems.forEach((item) => { + if (filteredItemsIDs.has(item.id)) { + filtered.push(item); + } else { + unfiltered.push(item); + } + }); + const filteredItems = []; + for (let i = 0; i < filtered.length; i += GROUP_SIZE) { + filteredItems.push({ + _grouped: true, + posts: filtered.slice(i, i + GROUP_SIZE), + }); + } + fItems = unfiltered.concat(filteredItems); + } + return ( + ); + } + const actualStatusID = reblog?.id || statusID; const url = instance ? `/${instance}/s/${actualStatusID}`