move filters to interface settings, enable for all feeds

src/views/board/board.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { useAccount, useAccountComments, useBlock, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useAccountComments, useBlock, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { useTranslation } from 'react-i18next';
 import styles from './board.module.css';
@@ -17,13 +17,23 @@ import ReplyModal from '../../components/reply-modal';
 import SettingsModal from '../../components/settings-modal';
 import SubplebbitDescription from '../../components/subplebbit-description';
 import SubplebbitRules from '../../components/subplebbit-rules';
+import useInterfaceSettingsStore from '../../stores/use-interface-settings-store';
+import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
+const threadsWithoutImagesFilter = (comment: Comment) => {
+  if (!getHasThumbnail(getCommentMediaInfo(comment), comment?.link)) {
+    return false;
+  }
+  return true;
+};
+
 const Board = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
+  const { hideThreadsWithoutImages } = useInterfaceSettingsStore();
 
   const isInAllView = isAllView(location.pathname, useParams());
   const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
@@ -51,8 +61,9 @@ const Board = () => {
       sortType,
       postsPerPage: isInAllView || isInSubscriptionsView ? 5 : 25,
       ...(isInAllView || isInSubscriptionsView ? { newerThan: timeFilterSeconds } : {}),
+      filter: hideThreadsWithoutImages ? threadsWithoutImagesFilter : undefined,
     }),
-    [subplebbitAddresses, sortType, timeFilterSeconds, isInAllView, isInSubscriptionsView],
+    [subplebbitAddresses, sortType, timeFilterSeconds, isInAllView, isInSubscriptionsView, hideThreadsWithoutImages],
   );
 
   const { feed, hasMore, loadMore, reset } = useFeed(feedOptions);

src/views/catalog/catalog-filters/catalog-filters.tsx

@@ -1,7 +1,5 @@
 import { useState, useCallback } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { isAllView, isCatalogView } from '../../../lib/utils/view-utils';
 import useCatalogFiltersStore from '../../../stores/use-catalog-filters-store';
 import styles from './catalog-filters.module.css';
 
@@ -100,11 +98,6 @@ const FiltersTable = ({ onSave }: { onSave: () => void }) => {
 
 const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
   const { t } = useTranslation();
-  const { showAdultBoards, setShowAdultBoards, showGoreBoards, setShowGoreBoards, showTextOnlyThreads, setShowTextOnlyThreads } = useCatalogFiltersStore();
-  const location = useLocation();
-  const params = useParams();
-  const isInCatalogView = isCatalogView(location.pathname, params);
-  const isInAllView = isAllView(location.pathname, params);
 
   return (
     <>
@@ -114,33 +107,7 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
           <span className={styles.title}>{t('filters')}</span>
           <span className={styles.closeButton} title='close' onClick={closeModal} />
         </div>
-        <div className={styles.filters}>
-          {isInCatalogView && (
-            <div>
-              <label className='capitalize'>
-                <input type='checkbox' checked={!showTextOnlyThreads} onChange={(e) => setShowTextOnlyThreads(!e.target.checked)} />
-                {t('hide_threads_without_images')}
-              </label>
-            </div>
-          )}
-          {isInAllView && (
-            <div className={styles.nsfwLabels}>
-              <div>
-                <label>
-                  <input type='checkbox' checked={!showGoreBoards} onChange={(e) => setShowGoreBoards(!e.target.checked)} />
-                  hide gore content
-                </label>
-              </div>
-              <div>
-                <label>
-                  <input type='checkbox' checked={!showAdultBoards} onChange={(e) => setShowAdultBoards(!e.target.checked)} />
-                  hide adult content
-                </label>
-              </div>
-            </div>
-          )}
-        </div>
-        {isInCatalogView && <FiltersTable onSave={closeModal} />}
+        <FiltersTable onSave={closeModal} />
       </div>
     </>
   );

src/views/catalog/catalog.tsx

@@ -17,6 +17,7 @@ import CatalogRow from '../../components/catalog-row';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import SettingsModal from '../../components/settings-modal';
 import styles from './catalog.module.css';
+import useInterfaceSettingsStore from '../../stores/use-interface-settings-store';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
@@ -27,7 +28,8 @@ const Catalog = () => {
 
   const isInAllView = isAllView(location.pathname, useParams());
   const defaultSubplebbits = useDefaultSubplebbits();
-  const { filter, showAdultBoards, showGoreBoards } = useCatalogFiltersStore();
+  const { hideAdultBoards, hideGoreBoards } = useInterfaceSettingsStore();
+  const { filter } = useCatalogFiltersStore();
 
   const account = useAccount();
   const subscriptions = account?.subscriptions;
@@ -40,7 +42,7 @@ const Catalog = () => {
         const hasGoreTag = tags?.includes('gore');
         const hasAdultTag = tags?.includes('adult');
 
-        if ((hasGoreTag && !showGoreBoards) || (hasAdultTag && !showAdultBoards)) {
+        if ((hasGoreTag && hideGoreBoards) || (hasAdultTag && hideAdultBoards)) {
           return false;
         }
         return true;
@@ -54,7 +56,7 @@ const Catalog = () => {
       return subscriptions || [];
     }
     return [subplebbitAddress];
-  }, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbits, subscriptions, showAdultBoards, showGoreBoards]);
+  }, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbits, subscriptions, hideAdultBoards, hideGoreBoards]);
 
   const { imageSize } = useCatalogStyleStore();
   const columnWidth = imageSize === 'Large' ? 270 : 180;