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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
+11 -5
View File
@@ -6,7 +6,9 @@ import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDis
import { Comment, useBlock } from '@plebbit/plebbit-react-hooks'; import { Comment, useBlock } from '@plebbit/plebbit-react-hooks';
import styles from './post-menu-desktop.module.css'; import styles from './post-menu-desktop.module.css';
import { getCommentMediaInfo } from '../../../lib/utils/media-utils'; 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 { isAllView, isCatalogView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
import useHide from '../../../hooks/use-hide'; import useHide from '../../../hooks/use-hide';
import _ from 'lodash'; import _ from 'lodash';
@@ -19,12 +21,14 @@ interface PostMenuDesktopProps {
onClose: () => void; 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 { t } = useTranslation();
const defaultSubplebbits = useDefaultSubplebbits();
const boardIdentifier = getBoardPath(subplebbitAddress, defaultSubplebbits);
return ( return (
<div <div
onClick={() => { onClick={() => {
copyShareLinkToClipboard(subplebbitAddress, cid); copyShareLinkToClipboard(boardIdentifier, linkType, cid);
onClose(); onClose();
}} }}
> >
@@ -118,7 +122,7 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
const headingId = useId(); const headingId = useId();
const handleMenuClick = () => { const handleMenuClick = () => {
if (cid) { if (cid || isDescription || isRules) {
setMenuBtnRotated((prev) => !prev); setMenuBtnRotated((prev) => !prev);
} }
}; };
@@ -142,7 +146,9 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
createPortal( createPortal(
<FloatingFocusManager context={context} modal={false}> <FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}> <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 && ( {!(isInPostPageView && postCid === cid) && !isDescription && !isRules && (
<div <div
className={styles.postMenuItem} className={styles.postMenuItem}
src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+12 -8
View File
@@ -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 { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
import styles from './post-menu-mobile.module.css'; import styles from './post-menu-mobile.module.css';
import { getCommentMediaInfo } from '../../../lib/utils/media-utils'; 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 useEditCommentPrivileges from '../../../hooks/use-author-privileges';
import useHide from '../../../hooks/use-hide'; import useHide from '../../../hooks/use-hide';
import EditMenu from '../../edit-menu/edit-menu'; import EditMenu from '../../edit-menu/edit-menu';
@@ -22,15 +24,15 @@ interface PostMenuMobileProps {
onClose?: () => void; 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 { t } = useTranslation();
const defaultSubplebbits = useDefaultSubplebbits();
const boardIdentifier = getBoardPath(subplebbitAddress, defaultSubplebbits);
return ( return (
<div <div
onClick={() => { onClick={() => {
if (subplebbitAddress) { copyShareLinkToClipboard(boardIdentifier, linkType, cid);
copyShareLinkToClipboard(subplebbitAddress, cid); onClose();
}
onClose && onClose();
}} }}
> >
<div className={styles.postMenuItem}>{t('copy_link')}</div> <div className={styles.postMenuItem}>{t('copy_link')}</div>
@@ -116,7 +118,7 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
const headingId = useId(); const headingId = useId();
const handleMenuClick = () => { const handleMenuClick = () => {
if (cid) { if (cid || isDescription || isRules) {
setIsMenuOpen((prev) => !prev); setIsMenuOpen((prev) => !prev);
} }
}; };
@@ -137,7 +139,9 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
createPortal( createPortal(
<FloatingFocusManager context={context} modal={false}> <FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}> <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 && <HidePostButton cid={cid} isReply={parentCid} postCid={postCid} onClose={handleClose} />}
{cid && subplebbitAddress && !isDescription && !isRules && <BlockUserButton address={author?.address} />} {cid && subplebbitAddress && !isDescription && !isRules && <BlockUserButton address={author?.address} />}
{cid && subplebbitAddress && !isInBoardView && !isDescription && !isRules && <BlockBoardButton address={subplebbitAddress} />} {cid && subplebbitAddress && !isInBoardView && !isDescription && !isRules && <BlockBoardButton address={subplebbitAddress} />}
src/lib/utils/url-utils.ts
+6 -2
View File
@@ -17,8 +17,12 @@ export const isValidURL = (url: string) => {
} }
}; };
export const copyShareLinkToClipboard = async (subplebbitAddress: string, cid: string) => { export type ShareLinkType = 'thread' | 'description' | 'rules';
const shareLink = `https://pleb.bz/p/${subplebbitAddress}/c/${cid}?redirect=5chan.app`;
// 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); await copyToClipboard(shareLink);
}; };