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

web/src/composables/useAccountMenu.ts

@@ -0,0 +1,30 @@
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useColorMode, type ColorModePreference } from '@/composables/useColorMode'
+import { accountInitials, accountName } from '@/lib/accountName'
+
+const PROFILE_PATH = '/profile'
+
+export const colorModeOptions: { label: string; value: ColorModePreference }[] = [
+	{ label: 'System', value: 'system' },
+	{ label: 'Light', value: 'light' },
+	{ label: 'Dark', value: 'dark' },
+]
+
+export function useAccountMenu(account: () => { username: string; displayName?: string }) {
+	const route = useRoute()
+	const router = useRouter()
+	const colorMode = useColorMode()
+
+	const name = computed(() => accountName(account().username, account().displayName))
+	const initials = computed(() => accountInitials(account().username, account().displayName))
+	const onProfile = computed(() => route.path === PROFILE_PATH)
+
+	function goToProfile() {
+		if (!onProfile.value) {
+			router.push(PROFILE_PATH)
+		}
+	}
+
+	return { colorMode, name, initials, onProfile, goToProfile }
+}