fix(editor): Use segments/graphemes when creating the compact sidebar…

… entries (#9776)

packages/design-system/src/components/N8nMenuItem/MenuItem.vue

@@ -97,6 +97,7 @@ import N8nIcon from '../N8nIcon';
 import ConditionalRouterLink from '../ConditionalRouterLink';
 import type { IMenuItem } from '../../types';
 import { doesMenuItemMatchCurrentRoute } from './routerUtil';
+import { getInitials } from './labelUtil';
 
 interface MenuItemProps {
 	item: IMenuItem;
@@ -149,16 +150,6 @@ const isItemActive = (item: IMenuItem): boolean => {
 		Array.isArray(item.children) && item.children.some((child) => isActive(child));
 	return isActive(item) || hasActiveChild;
 };
-
-const getInitials = (label: string): string => {
-	const words = label.split(' ');
-
-	if (words.length === 1) {
-		return words[0].substring(0, 2);
-	} else {
-		return words[0].charAt(0) + words[1].charAt(0);
-	}
-};
 </script>
 
 <style module lang="scss">

packages/design-system/src/components/N8nMenuItem/__tests__/labelUtil.spec.ts

@@ -0,0 +1,29 @@
+import { getInitials } from '../labelUtil';
+
+describe('labelUtil.getInitials', () => {
+	it.each([
+		['', ''],
+
+		// simple words
+		['Hello', 'He'],
+		['Hello World', 'HW'],
+		['H', 'H'],
+
+		// multiple spaces
+		['Double  Space', 'DS'],
+		['        ', ''],
+
+		// simple emoji
+		['👋 Hello', '👋H'],
+		['👋Hello', '👋H'],
+		['Hello 👋', 'H👋'],
+		['Hello👋', 'He'],
+
+		// combined emojis
+		['1️⃣ 1️⃣', '1️⃣1️⃣'],
+		['1️⃣', '1️⃣'],
+		['👩‍⚕️D 👩‍⚕️D', '👩‍⚕️👩‍⚕️'],
+	])('turns "%s" into "%s"', (input, output) => {
+		expect(getInitials(input)).toBe(output);
+	});
+});

packages/design-system/src/components/N8nMenuItem/labelUtil.ts

@@ -0,0 +1,25 @@
+export const getInitials = (label: string): string => {
+	const words = label
+		.split(' ')
+		.filter((word) => word !== '')
+		.map((word) => [...new Intl.Segmenter().segment(word)]);
+
+	if (words.length === 0) {
+		return '';
+	} else if (words.length === 1) {
+		// first two segments of the first word
+		return (
+			words
+				.at(0)
+				?.slice(0, 2)
+				.map((grapheme) => grapheme.segment)
+				.join('') ?? ''
+		);
+	} else {
+		// first segment ok the first two words
+		return words
+			.slice(0, 2)
+			.map((word) => word.at(0)?.segment ?? '')
+			.join('');
+	}
+};