Merge pull request #1635 from HannesOberreiter/fix/unicode-initials

fix: unicode/emoji characters in user avatar initials

client/package-lock.json

@@ -45,7 +45,6 @@
         "history": "^5.3.0",
         "i18next": "^25.8.18",
         "i18next-browser-languagedetector": "^8.2.1",
-        "initials": "^3.1.2",
         "javascript-time-ago": "^2.6.4",
         "js-cookie": "^3.0.5",
         "jwt-decode": "^4.0.0",
@@ -10586,12 +10585,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/initials": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/initials/-/initials-3.1.2.tgz",
-      "integrity": "sha512-Sltg35nx8+GX1w4U86rmbxFEmqFiSuMJviS6cB2KChB+jcT2/8Td+nlImXD74HkqpZF5PMv8hN57AyrA/7ltXw==",
-      "license": "MIT"
-    },
     "node_modules/inline-style-prefixer": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz",

client/package.json

@@ -122,7 +122,6 @@
     "history": "^5.3.0",
     "i18next": "^25.8.18",
     "i18next-browser-languagedetector": "^8.2.1",
-    "initials": "^3.1.2",
     "javascript-time-ago": "^2.6.4",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",

client/src/components/users/UserAvatar/UserAvatar.jsx

@@ -5,7 +5,6 @@
 
 import upperFirst from 'lodash/upperFirst';
 import camelCase from 'lodash/camelCase';
-import initials from 'initials';
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -35,6 +34,19 @@ const COLORS = [
   'midnight-blue',
 ];
 
+const getInitials = (name) => {
+  const words = name
+    .trim()
+    .split(/[\s-]+/)
+    .filter(Boolean);
+  if (words.length === 0) return '';
+  if (words.length === 1) return [...words[0]].slice(0, 2).join('');
+  return words
+    .slice(0, 2)
+    .map((word) => [...word][0])
+    .join('');
+};
+
 const getColor = (name) => {
   let sum = 0;
   for (let i = 0; i < name.length; i += 1) {
@@ -78,7 +90,7 @@ const UserAvatar = React.memo(
           background: avatarUrl && `url("${avatarUrl}") center / cover`,
         }}
       >
-        {!avatarUrl && <span className={styles.initials}>{initials(user.name).slice(0, 2)}</span>}
+        {!avatarUrl && <span className={styles.initials}>{getInitials(user.name)}</span>}
         {withCreatorIndicator && <span className={styles.creatorIndicator}>+</span>}
       </span>
     );