External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(reply-quote-preview): keep floating OP previews at desktop width

Browse Source
This commit is contained in:
Tommaso Casaburi
2026-04-16 15:20:49 +07:00
parent b288c62c06
commit f6ce2ba018
5 changed files with 86 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/reply-quote-preview/__tests__/reply-quote-preview.test.tsx
+30
View File
@@ -401,6 +401,36 @@ describe('ReplyQuotePreview', () => {
outOfView.remove();
});
it('uses the OP preview width class for floating desktop OP quotelinks', async () => {
const outOfView = appendReplyElement({ cid: 'thread-cid', inViewport: false, isThreadCard: true });
await renderPreview({
isOP: true,
isQuotelinkReply: true,
quotelinkReply: {
cid: 'thread-cid',
number: 1,
communityAddress: 'music-posting.eth',
},
});
const link = queryAnchorByText('>>1 (OP)');
expect(link).toBeTruthy();
await act(async () => {
link?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
});
const preview = document.querySelector(`.${styles.replyQuotePreview}`);
expect(preview?.classList.contains(styles.replyQuotePreviewOp)).toBe(true);
await act(async () => {
link?.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
});
outOfView.remove();
});
it('marks quotelinks as your own via the direct account comment lookup before author fallback', async () => {
testState.account = {
id: 'account-1',
src/components/reply-quote-preview/reply-quote-preview.tsx
+7 -4
View File
@@ -24,6 +24,9 @@ interface ReplyQuotePreviewProps {
showTrailingBreak?: boolean;
}
const getQuotePreviewClassName = (previewPost?: Comment) =>
!previewPost?.parentCid ? `${styles.replyQuotePreview} ${styles.replyQuotePreviewOp}` : styles.replyQuotePreview;
const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => {
const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
const isOpElement = (element: HTMLElement) => element.getAttribute('data-post-cid') === cid;
@@ -209,7 +212,7 @@ const DesktopQuotePreview = ({
{hoveredCid === normalizedBacklinkReply?.cid &&
outOfViewCid === normalizedBacklinkReply?.cid &&
createPortal(
<div className={styles.replyQuotePreview} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<div className={getQuotePreviewClassName(normalizedBacklinkReply)} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<Post post={normalizedBacklinkReply} showReplies={false} />
</div>,
document.body,
@@ -265,7 +268,7 @@ const DesktopQuotePreview = ({
{showTrailingBreak && <br />}
{shouldShowQuotelinkPreview &&
createPortal(
<div className={styles.replyQuotePreview} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<div className={getQuotePreviewClassName(normalizedQuotelinkReply)} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<Post post={normalizedQuotelinkReply} showReplies={false} />
</div>,
document.body,
@@ -373,7 +376,7 @@ const MobileQuotePreview = ({
{hoveredCid === normalizedBacklinkReply?.cid &&
outOfViewCid === normalizedBacklinkReply?.cid &&
createPortal(
<div className={styles.replyQuotePreview} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<div className={getQuotePreviewClassName(normalizedBacklinkReply)} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<Post post={normalizedBacklinkReply} showReplies={false} />
</div>,
document.body,
@@ -427,7 +430,7 @@ const MobileQuotePreview = ({
{showTrailingBreak && <br />}
{shouldShowQuotelinkPreview &&
createPortal(
<div className={styles.replyQuotePreview} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<div className={getQuotePreviewClassName(normalizedQuotelinkReply)} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<Post post={normalizedQuotelinkReply} showReplies={false} />
</div>,
document.body,