feat(catalog): add filter to hide text-only threads, turned on by default

src/components/board-buttons/board-buttons.module.css

@@ -43,6 +43,10 @@
   align-items: center;
 }
 
+.desktopBoardButtons .rightSideButtons select {
+  margin-right: 5px;
+}
+
 @media (max-width: 640px) {
   .desktopBoardButtons {
     display: none;

src/components/board-buttons/board-buttons.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { isAllView, isCatalogView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import useCatalogFiltersStore from '../../stores/use-catalog-filters-store';
 import useFeedResetStore from '../../stores/use-feed-reset-store';
 import useSortingStore from '../../stores/use-sorting-store';
 import useTimeFilter from '../../hooks/use-time-filter';
@@ -95,7 +96,6 @@ const SortOptions = () => {
         <option value='active'>{t('bump_order')}</option>
         <option value='new'>{t('creation_date')}</option>
       </select>
-      &nbsp;
     </>
   );
 };
@@ -184,6 +184,20 @@ export const MobileBoardButtons = () => {
   );
 };
 
+const TextOnlyPostsFilter = () => {
+  const { showTextOnlyThreads, setShowTextOnlyThreads } = useCatalogFiltersStore();
+
+  return (
+    <div>
+      Text-Only Posts:{' '}
+      <select value={showTextOnlyThreads ? 'Show' : 'Hide'} onChange={(e) => setShowTextOnlyThreads(e.target.value === 'Show')}>
+        <option value='Hide'>Hide</option>
+        <option value='Show'>Show</option>
+      </select>
+    </div>
+  );
+};
+
 export const DesktopBoardButtons = () => {
   const params = useParams();
   const location = useLocation();
@@ -228,17 +242,16 @@ export const DesktopBoardButtons = () => {
             [<RefreshButton />]
             <span className={styles.rightSideButtons}>
               {isInCatalogView && <SortOptions />}
+              {(isInAllView || isInSubscriptionsView) && (
+                <TimeFilter isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} />
+              )}
+              {isInCatalogView && <TextOnlyPostsFilter />}
               {!(isInAllView || isInSubscriptionsView) && (
                 <>
                   [
                   <SubscribeButton address={subplebbitAddress} />]
                 </>
               )}
-              {(isInAllView || isInSubscriptionsView) && (
-                <>
-                  <TimeFilter isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} />
-                </>
-              )}
             </span>
           </>
         )}

src/stores/use-catalog-filters-store.ts

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+
+interface CatalogFiltersStore {
+  showTextOnlyThreads: boolean;
+  setShowTextOnlyThreads: (value: boolean) => void;
+}
+
+const useCatalogFiltersStore = create<CatalogFiltersStore>((set) => ({
+  showTextOnlyThreads: localStorage.getItem('showTextOnlyThreads') === 'true' ? true : false,
+  setShowTextOnlyThreads: (value: boolean) => {
+    set({ showTextOnlyThreads: value });
+    localStorage.setItem('showTextOnlyThreads', value.toString());
+  },
+}));
+
+export default useCatalogFiltersStore;

src/views/catalog/catalog.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { useAccount, Subplebbit, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { useAccount, Subplebbit, useFeed, useSubplebbit, Comment } from '@plebbit/plebbit-react-hooks';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
@@ -9,6 +9,7 @@ import useFeedStateString from '../../hooks/use-feed-state-string';
 import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
 import useTimeFilter from '../../hooks/use-time-filter';
 import useWindowWidth from '../../hooks/use-window-width';
+import useCatalogFiltersStore from '../../stores/use-catalog-filters-store';
 import useFeedResetStore from '../../stores/use-feed-reset-store';
 import useSortingStore from '../../stores/use-sorting-store';
 import CatalogRow from '../../components/catalog-row';
@@ -16,6 +17,7 @@ import LoadingEllipsis from '../../components/loading-ellipsis';
 import SettingsModal from '../../components/settings-modal';
 import styles from './catalog.module.css';
 import _ from 'lodash';
+import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
@@ -77,6 +79,12 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
 
 const columnWidth = 180;
 
+const catalogFilter = (comment: Comment) => {
+  const commentMediaInfo = getCommentMediaInfo(comment);
+  const hasThumbnail = getHasThumbnail(commentMediaInfo, comment?.link);
+  return hasThumbnail;
+};
+
 const Catalog = () => {
   const { t } = useTranslation();
   const location = useLocation();
@@ -106,11 +114,13 @@ const Catalog = () => {
 
   const { sortType } = useSortingStore();
   const { timeFilterSeconds } = useTimeFilter();
+  const { showTextOnlyThreads } = useCatalogFiltersStore();
 
   const feedOptions: any = {
     subplebbitAddresses,
     sortType,
     postsPerPage: isInAllView || isInSubscriptionsView ? 10 : postsPerPage,
+    filter: !showTextOnlyThreads && catalogFilter,
   };
 
   if (isInAllView || isInSubscriptionsView) {