From 33b55c937b0a912a2796cb2e6cd40838f2a23794 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 21 Dec 2023 13:32:32 +0800
Subject: [PATCH] Fix hide-filtered items appearing in boost carousel

---
 src/components/timeline.jsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index e390133e..99644dca 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -5,7 +5,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import { useSnapshot } from 'valtio';
 
 import FilterContext from '../utils/filter-context';
-import { isFiltered } from '../utils/filters';
+import { filteredItems, isFiltered } from '../utils/filters';
 import states, { statusKey } from '../utils/states';
 import statusPeek from '../utils/status-peek';
 import { groupBoosts, groupContext } from '../utils/timeline-utils';
@@ -496,9 +496,10 @@ function TimelineItem({
   }
   const isCarousel = type === 'boosts' || type === 'pinned';
   if (items) {
+    const fItems = filteredItems(items, filterContext);
     if (isCarousel) {
       // Here, we don't hide filtered posts, but we sort them last
-      items.sort((a, b) => {
+      fItems.sort((a, b) => {
         // if (a._filtered && !b._filtered) {
         //   return 1;
         // }
@@ -518,7 +519,7 @@ function TimelineItem({
       return (
         <li key={`timeline-${statusID}`} class="timeline-item-carousel">
           <StatusCarousel title={title} class={`${type}-carousel`}>
-            {items.map((item) => {
+            {fItems.map((item) => {
               const { id: statusID, reblog, _pinned } = item;
               const actualStatusID = reblog?.id || statusID;
               const url = instance
@@ -555,11 +556,11 @@ function TimelineItem({
         </li>
       );
     }
-    const manyItems = items.length > 3;
-    return items.map((item, i) => {
+    const manyItems = fItems.length > 3;
+    return fItems.map((item, i) => {
       const { id: statusID, _differentAuthor } = item;
       const url = instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`;
-      const isMiddle = i > 0 && i < items.length - 1;
+      const isMiddle = i > 0 && i < fItems.length - 1;
       const isSpoiler = item.sensitive && !!item.spoilerText;
       const showCompact =
         (!_differentAuthor && isSpoiler && i > 0) ||
@@ -568,10 +569,10 @@ function TimelineItem({
           (type === 'thread' ||
             (type === 'conversation' &&
               !_differentAuthor &&
-              !items[i - 1]._differentAuthor &&
-              !items[i + 1]._differentAuthor)));
+              !fItems[i - 1]._differentAuthor &&
+              !fItems[i + 1]._differentAuthor)));
       const isStart = i === 0;
-      const isEnd = i === items.length - 1;
+      const isEnd = i === fItems.length - 1;
       return (
         <li
           key={`timeline-${statusID}`}