feat(post-desktop): truncate long file links with ellipsis in middle

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

@@ -10,7 +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, isModView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
-import { formatUserIDForDisplay } from '../../lib/utils/string-utils';
+import { formatUserIDForDisplay, truncateWithEllipsisInMiddle } 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';
@@ -581,10 +581,10 @@ const PostMedia = ({
             if (requirePostLinkIsMedia && url) {
               try {
                 const filename = new URL(url).pathname.split('/').pop();
-                if (filename && /\.\w+$/.test(filename)) return filename;
+                if (filename && /\.\w+$/.test(filename)) return truncateWithEllipsisInMiddle(filename);
               } catch {}
             }
-            return url && url.length > 30 ? url.slice(0, 30) + '...' : url;
+            return truncateWithEllipsisInMiddle(url ?? '');
           })()}
         </a>{' '}
         ({type && lowerCase(getDisplayMediaInfoType(type, t))}

src/lib/utils/string-utils.ts

@@ -20,3 +20,14 @@ export function formatUserIDForDisplay(userID: string | undefined, maxDomainLeng
   // Otherwise, shorten to 8 characters
   return userID.slice(0, 8);
 }
+
+/**
+ * Truncate a string with "..." in the middle when it exceeds maxLength.
+ * Preserves the start and end of the string for readability (e.g. URLs, filenames).
+ */
+export function truncateWithEllipsisInMiddle(str: string, maxLength: number = 50): string {
+  if (!str || str.length <= maxLength) return str;
+  const ellipsis = '...';
+  const half = Math.floor((maxLength - ellipsis.length) / 2);
+  return str.slice(0, half) + ellipsis + str.slice(-half);
+}