feat(SPA): profile page, display name and the new account menu

web/src/lib/__tests__/accountName.spec.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { accountInitials, accountName } from '@/lib/accountName'
+
+describe('accountName', () => {
+	it.each([
+		['marta', '', 'marta'],
+		['marta', 'Marta Alves', 'Marta Alves'],
+		['marta', undefined, 'marta'],
+		['', '', ''],
+	])('shows %s with display name %j as %s', (username, display, expected) => {
+		expect(accountName(username, display)).toBe(expected)
+	})
+})
+
+describe('Avatar initials', () => {
+	it.each([
+		['marta', '', 'MA'],
+		['marta', 'Marta Alves', 'MA'],
+		['marta', 'Marta Alves Costa', 'MA'],
+		['ines', 'Inès Duarte', 'ID'],
+		['elodie', 'Élodie Martin', 'ÉM'],
+		['marta', 'Marta', 'MA'],
+		['m.alves', '', 'M.'],
+		['marta', '  Marta   Alves  ', 'MA'],
+		['', '', ''],
+	])('gives %s with display name %j the initials %s', (username, display, expected) => {
+		expect(accountInitials(username, display)).toBe(expected)
+	})
+
+	it('counts an emoji as one character', () => {
+		expect(accountInitials('x', '😀 Smile')).toBe('😀S')
+	})
+})

web/src/lib/accountName.ts

@@ -0,0 +1,22 @@
+const WHITESPACE = /\s+/
+
+function firstCharacters(value: string, count: number) {
+	return Array.from(value).slice(0, count).join('')
+}
+
+export function accountName(username: string, displayName?: string | null) {
+	return displayName ? displayName : username
+}
+
+export function accountInitials(username: string, displayName?: string | null) {
+	const words = (displayName ?? '').trim().split(WHITESPACE).filter(Boolean)
+	if (words.length >= 2) {
+		return words
+			.slice(0, 2)
+			.map((word) => firstCharacters(word, 1))
+			.join('')
+			.toUpperCase()
+	}
+	const source = words[0] ?? username
+	return firstCharacters(source, 2).toUpperCase()
+}