diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 9d4ec13e..9e423dc9 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/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 ?? ''); })()} {' '} ({type && lowerCase(getDisplayMediaInfoType(type, t))} diff --git a/src/lib/utils/string-utils.ts b/src/lib/utils/string-utils.ts index 3c40118a..1ea240a4 100644 --- a/src/lib/utils/string-utils.ts +++ b/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); +}