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

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()
+}