{
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
- handleClick();
+ reportPost();
}
}}
>
@@ -235,7 +235,7 @@ const DeletePostButton = ({ post, onClose }: DeletePostButtonProps) => {
const { publishCommentEdit } = usePublishCommentEdit(deleteOptions);
- const handleClick = async () => {
+ const deletePost = async () => {
const confirmed = window.confirm(t('delete_post_confirm'));
if (!confirmed) {
return;
@@ -254,11 +254,11 @@ const DeletePostButton = ({ post, onClose }: DeletePostButtonProps) => {
{
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
- handleClick();
+ deletePost();
}
}}
>
@@ -272,7 +272,7 @@ const HidePostButton = ({ cid, isReply, onClose, postCid }: HideButtonProps) =>
const { hide, hidden, unhide } = useHide({ cid: cid || '' });
const isInPostView = isPostPageView(useLocation().pathname, useParams());
- const handleClick = () => {
+ const togglePostHidden = () => {
if (hidden) {
unhide();
} else {
@@ -285,11 +285,11 @@ const HidePostButton = ({ cid, isReply, onClose, postCid }: HideButtonProps) =>
{
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
- handleClick();
+ togglePostHidden();
}
}}
>
diff --git a/src/components/reply-modal/__tests__/reply-modal.test.tsx b/src/components/reply-modal/__tests__/reply-modal.test.tsx
index 1cbe315a..cde760af 100644
--- a/src/components/reply-modal/__tests__/reply-modal.test.tsx
+++ b/src/components/reply-modal/__tests__/reply-modal.test.tsx
@@ -32,6 +32,7 @@ const testState = vi.hoisted(() => ({
quoteInsertNumber: undefined as number | undefined,
quoteInsertRequestId: 0,
quoteInsertSelectedText: '',
+ dragHandler: undefined as ((state: { active: boolean; event: Pick; offset: [number, number] }) => void) | undefined,
replyIndex: undefined as number | undefined,
resetPublishReplyOptionsMock: vi.fn(),
resolvedCommunityAddress: undefined as string | undefined,
@@ -208,7 +209,10 @@ vi.mock('@react-spring/web', async () => {
});
vi.mock('@use-gesture/react', () => ({
- useDrag: () => () => ({}),
+ useDrag: (handler: (state: { active: boolean; event: Pick; offset: [number, number] }) => void) => {
+ testState.dragHandler = handler;
+ return () => ({});
+ },
}));
let container: HTMLDivElement;
@@ -292,6 +296,7 @@ describe('ReplyModal', () => {
testState.quoteInsertNumber = undefined;
testState.quoteInsertRequestId = 0;
testState.quoteInsertSelectedText = '';
+ testState.dragHandler = undefined;
testState.replyIndex = undefined;
testState.resetPublishReplyOptionsMock.mockReset();
testState.resolvedCommunityAddress = undefined;
@@ -326,6 +331,8 @@ describe('ReplyModal', () => {
afterEach(() => {
act(() => root.unmount());
container.remove();
+ document.body.style.userSelect = '';
+ document.body.style.webkitUserSelect = '';
});
it('initializes quoted content, display name, upload controls, and shared offline warning on board routes', async () => {
@@ -493,6 +500,41 @@ describe('ReplyModal', () => {
expect(modal?.style.touchAction).toBe('none');
});
+ it('closes with Escape from the document on desktop', async () => {
+ await renderReplyModal('/mu/thread/post-1');
+
+ await act(async () => {
+ document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Escape' }));
+ });
+
+ expect(testState.closeModalMock).toHaveBeenCalledTimes(1);
+ });
+
+ it('restores body selection styles if unmounted during a drag', async () => {
+ document.body.style.userSelect = 'text';
+ document.body.style.webkitUserSelect = 'auto';
+
+ await renderReplyModal('/mu/thread/post-1');
+
+ await act(async () => {
+ testState.dragHandler?.({
+ active: true,
+ event: { preventDefault: vi.fn() },
+ offset: [140, 100],
+ });
+ });
+
+ expect(document.body.style.userSelect).toBe('none');
+ expect(document.body.style.webkitUserSelect).toBe('none');
+
+ await act(async () => {
+ root.render(createElement(React.Fragment));
+ });
+
+ expect(document.body.style.userSelect).toBe('text');
+ expect(document.body.style.webkitUserSelect).toBe('auto');
+ });
+
it('initializes the drag spring once so typing rerenders do not recenter the modal', async () => {
await renderReplyModal('/mu/thread/post-1');
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index c538c371..4e9217f5 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -54,6 +54,16 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
const account = useAccount();
const { displayName } = account?.author || {};
const textRef = useRef(null);
+ const setTextRef = useRef((element: HTMLTextAreaElement | null) => {
+ textRef.current = element;
+ if (!element) return;
+
+ window.setTimeout(() => {
+ if (textRef.current === element) {
+ element.focus();
+ }
+ }, 0);
+ });
const urlRef = useRef(null);
const lastSelectionStartRef = useRef(0);
const lastSelectionEndRef = useRef(0);
@@ -126,6 +136,27 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
[],
);
+ const bodySelectionStyleBeforeDragRef = useRef<{ userSelect: string; webkitUserSelect: string } | null>(null);
+
+ const disableBodyTextSelection = () => {
+ if (!bodySelectionStyleBeforeDragRef.current) {
+ bodySelectionStyleBeforeDragRef.current = {
+ userSelect: document.body.style.userSelect,
+ webkitUserSelect: document.body.style.webkitUserSelect,
+ };
+ }
+ Object.assign(document.body.style, { userSelect: 'none', webkitUserSelect: 'none' });
+ };
+
+ const restoreBodyTextSelection = () => {
+ const previousStyle = bodySelectionStyleBeforeDragRef.current;
+ Object.assign(document.body.style, {
+ userSelect: previousStyle?.userSelect ?? '',
+ webkitUserSelect: previousStyle?.webkitUserSelect ?? '',
+ });
+ bodySelectionStyleBeforeDragRef.current = null;
+ };
+
const bind = useDrag(
({ active, event, offset: [ox, oy] }) => {
const nextLeft = Math.round(ox);
@@ -133,11 +164,9 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
if (active) {
event.preventDefault();
- document.body.style.userSelect = 'none';
- document.body.style.webkitUserSelect = 'none';
+ disableBodyTextSelection();
} else {
- document.body.style.userSelect = '';
- document.body.style.webkitUserSelect = '';
+ restoreBodyTextSelection();
}
api.start({ left: nextLeft, top: nextTop, immediate: true });
},
@@ -148,6 +177,12 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
},
);
+ useEffect(() => {
+ return () => {
+ restoreBodyTextSelection();
+ };
+ }, []);
+
useEffect(() => {
if (nodeRef.current && isMobile) {
const viewportHeight = window.innerHeight;
@@ -158,6 +193,21 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
const parentCidRef = useRef(null);
+ useEffect(() => {
+ if (!showReplyModal || isMobile) {
+ return;
+ }
+
+ const closeReplyModalOnEscape = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ closeModal();
+ }
+ };
+
+ document.addEventListener('keydown', closeReplyModalOnEscape);
+ return () => document.removeEventListener('keydown', closeReplyModalOnEscape);
+ }, [showReplyModal, isMobile, closeModal]);
+
useEffect(() => {
if (parentCidRef.current) {
const cidWidth = parentCidRef.current.offsetWidth;
@@ -165,29 +215,6 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
}
}, [parentCid]);
- useEffect(() => {
- if (showReplyModal) {
- setTimeout(() => {
- if (textRef.current) {
- textRef.current.focus();
- }
- }, 0);
-
- if (!isMobile) {
- const handleEscape = (e: KeyboardEvent) => {
- if (e.key === 'Escape') {
- closeModal();
- }
- };
- document.addEventListener('keydown', handleEscape);
-
- return () => {
- document.removeEventListener('keydown', handleEscape);
- };
- }
- }
- }, [showReplyModal, closeModal, isMobile]);
-
useEffect(() => {
if (textRef.current) {
const len = textRef.current.value.length;
@@ -209,11 +236,15 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
setPublishReplyOptions({ content });
checkContentLengthRef.current(content, t);
- setTimeout(() => {
+ const spellcheckTimeout = window.setTimeout(() => {
if (textRef.current) {
textRef.current.spellcheck = true;
}
}, 100);
+
+ return () => {
+ window.clearTimeout(spellcheckTimeout);
+ };
}
}, [showReplyModal, openEmpty, defaultParentQuote, selectedText]);
@@ -351,7 +382,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
cols={48}
rows={4}
wrap='soft'
- ref={textRef}
+ ref={setTextRef.current}
aria-label={t('comment')}
spellCheck={true}
onInput={handleContentInput}
diff --git a/src/components/settings-modal/account-settings/account-settings.tsx b/src/components/settings-modal/account-settings/account-settings.tsx
index 25feabb7..98406d6f 100644
--- a/src/components/settings-modal/account-settings/account-settings.tsx
+++ b/src/components/settings-modal/account-settings/account-settings.tsx
@@ -152,9 +152,11 @@ const AccountSettingsEditor = ({
accountData.account.subscriptions = [];
}
const uniqueSubscriptions = [...accountData.account.subscriptions];
+ const knownSubscriptions = new Set(uniqueSubscriptions);
for (const address of communityAddresses) {
- if (!uniqueSubscriptions.includes(address)) {
+ if (!knownSubscriptions.has(address)) {
uniqueSubscriptions.push(address);
+ knownSubscriptions.add(address);
}
}
accountData.account.subscriptions = uniqueSubscriptions;
diff --git a/src/components/settings-modal/advanced-settings/advanced-settings.tsx b/src/components/settings-modal/advanced-settings/advanced-settings.tsx
index 7155d37b..321c6600 100644
--- a/src/components/settings-modal/advanced-settings/advanced-settings.tsx
+++ b/src/components/settings-modal/advanced-settings/advanced-settings.tsx
@@ -219,6 +219,14 @@ const PureP2PBrowserSettings = ({ pureP2PBrowserRef }: SettingsProps) => {
const isElectron = window.electronApi?.isElectron === true;
+const getTrimmedLines = (value: string | undefined): string[] | undefined => {
+ return value?.split('\n').reduce((lines, line) => {
+ const trimmedLine = line.trim();
+ if (trimmedLine) lines.push(trimmedLine);
+ return lines;
+ }, []);
+};
+
const AdvancedSettings = () => {
const { t } = useTranslation();
const account = useAccount() as AccountShape | undefined;
@@ -234,27 +242,15 @@ const AdvancedSettings = () => {
const pureP2PBrowserRef = useRef(null);
const handleSave = async () => {
- const ipfsGatewayUrls = ipfsGatewayUrlsRef.current?.value
- .split('\n')
- .map((url) => url.trim())
- .filter((url) => url !== '');
+ const ipfsGatewayUrls = getTrimmedLines(ipfsGatewayUrlsRef.current?.value);
const mediaIpfsGatewayUrl = mediaIpfsGatewayUrlRef.current?.value.trim();
- const pubsubKuboRpcClientsOptions = pubsubProvidersRef.current?.value
- .split('\n')
- .map((url) => url.trim())
- .filter((url) => url !== '');
+ const pubsubKuboRpcClientsOptions = getTrimmedLines(pubsubProvidersRef.current?.value);
- const ethRpcUrls = ethRpcRef.current?.value
- .split('\n')
- .map((url) => url.trim())
- .filter((url) => url !== '');
+ const ethRpcUrls = getTrimmedLines(ethRpcRef.current?.value);
- const httpRoutersOptions = httpRoutersRef.current?.value
- .split('\n')
- .map((url) => url.trim())
- .filter((url) => url !== '');
+ const httpRoutersOptions = getTrimmedLines(httpRoutersRef.current?.value);
const pkcRpcClientsOptions = p2pRpcRef.current?.value.trim() ? [p2pRpcRef.current.value.trim()] : undefined;
const dataPath = p2pDataPathRef.current?.value.trim() || undefined;
diff --git a/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx b/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx
index 3c93cb70..2a41fb3e 100644
--- a/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx
+++ b/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx
@@ -177,7 +177,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
);
@@ -905,7 +915,10 @@ const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueViewProp
}, [queuedCommentSnapshots, rememberCommentsInQueue]);
const feedWithHistory = useMemo(() => {
- const liveCids = new Set(feed.map((comment) => comment.cid).filter(Boolean));
+ const liveCids = feed.reduce>((cids, comment) => {
+ if (comment.cid) cids.add(comment.cid);
+ return cids;
+ }, new Set());
return [
...feed,
...(queuedCommentHistory.filter((comment) => {
diff --git a/src/views/post/post.tsx b/src/views/post/post.tsx
index 52acbca8..668567b4 100644
--- a/src/views/post/post.tsx
+++ b/src/views/post/post.tsx
@@ -54,7 +54,7 @@ const getEffectiveRouteUserState = (state: unknown): QueuedCommentRouteState | u
return getRouteUserState(window.history.state);
};
-export interface ReplyPaginationOverride {
+interface ReplyPaginationOverride {
hasMore?: boolean;
loadMore?: () => void;
replies: Comment[];
@@ -273,7 +273,7 @@ export const Post = memo(
const PostPage = () => {
const { t } = useTranslation();
const params = useParams();
- const location = useLocation();
+ const { key: locationKey, pathname, state: locationState } = useLocation();
const { commentCid } = params;
const autoUpdateEnabled = useThreadLiveUpdatesStore((state) => state.enabled);
const updateRequestId = useThreadLiveUpdatesStore((state) => state.updateRequestId);
@@ -281,8 +281,8 @@ const PostPage = () => {
const finishUpdate = useThreadLiveUpdatesStore((state) => state.finishUpdate);
const resetThreadLiveUpdates = useThreadLiveUpdatesStore((state) => state.resetState);
const resolvedCommunityAddress = useResolvedCommunityAddress();
- const isInAllView = isAllView(location.pathname);
- const routeState = useMemo(() => getEffectiveRouteUserState(location.state), [location.key, location.pathname, location.state]);
+ const isInAllView = isAllView(pathname);
+ const routeState = useMemo(() => getEffectiveRouteUserState(locationState), [locationKey, pathname, locationState]);
const resolvedComment = useCommentWithFeedCache({ commentCid, autoUpdate: autoUpdateEnabled });
const queuedComment = useMemo(() => getQueuedCommentFromRouteState(routeState, commentCid), [routeState, commentCid]);
@@ -314,7 +314,7 @@ const PostPage = () => {
// These two effects split normal opens from explicit OP-top intents:
// the first keeps ordinary thread visits on `window.scrollTo(0, 0)`, while the
- // second consumes `requestedThreadTopCid` once per `location.key` via
+ // second consumes `requestedThreadTopCid` once per `locationKey` via
// `consumedThreadTopScrollRef` so `scrollThreadContainerToTop(commentCid)` only
// replays for deliberate OP-link clicks and never for route-driven thread opens.
useEffect(() => {
@@ -327,13 +327,13 @@ const PostPage = () => {
if (!commentCid || post?.cid !== commentCid) return;
if (requestedThreadTopCid !== commentCid) return;
- const consumedKey = `${location.key}:${commentCid}`;
+ const consumedKey = `${locationKey}:${commentCid}`;
if (consumedThreadTopScrollRef.current === consumedKey) return;
if (scrollThreadContainerToTop(commentCid)) {
consumedThreadTopScrollRef.current = consumedKey;
}
- }, [commentCid, location.key, post?.cid, requestedThreadTopCid]);
+ }, [commentCid, locationKey, post?.cid, requestedThreadTopCid]);
useEffect(() => {
const boardIdentifier = params.boardIdentifier;
@@ -412,8 +412,7 @@ const PostPage = () => {
let cancelled = false;
startUpdate();
- void (async () => {
- const results = await Promise.allSettled(Array.from(refreshByCid.values(), (refresh) => refresh()));
+ void Promise.allSettled(Array.from(refreshByCid.values(), (refresh) => refresh())).then((results) => {
if (cancelled) return;
const hasSuccessfulRefresh = results.some((result) => result.status === 'fulfilled');
@@ -423,7 +422,7 @@ const PostPage = () => {
if (rejectedResult?.status === 'rejected') {
console.error('Failed to refresh thread comments:', rejectedResult.reason);
}
- })();
+ });
return () => {
cancelled = true;