refactor: move board display from post info to media row in multiboard views

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 ? '' : ' '}
         </span>
         <span className={styles.postNum}>
-          {subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && boardPath && (
-            <span className={styles.postNumLink}>
-              {' '}
-              <Link to={`/${boardPath}`}>p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}</Link>{' '}
-            </span>
-          )}
           {!(isDescription || isRules) &&
             (cid ? (
               <span className={styles.postNumLink}>
@@ -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 (
     <div className={styles.file}>
       <div className={styles.fileText}>
+        {subplebbitAddress && (isInAllView || isInSubscriptionsView) && boardPath && !parentCid && (
+          <>
+            {t('board')}: <Link to={`/${boardPath}`}>{boardDisplayString}</Link>{' '}
+          </>
+        )}
         {t('link')}:{' '}
         <a href={url} target='_blank' rel='noopener noreferrer'>
           {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)) && <CommentContent comment={post} />}
@@ -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}
             />
           )}
           <PostInfo isHidden={hidden} post={post} postReplyCount={replyCount} roles={roles} />

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 && (
               <div className={styles.postNumLink}>
                 {' '}
-                <Link to={`/${boardPath}`}>p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}</Link>
+                <Link to={`/${boardPath}`}>Board: {getBoardDisplayString(subplebbitAddress, defaultSubplebbits)}</Link>
               </div>
             )}
             <Tooltip children={<span>{getFormattedDate(timestamp)}</span>} content={getFormattedTimeAgo(timestamp)} />{' '}

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;
+};