feat(share-link): add description and rules link types

This commit is contained in:
plebeius
2025-11-30 22:43:48 +01:00
parent 09116e1284
commit 41ffd2f65b
3 changed files with 29 additions and 15 deletions
@@ -6,7 +6,9 @@ import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDis
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 { copyShareLinkToClipboard, isValidURL, type ShareLinkType } from '../../../lib/utils/url-utils';
import { getBoardPath } from '../../../lib/utils/route-utils';
import { useDefaultSubplebbits } from '../../../hooks/use-default-subplebbits';
import { isAllView, isCatalogView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
import useHide from '../../../hooks/use-hide';
import _ from 'lodash';
@@ -19,12 +21,14 @@ interface PostMenuDesktopProps {
onClose: () => void;
}
const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuDesktopProps) => {
const CopyLinkButton = ({ cid, subplebbitAddress, linkType, onClose }: { cid?: string; subplebbitAddress: string; linkType: ShareLinkType; onClose: () => void }) => {
const { t } = useTranslation();
const defaultSubplebbits = useDefaultSubplebbits();
const boardIdentifier = getBoardPath(subplebbitAddress, defaultSubplebbits);
return (
<div
onClick={() => {
copyShareLinkToClipboard(subplebbitAddress, cid);
copyShareLinkToClipboard(boardIdentifier, linkType, cid);
onClose();
}}
>
@@ -118,7 +122,7 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
const headingId = useId();
const handleMenuClick = () => {
if (cid) {
if (cid || isDescription || isRules) {
setMenuBtnRotated((prev) => !prev);
}
};
@@ -142,7 +146,9 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
createPortal(
<FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
{cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
{cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} linkType='thread' onClose={handleClose} />}
{!cid && isDescription && subplebbitAddress && <CopyLinkButton subplebbitAddress={subplebbitAddress} linkType='description' onClose={handleClose} />}
{!cid && isRules && subplebbitAddress && <CopyLinkButton subplebbitAddress={subplebbitAddress} linkType='rules' onClose={handleClose} />}
{!(isInPostPageView && postCid === cid) && !isDescription && !isRules && (
<div
className={styles.postMenuItem}
@@ -5,7 +5,9 @@ import { Comment, useBlock } from '@plebbit/plebbit-react-hooks';
import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
import styles from './post-menu-mobile.module.css';
import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils';
import { copyShareLinkToClipboard, isValidURL, type ShareLinkType } from '../../../lib/utils/url-utils';
import { getBoardPath } from '../../../lib/utils/route-utils';
import { useDefaultSubplebbits } from '../../../hooks/use-default-subplebbits';
import useEditCommentPrivileges from '../../../hooks/use-author-privileges';
import useHide from '../../../hooks/use-hide';
import EditMenu from '../../edit-menu/edit-menu';
@@ -22,15 +24,15 @@ interface PostMenuMobileProps {
onClose?: () => void;
}
const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuMobileProps) => {
const CopyLinkButton = ({ cid, subplebbitAddress, linkType, onClose }: { cid?: string; subplebbitAddress: string; linkType: ShareLinkType; onClose: () => void }) => {
const { t } = useTranslation();
const defaultSubplebbits = useDefaultSubplebbits();
const boardIdentifier = getBoardPath(subplebbitAddress, defaultSubplebbits);
return (
<div
onClick={() => {
if (subplebbitAddress) {
copyShareLinkToClipboard(subplebbitAddress, cid);
}
onClose && onClose();
copyShareLinkToClipboard(boardIdentifier, linkType, cid);
onClose();
}}
>
<div className={styles.postMenuItem}>{t('copy_link')}</div>
@@ -116,7 +118,7 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
const headingId = useId();
const handleMenuClick = () => {
if (cid) {
if (cid || isDescription || isRules) {
setIsMenuOpen((prev) => !prev);
}
};
@@ -137,7 +139,9 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
createPortal(
<FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
{cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
{cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} linkType='thread' onClose={handleClose} />}
{!cid && isDescription && subplebbitAddress && <CopyLinkButton subplebbitAddress={subplebbitAddress} linkType='description' onClose={handleClose} />}
{!cid && isRules && subplebbitAddress && <CopyLinkButton subplebbitAddress={subplebbitAddress} linkType='rules' onClose={handleClose} />}
{cid && subplebbitAddress && <HidePostButton cid={cid} isReply={parentCid} postCid={postCid} onClose={handleClose} />}
{cid && subplebbitAddress && !isDescription && !isRules && <BlockUserButton address={author?.address} />}
{cid && subplebbitAddress && !isInBoardView && !isDescription && !isRules && <BlockBoardButton address={subplebbitAddress} />}
+6 -2
View File
@@ -17,8 +17,12 @@ export const isValidURL = (url: string) => {
}
};
export const copyShareLinkToClipboard = async (subplebbitAddress: string, cid: string) => {
const shareLink = `https://pleb.bz/p/${subplebbitAddress}/c/${cid}?redirect=5chan.app`;
export type ShareLinkType = 'thread' | 'description' | 'rules';
// Copies a share link to clipboard for a board, thread, description, or rules page
export const copyShareLinkToClipboard = async (boardIdentifier: string, linkType: ShareLinkType, cid?: string) => {
const suffix = linkType === 'thread' ? `/thread/${cid}` : `/${linkType}`;
const shareLink = `https://5chan.app/${boardIdentifier}${suffix}`;
await copyToClipboard(shareLink);
};