From 1b383351184318bc54fd01e7b4fd93d0dec1cea4 Mon Sep 17 00:00:00 2001 From: plebeius Date: Fri, 14 Nov 2025 14:32:59 +0100 Subject: [PATCH] refactor: move board display from post info to media row in multiboard views --- src/components/post-desktop/post-desktop.tsx | 47 ++++++++++++++++---- src/components/post-mobile/post-mobile.tsx | 4 +- src/lib/utils/route-utils.ts | 10 +++++ 3 files changed, 51 insertions(+), 10 deletions(-) diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index e72e485a..fbe94fd4 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/src/components/post-desktop/post-desktop.tsx @@ -11,7 +11,7 @@ import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-util import { isValidURL } from '../../lib/utils/url-utils'; import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils'; import { useDefaultSubplebbits } from '../../hooks/use-default-subplebbits'; -import { getBoardPath } from '../../lib/utils/route-utils'; +import { getBoardPath, getBoardDisplayString } from '../../lib/utils/route-utils'; import useAvatarVisibilityStore from '../../stores/use-avatar-visibility-store'; import useAuthorAddressClick from '../../hooks/use-author-address-click'; import { useCommentMediaInfo } from '../../hooks/use-comment-media-info'; @@ -166,12 +166,6 @@ const PostInfo = ({ post, postReplyCount = 0, roles, isHidden }: PostProps) => { {isDescription || isRules ? '' : ' '} - {subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && boardPath && ( - - {' '} - p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}{' '} - - )} {!(isDescription || isRules) && (cid ? ( @@ -250,13 +244,31 @@ interface PostMediaProps { linkHeight: number; linkWidth: number; parentCid: string; + subplebbitAddress: string; + isInAllView: boolean; + isInSubscriptionsView: boolean; } -const PostMedia = ({ commentMediaInfo, hasThumbnail, isDescription, isRules, spoiler, deleted, removed, linkHeight, linkWidth, parentCid }: PostMediaProps) => { +const PostMedia = ({ + commentMediaInfo, + hasThumbnail, + isDescription, + isRules, + spoiler, + deleted, + removed, + linkHeight, + linkWidth, + parentCid, + subplebbitAddress, + isInAllView, + isInSubscriptionsView, +}: PostMediaProps) => { const { t } = useTranslation(); const { url } = commentMediaInfo || {}; let type = commentMediaInfo?.type; const gifFrameUrl = useFetchGifFirstFrame(url); + const defaultSubplebbits = useDefaultSubplebbits(); if (type === 'gif' && gifFrameUrl !== null) { type = 'animated gif'; @@ -268,10 +280,17 @@ const PostMedia = ({ commentMediaInfo, hasThumbnail, isDescription, isRules, spo const [showThumbnail, setShowThumbnail] = useState(true); const mediaDimensions = getMediaDimensions(commentMediaInfo); + const boardDisplayString = getBoardDisplayString(subplebbitAddress, defaultSubplebbits); + const boardPath = getBoardPath(subplebbitAddress, defaultSubplebbits); return (
+ {subplebbitAddress && (isInAllView || isInSubscriptionsView) && boardPath && !parentCid && ( + <> + {t('board')}: {boardDisplayString}{' '} + + )} {t('link')}:{' '} {spoiler ? _.capitalize(t('spoiler')) : url && url.length > 30 ? url.slice(0, 30) + '...' : url} @@ -337,6 +356,10 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => { const isRouteLinkToReply = cid ? location.pathname.startsWith(route) : false; const { hidden } = useHide({ cid }); + const isInAllView = isAllView(location.pathname); + const params = useParams(); + const isInSubscriptionsView = isSubscriptionsView(location.pathname, params); + const commentMediaInfo = useCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); @@ -357,6 +380,9 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => { linkHeight={linkHeight} linkWidth={linkWidth} parentCid={parentCid} + subplebbitAddress={subplebbitAddress} + isInAllView={isInAllView} + isInSubscriptionsView={isInSubscriptionsView} /> )} {!hidden && (!(removed || deleted) || ((removed || deleted) && reason)) && } @@ -373,6 +399,8 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr const location = useLocation(); const isInPendingPostView = isPendingPostView(location.pathname, params); const isInPostPageView = isPostPageView(location.pathname, params); + const isInAllView = isAllView(location.pathname); + const isInSubscriptionsView = isSubscriptionsView(location.pathname, params); const defaultSubplebbits = useDefaultSubplebbits(); const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, defaultSubplebbits) : undefined; @@ -433,6 +461,9 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr linkHeight={linkHeight} linkWidth={linkWidth} parentCid={parentCid} + subplebbitAddress={subplebbitAddress} + isInAllView={isInAllView} + isInSubscriptionsView={isInSubscriptionsView} /> )} diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx index 7a4dd2be..0924e2ce 100644 --- a/src/components/post-mobile/post-mobile.tsx +++ b/src/components/post-mobile/post-mobile.tsx @@ -11,7 +11,7 @@ import { getTextColorForBackground, hashStringToColor } from '../../lib/utils/po import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils'; import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils'; import { useDefaultSubplebbits } from '../../hooks/use-default-subplebbits'; -import { getBoardPath } from '../../lib/utils/route-utils'; +import { getBoardPath, getBoardDisplayString } from '../../lib/utils/route-utils'; import useAvatarVisibilityStore from '../../stores/use-avatar-visibility-store'; import useAuthorAddressClick from '../../hooks/use-author-address-click'; import { useCommentMediaInfo } from '../../hooks/use-comment-media-info'; @@ -178,7 +178,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles }: PostProps) => { {subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && boardPath && (
{' '} - p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)} + Board: {getBoardDisplayString(subplebbitAddress, defaultSubplebbits)}
)} {getFormattedDate(timestamp)}} content={getFormattedTimeAgo(timestamp)} />{' '} diff --git a/src/lib/utils/route-utils.ts b/src/lib/utils/route-utils.ts index 265154fa..ad6d638c 100644 --- a/src/lib/utils/route-utils.ts +++ b/src/lib/utils/route-utils.ts @@ -100,3 +100,13 @@ export const isDirectoryBoard = (identifier: string, subplebbits: MultisubSubple const directoryToAddress = getDirectoryToAddressMap(subplebbits); return directoryToAddress.has(identifier); }; + +/** + * Get board display string for a subplebbit address + * Returns directory code (e.g., "biz") if it's a directory board, otherwise returns the full address + */ +export const getBoardDisplayString = (subplebbitAddress: string, subplebbits: MultisubSubplebbit[]): string => { + const addressToDirectory = getAddressToDirectoryMap(subplebbits); + const directory = addressToDirectory.get(subplebbitAddress); + return directory || subplebbitAddress; +};