diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css
index 77ff352a..973cd5b5 100644
--- a/src/components/board-buttons/board-buttons.module.css
+++ b/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;
diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx
index 0e53baa7..db848c6e 100644
--- a/src/components/board-buttons/board-buttons.tsx
+++ b/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 = () => {
-
>
);
};
@@ -184,6 +184,20 @@ export const MobileBoardButtons = () => {
);
};
+const TextOnlyPostsFilter = () => {
+ const { showTextOnlyThreads, setShowTextOnlyThreads } = useCatalogFiltersStore();
+
+ return (
+
+ Text-Only Posts:{' '}
+
+
+ );
+};
+
export const DesktopBoardButtons = () => {
const params = useParams();
const location = useLocation();
@@ -228,17 +242,16 @@ export const DesktopBoardButtons = () => {
[]
{isInCatalogView && }
+ {(isInAllView || isInSubscriptionsView) && (
+
+ )}
+ {isInCatalogView && }
{!(isInAllView || isInSubscriptionsView) && (
<>
[
]
>
)}
- {(isInAllView || isInSubscriptionsView) && (
- <>
-
- >
- )}
>
)}
diff --git a/src/stores/use-catalog-filters-store.ts b/src/stores/use-catalog-filters-store.ts
new file mode 100644
index 00000000..4e1885fa
--- /dev/null
+++ b/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((set) => ({
+ showTextOnlyThreads: localStorage.getItem('showTextOnlyThreads') === 'true' ? true : false,
+ setShowTextOnlyThreads: (value: boolean) => {
+ set({ showTextOnlyThreads: value });
+ localStorage.setItem('showTextOnlyThreads', value.toString());
+ },
+}));
+
+export default useCatalogFiltersStore;
diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx
index a3ab2b99..1b5c9c35 100644
--- a/src/views/catalog/catalog.tsx
+++ b/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) {