Show salutation based on the time of day

src/i18n/lang/en.json

@@ -1,6 +1,9 @@
 {
   "home": {
-    "welcome": "Hi {username}",
+    "welcomeNight": "Good Night {username}",
+    "welcomeMorning": "Good Morning {username}",
+    "welcomeDay": "Hi {username}",
+    "welcomeEvening": "Good Evening {username}",
     "list": {
       "newText": "You can create a new list for your new tasks:",
       "new": "Create a new list",

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="content has-text-centered">
 		<h2>
-			{{ $t('home.welcome', {username: userInfo.name !== '' ? userInfo.name : userInfo.username}) }}!
+			{{ $t(`home.welcome${welcome}`, {username: userInfo.name !== '' ? userInfo.name : userInfo.username}) }}!
 		</h2>
 		<template v-if="!hasTasks">
 			<p>{{ $t('home.list.newText') }}</p>
@@ -43,7 +43,29 @@ export default {
 			tasks: [],
 		}
 	},
-	computed: mapState({
+	computed: {
+		welcome() {
+			const now = new Date()
+
+			if (now.getHours() < 5) {
+				return 'Night'
+			}
+
+			if(now.getHours() < 11) {
+				return 'Morning'
+			}
+
+			if(now.getHours() < 18) {
+				return 'Day'
+			}
+
+			if(now.getHours() < 23) {
+				return 'Evening'
+			}
+
+			return 'Night'
+		},
+		...mapState({
 			migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
 			authenticated: state => state.auth.authenticated,
 			userInfo: state => state.auth.info,
@@ -63,5 +85,6 @@ export default {
 				return state.namespaces.namespaces[0].lists.length > 0
 			},
 		}),
+	}
 }
 </script>