Group filtered carousel items

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;

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 (
           <li key={`timeline-${statusID}`} class="timeline-item-carousel">
             <StatusCarousel title={title} class={`${type}-carousel`}>
               {fItems.map((item) => {
-                const { id: statusID, reblog, _pinned } = item;
+                const { id: statusID, reblog, _pinned, _grouped } = item;
+                if (_grouped) {
+                  return (
+                    <li key={statusID} class="timeline-item-carousel-group">
+                      {item.posts.map((item) => {
+                        const { id: statusID, reblog, _pinned } = item;
+                        const actualStatusID = reblog?.id || statusID;
+                        const url = instance
+                          ? `/${instance}/s/${actualStatusID}`
+                          : `/s/${actualStatusID}`;
+                        if (_pinned) useItemID = false;
+                        return (
+                          <Link
+                            class="status-carousel-link timeline-item-alt"
+                            to={url}
+                          >
+                            {useItemID ? (
+                              <Status
+                                statusID={statusID}
+                                instance={instance}
+                                size="s"
+                              />
+                            ) : (
+                              <Status
+                                status={item}
+                                instance={instance}
+                                size="s"
+                              />
+                            )}
+                          </Link>
+                        );
+                      })}
+                    </li>
+                  );
+                }
+
                 const actualStatusID = reblog?.id || statusID;
                 const url = instance
                   ? `/${instance}/s/${actualStatusID}`