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) {