fix: shortened filename should not repeat chars

Author: Bilb

ts/components/conversation/message/message-content/quote/QuoteText.tsx

@@ -10,6 +10,7 @@ import { GoogleChrome } from '../../../../../util';
 import { MessageBody } from '../MessageBody';
 import { QuoteProps } from './Quote';
 import { tr } from '../../../../../localization/localeTools';
+import { collapseString } from '../../../../../shared/string_utils';
 
 const StyledQuoteText = styled.div<{ $isIncoming: boolean }>`
   display: -webkit-box;
@@ -72,12 +73,9 @@ export function getShortenedFilename(fileName: string) {
   if (!fileName) {
     return '';
   }
-  if (fileName?.length < 20) {
-    return fileName;
-  }
   const charsAround = 15;
 
-  return `${fileName.slice(0, charsAround)} … ${fileName.slice(-charsAround)}`;
+  return collapseString(fileName, charsAround, charsAround, true);
 }
 
 export const QuoteText = (

ts/shared/string_utils.ts

@@ -9,21 +9,24 @@ export function uniqFromListOfList<T extends string>(list: Array<Array<T>>): Arr
 
 /**
  * Collapses a string by replacing characters between the leading and trailing characters with a triple ellipsis unicode character (length 1).
- * The final length of the string will be the sum of the leading and trailing characters plus 1.
+ * The final length of the string will be the sum of the leading and trailing characters plus 1 (or 3 if spacesAroundEllipsis is true).
  * @param str - The input string to collapse.
  * @param leadingChars - The number of characters to keep at the beginning of the string.
  * @param trailingChars - The number of characters to keep at the end of the string.
+ * @param spacesAroundEllipsis - Whether to add spaces around the ellipsis.
  * @param separator - The separator to use between the leading and trailing characters.
  * @returns The collapsed string.
  */
 export const collapseString = (
   str: string,
   leadingChars = 6,
   trailingChars = 4,
+  spacesAroundEllipsis = false,
   separator = '…'
 ): string => {
-  if (str.length <= leadingChars + trailingChars + 3) {
+  if (str.length <= leadingChars + trailingChars + 1 + (spacesAroundEllipsis ? 2 : 0)) {
     return str;
   }
-  return `${str.slice(0, leadingChars)}${separator}${str.slice(-trailingChars)}`;
+  const ellipsis = spacesAroundEllipsis ? ` ${separator} ` : separator;
+  return `${str.slice(0, leadingChars)}${ellipsis}${str.slice(-trailingChars)}`;
 };