fix(post): improve user ID display with domain detection and length limits

src/components/post-desktop/post-desktop.tsx

@@ -10,6 +10,7 @@ import { hashStringToColor, getTextColorForBackground } from '../../lib/utils/po
 import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isModQueueView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import { formatUserIDForDisplay } from '../../lib/utils/string-utils';
 import useModQueueStore from '../../stores/use-mod-queue-store';
 import { useDirectories } from '../../hooks/use-directories';
 import { getBoardPath } from '../../lib/utils/route-utils';
@@ -286,7 +287,7 @@ const PostInfo = ({
                       onClick={() => handleUserAddressClick(userID, postCid)}
                       style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
                     >
-                      {userID?.slice(0, 8)}
+                      {formatUserIDForDisplay(userID)}
                     </span>
                   }
                   content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`}

src/components/post-mobile/post-mobile.tsx

@@ -10,6 +10,7 @@ import { getHasThumbnail } from '../../lib/utils/media-utils';
 import { getTextColorForBackground, hashStringToColor } from '../../lib/utils/post-utils';
 import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isAllView, isModQueueView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import { formatUserIDForDisplay } from '../../lib/utils/string-utils';
 import useModQueueStore from '../../stores/use-mod-queue-store';
 import { useDirectories } from '../../hooks/use-directories';
 import { getBoardPath } from '../../lib/utils/route-utils';
@@ -251,7 +252,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
                         onClick={() => handleUserAddressClick(userID, postCid)}
                         style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
                       >
-                        {userID?.slice(0, 8)}
+                        {formatUserIDForDisplay(userID)}
                       </span>
                     }
                     content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`}

src/lib/utils/index.ts

@@ -12,6 +12,7 @@ import {
   isNotFoundView,
   ParamsType,
 } from './view-utils';
+import { formatUserIDForDisplay } from './string-utils';
 
 export {
   isAllView,
@@ -25,5 +26,6 @@ export {
   isSettingsView,
   isSubscriptionsView,
   isNotFoundView,
+  formatUserIDForDisplay,
 };
 export type { ParamsType };

src/lib/utils/string-utils.ts

@@ -0,0 +1,22 @@
+/**
+ * Format a user ID for display.
+ * - If ID contains a dot (domain), show full ID but truncate with "..." if exceeds maxLength
+ * - Otherwise, shorten to 8 characters
+ * @param userID - The user ID to format
+ * @param maxDomainLength - Maximum length for domain IDs before truncating with "..."
+ * @returns Formatted user ID
+ */
+export function formatUserIDForDisplay(userID: string | undefined, maxDomainLength: number = 40): string {
+  if (!userID) return '';
+
+  // If ID contains a dot, it's a domain - show fully but truncate if too long
+  if (userID.includes('.')) {
+    if (userID.length > maxDomainLength) {
+      return `${userID.slice(0, maxDomainLength - 3)}...`;
+    }
+    return userID;
+  }
+
+  // Otherwise, shorten to 8 characters
+  return userID.slice(0, 8);
+}