From be7249f568d922238c1a95c9d182a01b25ac0ddb Mon Sep 17 00:00:00 2001
From: Danny Martini <danny@n8n.io>
Date: Mon, 17 Jun 2024 18:50:29 +0200
Subject: [PATCH] fix(editor): Use segments/graphemes when creating the compact
 sidebar entries (#9776)

---
 .../src/components/N8nMenuItem/MenuItem.vue   | 11 +------
 .../N8nMenuItem/__tests__/labelUtil.spec.ts   | 29 +++++++++++++++++++
 .../src/components/N8nMenuItem/labelUtil.ts   | 25 ++++++++++++++++
 3 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nMenuItem/__tests__/labelUtil.spec.ts
 create mode 100644 packages/design-system/src/components/N8nMenuItem/labelUtil.ts

diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 8922525f73..f29fad87f9 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/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">
diff --git a/packages/design-system/src/components/N8nMenuItem/__tests__/labelUtil.spec.ts b/packages/design-system/src/components/N8nMenuItem/__tests__/labelUtil.spec.ts
new file mode 100644
index 0000000000..319bf92fd1
--- /dev/null
+++ b/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);
+	});
+});
diff --git a/packages/design-system/src/components/N8nMenuItem/labelUtil.ts b/packages/design-system/src/components/N8nMenuItem/labelUtil.ts
new file mode 100644
index 0000000000..ee6f8903f6
--- /dev/null
+++ b/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('');
+	}
+};