Breaking: rewrote filters implementation

src/components/media-post.jsx

@@ -1,9 +1,13 @@
 import './media-post.css';
 
 import { memo } from 'preact/compat';
+import { useContext, useMemo } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
 
+import FilterContext from '../utils/filter-context';
+import { isFiltered } from '../utils/filters';
 import states, { statusKey } from '../utils/states';
+import store from '../utils/store';
 
 import Media from './media';
 
@@ -13,7 +17,7 @@ function MediaPost({
   status,
   instance,
   parent,
-  allowFilters,
+  // allowFilters,
   onMediaClick,
 }) {
   let sKey = statusKey(statusID, instance);
@@ -68,7 +72,7 @@ function MediaPost({
     // Non-API props
     _deleted,
     _pinned,
-    _filtered,
+    // _filtered,
   } = status;
 
   if (!mediaAttachments?.length) {
@@ -83,6 +87,20 @@ function MediaPost({
     }
   };
 
+  const currentAccount = useMemo(() => {
+    return store.session.get('currentAccount');
+  }, []);
+  const isSelf = useMemo(() => {
+    return currentAccount && currentAccount === accountId;
+  }, [accountId, currentAccount]);
+
+  const filterContext = useContext(FilterContext);
+  const filterInfo = !isSelf && isFiltered(filtered, filterContext);
+
+  if (filterInfo?.action === 'hide') {
+    return null;
+  }
+
   console.debug('RENDER Media post', id, status?.account.displayName);
 
   // const readingExpandSpoilers = useMemo(() => {
@@ -95,6 +113,7 @@ function MediaPost({
 
   return mediaAttachments.map((media, i) => {
     const mediaKey = `${sKey}-${media.id}`;
+    const filterTitleStr = filterInfo?.titlesStr;
     return (
       <Parent
         onMouseEnter={debugHover}
@@ -102,10 +121,14 @@ function MediaPost({
         data-spoiler-text={
           spoilerText || (sensitive ? 'Sensitive media' : undefined)
         }
-        data-filtered-text={_filtered ? 'Filtered' : undefined}
+        data-filtered-text={
+          filterInfo
+            ? `Filtered${filterTitleStr ? `: ${filterTitleStr}` : ''}`
+            : undefined
+        }
         class={`
           media-post
-          ${allowFilters && _filtered ? 'filtered' : ''}
+          ${filterInfo ? 'filtered' : ''}
           ${hasSpoiler ? 'has-spoiler' : ''}
         `}
       >

src/components/status.jsx

@@ -13,6 +13,7 @@ import pThrottle from 'p-throttle';
 import { memo } from 'preact/compat';
 import {
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -34,6 +35,8 @@ import Poll from '../components/poll';
 import { api } from '../utils/api';
 import emojifyText from '../utils/emojify-text';
 import enhanceContent from '../utils/enhance-content';
+import FilterContext from '../utils/filter-context';
+import { isFiltered } from '../utils/filters';
 import getTranslateTargetLanguage from '../utils/get-translate-target-language';
 import getHTMLText from '../utils/getHTMLText';
 import handleContentLinks from '../utils/handle-content-links';
@@ -90,7 +93,7 @@ function Status({
   enableTranslate,
   forceTranslate: _forceTranslate,
   previewMode,
-  allowFilters,
+  // allowFilters,
   onMediaClick,
   quoted,
   onStatusLinkClick = () => {},
@@ -166,9 +169,24 @@ function Status({
     // Non-API props
     _deleted,
     _pinned,
-    _filtered,
+    // _filtered,
   } = status;
 
+  const currentAccount = useMemo(() => {
+    return store.session.get('currentAccount');
+  }, []);
+  const isSelf = useMemo(() => {
+    return currentAccount && currentAccount === accountId;
+  }, [accountId, currentAccount]);
+
+  const filterContext = useContext(FilterContext);
+  const filterInfo =
+    !isSelf && !readOnly && !previewMode && isFiltered(filtered, filterContext);
+
+  if (filterInfo?.action === 'hide') {
+    return null;
+  }
+
   console.debug('RENDER Status', id, status?.account.displayName, quoted);
 
   const debugHover = (e) => {
@@ -179,11 +197,11 @@ function Status({
     }
   };
 
-  if (allowFilters && size !== 'l' && _filtered) {
+  if (/*allowFilters && */ size !== 'l' && filterInfo) {
     return (
       <FilteredStatus
         status={status}
-        filterInfo={_filtered}
+        filterInfo={filterInfo}
         instance={instance}
         containerProps={{
           onMouseEnter: debugHover,
@@ -195,13 +213,6 @@ function Status({
   const createdAtDate = new Date(createdAt);
   const editedAtDate = new Date(editedAt);
 
-  const currentAccount = useMemo(() => {
-    return store.session.get('currentAccount');
-  }, []);
-  const isSelf = useMemo(() => {
-    return currentAccount && currentAccount === accountId;
-  }, [accountId, currentAccount]);
-
   let inReplyToAccountRef = mentions?.find(
     (mention) => mention.id === inReplyToAccountId,
   );

src/components/timeline.jsx

@@ -4,6 +4,8 @@ import { InView } from 'react-intersection-observer';
 import { useDebouncedCallback } from 'use-debounce';
 import { useSnapshot } from 'valtio';
 
+import FilterContext from '../utils/filter-context';
+import { isFiltered } from '../utils/filters';
 import states, { statusKey } from '../utils/states';
 import statusPeek from '../utils/status-peek';
 import { groupBoosts, groupContext } from '../utils/timeline-utils';
@@ -13,7 +15,6 @@ import useScroll from '../utils/useScroll';
 
 import Icon from './icon';
 import Link from './link';
-import Media from './media';
 import MediaPost from './media-post';
 import NavMenu from './nav-menu';
 import Status from './status';
@@ -39,9 +40,10 @@ function Timeline({
   headerStart,
   headerEnd,
   timelineStart,
-  allowFilters,
+  // allowFilters,
   refresh,
   view,
+  filterContext,
 }) {
   const snapStates = useSnapshot(states);
   const [items, setItems] = useState([]);
@@ -285,172 +287,182 @@ function Timeline({
   const hiddenUI = scrollDirection === 'end' && !nearReachStart;
 
   return (
-    <div
+    <FilterContext.Provider value={filterContext}>
-      id={`${id}-page`}
+      <div
-      class="deck-container"
+        id={`${id}-page`}
-      ref={(node) => {
+        class="deck-container"
-        scrollableRef.current = node;
+        ref={(node) => {
-        jRef.current = node;
+          scrollableRef.current = node;
-        kRef.current = node;
+          jRef.current = node;
-        oRef.current = node;
+          kRef.current = node;
-      }}
+          oRef.current = node;
-      tabIndex="-1"
+        }}
-    >
+        tabIndex="-1"
-      <div class="timeline-deck deck">
+      >
-        <header
+        <div class="timeline-deck deck">
-          hidden={hiddenUI}
+          <header
-          onClick={(e) => {
+            hidden={hiddenUI}
-            if (!e.target.closest('a, button')) {
+            onClick={(e) => {
-              scrollableRef.current?.scrollTo({
+              if (!e.target.closest('a, button')) {
-                top: 0,
+                scrollableRef.current?.scrollTo({
-                behavior: 'smooth',
+                  top: 0,
-              });
+                  behavior: 'smooth',
-            }
+                });
-          }}
+              }
-          onDblClick={(e) => {
+            }}
-            if (!e.target.closest('a, button')) {
+            onDblClick={(e) => {
-              loadItems(true);
+              if (!e.target.closest('a, button')) {
-            }
+                loadItems(true);
-          }}
+              }
-          class={uiState === 'loading' ? 'loading' : ''}
+            }}
-        >
+            class={uiState === 'loading' ? 'loading' : ''}
-          <div class="header-grid">
-            <div class="header-side">
-              <NavMenu />
-              {headerStart !== null && headerStart !== undefined ? (
-                headerStart
-              ) : (
-                <Link to="/" class="button plain home-button">
-                  <Icon icon="home" size="l" />
-                </Link>
-              )}
-            </div>
-            {title && (titleComponent ? titleComponent : <h1>{title}</h1>)}
-            <div class="header-side">
-              {/* <Loader hidden={uiState !== 'loading'} /> */}
-              {!!headerEnd && headerEnd}
-            </div>
-          </div>
-          {items.length > 0 &&
-            uiState !== 'loading' &&
-            !hiddenUI &&
-            showNew && (
-              <button
-                class="updates-button shiny-pill"
-                type="button"
-                onClick={() => {
-                  loadItems(true);
-                  scrollableRef.current?.scrollTo({
-                    top: 0,
-                    behavior: 'smooth',
-                  });
-                }}
-              >
-                <Icon icon="arrow-up" /> New posts
-              </button>
-            )}
-        </header>
-        {!!timelineStart && (
-          <div
-            class={`timeline-start ${uiState === 'loading' ? 'loading' : ''}`}
           >
-            {timelineStart}
+            <div class="header-grid">
-          </div>
+              <div class="header-side">
-        )}
+                <NavMenu />
-        {!!items.length ? (
+                {headerStart !== null && headerStart !== undefined ? (
-          <>
+                  headerStart
-            <ul class={`timeline ${view ? `timeline-${view}` : ''}`}>
+                ) : (
-              {items.map((status) => (
+                  <Link to="/" class="button plain home-button">
-                <TimelineItem
+                    <Icon icon="home" size="l" />
-                  status={status}
+                  </Link>
-                  instance={instance}
+                )}
-                  useItemID={useItemID}
+              </div>
-                  allowFilters={allowFilters}
+              {title && (titleComponent ? titleComponent : <h1>{title}</h1>)}
-                  key={status.id + status?._pinned}
+              <div class="header-side">
-                  view={view}
+                {/* <Loader hidden={uiState !== 'loading'} /> */}
-                />
+                {!!headerEnd && headerEnd}
-              ))}
+              </div>
-              {showMore &&
+            </div>
-                uiState === 'loading' &&
+            {items.length > 0 &&
-                (view === 'media' ? null : (
+              uiState !== 'loading' &&
-                  <>
+              !hiddenUI &&
-                    <li
+              showNew && (
-                      style={{
+                <button
-                        height: '20vh',
+                  class="updates-button shiny-pill"
-                      }}
+                  type="button"
-                    >
+                  onClick={() => {
-                      <Status skeleton />
+                    loadItems(true);
-                    </li>
+                    scrollableRef.current?.scrollTo({
-                    <li
+                      top: 0,
-                      style={{
+                      behavior: 'smooth',
-                        height: '25vh',
+                    });
-                      }}
-                    >
-                      <Status skeleton />
-                    </li>
-                  </>
-                ))}
-            </ul>
-            {uiState === 'default' &&
-              (showMore ? (
-                <InView
-                  onChange={(inView) => {
-                    if (inView) {
-                      loadItems();
-                    }
                   }}
                 >
-                  <button
+                  <Icon icon="arrow-up" /> New posts
-                    type="button"
+                </button>
-                    class="plain block"
+              )}
-                    onClick={() => loadItems()}
+          </header>
-                    style={{ marginBlockEnd: '6em' }}
+          {!!timelineStart && (
-                  >
+            <div
-                    Show more&hellip;
+              class={`timeline-start ${uiState === 'loading' ? 'loading' : ''}`}
-                  </button>
-                </InView>
-              ) : (
-                <p class="ui-state insignificant">The end.</p>
-              ))}
-          </>
-        ) : uiState === 'loading' ? (
-          <ul class="timeline">
-            {Array.from({ length: 5 }).map((_, i) =>
-              view === 'media' ? (
-                <div
-                  style={{
-                    height: '50vh',
-                  }}
-                />
-              ) : (
-                <li key={i}>
-                  <Status skeleton />
-                </li>
-              ),
-            )}
-          </ul>
-        ) : (
-          uiState !== 'error' && <p class="ui-state">{emptyText}</p>
-        )}
-        {uiState === 'error' && (
-          <p class="ui-state">
-            {errorText}
-            <br />
-            <br />
-            <button
-              class="button plain"
-              onClick={() => loadItems(!items.length)}
             >
-              Try again
+              {timelineStart}
-            </button>
+            </div>
-          </p>
+          )}
-        )}
+          {!!items.length ? (
+            <>
+              <ul class={`timeline ${view ? `timeline-${view}` : ''}`}>
+                {items.map((status) => (
+                  <TimelineItem
+                    status={status}
+                    instance={instance}
+                    useItemID={useItemID}
+                    // allowFilters={allowFilters}
+                    filterContext={filterContext}
+                    key={status.id + status?._pinned}
+                    view={view}
+                  />
+                ))}
+                {showMore &&
+                  uiState === 'loading' &&
+                  (view === 'media' ? null : (
+                    <>
+                      <li
+                        style={{
+                          height: '20vh',
+                        }}
+                      >
+                        <Status skeleton />
+                      </li>
+                      <li
+                        style={{
+                          height: '25vh',
+                        }}
+                      >
+                        <Status skeleton />
+                      </li>
+                    </>
+                  ))}
+              </ul>
+              {uiState === 'default' &&
+                (showMore ? (
+                  <InView
+                    onChange={(inView) => {
+                      if (inView) {
+                        loadItems();
+                      }
+                    }}
+                  >
+                    <button
+                      type="button"
+                      class="plain block"
+                      onClick={() => loadItems()}
+                      style={{ marginBlockEnd: '6em' }}
+                    >
+                      Show more&hellip;
+                    </button>
+                  </InView>
+                ) : (
+                  <p class="ui-state insignificant">The end.</p>
+                ))}
+            </>
+          ) : uiState === 'loading' ? (
+            <ul class="timeline">
+              {Array.from({ length: 5 }).map((_, i) =>
+                view === 'media' ? (
+                  <div
+                    style={{
+                      height: '50vh',
+                    }}
+                  />
+                ) : (
+                  <li key={i}>
+                    <Status skeleton />
+                  </li>
+                ),
+              )}
+            </ul>
+          ) : (
+            uiState !== 'error' && <p class="ui-state">{emptyText}</p>
+          )}
+          {uiState === 'error' && (
+            <p class="ui-state">
+              {errorText}
+              <br />
+              <br />
+              <button
+                class="button plain"
+                onClick={() => loadItems(!items.length)}
+              >
+                Try again
+              </button>
+            </p>
+          )}
+        </div>
       </div>
-    </div>
+    </FilterContext.Provider>
   );
 }
 
-function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
+function TimelineItem({
+  status,
+  instance,
+  useItemID,
+  // allowFilters,
+  filterContext,
+  view,
+}) {
   const { id: statusID, reblog, items, type, _pinned } = status;
   const actualStatusID = reblog?.id || statusID;
   const url = instance
@@ -467,10 +479,18 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
     if (isCarousel) {
       // Here, we don't hide filtered posts, but we sort them last
       items.sort((a, b) => {
-        if (a._filtered && !b._filtered) {
+        // if (a._filtered && !b._filtered) {
+        //   return 1;
+        // }
+        // if (!a._filtered && b._filtered) {
+        //   return -1;
+        // }
+        const aFiltered = isFiltered(a.filtered, filterContext);
+        const bFiltered = isFiltered(b.filtered, filterContext);
+        if (aFiltered && !bFiltered) {
           return 1;
         }
-        if (!a._filtered && b._filtered) {
+        if (!aFiltered && bFiltered) {
           return -1;
         }
         return 0;
@@ -493,7 +513,7 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
                         instance={instance}
                         size="s"
                         contentTextWeight
-                        allowFilters={allowFilters}
+                        // allowFilters={allowFilters}
                       />
                     ) : (
                       <Status
@@ -501,7 +521,7 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
                         instance={instance}
                         size="s"
                         contentTextWeight
-                        allowFilters={allowFilters}
+                        // allowFilters={allowFilters}
                       />
                     )}
                   </Link>
@@ -541,13 +561,13 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
               <Status
                 statusID={statusID}
                 instance={instance}
-                allowFilters={allowFilters}
+                // allowFilters={allowFilters}
               />
             ) : (
               <Status
                 status={item}
                 instance={instance}
-                allowFilters={allowFilters}
+                // allowFilters={allowFilters}
               />
             )}
           </Link>
@@ -566,7 +586,7 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
         key={itemKey}
         statusID={statusID}
         instance={instance}
-        allowFilters={allowFilters}
+        // allowFilters={allowFilters}
       />
     ) : (
       <MediaPost
@@ -575,7 +595,7 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
         key={itemKey}
         status={status}
         instance={instance}
-        allowFilters={allowFilters}
+        // allowFilters={allowFilters}
       />
     );
   }
@@ -587,13 +607,13 @@ function TimelineItem({ status, instance, useItemID, allowFilters, view }) {
           <Status
             statusID={statusID}
             instance={instance}
-            allowFilters={allowFilters}
+            // allowFilters={allowFilters}
           />
         ) : (
           <Status
             status={status}
             instance={instance}
-            allowFilters={allowFilters}
+            // allowFilters={allowFilters}
           />
         )}
       </Link>

src/pages/following.jsx

@@ -32,7 +32,7 @@ function Following({ title, path, id, ...props }) {
         console.log('First load', latestItem.current);
       }
 
-      value = filteredItems(value, 'home');
+      // value = filteredItems(value, 'home');
       value.forEach((item) => {
         saveStatus(item, instance);
       });
@@ -115,7 +115,8 @@ function Following({ title, path, id, ...props }) {
       useItemID
       boostsCarousel={snapStates.settings.boostsCarousel}
       {...props}
-      allowFilters
+      // allowFilters
+      filterContext="home"
     />
   );
 }

src/pages/hashtag.jsx

@@ -78,7 +78,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
         latestItem.current = value[0].id;
       }
 
-      value = filteredItems(value, 'public');
+      // value = filteredItems(value, 'public');
       value.forEach((item) => {
         saveStatus(item, instance, {
           skipThreading: media, // If media view, no need to form threads
@@ -153,7 +153,8 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       useItemID
       view={media ? 'media' : undefined}
       refresh={media}
-      allowFilters
+      // allowFilters
+      filterContext="public"
       headerEnd={
         <Menu2
           portal

src/pages/list.jsx

@@ -43,7 +43,7 @@ function List(props) {
         latestItem.current = value[0].id;
       }
 
-      value = filteredItems(value, 'home');
+      // value = filteredItems(value, 'home');
       value.forEach((item) => {
         saveStatus(item, instance);
       });
@@ -102,7 +102,8 @@ function List(props) {
         checkForUpdates={checkForUpdates}
         useItemID
         boostsCarousel={snapStates.settings.boostsCarousel}
-        allowFilters
+        // allowFilters
+        filterContext="home"
         // refresh={reloadCount}
         headerStart={
           <Link to="/l" class="button plain">

src/pages/notifications.jsx

@@ -195,6 +195,7 @@ function Notifications({ columnMode }) {
         snapStates.notificationsShowNew &&
         uiState !== 'loading'
       ) {
+        setShowNew(false);
         loadNotifications(true);
       } else {
         setShowNew(snapStates.notificationsShowNew);

src/pages/public.jsx

@@ -41,7 +41,7 @@ function Public({ local, columnMode, ...props }) {
         latestItem.current = value[0].id;
       }
 
-      value = filteredItems(value, 'public');
+      // value = filteredItems(value, 'public');
       value.forEach((item) => {
         saveStatus(item, instance);
       });
@@ -91,7 +91,8 @@ function Public({ local, columnMode, ...props }) {
       useItemID
       headerStart={<></>}
       boostsCarousel={snapStates.settings.boostsCarousel}
-      allowFilters
+      // allowFilters
+      filterContext="public"
       headerEnd={
         <Menu2
           portal

src/pages/trending.jsx

@@ -85,7 +85,7 @@ function Trending({ columnMode, ...props }) {
         latestItem.current = value[0].id;
       }
 
-      value = filteredItems(value, 'public'); // Might not work here
+      // value = filteredItems(value, 'public'); // Might not work here
       value.forEach((item) => {
         saveStatus(item, instance);
       });
@@ -257,7 +257,8 @@ function Trending({ columnMode, ...props }) {
       useItemID
       headerStart={<></>}
       boostsCarousel={snapStates.settings.boostsCarousel}
-      allowFilters
+      // allowFilters
+      filterContext="public"
       timelineStart={TimelineStart}
       headerEnd={
         <Menu2

src/utils/filter-context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'preact';
+
+const FilterContext = createContext();
+export default FilterContext;

src/utils/filters.jsx

@@ -1,10 +1,8 @@
+import mem from './mem';
 import store from './store';
 
-export function filteredItem(item, filterContext, currentAccountID) {
+function _isFiltered(filtered, filterContext) {
-  const { filtered } = item;
+  if (!filtered?.length) return false;
-  if (!filtered?.length) return true;
-  const isSelf = currentAccountID && item.account?.id === currentAccountID;
-  if (isSelf) return true;
   const appliedFilters = filtered.filter((f) => {
     const { filter } = f;
     const hasContext = filter.context.includes(filterContext);
@@ -12,19 +10,35 @@ export function filteredItem(item, filterContext, currentAccountID) {
     if (!filter.expiresAt) return hasContext;
     return new Date(filter.expiresAt) > new Date();
   });
-  if (!appliedFilters.length) return true;
+  if (!appliedFilters.length) return false;
   const isHidden = appliedFilters.some((f) => f.filter.filterAction === 'hide');
-  console.log({ isHidden, filtered, appliedFilters, item });
+  if (isHidden)
-  if (isHidden) return false;
+    return {
+      action: 'hide',
+    };
   const isWarn = appliedFilters.some((f) => f.filter.filterAction === 'warn');
   if (isWarn) {
     const filterTitles = appliedFilters.map((f) => f.filter.title);
-    item._filtered = {
+    return {
+      action: 'warn',
       titles: filterTitles,
       titlesStr: filterTitles.join(' • '),
     };
   }
-  return isWarn;
+  return false;
+}
+export const isFiltered = mem(_isFiltered);
+
+export function filteredItem(item, filterContext, currentAccountID) {
+  const { filtered } = item;
+  if (!filtered?.length) return true;
+  const isSelf = currentAccountID && item.account?.id === currentAccountID;
+  if (isSelf) return true;
+  const filterState = isFiltered(filtered, filterContext);
+  if (!filterState) return true;
+  if (filterState.action === 'hide') return false;
+  // item._filtered = filterState;
+  return true;
 }
 export function filteredItems(items, filterContext) {
   if (!items?.length) return [];

src/utils/mem.js

@@ -1,5 +1,7 @@
 import moize from 'moize';
 
+window._moize = moize;
+
 export default function mem(fn, opts = {}) {
-  return moize(fn, { ...opts, maxSize: 100 });
+  return moize(fn, { ...opts, maxSize: 100, isDeepEqual: true });
 }

src/utils/states.js

@@ -168,7 +168,7 @@ export function saveStatus(status, instance, opts) {
   if (!override && oldStatus) return;
   const key = statusKey(status.id, instance);
   if (oldStatus?._pinned) status._pinned = oldStatus._pinned;
-  if (oldStatus?._filtered) status._filtered = oldStatus._filtered;
+  // if (oldStatus?._filtered) status._filtered = oldStatus._filtered;
   states.statuses[key] = status;
   if (status.reblog) {
     const key = statusKey(status.reblog.id, instance);