{isInPostView || isInPendingPostPage ? (
@@ -194,6 +249,10 @@ export const MobileBoardButtons = () => {
+
) : (
<>
@@ -204,6 +263,12 @@ export const MobileBoardButtons = () => {
)}
{!(isInAllView || isInSubscriptionsView) &&
}
+ {isInCatalogView && filteredCount > 0 && (
+
+ {' '}
+ — {t('filtered_threads')}: {filteredCount}
+
+ )}
{isInCatalogView && (
<>
@@ -247,6 +312,7 @@ const PostPageStats = () => {
};
export const DesktopBoardButtons = () => {
+ const { t } = useTranslation();
const params = useParams();
const location = useLocation();
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
@@ -257,6 +323,14 @@ export const DesktopBoardButtons = () => {
const isInPostView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
+ const { filteredCount, resetFilteredCount } = useCatalogFiltersStore();
+
+ useEffect(() => {
+ if (subplebbitAddress) {
+ resetFilteredCount();
+ }
+ }, [subplebbitAddress, resetFilteredCount]);
+
return (
<>
@@ -266,7 +340,10 @@ export const DesktopBoardButtons = () => {
[
] [
-
]
+
] [
+
+ ] [
+
]
@@ -285,6 +362,12 @@ export const DesktopBoardButtons = () => {
)}
[
]
+ {isInCatalogView && filteredCount > 0 && (
+
+ {' '}
+ — {t('filtered_threads')}: {filteredCount}
+
+ )}
{isInCatalogView && (
<>
diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css
index abca8390..67287ce1 100644
--- a/src/components/comment-media/comment-media.module.css
+++ b/src/components/comment-media/comment-media.module.css
@@ -80,6 +80,7 @@
.content img, .content video, .content iframe, .content audio {
max-width: 100%;
max-height: 100%;
+ object-fit: contain;
}
.content img {
@@ -128,8 +129,15 @@
padding: 3px 20px 5px 20px;
}
+.mediaDesktopOp {
+ max-width: calc(100% - 40px);
+ box-sizing: border-box;
+}
+
.mediaDesktopOp img, .mediaDesktopOp video, .mediaDesktopOp iframe, .mediaDesktopOp audio {
- padding: 3px 20px 5px 0;
+ padding: 3px 20px 5px 20px;
+ max-width: 100%;
+ box-sizing: border-box;
}
.fileDeleted {
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index ebdaf4ec..96464484 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Comment } from '@plebbit/plebbit-react-hooks';
import styles from './comment-media.module.css';
-import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
+import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
import { getHostname } from '../../lib/utils/url-utils';
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
import useIsMobile from '../../hooks/use-is-mobile';
@@ -109,6 +109,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
const { thumbnail, type, url } = commentMediaInfo || {};
const isMobile = useIsMobile();
const mediaClass = isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp;
+ const mediaDimensions = getMediaDimensions(commentMediaInfo);
return (
@@ -128,7 +129,8 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
{url && url.length > 30 ? url.slice(0, 30) + '...' : url}
{' '}
- ({getDisplayMediaInfoType(type, t)})
+ ({getDisplayMediaInfoType(type, t)}
+ {mediaDimensions && `, ${mediaDimensions}`})
@@ -236,7 +241,8 @@ const PostMedia = ({ post }: PostProps) => {
{spoiler ? _.capitalize(t('spoiler')) : url && url.length > 30 ? url.slice(0, 30) + '...' : url}
{' '}
- ({type && _.lowerCase(getDisplayMediaInfoType(type, t))})
+ ({type && _.lowerCase(getDisplayMediaInfoType(type, t))}
+ {mediaDimensions && `, ${mediaDimensions}`})
{!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
{' '}
diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css
index 82373d42..2124f76a 100644
--- a/src/components/post-form/post-form.module.css
+++ b/src/components/post-form/post-form.module.css
@@ -16,6 +16,7 @@
.postFormMobile {
text-align: center;
margin-top: -2px;
+ padding-bottom: 7px;
}
.closed {
diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index ce19159b..29e367d6 100644
--- a/src/components/post-form/post-form.tsx
+++ b/src/components/post-form/post-form.tsx
@@ -449,7 +449,6 @@ const PostForm = () => {
{showForm ? t('close_post_form') : isInPostView ? t('post_a_reply') : t('start_new_thread')}
{showForm && setShowForm(false)} postCid={postCid} />}
-
)}
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index fbe1b93d..660084b7 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/src/components/post-mobile/post-mobile.tsx
@@ -14,6 +14,7 @@ import useAnonMode from '../../hooks/use-anon-mode';
import useAuthorAddressClick from '../../hooks/use-author-address-click';
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
import useHide from '../../hooks/use-hide';
+import usePostCidForPendingPost from '../../hooks/use-post-cid';
import useReplies from '../../hooks/use-replies';
import useStateString from '../../hooks/use-state-string';
import CommentMedia from '../comment-media';
@@ -51,9 +52,11 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
// comment.author.shortAddress is undefined while the comment publishing state is pending, use account instead
// in anon mode, use the newly generated signer.address instead, which will be comment.author.address
const { anonMode } = useAnonMode();
- const { currentAnonSignerAddress } = useAnonModeStore();
+ const { getThreadSigner, currentAnonSignerAddress } = useAnonModeStore();
+ const postCidForSigner = usePostCidForPendingPost(parentCid);
+ const anonSignerAddress = postCidForSigner ? getThreadSigner(postCidForSigner)?.address || currentAnonSignerAddress : null;
const account = useAccount();
- const pendingShortAddress = anonMode ? currentAnonSignerAddress && Plebbit.getShortAddress(currentAnonSignerAddress) : account?.author?.shortAddress;
+ const pendingShortAddress = anonMode ? anonSignerAddress && Plebbit.getShortAddress(anonSignerAddress) : account?.author?.shortAddress;
const stateString = useStateString(post);
diff --git a/src/components/reply-quote-preview/reply-quote-preview.tsx b/src/components/reply-quote-preview/reply-quote-preview.tsx
index 407aae8c..90982e4d 100644
--- a/src/components/reply-quote-preview/reply-quote-preview.tsx
+++ b/src/components/reply-quote-preview/reply-quote-preview.tsx
@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
import { Link, useNavigate } from 'react-router-dom';
import { Comment, useAccount } from '@plebbit/plebbit-react-hooks';
import { useFloating, offset, shift, size, autoUpdate, Placement } from '@floating-ui/react';
+import useAnonModeStore from '../../stores/use-anon-mode-store';
import useIsMobile from '../../hooks/use-is-mobile';
import styles from '../../views/post/post.module.css';
import { Post } from '../../views/post';
@@ -143,6 +144,8 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
);
const account = useAccount();
+ const { getThreadSigner } = useAnonModeStore();
+ const threadSigner = quotelinkReply?.postCid ? getThreadSigner(quotelinkReply?.postCid) : null;
const replyQuotelink = (
<>
@@ -155,7 +158,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
onClick={(e) => handleClick(e, quotelinkReply?.cid, quotelinkReply?.subplebbitAddress)}
>
{quotelinkReply?.shortCid && `c/${quotelinkReply?.shortCid}`}
- {quotelinkReply?.author?.address === account?.author?.address && ' (You)'}
+ {(quotelinkReply?.author?.address === account?.author?.address || quotelinkReply?.author?.address === threadSigner?.address) && ' (You)'}
{hoveredCid === quotelinkReply?.cid &&
@@ -252,6 +255,8 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
);
const account = useAccount();
+ const { getThreadSigner } = useAnonModeStore();
+ const threadSigner = quotelinkReply?.postCid ? getThreadSigner(quotelinkReply?.postCid) : null;
const replyQuotelink = (
<>
@@ -262,7 +267,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
onMouseLeave={() => handleMouseLeave(quotelinkReply?.cid)}
>
{quotelinkReply?.shortCid && `c/${quotelinkReply?.shortCid}`}
- {quotelinkReply?.author?.address === account?.author?.address && ' (You)'}
+ {(quotelinkReply?.author?.address === account?.author?.address || quotelinkReply?.author?.address === threadSigner?.address) && ' (You)'}
{quotelinkReply?.shortCid && (
{
{renderSubplebbits(projectsSubs)}
{renderSubplebbits(interestsSubs)}
{renderSubplebbits(randomSubs)}
- {renderSubplebbits(internationalSubs)}
- {/* [
+ {renderSubplebbits(internationalSubs)}[
{
e.preventDefault();
- alert('work in progress');
}}
>
Create
] [
{
e.preventDefault();
- alert('work in progress');
}}
>
Vote
- ] */}
+ ]
[{t('settings')}] [
diff --git a/src/hooks/use-post-cid.ts b/src/hooks/use-post-cid.ts
new file mode 100644
index 00000000..075d1808
--- /dev/null
+++ b/src/hooks/use-post-cid.ts
@@ -0,0 +1,43 @@
+import { useEffect, useReducer } from 'react';
+import { useComment } from '@plebbit/plebbit-react-hooks';
+
+type State = {
+ resolvedPostCid: string | null;
+ currentParentCid: string | undefined;
+};
+
+type Action = { type: 'SET_POST_CID'; payload: string } | { type: 'SET_PARENT_CID'; payload: string };
+
+const reducer = (state: State, action: Action): State => {
+ switch (action.type) {
+ case 'SET_POST_CID':
+ return { ...state, resolvedPostCid: action.payload };
+ case 'SET_PARENT_CID':
+ return { ...state, currentParentCid: action.payload };
+ default:
+ return state;
+ }
+};
+
+const usePostCidForPendingPost = (initialParentCid: string | undefined): string | null => {
+ const [state, dispatch] = useReducer(reducer, {
+ resolvedPostCid: null,
+ currentParentCid: initialParentCid,
+ });
+
+ const comment = useComment({ commentCid: state.currentParentCid });
+
+ useEffect(() => {
+ if (comment) {
+ if (comment.postCid) {
+ dispatch({ type: 'SET_POST_CID', payload: comment.postCid });
+ } else if (comment.parentCid) {
+ dispatch({ type: 'SET_PARENT_CID', payload: comment.parentCid });
+ }
+ }
+ }, [comment]);
+
+ return state.resolvedPostCid;
+};
+
+export default usePostCidForPendingPost;
diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts
index e5fea198..bcff9cb8 100644
--- a/src/hooks/use-theme.ts
+++ b/src/hooks/use-theme.ts
@@ -5,6 +5,7 @@ import useThemeStore from '../stores/use-theme-store';
import useDefaultSubplebbits from './use-default-subplebbits';
import useInitialTheme from './use-initial-theme';
import { nsfwTags } from '../views/home/home';
+import { useAccountComment } from '@plebbit/plebbit-react-hooks';
const themeClasses = ['yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon'];
@@ -15,9 +16,14 @@ const updateThemeClass = (newTheme: string) => {
}
};
-const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: string) => void] => {
+const useTheme = (): [string, (theme: string) => void] => {
const location = useLocation();
const params = useParams<{ subplebbitAddress: string }>();
+ const pendingPostParams = useParams<{ accountCommentIndex?: string }>();
+ const pendingPostCommentIndex = pendingPostParams?.accountCommentIndex ? parseInt(pendingPostParams.accountCommentIndex) : undefined;
+ const pendingPost = useAccountComment({ commentIndex: pendingPostCommentIndex });
+ const pendingPostSubplebbitAddress = pendingPost?.subplebbitAddress;
+
const setThemeStore = useThemeStore((state) => state.setTheme);
const getTheme = useThemeStore((state) => state.getTheme);
const loadThemes = useThemeStore((state) => state.loadThemes);
@@ -27,7 +33,7 @@ const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: strin
const [currentTheme, setCurrentTheme] = useState(initialTheme);
const getCurrentTheme = useCallback(() => {
- const subplebbitAddress = params?.subplebbitAddress;
+ const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress;
const isInAllView = isAllView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
@@ -44,7 +50,7 @@ const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: strin
}
return storedTheme || initialTheme;
- }, [location.pathname, params, getTheme, subplebbits, initialTheme]);
+ }, [location.pathname, params, getTheme, subplebbits, initialTheme, pendingPostSubplebbitAddress]);
useEffect(() => {
const newTheme = getCurrentTheme();
@@ -60,7 +66,7 @@ const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: strin
const setSubplebbitTheme = useCallback(
async (newTheme: string) => {
- const subplebbitAddress = params?.subplebbitAddress;
+ const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress;
const isInAllView = isAllView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
@@ -78,7 +84,7 @@ const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: strin
setCurrentTheme(newTheme);
updateThemeClass(newTheme);
},
- [location.pathname, params, setThemeStore, subplebbits],
+ [location.pathname, params, setThemeStore, subplebbits, pendingPostSubplebbitAddress],
);
return [currentTheme, setSubplebbitTheme];
diff --git a/src/lib/utils/media-utils.ts b/src/lib/utils/media-utils.ts
index dd676416..61f879a8 100644
--- a/src/lib/utils/media-utils.ts
+++ b/src/lib/utils/media-utils.ts
@@ -9,6 +9,7 @@ export interface CommentMediaInfo {
type: string;
thumbnail?: string;
patternThumbnailUrl?: string;
+ post?: Comment;
}
export const getDisplayMediaInfoType = (type: string, t: any) => {
@@ -106,8 +107,46 @@ export const getCommentMediaInfo = (comment: Comment): CommentMediaInfo | undefi
}
const linkInfo = comment.link ? getLinkMediaInfo(comment.link) : undefined;
if (linkInfo) {
- linkInfo.thumbnail = comment.thumbnailUrl || linkInfo.thumbnail;
- return linkInfo;
+ return {
+ ...linkInfo,
+ thumbnail: comment.thumbnailUrl || linkInfo.thumbnail,
+ post: comment,
+ };
}
return;
};
+
+export const getMediaDimensions = (commentMediaInfo: CommentMediaInfo | undefined): string => {
+ if (!commentMediaInfo) return '';
+
+ const { type, url, post } = commentMediaInfo;
+
+ if (type === 'iframe' && url) {
+ const embedUrl = new URL(url);
+ if (canEmbed(embedUrl)) {
+ // hardcoded dimensions from embed.module.css
+ if (embedUrl.hostname.includes('youtube.com') || embedUrl.hostname.includes('youtu.be')) {
+ return '800x450';
+ } else if (embedUrl.hostname.includes('instagram.com')) {
+ return '360x420';
+ } else if (embedUrl.hostname.includes('reddit.com')) {
+ return '500x520';
+ } else if (embedUrl.hostname.includes('tiktok.com')) {
+ return '400x780';
+ } else if (embedUrl.hostname.includes('x.com') || embedUrl.hostname.includes('twitter.com')) {
+ return '550x580';
+ } else if (embedUrl.hostname.includes('soundcloud.com')) {
+ return '700x166';
+ }
+ }
+ } else if (type === 'audio') {
+ return '700x240'; // hardcoded dimensions from embed.module.css
+ } else if (type === 'image' || type === 'video' || type === 'gif') {
+ // media dimensions calculated by API
+ if (post?.linkWidth && post?.linkHeight) {
+ return `${post.linkWidth}x${post.linkHeight}`;
+ }
+ }
+
+ return '';
+};
diff --git a/src/stores/use-catalog-filters-store.ts b/src/stores/use-catalog-filters-store.ts
index 543f7478..921d1b5b 100644
--- a/src/stores/use-catalog-filters-store.ts
+++ b/src/stores/use-catalog-filters-store.ts
@@ -1,5 +1,7 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import { getCommentMediaInfo, getHasThumbnail } from '../lib/utils/media-utils';
interface FilterItem {
text: string;
@@ -16,15 +18,23 @@ interface CatalogFiltersStore {
filterText: string;
setFilterText: (value: string) => void;
filterItems: FilterItem[];
- setFilterItems: (items: FilterItem[]) => void; // New method to set all filter items at once
- saveAndApplyFilters: (items: FilterItem[]) => void; // Updated to accept items
+ setFilterItems: (items: FilterItem[]) => void;
+ saveAndApplyFilters: (items: FilterItem[]) => void;
+ filter: ((comment: Comment) => boolean) | undefined;
+ updateFilter: () => void;
+ initializeFilter: () => void;
+ filteredCount: number;
+ resetFilteredCount: () => void;
}
const useCatalogFiltersStore = create(
persist(
- (set) => ({
+ (set, get) => ({
showTextOnlyThreads: false,
- setShowTextOnlyThreads: (value: boolean) => set({ showTextOnlyThreads: value }),
+ setShowTextOnlyThreads: (value: boolean) => {
+ set({ showTextOnlyThreads: value, filteredCount: 0 });
+ get().updateFilter();
+ },
showAdultBoards: false,
setShowAdultBoards: (value: boolean) => set({ showAdultBoards: value }),
showGoreBoards: false,
@@ -38,13 +48,59 @@ const useCatalogFiltersStore = create(
},
saveAndApplyFilters: (items: FilterItem[]) => {
const nonEmptyItems = items.filter((item) => item.text.trim() !== '');
- set({ filterItems: nonEmptyItems });
+ set({ filterItems: nonEmptyItems, filteredCount: 0 });
+ get().updateFilter();
},
+ filter: undefined,
+ updateFilter: () => {
+ const filteredCids = new Set();
+ set((state) => ({
+ filter: (comment: Comment) => {
+ const { showTextOnlyThreads, filterItems } = state;
+
+ const shouldShow = (() => {
+ if (!showTextOnlyThreads && !getHasThumbnail(getCommentMediaInfo(comment), comment?.link)) {
+ return false;
+ }
+
+ const title = comment?.title?.toLowerCase() || '';
+ const content = comment?.content?.toLowerCase() || '';
+
+ return !filterItems
+ .filter((item) => item.enabled)
+ .some((item) => {
+ const text = item.text.toLowerCase();
+ return title.includes(text) || content.includes(text);
+ });
+ })();
+
+ if (!shouldShow && !filteredCids.has(comment.cid)) {
+ filteredCids.add(comment.cid);
+ set((state) => ({ filteredCount: state.filteredCount + 1 }));
+ }
+
+ return shouldShow;
+ },
+ }));
+ },
+ initializeFilter: () => {
+ const { updateFilter } = get();
+ updateFilter();
+ },
+ filteredCount: 0,
+ resetFilteredCount: () => set({ filteredCount: 0 }),
}),
{
name: 'catalog-filters-storage',
+ onRehydrateStorage: () => (state) => {
+ if (state) {
+ state.updateFilter();
+ }
+ },
},
),
);
+useCatalogFiltersStore.getState().updateFilter();
+
export default useCatalogFiltersStore;
diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx
index 290a5730..80b1ce95 100644
--- a/src/views/board/board.tsx
+++ b/src/views/board/board.tsx
@@ -168,19 +168,19 @@ const Board = () => {
subplebbitAddress={postSubplebbitAddress}
/>
)}
+ {((description && description.length > 0) || isInAllView) && (
+
+ )}
{feed.length !== 0 ? (
<>
{rules && rules.length > 0 && }
- {((description && description.length > 0) || isInAllView) && (
-
- )}
{
+const FiltersTable = ({
+ localFilterItems,
+ setLocalFilterItems,
+ onSave,
+}: {
+ localFilterItems: any[];
+ setLocalFilterItems: React.Dispatch>;
+ onSave: () => void;
+}) => {
const { t } = useTranslation();
- const { filterItems, saveAndApplyFilters } = useCatalogFiltersStore();
-
- const [localFilterItems, setLocalFilterItems] = useState(filterItems);
+ const { saveAndApplyFilters } = useCatalogFiltersStore();
const handleAddFilter = useCallback(() => {
setLocalFilterItems((prev) => [...prev, { text: '', enabled: true }]);
- }, []);
+ }, [setLocalFilterItems]);
const handleSave = useCallback(() => {
const nonEmptyFilters = localFilterItems.filter((item) => item.text.trim() !== '');
saveAndApplyFilters(nonEmptyFilters);
- }, [saveAndApplyFilters, localFilterItems]);
+ onSave();
+ }, [saveAndApplyFilters, localFilterItems, onSave]);
- const updateLocalFilterItem = useCallback((index: number, item: any) => {
- setLocalFilterItems((prev) => prev.map((f, i) => (i === index ? item : f)));
- }, []);
+ const updateLocalFilterItem = useCallback(
+ (index: number, item: any) => {
+ setLocalFilterItems((prev) => prev.map((f, i) => (i === index ? item : f)));
+ },
+ [setLocalFilterItems],
+ );
- const removeLocalFilterItem = useCallback((index: number) => {
- setLocalFilterItems((prev) => prev.filter((_, i) => i !== index));
- }, []);
+ const removeLocalFilterItem = useCallback(
+ (index: number) => {
+ setLocalFilterItems((prev) => prev.filter((_, i) => i !== index));
+ },
+ [setLocalFilterItems],
+ );
- const moveLocalFilterItemUp = useCallback((index: number) => {
- if (index === 0) return;
- setLocalFilterItems((prev) => {
- const newItems = [...prev];
- [newItems[index - 1], newItems[index]] = [newItems[index], newItems[index - 1]];
- return newItems;
- });
- }, []);
+ const moveLocalFilterItemUp = useCallback(
+ (index: number) => {
+ if (index === 0) return;
+ setLocalFilterItems((prev) => {
+ const newItems = [...prev];
+ [newItems[index - 1], newItems[index]] = [newItems[index], newItems[index - 1]];
+ return newItems;
+ });
+ },
+ [setLocalFilterItems],
+ );
return (
@@ -99,12 +115,38 @@ const FiltersTable = () => {
const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
const { t } = useTranslation();
- const { showAdultBoards, setShowAdultBoards, showGoreBoards, setShowGoreBoards, showTextOnlyThreads, setShowTextOnlyThreads } = useCatalogFiltersStore();
+ const { showAdultBoards, setShowAdultBoards, showGoreBoards, setShowGoreBoards, showTextOnlyThreads, setShowTextOnlyThreads, filterItems, saveAndApplyFilters } =
+ useCatalogFiltersStore();
+
+ const [localShowAdultBoards, setLocalShowAdultBoards] = useState(showAdultBoards);
+ const [localShowGoreBoards, setLocalShowGoreBoards] = useState(showGoreBoards);
+ const [localShowTextOnlyThreads, setLocalShowTextOnlyThreads] = useState(showTextOnlyThreads);
+ const [localFilterItems, setLocalFilterItems] = useState(filterItems);
+
const location = useLocation();
const params = useParams();
const isInCatalogView = isCatalogView(location.pathname, params);
const isInAllView = isAllView(location.pathname, params);
+ const handleSave = useCallback(() => {
+ setShowAdultBoards(localShowAdultBoards);
+ setShowGoreBoards(localShowGoreBoards);
+ setShowTextOnlyThreads(localShowTextOnlyThreads);
+ const nonEmptyFilters = localFilterItems.filter((item) => item.text.trim() !== '');
+ saveAndApplyFilters(nonEmptyFilters);
+ closeModal();
+ }, [
+ localShowAdultBoards,
+ localShowGoreBoards,
+ localShowTextOnlyThreads,
+ localFilterItems,
+ setShowAdultBoards,
+ setShowGoreBoards,
+ setShowTextOnlyThreads,
+ saveAndApplyFilters,
+ closeModal,
+ ]);
+
return (
<>
@@ -117,7 +159,7 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
{isInCatalogView && (
@@ -126,20 +168,20 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
)}
- {isInCatalogView && }
+ {isInCatalogView && }
);
diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx
index ee7bc0fc..5afc8eaa 100644
--- a/src/views/catalog/catalog.tsx
+++ b/src/views/catalog/catalog.tsx
@@ -1,9 +1,8 @@
import { useEffect, useMemo, useRef } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
-import { Comment, useAccount, useFeed, useSubplebbit, useBlock } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useFeed, useSubplebbit, useBlock } from '@plebbit/plebbit-react-hooks';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
-import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
import useCatalogFeedRows from '../../hooks/use-catalog-feed-rows';
import useDefaultSubplebbits from '../../hooks/use-default-subplebbits';
@@ -21,25 +20,6 @@ import styles from './catalog.module.css';
const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
-const threadsWithImagesFilter = (comment: Comment) => {
- const commentMediaInfo = getCommentMediaInfo(comment);
- const hasThumbnail = getHasThumbnail(commentMediaInfo, comment?.link);
- return hasThumbnail;
-};
-
-const textFilter = (comment: Comment, filterItems: any[]) => {
- if (!filterItems) return true;
- if (filterItems.length === 0) return true;
- const titleLower = comment?.title?.toLowerCase() || '';
- const contentLower = comment?.content?.toLowerCase() || '';
-
- return filterItems.every((item) => {
- if (!item.enabled) return true;
- const pattern = item.text.toLowerCase();
- return !(titleLower.includes(pattern) || contentLower.includes(pattern));
- });
-};
-
const Catalog = () => {
const { t } = useTranslation();
const location = useLocation();
@@ -47,7 +27,7 @@ const Catalog = () => {
const isInAllView = isAllView(location.pathname, useParams());
const defaultSubplebbits = useDefaultSubplebbits();
- const { showAdultBoards, showGoreBoards, showTextOnlyThreads, filterItems } = useCatalogFiltersStore();
+ const { filter, showAdultBoards, showGoreBoards } = useCatalogFiltersStore();
const account = useAccount();
const subscriptions = account?.subscriptions;
@@ -80,31 +60,25 @@ const Catalog = () => {
const columnWidth = imageSize === 'Large' ? 270 : 180;
const columnCount = Math.floor(useWindowWidth() / columnWidth);
- // postPerPage based on columnCount for optimized feed, dont change value after first render
- // eslint-disable-next-line
- const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []);
+ const postsPerPage = columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25;
const { timeFilterSeconds } = useTimeFilter();
const { sortType } = useSortingStore();
- const feedOptions: any = useMemo(
- () => ({
+ const feedOptions = useMemo(() => {
+ const options: any = {
subplebbitAddresses,
sortType,
postsPerPage: isInAllView || isInSubscriptionsView ? 10 : postsPerPage,
- filter: (comment: Comment) => {
- if (!showTextOnlyThreads && !threadsWithImagesFilter(comment)) {
- return false;
- }
- return textFilter(comment, filterItems);
- },
- }),
- [subplebbitAddresses, sortType, isInAllView, isInSubscriptionsView, postsPerPage, showTextOnlyThreads, filterItems],
- );
+ filter,
+ };
- if (isInAllView || isInSubscriptionsView) {
- feedOptions.newerThan = timeFilterSeconds;
- }
+ if (isInAllView || isInSubscriptionsView) {
+ options.newerThan = timeFilterSeconds;
+ }
+
+ return options;
+ }, [subplebbitAddresses, sortType, isInAllView, isInSubscriptionsView, postsPerPage, timeFilterSeconds, filter]);
const { feed, hasMore, loadMore, reset } = useFeed(feedOptions);
diff --git a/src/views/pending-post/pending-post.tsx b/src/views/pending-post/pending-post.tsx
index 72980b28..fedea830 100644
--- a/src/views/pending-post/pending-post.tsx
+++ b/src/views/pending-post/pending-post.tsx
@@ -4,7 +4,6 @@ import { useAccountComment } from '@plebbit/plebbit-react-hooks';
import { isSettingsView } from '../../lib/utils/view-utils';
import { Post } from '../post';
import SettingsModal from '../../components/settings-modal';
-import useTheme from '../../hooks/use-theme';
const PendingPost = () => {
const { accountCommentIndex } = useParams<{ accountCommentIndex?: string }>();
@@ -15,8 +14,6 @@ const PendingPost = () => {
const params = useParams();
const isInSettingsView = isSettingsView(location.pathname, params);
- useTheme(post?.subplebbitAddress);
-
useEffect(() => window.scrollTo(0, 0), []);
useEffect(() => {
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 9ca8c0e5..9266596d 100644
--- a/src/views/post/post.module.css
+++ b/src/views/post/post.module.css
@@ -160,6 +160,7 @@
.postDesktop .postMessage, .replyDesktop .postMessage {
padding: 1em 40px;
+ overflow: hidden;
}
.postDesktop .abbr {
@@ -328,6 +329,7 @@
.postMobile .postMessage {
padding: 10px;
font-size: var(--post-mobile-content-font-size);
+ overflow: hidden;
word-break: break-word;
}