feat: get username from store getter

src/composables/useDateTimeSalutation.ts

@@ -1,6 +1,8 @@
-import {computed, unref} from 'vue'
+import {computed} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useNow, type MaybeRef} from '@vueuse/core'
+import {useNow} from '@vueuse/core'
+
+import {useAuthStore} from '@/stores/auth'
 
 type Daytime = 'night' | 'morning' | 'day' | 'evening'
 
@@ -17,12 +19,13 @@ export function hourToDaytime(now: Date): Daytime {
 	return (Object.keys(daytimeMap) as Daytime[]).find((daytime) => daytimeMap[daytime]) || 'night'
 }
 
-export function useDateTimeSalutation(username: MaybeRef<string>) {
+export function useDateTimeSalutation() {
 	const {t} = useI18n({useScope: 'global'})
 	const now = useNow()
+	const authStore = useAuthStore()
 
+	const name = computed(() => authStore.userDisplayName)
 	const daytime = computed(() => hourToDaytime(now.value))
-	const name = computed(() => unref(username))
 
 	const salutations = {
 		'night': () => t('home.welcomeNight', {username: name.value}),
@@ -31,5 +34,5 @@ export function useDateTimeSalutation(username: MaybeRef<string>) {
 		'evening': () => t('home.welcomeEvening', {username: name.value}),
 	} as Record<Daytime, () => string>
 
-	return computed(() => salutations[daytime.value]())
+	return computed(() => name.value ? salutations[daytime.value]() : undefined)
 }

src/stores/auth.ts

@@ -3,7 +3,7 @@ import {defineStore, acceptHMRUpdate} from 'pinia'
 import {HTTPFactory, AuthenticatedHTTPFactory} from '@/http-common'
 import {i18n, getCurrentLanguage, saveLanguage} from '@/i18n'
 import {objectToSnakeCase} from '@/helpers/case'
-import UserModel, { getAvatarUrl } from '@/models/user'
+import UserModel, { getAvatarUrl, getDisplayName } from '@/models/user'
 import UserSettingsService from '@/services/userSettings'
 import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
 import {setModuleLoading} from '@/stores/helper'
@@ -54,6 +54,9 @@ export const useAuthStore = defineStore('auth', {
 				state.info.type === AUTH_TYPES.LINK_SHARE
 			)
 		},
+		userDisplayName(state) {
+			return state.info ? getDisplayName(state.info) : undefined
+		},
 	},
 	actions: {
 		setIsLoading(isLoading: boolean) {

src/views/Home.vue

@@ -1,8 +1,7 @@
 <template>
 	<div class="content has-text-centered">
-		<h2 v-if="userInfo">
+		<h2 v-if="salutation">{{ salutation }}</h2>
-			{{ salutation }}
+
-		</h2>
 		<message variant="danger" v-if="deletionScheduledAt !== null" class="mb-4">
 			{{
 				$t('user.deletion.scheduled', {
@@ -78,8 +77,7 @@ import {useNamespaceStore} from '@/stores/namespaces'
 import {useAuthStore} from '@/stores/auth'
 import {useTaskStore} from '@/stores/tasks'
 
-const username = computed(() => userInfo.name !== '' ? userInfo.name : userInfo.username)
+const salutation = useDateTimeSalutation()
-const salutation = useDateTimeSalutation(username)
 
 const baseStore = useBaseStore()
 const authStore = useAuthStore()
@@ -100,7 +98,6 @@ const listHistory = computed(() => {
 })
 
 const migratorsEnabled = computed(() => configStore.availableMigrators?.length > 0)
-const userInfo = computed(() => authStore.info)
 const hasTasks = computed(() => baseStore.hasTasks)
 const defaultListId = computed(() => authStore.settings.defaultListId)
 const defaultNamespaceId = computed(() => namespaceStore.namespaces?.[0]?.id || 0)