| order | +on | +pattern | +color | +hide | +top | +del | +|
|---|---|---|---|---|---|---|---|
| + moveLocalFilterItemUp(index)}> + ↑ + + | ++ updateLocalFilterItem(index, { ...item, enabled: e.target.checked })} + /> + | ++ updateLocalFilterItem(index, { ...item, text: e.target.value })} + ref={(el) => (inputRefs.current[index] = el)} + /> + | +
+ |
+ + updateLocalFilterItem(index, { ...item, hide: e.target.checked })} /> + | ++ updateLocalFilterItem(index, { ...item, top: e.target.checked })} /> + | ++ removeLocalFilterItem(index)}> + × + + | ++ {currentSubplebbitAddress && item.subplebbitFilteredCids?.has(currentSubplebbitAddress) && `x${item.subplebbitCounts?.get(currentSubplebbitAddress) ?? 0}`} + | +
| + + + | +
+
+
+ );
+};
+
+const CatalogFilters = () => {
+ const { t } = useTranslation();
+ const [showModal, setShowModal] = useState(false);
+
+ const closeModal = useCallback(() => {
+ setShowModal(false);
+ }, []);
+
+ return (
+ <>
+ setShowModal(true)}>
+ {t('filters')}
+
+ {showModal &&
+ {showHelp ? t('filter_and_highlights_help') : t('filter_and_highlights')}
+ {!showHelp && }
+
+
+ {showHelp ?
+
+ );
+};
+
+export default FiltersProtip;
diff --git a/src/components/catalog-filters/filters-protip/index.ts b/src/components/catalog-filters/filters-protip/index.ts
new file mode 100644
index 00000000..6e661867
--- /dev/null
+++ b/src/components/catalog-filters/filters-protip/index.ts
@@ -0,0 +1 @@
+export { default } from './filters-protip';
diff --git a/src/components/catalog-filters/highlight-color-picker/highlight-color-picker.module.css b/src/components/catalog-filters/highlight-color-picker/highlight-color-picker.module.css
new file mode 100644
index 00000000..38bdf5c1
--- /dev/null
+++ b/src/components/catalog-filters/highlight-color-picker/highlight-color-picker.module.css
@@ -0,0 +1,110 @@
+.colorClickbox {
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ font-size: 10px;
+ display: block;
+ text-align: center;
+ background-color: #fff;
+ border: var(--reply-modal-field-input-border, revert);
+ text-decoration: none;
+ color: #000;
+ position: relative;
+ cursor: pointer;
+}
+
+.colorPickerModal {
+ padding: 4px;
+ z-index: 1000;
+ font-size: 14px;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
+ background-color: var(--settings-modal-background-color);
+}
+
+.colorPickerModal table {
+ border-spacing: 1px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.colorPickerModal table td {
+ padding: 2px;
+ text-align: center;
+ font-size: 10pt;
+ margin: 0;
+}
+
+.colorOption {
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ font-size: 10px;
+ display: block;
+ text-align: center;
+ border: 1px solid #aaa;
+ text-decoration: none;
+ color: #000;
+ white-space: nowrap;
+ user-select: none;
+ cursor: pointer;
+}
+
+.middleTxt input[type="text"] {
+ width: 45px;
+ margin: 0 2px;
+ margin-right: 5px;
+ padding: 1px;
+ outline: none;
+ border: var(--reply-modal-field-input-border, revert);
+ font-size: 11px;
+ background-color: default;
+ vertical-align: top;
+}
+
+.middleTxt input[type="text"]:focus {
+ border: var(--reply-modal-field-input-border-focus, revert);
+}
+
+@media (max-width: 640px) {
+ .middleTxt input[type="text"] {
+ font-size: 16px !important;
+ }
+}
+
+.middleTxt .colorClickbox {
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ font-size: 10px;
+ text-align: center;
+ border: 1px solid #aaa;
+ text-decoration: none;
+ color: #000;
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+ margin: auto;
+ cursor: pointer;
+ float: right;
+ background-color: transparent !important;
+}
+
+.colorPickerModal tfoot .button {
+ color: var(--button-desktop-text-color);
+ cursor: pointer;
+ margin: 0 2px;
+}
+
+.colorPickerModal tfoot .button:hover {
+ color: var(--button-desktop-text-color-hover);
+}
+
+.colorPickerModal tfoot .button::before{
+ content: '[';
+ color: var(--body-font-color);
+}
+
+.colorPickerModal tfoot .button::after{
+ content: ']';
+ color: var(--body-font-color);
+}
diff --git a/src/components/catalog-filters/highlight-color-picker/highlight-color-picker.tsx b/src/components/catalog-filters/highlight-color-picker/highlight-color-picker.tsx
new file mode 100644
index 00000000..10f11f05
--- /dev/null
+++ b/src/components/catalog-filters/highlight-color-picker/highlight-color-picker.tsx
@@ -0,0 +1,145 @@
+import { useState, useRef } from 'react';
+import styles from './highlight-color-picker.module.css';
+import { autoUpdate, FloatingFocusManager, FloatingPortal, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
+
+interface ColorPickerProps {
+ item: any;
+ index: number;
+ updateLocalFilterItem: (index: number, item: any) => void;
+ localFilterItems: any[];
+}
+
+const HighlightColorPicker = ({ item, index, updateLocalFilterItem, localFilterItems }: ColorPickerProps) => {
+ const [isColorPickerOpen, setIsColorPickerOpen] = useStatePatterns
+-
+
- + Matching whole words: + +
-
+
feel— will match "feel" but not "feeling". This search is case-insensitive. +
+
-
+
- + AND operator: + +
-
+
feel girlfriend— will match "feel" AND "girlfriend" in any order. +
+
-
+
- + OR operator: + +
-
+
feel|girlfriend— will match "feel" OR "girlfriend". +
+
-
+
- + Mixing both operators: + +
-
+
girlfriend|boyfriend feel— matches "feel" AND "girlfriend", or "feel" AND "boyfriend". +
+
-
+
- + Exact match search: + +
-
+
"that feel when"— place double quotes around the pattern to search for an exact string. +
+
-
+
- + Wildcards: + +
-
+
feel*— matches expressions such as "feel", "feels", "feeling", "feeler", etc… +
+ -
+
idolm*ster— this can match "idolmaster" or "idolm@ster", etc… +
+
-
+ Filtering by display name or user ID
+
-
+ Prefix the pattern with
#to search by user ID:#GPPr4CQSRCt8+
+ -
+ Prefix the pattern with
##to search by name:##Anonymous+
+ -
+ To filter by role:
#!#owner,#!#admin,#!#moderator(or#!#mod) +
+
-
+ It is also possible to filter by regular expression:
+
-
+
/^(?=.*detachable)(?=.*hats).*$/i— AND operator. +
+ -
+
/^(?!.*touhou).*$/i— NOT operator. +
+ -
+
{'/^>/'}— threads starting with a quote ({'">"'} character as an html entity). +
+ -
+
/^$/— threads with no text. +
+
Controls
+-
+
- + On — enables or disables the filter. + +
- + Color — highlights matched threads with the specified color. + +
- + Hide — hides matched threads. + +
- + Top — moves the filter to the top of the feed. + +
{
+ e.preventDefault();
+ e.stopPropagation();
+ setIsColorPickerOpen(false);
+ }}
+ />
+
+
+
+ )}
+
+ );
+};
+
+export default HighlightColorPicker;
diff --git a/src/components/catalog-filters/highlight-color-picker/index.ts b/src/components/catalog-filters/highlight-color-picker/index.ts
new file mode 100644
index 00000000..63571df7
--- /dev/null
+++ b/src/components/catalog-filters/highlight-color-picker/index.ts
@@ -0,0 +1 @@
+export { default } from './highlight-color-picker';
diff --git a/src/views/catalog/catalog-filters/index.ts b/src/components/catalog-filters/index.ts
similarity index 100%
rename from src/views/catalog/catalog-filters/index.ts
rename to src/components/catalog-filters/index.ts
diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css
index df3843f8..748a5262 100644
--- a/src/components/catalog-row/catalog-row.module.css
+++ b/src/components/catalog-row/catalog-row.module.css
@@ -13,6 +13,8 @@
padding: 10px 0 3px 0;
vertical-align: top;
display: inline-block;
+ box-sizing: border-box;
+ margin: 2px;
}
.postContent {
@@ -69,14 +71,14 @@
background-color: var(--media-thumbnail-background-color);
width: var(--width);
height: var(--height);
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
display: inline-flex;
justify-content: center;
align-items: center;
- clip-path: inset(-5px); /* direct media could change its dimensions after being published, so we need to clip the overflow. We can't use overflow: hidden because it will hide the box-shadow */
+ overflow: hidden;
}
.post img, .post video, .post audio {
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
max-width: var(--maxWidth);
max-height: var(--maxHeight);
}
diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index dcf6d556..8ffc4f63 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -2,34 +2,36 @@ import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
-import { Comment } from '@plebbit/plebbit-react-hooks';
import { useFloating, offset, size, autoUpdate, Placement } from '@floating-ui/react';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import { shouldShowSnow } from '../../lib/snow';
import { getHasThumbnail } from '../../lib/utils/media-utils';
import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
-import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import useCatalogFiltersStore from '../../stores/use-catalog-filters-store';
import useCatalogStyleStore from '../../stores/use-catalog-style-store';
import useEditCommentPrivileges from '../../hooks/use-author-privileges';
+import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
import useHide from '../../hooks/use-hide';
import useWindowWidth from '../../hooks/use-window-width';
+import useReplies from '../../hooks/use-replies';
+import { ContentPreview } from '../../views/home/popular-threads-box';
import PostMenuDesktop from '../post-desktop/post-menu-desktop';
import styles from './catalog-row.module.css';
import _ from 'lodash';
-import { ContentPreview } from '../../views/home/popular-threads-box';
-import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
-import { shouldShowSnow } from '../../lib/snow';
-import useReplies from '../../hooks/use-replies';
interface CatalogPostMediaProps {
+ cid: string;
commentMediaInfo: any;
isOutOfFeed?: boolean;
linkWidth?: number;
linkHeight?: number;
}
-export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, linkHeight }: CatalogPostMediaProps) => {
+export const CatalogPostMedia = ({ cid, commentMediaInfo, isOutOfFeed, linkWidth, linkHeight }: CatalogPostMediaProps) => {
const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
const iframeThumbnail = patternThumbnailUrl || thumbnail;
const gifFrameUrl = useFetchGifFirstFrame(type === 'gif' ? url : undefined);
@@ -89,8 +91,16 @@ export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, lin
thumbnailComponent = ;
}
+ const matchedFilterColor = useCatalogFiltersStore((state) => state.matchedFilters.get(cid || ''));
+
return (
- ) => {
+ setInputValue(e.target.value);
+ };
+
+ const isMobile = useIsMobile();
+
+ return (
+ <>
+ {!isMobile && '['}
+
+ {t('search')}
+
+ {!isMobile && ']'}
+ {openSearch && (
+
@@ -306,7 +306,7 @@ const PostMedia = ({ commentMediaInfo, hasThumbnail, isDescription, isRules, spo
);
};
-const Reply = ({ postReplyCount, reply, roles, replies }: PostProps) => {
+const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
let post = reply;
// handle pending mod or author edit
const { editedComment } = useEditedComment({ comment: reply });
@@ -327,7 +327,7 @@ const Reply = ({ postReplyCount, reply, roles, replies }: PostProps) => {
e.stopPropagation()}
+ >
+
+
+ {colorRows.map((row, rowIndex) => (
+
+
+ | + setItemColor(color)} /> + | + ))} +
| Custom | +
| + + + | +
| + setIsColorPickerOpen(false)}> + Close + + + Clear + + | +
+ 
) : (
-
diff --git a/src/components/catalog-search/catalog-search.module.css b/src/components/catalog-search/catalog-search.module.css
new file mode 100644
index 00000000..6c492561
--- /dev/null
+++ b/src/components/catalog-search/catalog-search.module.css
@@ -0,0 +1,49 @@
+.button {
+ text-transform: capitalize;
+ color: var(--button-desktop-text-color);
+ text-decoration: var(--button-text-decoration);
+}
+
+.button:hover {
+ color: var(--button-desktop-text-color-hover);
+ cursor: pointer;
+}
+
+.filtersButton {
+ text-transform: capitalize;
+}
+
+.searchContainer {
+ display: inline;
+}
+
+.searchContainer input {
+ width: 75px;
+ margin: 0px 5px;
+ padding: 1px;
+ outline: none;
+ border: 1px solid #AAA;
+ font-size: 11px;
+}
+
+.searchContainer input:focus {
+ border: var(--post-form-field-input-focus-border);
+}
+
+.closeSearch {
+ cursor: pointer;
+ border: none;
+ white-space: nowrap;
+ color: var(--button-desktop-text-color);
+}
+
+.closeSearch:hover {
+ color: var(--button-desktop-text-color-hover);
+}
+
+@media (max-width: 640px) {
+ .searchContainer input {
+ width: 75px;
+ font-size: 16px;
+ }
+}
diff --git a/src/components/catalog-search/catalog-search.tsx b/src/components/catalog-search/catalog-search.tsx
new file mode 100644
index 00000000..1c25c08b
--- /dev/null
+++ b/src/components/catalog-search/catalog-search.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './catalog-search.module.css';
+import useIsMobile from '../../hooks/use-is-mobile';
+import useCatalogFiltersStore from '../../stores/use-catalog-filters-store';
+import _ from 'lodash';
+
+const CatalogSearch = () => {
+ const { t } = useTranslation();
+ const [openSearch, setOpenSearch] = useState(false);
+ const [inputValue, setInputValue] = useState('');
+ const { setSearchFilter, clearSearchFilter } = useCatalogFiltersStore();
+
+ // Create a debounced version of setSearchFilter
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ const debouncedSetSearchFilter = useCallback(
+ _.debounce((text: string) => {
+ if (text.trim()) {
+ setSearchFilter(text);
+ } else {
+ clearSearchFilter();
+ }
+ }, 300),
+ [setSearchFilter, clearSearchFilter],
+ );
+
+ const handleToggleSearch = useCallback(() => {
+ setOpenSearch((prev) => !prev);
+
+ if (openSearch) {
+ setInputValue('');
+ clearSearchFilter();
+ }
+ }, [openSearch, clearSearchFilter]);
+
+ const handleCloseSearch = useCallback(() => {
+ setOpenSearch(false);
+ setInputValue('');
+ clearSearchFilter();
+ }, [clearSearchFilter]);
+
+ useEffect(() => {
+ if (openSearch) {
+ const input = document.querySelector('input');
+ input?.focus();
+
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ handleCloseSearch();
+ }
+ };
+ window.addEventListener('keydown', handleKeyDown);
+
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ }
+ }, [openSearch, handleCloseSearch]);
+
+ useEffect(() => {
+ debouncedSetSearchFilter(inputValue);
+
+ return () => {
+ debouncedSetSearchFilter.cancel();
+ };
+ }, [inputValue, debouncedSetSearchFilter]);
+
+ const handleSearchChange = (e: React.ChangeEvent
{!isLoaded && !hasError && type !== 'video' && type !== 'audio' && }
{hasError ? 
: thumbnailComponent}
@@ -250,7 +260,13 @@ const CatalogPost = ({ post }: { post: Comment }) => {
{spoiler ? (
: thumbnailComponent}
) : (
-
+
+
+ ✖
+
+
+ )}
+
+ );
+};
+
+export default CatalogSearch;
diff --git a/src/components/catalog-search/index.ts b/src/components/catalog-search/index.ts
new file mode 100644
index 00000000..aa2ace2c
--- /dev/null
+++ b/src/components/catalog-search/index.ts
@@ -0,0 +1 @@
+export { default } from './catalog-search';
diff --git a/src/components/comment-content/comment-content.tsx b/src/components/comment-content/comment-content.tsx
index 3450f05b..3a955788 100644
--- a/src/components/comment-content/comment-content.tsx
+++ b/src/components/comment-content/comment-content.tsx
@@ -2,6 +2,7 @@ import { Fragment, useState } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
import { Comment } from '@plebbit/plebbit-react-hooks';
+import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isPostPageView } from '../../lib/utils/view-utils';
import useIsMobile from '../../hooks/use-is-mobile';
@@ -13,7 +14,7 @@ import Tooltip from '../../components/tooltip';
import styles from '../../views/post/post.module.css';
import _ from 'lodash';
-const CommentContent = ({ comment: post, replies }: { comment: Comment; replies: Comment[] }) => {
+const CommentContent = ({ comment: post }: { comment: Comment }) => {
const { t } = useTranslation();
const params = useParams();
const location = useLocation();
@@ -34,7 +35,7 @@ const CommentContent = ({ comment: post, replies }: { comment: Comment; replies:
? content.slice(0, 2000)
: content);
- const quotelinkReply = parentCid && replies?.find((reply) => reply.cid === parentCid);
+ const quotelinkReply = useSubplebbitsPagesStore((state) => state.comments[parentCid]);
const isReply = !!parentCid;
const isReplyingToReply = isReply && parentCid !== postCid;
@@ -45,9 +46,7 @@ const CommentContent = ({ comment: post, replies }: { comment: Comment; replies:
return (
- {isReply && state !== 'failed' && isReplyingToReply && !(deleted || removed) && ( -- )} + {isReply && state !== 'failed' && isReplyingToReply && !(deleted || removed) && } {removed ? ( reason ? ( <> @@ -75,7 +74,7 @@ const CommentContent = ({ comment: post, replies }: { comment: Comment; replies:
-setShowFullComment(true)} /> }} /> + )} {edit && original?.content !== content && ( @@ -87,20 +86,22 @@ const CommentContent = ({ comment: post, replies }: { comment: Comment; replies: i18nKey={'comment_edited_at_timestamp'} values={{ timestamp: getFormattedDate(edit?.timestamp) }} shouldUnescape={true} - components={{ 1:setShowFullComment(true)} /> }} /> } /> }} + components={{ + 1: } />, + }} />{' '} {reason && <>{t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })} } {showOriginal ? ( setShowOriginal(!showOriginal)} /> }} + components={{ 1: setShowOriginal(!showOriginal)} /> }} /> ) : ( setShowOriginal(!showOriginal)} /> }} + components={{ 1: setShowOriginal(!showOriginal)} /> }} /> )} diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 1cc2718a..47bb8882 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/src/components/post-desktop/post-desktop.tsx @@ -48,7 +48,7 @@ const useShowOmittedReplies = create ((set) => ({ })), })); -const PostInfo = ({ post, postReplyCount = 0, roles, isHidden, replies: threadReplies }: PostProps) => { +const PostInfo = ({ post, postReplyCount = 0, roles, isHidden }: PostProps) => { const { t } = useTranslation(); const { author, cid, deleted, locked, pinned, parentCid, postCid, reason, removed, shortCid, state, subplebbitAddress, timestamp } = post || {}; const title = post?.title?.trim(); @@ -219,7 +219,7 @@ const PostInfo = ({ post, postReplyCount = 0, roles, isHidden, replies: threadRe (reply: Comment, index: number) => reply?.parentCid === cid && reply?.cid && - !(reply?.deleted || reply?.removed) && , + !(reply?.deleted || reply?.removed) && , )}
{'>>'}
- {
parentCid={parentCid}
/>
)}
- {!hidden && (!(removed || deleted) || ((removed || deleted) && reason)) &&
-
))}
{isDescription && subplebbit?.rules && subplebbit?.rules.length > 0 && (
diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css
index 7dca9193..649c43c1 100644
--- a/src/components/post-form/post-form.module.css
+++ b/src/components/post-form/post-form.module.css
@@ -15,8 +15,7 @@
.postFormMobile {
text-align: center;
- margin-top: -2px;
- padding-bottom: 7px;
+ margin-top: -3px;
}
.closed {
diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index e02b00a8..1d107805 100644
--- a/src/components/post-form/post-form.tsx
+++ b/src/components/post-form/post-form.tsx
@@ -1,7 +1,9 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { Comment, setAccount, useAccount, useAccountComment, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Comment, setAccount, useAccount, useAccountComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
+import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
+import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import { getHasThumbnail, getLinkMediaInfo } from '../../lib/utils/media-utils';
import { formatMarkdown } from '../../lib/utils/post-utils';
import { isValidURL } from '../../lib/utils/url-utils';
@@ -56,7 +58,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
const { anonMode, getNewSigner, getExistingSigner } = useAnonMode(postCid);
- const comment = useComment({ commentCid: postCid });
+ const comment = useSubplebbitsPagesStore((state) => state.comments[postCid]);
const address = comment?.author?.address;
const [lengthError, setLengthError] = useState
}
@@ -362,7 +361,7 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true, replies:
showReplies &&
(showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
(null);
const [outOfViewCid, setOutOfViewCid] = useState(null);
const placementRef = useRef('right');
@@ -145,7 +144,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
outOfViewCid === backlinkReply?.cid &&
createPortal(
(null);
const [outOfViewCid, setOutOfViewCid] = useState(null);
@@ -257,7 +256,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
outOfViewCid === backlinkReply?.cid &&
createPortal(
();
export const useAutoSubscribe = () => {
@@ -31,7 +30,7 @@ export const useAutoSubscribe = () => {
const storageKey = AUTO_SUBSCRIBE_KEY_PREFIX + accountAddress;
const hasAutoSubscribed = localStorage.getItem(storageKey);
- if (account.subscriptions?.length > 0 || hasAutoSubscribed) {
+ if (hasAutoSubscribed) {
processedAccounts.add(accountAddress);
removeCheckingAccount(accountAddress);
return;
@@ -40,9 +39,19 @@ export const useAutoSubscribe = () => {
const autoSubscribeAddresses = getAutoSubscribeAddresses();
if (autoSubscribeAddresses.length) {
try {
+ const currentSubscriptions = account.subscriptions || [];
+
+ const mergedSubscriptions = [...currentSubscriptions];
+
+ for (const address of autoSubscribeAddresses) {
+ if (!mergedSubscriptions.includes(address)) {
+ mergedSubscriptions.push(address);
+ }
+ }
+
await setAccount({
...account,
- subscriptions: autoSubscribeAddresses,
+ subscriptions: mergedSubscriptions,
});
localStorage.setItem(storageKey, 'true');
processedAccounts.add(accountAddress);
diff --git a/src/hooks/use-catalog-feed-rows.ts b/src/hooks/use-catalog-feed-rows.ts
index bb995bbc..17b2cfb8 100644
--- a/src/hooks/use-catalog-feed-rows.ts
+++ b/src/hooks/use-catalog-feed-rows.ts
@@ -7,6 +7,7 @@ import { getCommentMediaInfo, getHasThumbnail } from '../lib/utils/media-utils';
import { isAllView } from '../lib/utils/view-utils';
import { useMultisubMetadata } from './use-default-subplebbits';
import _ from 'lodash';
+import useCatalogFiltersStore from '../stores/use-catalog-filters-store';
const useCatalogFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subplebbit: Subplebbit) => {
const { t } = useTranslation();
@@ -19,6 +20,7 @@ const useCatalogFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolea
const multisub = useMultisubMetadata();
const { accountComments } = useAccountComments();
+ const { searchText } = useCatalogFiltersStore();
const feedWithFakePostsOnTop = useMemo(() => {
if (!isFeedLoaded) {
@@ -64,7 +66,7 @@ const useCatalogFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolea
}
// add subplebbit description and rules as fake posts at the top of the feed
- if (description && description.length > 0) {
+ if (description && description.length > 0 && !searchText) {
_feed.unshift({
isDescription: true,
subplebbitAddress: address,
@@ -79,7 +81,7 @@ const useCatalogFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolea
}
// rules are shown in description thread if both are set
- if (rules && rules.length > 0 && !description) {
+ if (rules && rules.length > 0 && !description && !searchText) {
_feed.unshift({
isRules: true,
subplebbitAddress: address,
@@ -93,7 +95,23 @@ const useCatalogFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolea
}
return _feed;
- }, [accountComments, feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t, isInAllView, multisub, hideThreadsWithoutImages]);
+ }, [
+ accountComments,
+ feed,
+ description,
+ rules,
+ address,
+ isFeedLoaded,
+ createdAt,
+ title,
+ shortAddress,
+ avatarUrl,
+ t,
+ isInAllView,
+ multisub,
+ hideThreadsWithoutImages,
+ searchText,
+ ]);
const rows = useMemo(() => {
const rows = [];
diff --git a/src/index.css b/src/index.css
index 3bf6c15f..97e46b19 100644
--- a/src/index.css
+++ b/src/index.css
@@ -52,6 +52,10 @@ hr {
color-scheme: dark;
}
+[data-floating-ui-portal] {
+ color-scheme: var(--color-scheme) !important;
+}
+
.yellowOfflineIcon {
background-image: url('/assets/icons/offline-blue.png');
}
diff --git a/src/lib/utils/pattern-utils.ts b/src/lib/utils/pattern-utils.ts
new file mode 100644
index 00000000..b260d162
--- /dev/null
+++ b/src/lib/utils/pattern-utils.ts
@@ -0,0 +1,261 @@
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
+
+/**
+ * Checks if a text matches a pattern according to various pattern matching rules:
+ * - Whole word matching: 'feel' matches 'feel' but not 'feeling'
+ * - AND operator: 'feel girlfriend' matches both words in any order
+ * - OR operator: 'feel|girlfriend' matches either word
+ * - Mixed operators: 'girlfriend|boyfriend feel' matches complex logic
+ * - Exact match: "that feel when" matches the exact phrase
+ * - Wildcards: 'feel*' matches 'feel', 'feels', 'feeling', etc.
+ * - Regex: /pattern/flags for regular expressions
+ *
+ * @param text The text to check against the pattern
+ * @param pattern The pattern to match
+ * @returns True if the text matches the pattern, false otherwise
+ */
+export const matchesPattern = (text: string, pattern: string): boolean => {
+ if (!pattern || !text) return false;
+
+ const textLower = text.toLowerCase();
+
+ try {
+ // Check if it's a regex pattern (starts and ends with /)
+ if (pattern.startsWith('/') && pattern.length > 2 && /\/[gimsuy]*$/.test(pattern)) {
+ const lastSlashIndex = pattern.lastIndexOf('/');
+ const regexPattern = pattern.substring(1, lastSlashIndex);
+ const flags = pattern.substring(lastSlashIndex + 1);
+ const regex = new RegExp(regexPattern, flags);
+ return regex.test(textLower);
+ }
+ // Check if it's an exact match pattern (surrounded by quotes)
+ else if (pattern.startsWith('"') && pattern.endsWith('"') && pattern.length > 2) {
+ const exactPattern = pattern.substring(1, pattern.length - 1).toLowerCase();
+ return textLower.includes(exactPattern);
+ }
+ // Check for OR patterns (contains |)
+ else if (pattern.includes('|')) {
+ const orGroups = pattern.split(' ').filter(Boolean);
+
+ // Process each group (which might contain OR operators)
+ return orGroups.every((group) => {
+ const orTerms = group.split('|').map((term) => term.toLowerCase());
+ return orTerms.some((term) => {
+ // Handle wildcards in OR terms
+ if (term.includes('*')) {
+ const regexPattern = term.replace(/\*/g, '.*').toLowerCase();
+ const regex = new RegExp(`\\b${regexPattern}\\b`, 'i');
+ return regex.test(textLower);
+ } else {
+ // Match whole word only
+ const regex = new RegExp(`\\b${term}\\b`, 'i');
+ return regex.test(textLower);
+ }
+ });
+ });
+ }
+ // Check for AND patterns (space-separated words)
+ else if (pattern.includes(' ')) {
+ const andTerms = pattern
+ .split(' ')
+ .filter(Boolean)
+ .map((term) => term.toLowerCase());
+ return andTerms.every((term) => {
+ // Handle wildcards in AND terms
+ if (term.includes('*')) {
+ const regexPattern = term.replace(/\*/g, '.*').toLowerCase();
+ const regex = new RegExp(`\\b${regexPattern}\\b`, 'i');
+ return regex.test(textLower);
+ } else {
+ // Match whole word only
+ const regex = new RegExp(`\\b${term}\\b`, 'i');
+ return regex.test(textLower);
+ }
+ });
+ }
+ // Handle wildcard patterns
+ else if (pattern.includes('*')) {
+ const regexPattern = pattern.replace(/\*/g, '.*').toLowerCase();
+ const regex = new RegExp(`\\b${regexPattern}\\b`, 'i');
+ return regex.test(textLower);
+ }
+ // Simple whole word match
+ else {
+ const regex = new RegExp(`\\b${pattern.toLowerCase()}\\b`, 'i');
+ return regex.test(textLower);
+ }
+ } catch (error) {
+ // If regex parsing fails, fall back to simple includes
+ console.error('Pattern matching error:', error);
+ const simplifiedPattern = pattern.toLowerCase();
+ return textLower.includes(simplifiedPattern);
+ }
+};
+
+/**
+ * Checks if a user ID matches a pattern
+ *
+ * @param comment The comment to check
+ * @param pattern The pattern to match (without the # prefix)
+ * @returns True if the user ID matches the pattern, false otherwise
+ */
+export const userIdMatchesPattern = (comment: Comment, pattern: string): boolean => {
+ if (!pattern || !comment?.author) return false;
+
+ // Check both address and shortAddress if available
+ const address = comment.author.address || '';
+ const shortAddress = comment.author.shortAddress || '';
+
+ return address.includes(pattern) || shortAddress.includes(pattern);
+};
+
+/**
+ * Checks if a display name matches a pattern
+ *
+ * @param comment The comment to check
+ * @param pattern The pattern to match (without the ## prefix)
+ * @returns True if the display name matches the pattern, false otherwise
+ */
+export const displayNameMatchesPattern = (comment: Comment, pattern: string): boolean => {
+ if (!pattern) return false;
+
+ // Special case for "Anonymous" to match undefined display names
+ if (pattern.toLowerCase() === 'anonymous') {
+ return comment?.author?.displayName === undefined;
+ }
+
+ if (!comment?.author?.displayName) return false;
+
+ return comment.author.displayName.toLowerCase().includes(pattern.toLowerCase());
+};
+
+/**
+ * Checks if a user has a specific role
+ *
+ * @param comment The comment to check
+ * @param role The role to check for (without the #!# prefix)
+ * @returns True if the user has the specified role, false otherwise
+ */
+export const userHasRole = (comment: Comment, role: string): boolean => {
+ if (!role || !comment?.author?.address || !comment?.subplebbitAddress) {
+ return false;
+ }
+
+ const subplebbits = useSubplebbitsStore.getState().subplebbits;
+ const subplebbit = subplebbits[comment.subplebbitAddress];
+
+ if (!subplebbit?.roles) {
+ return false;
+ }
+
+ const userRole = subplebbit.roles[comment.author.address]?.role;
+
+ // Handle different role names (moderator/mod)
+ if ((role.toLowerCase() === 'moderator' || role.toLowerCase() === 'mod') && userRole === 'moderator') {
+ return true;
+ }
+
+ return userRole?.toLowerCase() === role.toLowerCase();
+};
+
+/**
+ * Parses a pattern that may contain special filters and content filters
+ *
+ * @param pattern The pattern to parse
+ * @returns An object containing the parsed special filters and content filters
+ */
+export const parsePattern = (
+ pattern: string,
+): {
+ specialFilters: { type: 'userId' | 'displayName' | 'role'; value: string }[];
+ contentFilter: string;
+} => {
+ if (!pattern) return { specialFilters: [], contentFilter: '' };
+
+ const parts = pattern.split(' ');
+ const specialFilters: { type: 'userId' | 'displayName' | 'role'; value: string }[] = [];
+ const contentParts: string[] = [];
+
+ parts.forEach((part) => {
+ if (part.startsWith('#') && !part.startsWith('##') && !part.startsWith('#!#')) {
+ specialFilters.push({ type: 'userId', value: part.substring(1) });
+ } else if (part.startsWith('##')) {
+ specialFilters.push({ type: 'displayName', value: part.substring(2) });
+ } else if (part.startsWith('#!#')) {
+ specialFilters.push({ type: 'role', value: part.substring(3) });
+ } else {
+ contentParts.push(part);
+ }
+ });
+
+ return {
+ specialFilters,
+ contentFilter: contentParts.join(' '),
+ };
+};
+
+/**
+ * Checks if a comment matches a pattern in its title or content,
+ * or if it matches special filters for user ID, display name, or role
+ *
+ * @param comment The comment to check
+ * @param pattern The pattern to match
+ * @returns True if the comment matches the pattern, false otherwise
+ */
+export const commentMatchesPattern = (comment: Comment, pattern: string): boolean => {
+ if (!pattern || !comment) return false;
+
+ // Check if the pattern contains spaces, which might indicate combined filters
+ if (pattern.includes(' ') && (pattern.includes('#') || pattern.includes('##') || pattern.includes('#!#'))) {
+ // Parse the pattern into special filters and content filter
+ const { specialFilters, contentFilter } = parsePattern(pattern);
+
+ // If there are special filters, check if the comment matches all of them
+ if (specialFilters.length > 0) {
+ const allSpecialFiltersMatch = specialFilters.every((filter) => {
+ if (filter.type === 'userId') {
+ return userIdMatchesPattern(comment, filter.value);
+ } else if (filter.type === 'displayName') {
+ return displayNameMatchesPattern(comment, filter.value);
+ } else if (filter.type === 'role') {
+ return userHasRole(comment, filter.value);
+ }
+ return false;
+ });
+
+ // If there's also a content filter, check if the comment matches it as well
+ if (contentFilter) {
+ return allSpecialFiltersMatch && matchesPattern((comment?.title || '') + ' ' + (comment?.content || ''), contentFilter);
+ }
+
+ return allSpecialFiltersMatch;
+ }
+ }
+
+ // Simple cases for single filters
+ // Check for user ID filter (starts with #)
+ if (pattern.startsWith('#') && !pattern.startsWith('##') && !pattern.startsWith('#!#')) {
+ const userIdPattern = pattern.substring(1);
+ return userIdMatchesPattern(comment, userIdPattern);
+ }
+
+ // Check for display name filter (starts with ##)
+ if (pattern.startsWith('##')) {
+ const displayNamePattern = pattern.substring(2);
+ return displayNameMatchesPattern(comment, displayNamePattern);
+ }
+
+ // Check for role filter (starts with #!#)
+ if (pattern.startsWith('#!#')) {
+ const rolePattern = pattern.substring(3);
+ return userHasRole(comment, rolePattern);
+ }
+
+ // Regular content matching
+ const titleLower = comment?.title?.toLowerCase() || '';
+ const contentLower = comment?.content?.toLowerCase() || '';
+ const textToMatch = titleLower + ' ' + contentLower;
+
+ return matchesPattern(textToMatch, pattern);
+};
diff --git a/src/stores/use-catalog-filters-store.ts b/src/stores/use-catalog-filters-store.ts
index ef72762f..9d0b88e0 100644
--- a/src/stores/use-catalog-filters-store.ts
+++ b/src/stores/use-catalog-filters-store.ts
@@ -1,11 +1,18 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { Comment } from '@plebbit/plebbit-react-hooks';
-import { getCommentMediaInfo, getHasThumbnail } from '../lib/utils/media-utils';
+import { commentMatchesPattern } from '../lib/utils/pattern-utils';
interface FilterItem {
text: string;
enabled: boolean;
+ count: number;
+ filteredCids: Set;
+ subplebbitCounts: Map;
+ subplebbitFilteredCids: Map>;
+ hide: boolean;
+ top: boolean;
+ color?: string;
}
interface CatalogFiltersStore {
@@ -20,7 +27,19 @@ interface CatalogFiltersStore {
updateFilter: () => void;
initializeFilter: () => void;
filteredCount: number;
- resetFilteredCount: () => void;
+ filteredCids: Set;
+ incrementFilterCount: (filterIndex: number, cid: string, subplebbitAddress: string) => void;
+ recalcFilteredCount: () => void;
+ currentSubplebbitAddress: string | null;
+ setCurrentSubplebbitAddress: (address: string | null) => void;
+ getFilteredCountForCurrentSubplebbit: () => number;
+ searchText: string;
+ setSearchFilter: (text: string) => void;
+ clearSearchFilter: () => void;
+ resetCountsForCurrentSubplebbit: () => void;
+ matchedFilters: Map;
+ setMatchedFilter: (cid: string, color: string) => void;
+ clearMatchedFilters: () => void;
}
const useCatalogFiltersStore = create(
@@ -28,76 +47,346 @@ const useCatalogFiltersStore = create(
(set, get) => ({
showTextOnlyThreads: false,
setShowTextOnlyThreads: (value: boolean) => {
- set({ showTextOnlyThreads: value, filteredCount: 0 });
+ set({ showTextOnlyThreads: value });
get().updateFilter();
},
filterText: '',
setFilterText: (value: string) => set({ filterText: value }),
filterItems: [],
+ filteredCount: 0,
+ filteredCids: new Set(),
+ currentSubplebbitAddress: null,
+ matchedFilters: new Map(),
+ setMatchedFilter: (cid: string, color: string) => {
+ set((state) => {
+ const newMatchedFilters = new Map(state.matchedFilters);
+ if (color) {
+ newMatchedFilters.set(cid, color);
+ } else {
+ newMatchedFilters.delete(cid);
+ }
+ return { matchedFilters: newMatchedFilters };
+ });
+ },
+ clearMatchedFilters: () => {
+ set({ matchedFilters: new Map() });
+ },
+ setCurrentSubplebbitAddress: (address: string | null) => {
+ const prevAddress = get().currentSubplebbitAddress;
+
+ if (address !== prevAddress) {
+ set((state) => {
+ if (address) {
+ const updatedFilterItems = state.filterItems.map((item) => {
+ const newItem = { ...item };
+
+ // Reset count and filteredCids (global counters)
+ newItem.count = 0;
+ newItem.filteredCids = new Set();
+
+ // Ensure subplebbitCounts is a Map
+ if (!newItem.subplebbitCounts || !(newItem.subplebbitCounts instanceof Map)) {
+ newItem.subplebbitCounts = new Map();
+ }
+
+ // Ensure subplebbitFilteredCids is a Map
+ if (!newItem.subplebbitFilteredCids || !(newItem.subplebbitFilteredCids instanceof Map)) {
+ newItem.subplebbitFilteredCids = new Map();
+ }
+
+ // Only initialize for the new address if it doesn't already exist
+ if (!newItem.subplebbitFilteredCids.has(address)) {
+ newItem.subplebbitFilteredCids.set(address, new Set());
+ }
+ if (!newItem.subplebbitCounts.has(address)) {
+ newItem.subplebbitCounts.set(address, 0);
+ }
+
+ return newItem;
+ });
+
+ return {
+ currentSubplebbitAddress: address,
+ filterItems: updatedFilterItems,
+ filteredCount: 0, // This will be recalculated below
+ };
+ }
+
+ return { currentSubplebbitAddress: address };
+ });
+
+ // Recalculate the filtered count for the current subplebbit
+ get().recalcFilteredCount();
+ get().updateFilter();
+ } else {
+ set({ currentSubplebbitAddress: address });
+ }
+ },
+ searchText: '',
+ setSearchFilter: (text: string) => {
+ set({ searchText: text });
+ get().updateFilter();
+ },
+ clearSearchFilter: () => {
+ set({ searchText: '' });
+ get().updateFilter();
+ },
setFilterItems: (items: FilterItem[]) => {
- const nonEmptyItems = items.filter((item) => item.text.trim() !== '');
+ const nonEmptyItems = items
+ .filter((item) => item.text.trim() !== '')
+ .map((item) => ({
+ ...item,
+ count: item.count || 0,
+ filteredCids: item.filteredCids || new Set(),
+ subplebbitCounts: item.subplebbitCounts || new Map(),
+ subplebbitFilteredCids: item.subplebbitFilteredCids || new Map(),
+ hide: item.hide ?? true,
+ top: item.top ?? false,
+ color: item.color || '',
+ }));
set({ filterItems: nonEmptyItems });
+ get().recalcFilteredCount();
},
saveAndApplyFilters: (items: FilterItem[]) => {
- const nonEmptyItems = items.filter((item) => item.text.trim() !== '');
- set({ filterItems: nonEmptyItems, filteredCount: 0 });
+ const nonEmptyItems = items
+ .filter((item) => item.text.trim() !== '')
+ .map((item) => ({
+ ...item,
+ count: item.count || 0,
+ filteredCids: item.filteredCids || new Set(),
+ subplebbitCounts: item.subplebbitCounts || new Map(),
+ subplebbitFilteredCids: item.subplebbitFilteredCids || new Map(),
+ hide: item.hide ?? true,
+ top: item.top ?? false,
+ color: item.color || '',
+ }));
+
+ // Compare new filter items with existing ones to detect pattern changes
+ const existingItems = get().filterItems;
+ const updatedItems = nonEmptyItems.map((newItem) => {
+ // Try to find matching existing item by index or text
+ const existingItem = existingItems.find((item) => item.text === newItem.text);
+
+ // If we found a matching item, keep its counts
+ if (existingItem) {
+ return {
+ ...newItem,
+ count: existingItem.count,
+ filteredCids: existingItem.filteredCids,
+ subplebbitCounts: existingItem.subplebbitCounts,
+ subplebbitFilteredCids: existingItem.subplebbitFilteredCids,
+ color: newItem.color || '',
+ };
+ }
+
+ // If pattern has changed or it's a new filter, reset all counts
+ return {
+ ...newItem,
+ count: 0,
+ filteredCids: new Set(),
+ subplebbitCounts: new Map(),
+ subplebbitFilteredCids: new Map>(),
+ color: newItem.color || '',
+ };
+ });
+
+ // Clear matched filters when saving new filters
+ get().clearMatchedFilters();
+
+ set({
+ filterItems: updatedItems,
+ filteredCids: new Set(),
+ });
+
+ get().recalcFilteredCount();
get().updateFilter();
},
filter: undefined,
updateFilter: () => {
- // const filteredCids = new Set();
set((state) => ({
filter: (comment: Comment) => {
- const {
- showTextOnlyThreads,
- // filterItems
- } = state;
+ if (!comment?.cid) return true;
- const { link, linkHeight, linkWidth, thumbnailUrl } = comment || {};
+ const currentSubplebbit = state.currentSubplebbitAddress;
- const hasThumbnail = getHasThumbnail(getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight), link);
- // const title = comment?.title?.toLowerCase() || '';
- // const content = comment?.content?.toLowerCase() || '';
-
- // const matchesFilterItems = filterItems
- // .filter((item) => item.enabled)
- // .some((item) => {
- // const text = item.text.toLowerCase();
- // return title.includes(text) || content.includes(text);
- // });
-
- const shouldShow = showTextOnlyThreads || hasThumbnail;
-
- if (
- !shouldShow
- // || matchesFilterItems
- ) {
- // if (
- // matchesFilterItems &&
- // !filteredCids.has(comment.cid)) {
- // filteredCids.add(comment.cid);
- // set((state) => ({ filteredCount: state.filteredCount + 1 }));
- // }
- return false;
+ // Apply search filter
+ if (state.searchText.trim() !== '') {
+ if (!commentMatchesPattern(comment, state.searchText)) {
+ return false;
+ }
}
- return true;
+ // Apply content filters
+ const { filterItems } = state;
+ let shouldHide = false;
+
+ for (let i = 0; i < filterItems.length; i++) {
+ const item = filterItems[i];
+ if (item.enabled && item.text.trim() !== '') {
+ if (commentMatchesPattern(comment, item.text)) {
+ // If we have a current subplebbit and this is a match, increment the count
+ if (currentSubplebbit && comment.subplebbitAddress === currentSubplebbit) {
+ // We need to use a timeout to avoid modifying state during a state update
+ setTimeout(() => {
+ const filterIndex = filterItems.findIndex((f) => f.text === item.text && f.enabled);
+ if (filterIndex !== -1) {
+ get().incrementFilterCount(filterIndex, comment.cid, comment.subplebbitAddress);
+ }
+ }, 0);
+ }
+
+ if (item.hide) {
+ shouldHide = true;
+ }
+ }
+ }
+ }
+
+ return !shouldHide;
},
}));
},
initializeFilter: () => {
- const { updateFilter } = get();
- updateFilter();
+ get().updateFilter();
+ },
+ incrementFilterCount: (filterIndex: number, cid: string, subplebbitAddress: string) => {
+ set((state) => {
+ const newFilterItems = [...state.filterItems];
+ if (newFilterItems[filterIndex]) {
+ const item = newFilterItems[filterIndex];
+
+ // Ensure subplebbitFilteredCids is a Map
+ const subplebbitFilteredCids = new Map(item.subplebbitFilteredCids);
+ if (!subplebbitFilteredCids.has(subplebbitAddress)) {
+ subplebbitFilteredCids.set(subplebbitAddress, new Set());
+ }
+ const cidSet = subplebbitFilteredCids.get(subplebbitAddress)!;
+
+ // Only increment the count if this CID hasn't been counted for this subplebbit yet
+ if (!cidSet.has(cid)) {
+ const newItemFilteredCids = new Set(item.filteredCids);
+ newItemFilteredCids.add(cid);
+
+ cidSet.add(cid);
+ subplebbitFilteredCids.set(subplebbitAddress, cidSet);
+
+ const subplebbitCounts = new Map(item.subplebbitCounts);
+ const currentCount = subplebbitCounts.get(subplebbitAddress) || 0;
+ subplebbitCounts.set(subplebbitAddress, currentCount + 1);
+
+ newFilterItems[filterIndex] = {
+ ...item,
+ count: item.count + 1,
+ filteredCids: newItemFilteredCids,
+ subplebbitCounts,
+ subplebbitFilteredCids,
+ };
+
+ return { filterItems: newFilterItems };
+ }
+ }
+ return state;
+ });
+
+ get().recalcFilteredCount();
+ },
+ recalcFilteredCount: () => {
+ set((state) => {
+ const currentSubplebbit = state.currentSubplebbitAddress;
+ if (!currentSubplebbit) return { filteredCount: 0 };
+
+ let filteredCount = 0;
+ for (const item of state.filterItems) {
+ if (item.enabled && item.hide) {
+ const subCount = item.subplebbitCounts?.get(currentSubplebbit) || 0;
+ filteredCount += subCount;
+ }
+ }
+
+ return { filteredCount };
+ });
+ },
+ getFilteredCountForCurrentSubplebbit: () => {
+ const state = get();
+ const currentSubplebbit = state.currentSubplebbitAddress;
+ if (!currentSubplebbit) return 0;
+
+ let filteredCount = 0;
+ for (const item of state.filterItems) {
+ if (item.enabled && item.hide) {
+ const subCount = item.subplebbitCounts?.get(currentSubplebbit) || 0;
+ filteredCount += subCount;
+ }
+ }
+
+ return filteredCount;
+ },
+ resetCountsForCurrentSubplebbit: () => {
+ const currentSubplebbit = get().currentSubplebbitAddress;
+ if (!currentSubplebbit) return;
+
+ set((state) => {
+ const updatedFilterItems = state.filterItems.map((item) => {
+ const newItem = { ...item };
+
+ // Ensure maps are properly initialized
+ if (!newItem.subplebbitCounts || !(newItem.subplebbitCounts instanceof Map)) {
+ newItem.subplebbitCounts = new Map();
+ }
+ if (!newItem.subplebbitFilteredCids || !(newItem.subplebbitFilteredCids instanceof Map)) {
+ newItem.subplebbitFilteredCids = new Map();
+ }
+
+ // Reset counts for current subplebbit
+ newItem.subplebbitCounts.set(currentSubplebbit, 0);
+ newItem.subplebbitFilteredCids.set(currentSubplebbit, new Set());
+
+ return newItem;
+ });
+
+ return {
+ filterItems: updatedFilterItems,
+ filteredCount: 0,
+ };
+ });
+
+ // Trigger filter reapplication to start counting again
+ get().updateFilter();
},
- filteredCount: 0,
- resetFilteredCount: () => set({ filteredCount: 0 }),
}),
{
name: 'catalog-filters-storage',
- onRehydrateStorage: () => (state) => {
- if (state) {
- state.updateFilter();
+ partialize: (state) => {
+ return {
+ showTextOnlyThreads: state.showTextOnlyThreads,
+ filterItems: state.filterItems.map((item) => ({
+ text: item.text,
+ enabled: item.enabled,
+ hide: item.hide,
+ top: item.top,
+ })),
+ } as any;
+ },
+ deserialize: (persisted) => {
+ const persistedObj = typeof persisted === 'string' ? JSON.parse(persisted) : persisted;
+
+ if (persistedObj && persistedObj.filterItems) {
+ return {
+ ...persistedObj,
+ filterItems: persistedObj.filterItems.map((item: any) => ({
+ text: item.text,
+ enabled: item.enabled,
+ hide: item.hide,
+ top: item.top,
+ count: 0,
+ filteredCids: new Set(),
+ subplebbitCounts: new Map(),
+ subplebbitFilteredCids: new Map>(),
+ })),
+ filteredCount: 0,
+ };
}
+ return persistedObj || persisted;
},
},
),
diff --git a/src/themes.css b/src/themes.css
index f25059a3..93e6b01c 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -50,6 +50,7 @@
--button-desktop-text-color: #00e;
--button-desktop-text-color-hover: red;
--close-button-background-image: url("/assets/buttons/cross-red.png");
+ --open-help-button-background-image: url("/assets/buttons/help-red.png");
/* horizontal rule */
--hr-border: none;
@@ -263,6 +264,7 @@
--button-desktop-text-color: #34345c;
--button-desktop-text-color-hover: #d00;
--close-button-background-image: url("/assets/buttons/cross-blue.png");
+ --open-help-button-background-image: url("/assets/buttons/help-blue.png");
/* footer */
--footer-item-background-color-desktop: #eef2ff;
@@ -479,6 +481,7 @@
--button-desktop-text-color-hover: red;
--button-text-decoration: underline;
--close-button-background-image: url("/assets/buttons/cross-red.png");
+ --open-help-button-background-image: url("/assets/buttons/help-red.png");
/* footer */
--footer-item-background-color-desktop: #fed;
@@ -657,7 +660,7 @@
--button-text-decoration: underline;
--button-desktop-text-color-hover: #d00;
--close-button-background-image: url("/assets/buttons/cross-blue.png");
-
+ --open-help-button-background-image: url("/assets/buttons/help-blue.png");
/* footer */
--footer-item-background-color-desktop: #eef2ff;
@@ -848,7 +851,7 @@
--button-desktop-text-color: #81a2be;
--button-desktop-text-color-hover: #5f89ac;
--close-button-background-image: url("/assets/buttons/cross-dark.png");
-
+ --open-help-button-background-image: url("/assets/buttons/help-dark.png");
/* filter for inputs */
--filter80: brightness(85%);
@@ -1067,7 +1070,7 @@
--button-desktop-text-color: #f60;
--button-desktop-text-color-hover: #f30;
--close-button-background-image: url("/assets/buttons/cross-photon.png");
-
+ --open-help-button-background-image: url("/assets/buttons/help-photon.png");
/* horizontal rule */
--hr-border: none;
--hr-border-top: 1px solid #ddd;
diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx
index 9f7472f6..fbdc2252 100644
--- a/src/views/board/board.tsx
+++ b/src/views/board/board.tsx
@@ -20,13 +20,16 @@ import { Post } from '../post';
const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
-const threadsWithoutImagesFilter = (comment: Comment) => {
- const { link, linkHeight, linkWidth, thumbnailUrl } = comment || {};
- if (!getHasThumbnail(getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight), link)) {
- return false;
- }
- return true;
-};
+const createThreadsWithoutImagesFilter = () => ({
+ filter: (comment: Comment) => {
+ const { link, linkHeight, linkWidth, thumbnailUrl } = comment || {};
+ if (!getHasThumbnail(getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight), link)) {
+ return false;
+ }
+ return true;
+ },
+ key: 'threads-with-images-only',
+});
const Board = () => {
const { t } = useTranslation();
@@ -66,7 +69,7 @@ const Board = () => {
sortType,
postsPerPage: isInAllView || isInSubscriptionsView || isInModView ? 5 : 25,
...(isInAllView || isInSubscriptionsView || isInModView ? { newerThan: timeFilterSeconds } : {}),
- filter: hideThreadsWithoutImages ? threadsWithoutImagesFilter : undefined,
+ filter: hideThreadsWithoutImages ? createThreadsWithoutImagesFilter() : undefined,
};
const { feed, hasMore, loadMore, reset, subplebbitAddressesWithNewerPosts } = useFeed(feedOptions);
@@ -134,13 +137,13 @@ const Board = () => {
subplebbitAddresses,
sortType,
newerThan: 60 * 60 * 24 * 7,
- filter: hideThreadsWithoutImages ? threadsWithoutImagesFilter : undefined,
+ filter: hideThreadsWithoutImages ? createThreadsWithoutImagesFilter() : undefined,
});
const { feed: monthlyFeed } = useFeed({
subplebbitAddresses,
sortType,
newerThan: 60 * 60 * 24 * 30,
- filter: hideThreadsWithoutImages ? threadsWithoutImagesFilter : undefined,
+ filter: hideThreadsWithoutImages ? createThreadsWithoutImagesFilter() : undefined,
});
const feedLength = feed.length;
diff --git a/src/views/catalog/catalog-filters/catalog-filters.tsx b/src/views/catalog/catalog-filters/catalog-filters.tsx
deleted file mode 100644
index e104f51e..00000000
--- a/src/views/catalog/catalog-filters/catalog-filters.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { useState, useCallback, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import useCatalogFiltersStore from '../../../stores/use-catalog-filters-store';
-import styles from './catalog-filters.module.css';
-
-const FiltersTable = ({ onSave }: { onSave: () => void }) => {
- const { t } = useTranslation();
- const { filterItems, saveAndApplyFilters } = useCatalogFiltersStore();
-
- const [localFilterItems, setLocalFilterItems] = useState(filterItems);
- const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-
- const handleAddFilter = useCallback(() => {
- setLocalFilterItems((prev) => {
- const newIndex = prev.length;
- setTimeout(() => {
- inputRefs.current[newIndex]?.focus();
- }, 0);
- return [...prev, { text: '', enabled: true }];
- });
- }, []);
-
- const handleSave = useCallback(() => {
- const nonEmptyFilters = localFilterItems.filter((item) => item.text.trim() !== '');
- saveAndApplyFilters(nonEmptyFilters);
- onSave();
- }, [saveAndApplyFilters, localFilterItems, onSave]);
-
- const updateLocalFilterItem = useCallback((index: number, item: any) => {
- setLocalFilterItems((prev) => prev.map((f, i) => (i === index ? item : f)));
- }, []);
-
- const removeLocalFilterItem = useCallback((index: number) => {
- setLocalFilterItems((prev) => prev.filter((_, i) => i !== index));
- }, []);
-
- 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;
- });
- }, []);
-
- return (
-
-
-
- );
-};
-
-const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
- const { t } = useTranslation();
-
- return (
- <>
-
- ; hide: boolean; top: boolean; color?: string }[],
+ subplebbitAddress: string,
+ onFilterMatch?: (filterIndex: number, cid: string, subplebbitAddress: string) => void,
+) => {
+ // Create a unique key based on the enabled filter items
+ const enabledFilters = filterItems.filter((item) => item.enabled && item.text.trim() !== '');
+ const filterKey =
+ enabledFilters.length > 0
+ ? `content-filter-${enabledFilters.map((item) => `${item.text}-${item.hide ? 'hide' : ''}-${item.top ? 'top' : ''}`).join('-')}`
+ : 'no-content-filter';
+
+ return {
+ filter: (comment: Comment) => {
+ if (!comment?.cid) return true;
+
+ if (enabledFilters.length === 0) return true;
+
+ // Check if any enabled filter matches the content
+ for (let i = 0; i < enabledFilters.length; i++) {
+ const item = enabledFilters[i];
+ const pattern = item.text;
+
+ if (commentMatchesPattern(comment, pattern)) {
+ // Find the original filter index to increment count
+ const filterIndex = filterItems.findIndex((f) => f.text === item.text && f.enabled);
+ if (filterIndex !== -1) {
+ if (onFilterMatch) {
+ onFilterMatch(filterIndex, comment.cid, subplebbitAddress);
+ } else {
+ // Fallback to the store method if no callback provided
+ useCatalogFiltersStore.getState().incrementFilterCount(filterIndex, comment.cid, subplebbitAddress);
+ }
+
+ // If the filter has a color, track it in the matchedFilters map
+ if (item.color) {
+ useCatalogFiltersStore.getState().setMatchedFilter(comment.cid, item.color);
+ }
+ }
+
+ // If this filter is set to hide, filter out the comment
+ if (item.hide) {
+ return false;
+ }
+
+ // If this filter is set to top, we'll handle it separately in the component
+ // (we don't filter it out here)
+ }
+ }
+
+ return true;
+ },
+ key: filterKey,
+ };
+};
+
+const createImageFilter = (showTextOnlyThreads: boolean) => {
+ return {
+ filter: (comment: Comment) => {
+ if (showTextOnlyThreads) return true;
+
+ const { link, linkHeight, linkWidth, thumbnailUrl } = comment || {};
+ const hasThumbnail = getHasThumbnail(getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight), link);
+
+ return hasThumbnail;
+ },
+ key: showTextOnlyThreads ? 'no-image-filter' : 'threads-with-images-only',
+ };
+};
+
+const createCombinedFilter = (
+ showTextOnlyThreads: boolean,
+ filterItems: { text: string; enabled: boolean; count: number; filteredCids: Set; hide: boolean; top: boolean; color?: string }[],
+ searchText: string,
+ subplebbitAddress: string,
+ onFilterMatch?: (filterIndex: number, cid: string, subplebbitAddress: string) => void,
+) => {
+ const imageFilter = createImageFilter(showTextOnlyThreads);
+ const contentFilter = createContentFilter(filterItems, subplebbitAddress, onFilterMatch);
+
+ const searchFilter = {
+ filter: (comment: Comment) => {
+ if (!searchText.trim()) return true;
+ return commentMatchesPattern(comment, searchText);
+ },
+ key: searchText ? `search-filter-${searchText}` : 'no-search-filter',
+ };
+
+ return {
+ filter: (comment: Comment) => {
+ if (!imageFilter.filter(comment)) return false;
+ if (!contentFilter.filter(comment)) return false;
+ if (!searchFilter.filter(comment)) return false;
+
+ return true;
+ },
+ key: `${imageFilter.key}-${contentFilter.key}-${searchFilter.key}`,
+ };
};
const Catalog = () => {
@@ -36,7 +130,7 @@ const Catalog = () => {
const isInAllView = isAllView(location.pathname);
const defaultSubplebbits = useDefaultSubplebbits();
const { hideAdultBoards, hideGoreBoards } = useInterfaceSettingsStore();
- const { hideThreadsWithoutImages } = useInterfaceSettingsStore();
+ const { showTextOnlyThreads, filterItems, searchText, clearMatchedFilters } = useCatalogFiltersStore();
const account = useAccount();
const subscriptions = account?.subscriptions;
@@ -74,12 +168,25 @@ const Catalog = () => {
const { timeFilterSeconds, timeFilterName } = useTimeFilter();
const { sortType } = useSortingStore();
+ // Create a stable callback for filter matching
+ const handleFilterMatch = useCallback((filterIndex: number, cid: string, subplebbitAddress: string) => {
+ useCatalogFiltersStore.getState().incrementFilterCount(filterIndex, cid, subplebbitAddress);
+ }, []);
+
+ // Set the current subplebbit address
+ useEffect(() => {
+ useCatalogFiltersStore.getState().setCurrentSubplebbitAddress(subplebbitAddress || null);
+ return () => {
+ useCatalogFiltersStore.getState().setCurrentSubplebbitAddress(null);
+ };
+ }, [subplebbitAddress]);
+
const feedOptions = useMemo(() => {
const options: any = {
subplebbitAddresses,
sortType,
postsPerPage: isInAllView || isInSubscriptionsView ? 10 : postsPerPage,
- filter: hideThreadsWithoutImages ? threadsWithoutImagesFilter : undefined,
+ filter: createCombinedFilter(showTextOnlyThreads, filterItems, searchText, subplebbitAddress || 'all', handleFilterMatch),
};
if (isInAllView || isInSubscriptionsView) {
@@ -87,7 +194,19 @@ const Catalog = () => {
}
return options;
- }, [subplebbitAddresses, sortType, isInAllView, isInSubscriptionsView, postsPerPage, timeFilterSeconds, hideThreadsWithoutImages]);
+ }, [
+ subplebbitAddresses,
+ sortType,
+ isInAllView,
+ isInSubscriptionsView,
+ postsPerPage,
+ timeFilterSeconds,
+ showTextOnlyThreads,
+ filterItems,
+ searchText,
+ subplebbitAddress,
+ handleFilterMatch,
+ ]);
const { feed, hasMore, loadMore, reset, subplebbitAddressesWithNewerPosts } = useFeed(feedOptions);
const { accountComments } = useAccountComments();
@@ -99,19 +218,31 @@ const Catalog = () => {
() =>
accountComments.filter((comment) => {
const { cid, deleted, link, linkHeight, linkWidth, postCid, removed, state, thumbnailUrl, timestamp } = comment || {};
- return (
+
+ // Basic filtering conditions
+ const basicConditions =
!deleted &&
!removed &&
timestamp > Date.now() / 1000 - 60 * 60 &&
state === 'succeeded' &&
cid &&
- (hideThreadsWithoutImages ? getHasThumbnail(getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight), comment?.link) : true) &&
+ (showTextOnlyThreads ? getHasThumbnail(getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight), comment?.link) : true) &&
cid === postCid &&
comment?.subplebbitAddress === subplebbitAddress &&
- !feed.some((post) => post.cid === cid)
- );
+ !feed.some((post) => post.cid === cid);
+
+ // If search is active, also check search conditions
+ if (basicConditions && searchText.trim()) {
+ const titleLower = comment?.title?.toLowerCase() || '';
+ const contentLower = comment?.content?.toLowerCase() || '';
+ const searchPattern = searchText.toLowerCase();
+
+ return titleLower.includes(searchPattern) || contentLower.includes(searchPattern);
+ }
+
+ return basicConditions;
}),
- [accountComments, subplebbitAddress, feed, hideThreadsWithoutImages],
+ [accountComments, subplebbitAddress, feed, showTextOnlyThreads, searchText],
);
// show newest account comment at the top of the feed but after pinned posts
@@ -143,13 +274,14 @@ const Catalog = () => {
subplebbitAddresses,
sortType,
newerThan: 60 * 60 * 24 * 7,
- filter: hideThreadsWithoutImages ? threadsWithoutImagesFilter : undefined,
+ filter: createCombinedFilter(showTextOnlyThreads, filterItems, searchText, subplebbitAddress || 'all', handleFilterMatch),
});
+
const { feed: monthlyFeed } = useFeed({
subplebbitAddresses,
sortType,
newerThan: 60 * 60 * 24 * 30,
- filter: hideThreadsWithoutImages ? threadsWithoutImagesFilter : undefined,
+ filter: createCombinedFilter(showTextOnlyThreads, filterItems, searchText, subplebbitAddress || 'all', handleFilterMatch),
});
const [showMorePostsSuggestion, setShowMorePostsSuggestion] = useState(false);
@@ -262,7 +394,40 @@ const Catalog = () => {
const isFeedLoaded = feed.length > 0 || state === 'failed';
- const rows = useCatalogFeedRows(columnCount, combinedFeed, isFeedLoaded, subplebbit);
+ // Process the feed to move "top" posts to the top
+ const processedFeed = useMemo(() => {
+ if (!combinedFeed || combinedFeed.length === 0) return combinedFeed;
+
+ const enabledTopFilters = filterItems.filter((item) => item.enabled && item.text.trim() !== '' && item.top);
+ if (enabledTopFilters.length === 0) return combinedFeed;
+
+ // Separate posts that match "top" filters
+ const topPosts: Comment[] = [];
+ const regularPosts: Comment[] = [];
+
+ combinedFeed.forEach((comment) => {
+ if (!comment) return;
+
+ let isTop = false;
+ for (const filter of enabledTopFilters) {
+ if (commentMatchesPattern(comment, filter.text)) {
+ isTop = true;
+ break;
+ }
+ }
+
+ if (isTop) {
+ topPosts.push(comment);
+ } else {
+ regularPosts.push(comment);
+ }
+ });
+
+ // Return top posts followed by regular posts
+ return [...topPosts, ...regularPosts];
+ }, [combinedFeed, filterItems]);
+
+ const rows = useCatalogFeedRows(columnCount, processedFeed, isFeedLoaded, subplebbit);
// save the last Virtuoso state to restore it when navigating back
const virtuosoRef = useRef(null);
@@ -286,11 +451,42 @@ const Catalog = () => {
document.title = documentTitle + ` - ${t('catalog')} - plebchan`;
}, [title, shortAddress, isInAllView, isInSubscriptionsView, t]);
+ // Clear matched filters when component mounts or when subplebbit changes
+ useEffect(() => {
+ clearMatchedFilters();
+ return () => {
+ clearMatchedFilters();
+ };
+ }, [clearMatchedFilters, subplebbitAddress]);
+
+ // Apply filter colors to posts when feed changes
+ useEffect(() => {
+ if (combinedFeed.length > 0 && filterItems.length > 0) {
+ // Clear existing matched filters
+ clearMatchedFilters();
+
+ // Apply colors to posts that match filters
+ combinedFeed.forEach((comment) => {
+ if (!comment?.cid) return;
+
+ // Check each filter
+ for (const item of filterItems) {
+ if (item.enabled && item.text.trim() !== '' && item.color) {
+ if (commentMatchesPattern(comment, item.text)) {
+ useCatalogFiltersStore.getState().setMatchedFilter(comment.cid, item.color);
+ break; // Use the first matching filter's color
+ }
+ }
+ }
+ });
+ }
+ }, [combinedFeed, filterItems, clearMatchedFilters]);
+
return (
-
))}
{showRules && (
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index 79a9cb35..5f29ab27 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -1,7 +1,9 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
-import { setAccount, useAccount, useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
+import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
+import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import { formatMarkdown } from '../../lib/utils/post-utils';
import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
@@ -45,7 +47,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
const { selectedText } = useSelectedTextStore();
const { anonMode, getNewSigner, getExistingSigner } = useAnonMode(postCid);
- const comment = useComment({ commentCid: postCid });
+ const comment = useSubplebbitsPagesStore((state) => state.comments[postCid]);
const address = comment?.author?.address;
const getAnonAddressForReply = useCallback(async () => {
@@ -189,7 +191,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
const location = useLocation();
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
- const subplebbit = useSubplebbit({ subplebbitAddress });
+ const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]);
const { updatedAt } = subplebbit || {};
const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
const offlineAlert = updatedAt
diff --git a/src/components/reply-quote-preview/reply-quote-preview.tsx b/src/components/reply-quote-preview/reply-quote-preview.tsx
index 0d68b05f..c0fa61d1 100644
--- a/src/components/reply-quote-preview/reply-quote-preview.tsx
+++ b/src/components/reply-quote-preview/reply-quote-preview.tsx
@@ -13,7 +13,6 @@ interface ReplyQuotePreviewProps {
backlinkReply?: Comment;
isQuotelinkReply?: boolean;
quotelinkReply?: Comment;
- replies?: Comment[];
}
const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => {
@@ -54,7 +53,7 @@ const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => {
}
};
-const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply, replies }: ReplyQuotePreviewProps) => {
+const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply }: ReplyQuotePreviewProps) => {
const [hoveredCid, setHoveredCid] = useState
-
,
document.body,
)}
@@ -174,7 +173,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
outOfViewCid === quotelinkReply?.cid &&
createPortal(
-
,
document.body,
)}
@@ -184,7 +183,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
return isBacklinkReply ? replyBacklink : isQuotelinkReply && replyQuotelink;
};
-const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply, replies }: ReplyQuotePreviewProps) => {
+const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply }: ReplyQuotePreviewProps) => {
const [hoveredCid, setHoveredCid] = useState
-
,
document.body,
)}
@@ -293,7 +292,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
outOfViewCid === quotelinkReply?.cid &&
createPortal(
-
,
document.body,
)}
@@ -303,25 +302,13 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
return isBacklinkReply ? replyBacklink : isQuotelinkReply && replyQuotelink;
};
-const ReplyQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply, replies }: ReplyQuotePreviewProps) => {
+const ReplyQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply }: ReplyQuotePreviewProps) => {
const isMobile = useIsMobile();
return isMobile ? (
- | {t('order')} | -{t('enable')} | -{t('text')} | -{t('delete')} | -
|---|---|---|---|
| - moveLocalFilterItemUp(index)}> - ↑ - - | -- updateLocalFilterItem(index, { ...item, enabled: e.target.checked })} - /> - | -- updateLocalFilterItem(index, { ...item, text: e.target.value })} - ref={(el) => (inputRefs.current[index] = el)} - /> - | -- removeLocalFilterItem(index)}> - × - - | -
| - - - | -
-
-
- );
-};
-
-const CatalogFilters = () => {
- const { t } = useTranslation();
- const [showModal, setShowModal] = useState(false);
-
- const closeModal = () => {
- setShowModal(false);
- };
-
- return (
- <>
- setShowModal(false)} style={{ cursor: 'not-allowed' }}>
- {t('filters')}
-
- {showModal &&
- {t('filters')}
-
-
-
- {combinedFeed.length !== 0 ? (
+ {processedFeed?.length !== 0 ? (
<>
{
+export const Post = ({ post, showAllReplies = false, showReplies = true }: PostProps) => {
const subplebbit = useSubplebbitsStore((state) => state.subplebbits[post?.subplebbitAddress]);
const isMobile = useIsMobile();
@@ -39,9 +39,9 @@ export const Post = ({ post, showAllReplies = false, showReplies = true, replies
@@ -57,10 +57,9 @@ const PostPage = () => {
const isInDescriptionView = isDescriptionView(location.pathname, params);
const isInRulesView = isRulesView(location.pathname, params);
- const subplebbit = useSubplebbit({ subplebbitAddress });
- const { createdAt, description, rules, shortAddress, suggested, title } = subplebbit;
-
const comment = useComment({ commentCid });
+ const subplebbit = useSubplebbit({ subplebbitAddress });
+ const { createdAt, description, rules, shortAddress, suggested, title } = subplebbit || {};
// if the comment is a reply, return the post comment instead, then the reply will be highlighted in the thread
const postComment = useComment({ commentCid: comment?.postCid });
diff --git a/yarn.lock b/yarn.lock
index 42d0b932..b4233e39 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3069,9 +3069,9 @@
dependencies:
debug "4.3.4"
-"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#6d35eb3b4dc84f8fdcbb46d95e3b1d78f1750b5f":
+"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#54cf36c50dd31f5641a9475f5566b7b29b3873c7":
version "0.0.1"
- resolved "https://github.com/plebbit/plebbit-react-hooks.git#6d35eb3b4dc84f8fdcbb46d95e3b1d78f1750b5f"
+ resolved "https://github.com/plebbit/plebbit-react-hooks.git#54cf36c50dd31f5641a9475f5566b7b29b3873c7"
dependencies:
"@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#5ff48e9b9a906a098a51b474a52692eebfb6561d"
"@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
@@ -3976,6 +3976,21 @@
dependencies:
"@types/node" "*"
+"@typescript-eslint/eslint-plugin@8.26.0":
+ version "8.26.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.26.0.tgz#7e880faf91f89471c30c141951e15f0eb3a0599e"
+ integrity sha512-cLr1J6pe56zjKYajK6SSSre6nl1Gj6xDp1TY0trpgPzjVbgDwd09v2Ws37LABxzkicmUjhEeg/fAUjPJJB1v5Q==
+ dependencies:
+ "@eslint-community/regexpp" "^4.10.0"
+ "@typescript-eslint/scope-manager" "8.26.0"
+ "@typescript-eslint/type-utils" "8.26.0"
+ "@typescript-eslint/utils" "8.26.0"
+ "@typescript-eslint/visitor-keys" "8.26.0"
+ graphemer "^1.4.0"
+ ignore "^5.3.1"
+ natural-compare "^1.4.0"
+ ts-api-utils "^2.0.1"
+
"@typescript-eslint/eslint-plugin@^5.5.0":
version "5.62.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
@@ -3992,21 +4007,6 @@
semver "^7.3.7"
tsutils "^3.21.0"
-"@typescript-eslint/eslint-plugin@^8.26.0":
- version "8.26.0"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.26.0.tgz#7e880faf91f89471c30c141951e15f0eb3a0599e"
- integrity sha512-cLr1J6pe56zjKYajK6SSSre6nl1Gj6xDp1TY0trpgPzjVbgDwd09v2Ws37LABxzkicmUjhEeg/fAUjPJJB1v5Q==
- dependencies:
- "@eslint-community/regexpp" "^4.10.0"
- "@typescript-eslint/scope-manager" "8.26.0"
- "@typescript-eslint/type-utils" "8.26.0"
- "@typescript-eslint/utils" "8.26.0"
- "@typescript-eslint/visitor-keys" "8.26.0"
- graphemer "^1.4.0"
- ignore "^5.3.1"
- natural-compare "^1.4.0"
- ts-api-utils "^2.0.1"
-
"@typescript-eslint/experimental-utils@^5.0.0":
version "5.62.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.62.0.tgz#14559bf73383a308026b427a4a6129bae2146741"
@@ -4014,6 +4014,17 @@
dependencies:
"@typescript-eslint/utils" "5.62.0"
+"@typescript-eslint/parser@8.26.0":
+ version "8.26.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.26.0.tgz#9b4d2198e89f64fb81e83167eedd89a827d843a9"
+ integrity sha512-mNtXP9LTVBy14ZF3o7JG69gRPBK/2QWtQd0j0oH26HcY/foyJJau6pNUez7QrM5UHnSvwlQcJXKsk0I99B9pOA==
+ dependencies:
+ "@typescript-eslint/scope-manager" "8.26.0"
+ "@typescript-eslint/types" "8.26.0"
+ "@typescript-eslint/typescript-estree" "8.26.0"
+ "@typescript-eslint/visitor-keys" "8.26.0"
+ debug "^4.3.4"
+
"@typescript-eslint/parser@^5.5.0":
version "5.62.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7"
@@ -4024,17 +4035,6 @@
"@typescript-eslint/typescript-estree" "5.62.0"
debug "^4.3.4"
-"@typescript-eslint/parser@^8.26.0":
- version "8.26.0"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.26.0.tgz#9b4d2198e89f64fb81e83167eedd89a827d843a9"
- integrity sha512-mNtXP9LTVBy14ZF3o7JG69gRPBK/2QWtQd0j0oH26HcY/foyJJau6pNUez7QrM5UHnSvwlQcJXKsk0I99B9pOA==
- dependencies:
- "@typescript-eslint/scope-manager" "8.26.0"
- "@typescript-eslint/types" "8.26.0"
- "@typescript-eslint/typescript-estree" "8.26.0"
- "@typescript-eslint/visitor-keys" "8.26.0"
- debug "^4.3.4"
-
"@typescript-eslint/scope-manager@5.62.0":
version "5.62.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
{isMobile ? (
-