)} diff --git a/src/components/post/mod-menu/mod-menu.module.css b/src/components/post/mod-menu/mod-menu.module.css new file mode 100644 index 00000000..e69de29b diff --git a/src/components/post/mod-menu/mod-menu.ts b/src/components/post/mod-menu/mod-menu.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/components/post/mod-menu/mod-menu.tsx b/src/components/post/mod-menu/mod-menu.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index a74f8256..2f40bc3f 100644 --- a/src/components/post/post-desktop/post-desktop.tsx +++ b/src/components/post/post-desktop/post-desktop.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { useLocation, useParams } from 'react-router-dom'; import { Link } from 'react-router-dom'; -import { useAccount } from '@plebbit/plebbit-react-hooks'; +import { useAccount, useBlock, useEditedComment } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import styles from '../post.module.css'; import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils'; @@ -20,7 +20,7 @@ import PostMenuDesktop from './post-menu-desktop/'; import { PostProps } from '../post'; import _ from 'lodash'; -const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { +const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => { const { t } = useTranslation(); const { author, cid, locked, pinned, parentCid, postCid, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; @@ -44,9 +44,11 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { return (
-
-
-
+ {!isHidden && (
+
+
+
+ )}
{title && {displayTitle} }
@@ -90,7 +92,7 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => {
)}
- {!isInPostView && !isReply && (
+ {!isInPostView && !isReply && !isHidden && (
[
{
const PostMedia = ({ post }: PostProps) => {
const { t } = useTranslation();
- const { link, linkHeight, linkWidth, parentCid } = post || {};
+ const { deleted, link, linkHeight, linkWidth, parentCid, removed } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const commentMediaInfo = getCommentMediaInfo(post);
const { type, url } = commentMediaInfo || {};
@@ -149,22 +151,25 @@ const PostMedia = ({ post }: PostProps) => {
)}
{(hasThumbnail || (!hasThumbnail && !showThumbnail)) && (
-
)}
- {!isInPostView && !isReply && (
+ {!isInPostView && !isReply && !isHidden && (
[
{
const PostMedia = ({ post }: PostProps) => {
const { t } = useTranslation();
- const { link, linkHeight, linkWidth, parentCid } = post || {};
+ const { deleted, link, linkHeight, linkWidth, parentCid, removed } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const commentMediaInfo = getCommentMediaInfo(post);
const { type, url } = commentMediaInfo || {};
@@ -149,22 +151,25 @@ const PostMedia = ({ post }: PostProps) => {
)}
+
)}
);
};
const PostMessage = ({ post }: PostProps) => {
- const { cid, content, parentCid, postCid, state, subplebbitAddress } = post || {};
+ const { cid, content, deleted, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
const params = useParams();
const location = useLocation();
@@ -191,7 +196,20 @@ const PostMessage = ({ post }: PostProps) => {
)} -
+
+ reason: {reason} + + )} {!isReply && content.length > 1000 && !isInPostView && (
@@ -209,13 +227,21 @@ const PostMessage = ({ post }: PostProps) => { }; const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => { + // handle pending mod or author edit + const { editedComment } = useEditedComment({ comment: post }); + if (editedComment) { + post = editedComment; + } const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {}; const { isDescription, isRules } = post || {}; // custom properties, not from api const params = useParams(); const location = useLocation(); const isInPendingPostView = isPendingPostView(location.pathname, params); - const isInPostView = isPostPageView(location.pathname, params); + const isInPostPageView = isPostPageView(location.pathname, params); + + const { blocked, unblock, block } = useBlock({ cid }); + const isHidden = blocked && !isInPostPageView; const replies = useReplies(post); const visiblelinksCount = useCountLinksInReplies(post, 5); @@ -228,49 +254,52 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
+ {!isInPostPageView && !isDescription && !isRules && (
+
+
- {linksCount > 0 ? (
-
-
);
};
diff --git a/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
index a363b952..6c23d60f 100644
--- a/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
+++ b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
@@ -1,12 +1,13 @@
import { useState } from 'react';
import { createPortal } from 'react-dom';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
-import { Comment } from '@plebbit/plebbit-react-hooks';
+import { Comment, useBlock } from '@plebbit/plebbit-react-hooks';
import styles from './post-menu-desktop.module.css';
import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
-import { isCatalogView } from '../../../../lib/utils/view-utils';
+import { isCatalogView, isPostPageView } from '../../../../lib/utils/view-utils';
interface PostMenuDesktopProps {
cid: string;
@@ -17,6 +18,7 @@ interface PostMenuDesktopProps {
}
const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuDesktopProps) => {
+ const { t } = useTranslation();
return (
-
{'>>'}
-
-
- ))}
+ ))}
+
+
-
+
{'>>'}
+
+
{
@@ -24,12 +26,13 @@ const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuDesktopProp
onClose();
}}
>
-
);
};
const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void }) => {
+ const { t } = useTranslation();
const [isImageSearchMenuOpen, setIsImageSearchMenuOpen] = useState(false);
const { refs, floatingStyles } = useFloating({
@@ -45,7 +48,7 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
ref={refs.setReference}
onClick={onClose}
>
- Image search »
+ {t('image_search')} »
{isImageSearchMenuOpen && (
Copy link
+ {t('copy_link')}
@@ -64,6 +67,7 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
};
const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuDesktopProps) => {
+ const { t } = useTranslation();
const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
@@ -80,7 +84,7 @@ const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose
ref={refs.setReference}
onClick={onClose}
>
- View on »
+ {t('view_on')} »
{isClientRedirectMenuOpen && (
diff --git a/src/components/settings-modal/interface-settings/interface-settings.tsx b/src/components/settings-modal/interface-settings/interface-settings.tsx
index cf38f96a..70502659 100644
--- a/src/components/settings-modal/interface-settings/interface-settings.tsx
+++ b/src/components/settings-modal/interface-settings/interface-settings.tsx
@@ -107,7 +107,7 @@ const InterfaceSettings = () => {
return (
@@ -96,12 +100,18 @@ const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose
};
const PostMenuDesktop = ({ post }: { post: Comment }) => {
+ const { t } = useTranslation();
const { cid, isDescription, isRules, link, postCid, subplebbitAddress } = post || {};
const commentMediaInfo = getCommentMediaInfo(post);
const { thumbnail, type, url } = commentMediaInfo || {};
const [menuBtnRotated, setMenuBtnRotated] = useState(false);
- const isInCatalogView = isCatalogView(useLocation().pathname);
+ const { blocked, unblock, block } = useBlock({ cid });
+
+ const location = useLocation();
+ const params = useParams();
+ const isInCatalogView = isCatalogView(location.pathname);
+ const isInPostPageView = isPostPageView(location.pathname, params);
const { refs, floatingStyles, context } = useFloating({
placement: 'bottom-start',
@@ -135,6 +145,17 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
{
};
const PostMessageMobile = ({ post }: PostProps) => {
- const { cid, content, parentCid, postCid, state, subplebbitAddress } = post || {};
+ const { cid, content, deleted, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
const params = useParams();
const location = useLocation();
@@ -138,7 +139,20 @@ const PostMessageMobile = ({ post }: PostProps) => {
)} -
+
+ reason: {reason} + + )} {!isReply && content.length > 1000 && !isInPostView && (
@@ -157,6 +171,11 @@ const PostMessageMobile = ({ post }: PostProps) => { }; const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => { + // handle pending mod or author edit + const { editedComment } = useEditedComment({ comment: post }); + if (editedComment) { + post = editedComment; + } const { t } = useTranslation(); const { cid, content, pinned, replyCount, subplebbitAddress } = post || {}; const { isDescription, isRules } = post || {}; // custom properties, not from api diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index 8cfe0d3b..494b63a5 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -11,6 +11,8 @@ } .hideButtonWrapper { + height: 15px; + width: 18px; padding-right: 5px; float: left; } @@ -26,6 +28,10 @@ transform: translateY(-1px); } +.postDesktopBlocked { + opacity: 0.5; +} + /* clearfix to contain float elements */ .postDesktop::after { content: ""; @@ -52,11 +58,11 @@ } .postDesktop .postInfo { - padding-top: 3px; width: 100%; } .postDesktop .checkbox, .replyDesktop .checkbox { + display: inline-block; padding: 3px 7px 3px 4px; filter: var(--filter80); } @@ -272,6 +278,7 @@ .postMobile .postMessage { padding: 10px; font-size: var(--post-mobile-content-font-size); + word-break: break-all; } .postMobile .postLink { @@ -307,7 +314,7 @@ } .replyDesktop { - padding-bottom: 4px; + padding-top: 4px; } .replyDesktop .sideArrows { @@ -322,7 +329,7 @@ border-left: none; border-top: none; display: table; - padding: 2px; + padding: 0 2px 2px 2px; } .replyDesktop .postInfo { @@ -387,6 +394,11 @@ cursor: pointer; } +.removedContent { + font-weight: 700; + color: red; +} + @media (max-width: 640px) { .postDesktop { display: none; diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 2dc6569b..b8f6d424 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -6,6 +6,7 @@ import PostMobile from './post-mobile'; export interface PostProps { index?: number; + isHidden?: boolean; post?: any; reply?: any; roles?: Role[]; diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css index 0bbc9fba..968bfee4 100644 --- a/src/components/reply-modal/reply-modal.module.css +++ b/src/components/reply-modal/reply-modal.module.css @@ -71,6 +71,16 @@ cursor: pointer; } +.footer input[type="checkbox"] { + margin: 0 3px; + vertical-align: text-top; +} + +.spoilerButton { + display: inline-block; + padding-top: 2px; +} + .parentCid { color: var(--post-form-field-input-color); position: absolute; diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index 17bed746..e3215ca1 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/src/components/reply-modal/reply-modal.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import Draggable from 'react-draggable'; @@ -8,6 +8,7 @@ import { isValidURL } from '../../lib/utils/url-utils'; import useReply from '../../hooks/use-reply'; import useIsMobile from '../../hooks/use-is-mobile'; import styles from './reply-modal.module.css'; +import { LinkTypePreviewer } from '../post-form'; import _ from 'lodash'; interface ReplyModalProps { @@ -24,6 +25,8 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { const account = useAccount(); const { displayName } = account?.author || {}; + const [url, setUrl] = useState(''); + const textRef = useRef(null);
const urlRef = useRef(null);
@@ -95,7 +98,15 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
/>
{cid && subplebbitAddress &&
diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css
index 95ce0b45..3f962756 100644
--- a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css
+++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css
@@ -27,6 +27,7 @@
.postMenu a {
text-decoration: none;
color: inherit;
+ outline: none;
}
.postMenuItem {
diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
index 85ad88bb..d50584a3 100644
--- a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
@@ -1,6 +1,7 @@
import { useState } from 'react';
import { createPortal } from 'react-dom';
import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
+import { useTranslation } from 'react-i18next';
import { Comment } from '@plebbit/plebbit-react-hooks';
import styles from './post-menu-mobile.module.css';
import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
@@ -15,6 +16,7 @@ interface PostMenuMobileProps {
}
const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuMobileProps) => {
+ const { t } = useTranslation();
return (
{
+ blocked ? unblock() : block();
+ handleClose();
+ }}
+ >
+ {blocked ? (postCid === cid ? t('unhide_thread') : t('unhide_post')) : postCid === cid ? t('hide_thread') : t('hide_post')}
+
+ )}
{link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && {
@@ -22,37 +24,38 @@ const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuMobileProps
onClose();
}}
>
-
);
};
const ImageSearchButtons = ({ url, onClose }: { url: string; onClose: () => void }) => {
+ const { t } = useTranslation();
return (
Copy link
+ {t('copy_link')}
-
);
};
const ViewOnButtons = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuMobileProps) => {
+ const { t } = useTranslation();
const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
-
return (
Search image on Google
+ {t('search_image_on_google')}
- Search image on Yandex
+ {t('search_image_on_yandex')}
- Search image on SauceNAO
+ {t('search_image_on_saucenao')}
-
);
diff --git a/src/components/post/post-mobile/post-mobile.tsx b/src/components/post/post-mobile/post-mobile.tsx
index 4c7128d9..21453575 100644
--- a/src/components/post/post-mobile/post-mobile.tsx
+++ b/src/components/post/post-mobile/post-mobile.tsx
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
-import { useAccount } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useEditedComment } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../post.module.css';
import { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils';
@@ -19,7 +19,7 @@ import _ from 'lodash';
const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
const { t } = useTranslation();
- const { author, cid, link, linkHeight, linkWidth, locked, parentCid, pinned, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
+ const { author, cid, deleted, link, linkHeight, linkWidth, locked, parentCid, pinned, removed, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const { address, displayName, shortAddress } = author || {};
@@ -98,6 +98,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
View on Seedit
+ {t('view_on_client', { client: 'Seedit' })}
- View on Plebones
+ {t('view_on_client', { client: 'Plebones' })}
)} -
+
+ reason: {reason} + + )} {!isReply && content.length > 1000 && !isInPostView && (
@@ -157,6 +171,11 @@ const PostMessageMobile = ({ post }: PostProps) => { }; const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => { + // handle pending mod or author edit + const { editedComment } = useEditedComment({ comment: post }); + if (editedComment) { + post = editedComment; + } const { t } = useTranslation(); const { cid, content, pinned, replyCount, subplebbitAddress } = post || {}; const { isDescription, isRules } = post || {}; // custom properties, not from api diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index 8cfe0d3b..494b63a5 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -11,6 +11,8 @@ } .hideButtonWrapper { + height: 15px; + width: 18px; padding-right: 5px; float: left; } @@ -26,6 +28,10 @@ transform: translateY(-1px); } +.postDesktopBlocked { + opacity: 0.5; +} + /* clearfix to contain float elements */ .postDesktop::after { content: ""; @@ -52,11 +58,11 @@ } .postDesktop .postInfo { - padding-top: 3px; width: 100%; } .postDesktop .checkbox, .replyDesktop .checkbox { + display: inline-block; padding: 3px 7px 3px 4px; filter: var(--filter80); } @@ -272,6 +278,7 @@ .postMobile .postMessage { padding: 10px; font-size: var(--post-mobile-content-font-size); + word-break: break-all; } .postMobile .postLink { @@ -307,7 +314,7 @@ } .replyDesktop { - padding-bottom: 4px; + padding-top: 4px; } .replyDesktop .sideArrows { @@ -322,7 +329,7 @@ border-left: none; border-top: none; display: table; - padding: 2px; + padding: 0 2px 2px 2px; } .replyDesktop .postInfo { @@ -387,6 +394,11 @@ cursor: pointer; } +.removedContent { + font-weight: 700; + color: red; +} + @media (max-width: 640px) { .postDesktop { display: none; diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 2dc6569b..b8f6d424 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -6,6 +6,7 @@ import PostMobile from './post-mobile'; export interface PostProps { index?: number; + isHidden?: boolean; post?: any; reply?: any; roles?: Role[]; diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css index 0bbc9fba..968bfee4 100644 --- a/src/components/reply-modal/reply-modal.module.css +++ b/src/components/reply-modal/reply-modal.module.css @@ -71,6 +71,16 @@ cursor: pointer; } +.footer input[type="checkbox"] { + margin: 0 3px; + vertical-align: text-top; +} + +.spoilerButton { + display: inline-block; + padding-top: 2px; +} + .parentCid { color: var(--post-form-field-input-color); position: absolute; diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index 17bed746..e3215ca1 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/src/components/reply-modal/reply-modal.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import Draggable from 'react-draggable'; @@ -8,6 +8,7 @@ import { isValidURL } from '../../lib/utils/url-utils'; import useReply from '../../hooks/use-reply'; import useIsMobile from '../../hooks/use-is-mobile'; import styles from './reply-modal.module.css'; +import { LinkTypePreviewer } from '../post-form'; import _ from 'lodash'; interface ReplyModalProps { @@ -24,6 +25,8 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { const account = useAccount(); const { displayName } = account?.author || {}; + const [url, setUrl] = useState(''); + const textRef = useRef
- setContent.link(e.target.value)} />
+ {
+ setUrl(e.target.value);
+ setContent.link(e.target.value);
+ }}
+ />
@@ -114,6 +125,19 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
/>
+ {url && (
+ <>
+ {t('file_type')}:
- Version:{' '}
+ {t('version')}:{' '}
{packageJson.version}
diff --git a/src/components/settings-modal/settings-modal.tsx b/src/components/settings-modal/settings-modal.tsx
index db7090dd..9c991274 100644
--- a/src/components/settings-modal/settings-modal.tsx
+++ b/src/components/settings-modal/settings-modal.tsx
@@ -44,7 +44,7 @@ const SettingsModal = () => {
{showInterfaceSettings &&
);
};
-const BoardNavMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
+const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
const { t } = useTranslation();
const navigate = useNavigate();
const subplebbitAddresses = useDefaultSubplebbitAddresses();
@@ -67,77 +69,49 @@ const BoardNavMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) =>
);
+ // navbar animation on scroll
+ const [visible, setVisible] = useState(true);
+ const prevScrollPosRef = useRef(0);
+
+ useEffect(() => {
+ const debouncedHandleScroll = debounce(() => {
+ const currentScrollPos = window.scrollY;
+ const prevScrollPos = prevScrollPosRef.current;
+
+ setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+ prevScrollPosRef.current = currentScrollPos;
+ }, 50);
+
+ window.addEventListener('scroll', debouncedHandleScroll);
+
+ return () => window.removeEventListener('scroll', debouncedHandleScroll);
+ }, []);
+
return (
-