Add clearer call to action when no lists are available yet

src/views/Home.vue

@@ -1,22 +1,31 @@
 <template>
 	<div class="content has-text-centered">
-		<h2>Hi {{ userInfo.name !== '' ? userInfo.name : userInfo.username }}!</h2>
+		<h2>
+			Hi {{ userInfo.name !== '' ? userInfo.name : userInfo.username }}!
+		</h2>
 		<template v-if="!hasTasks">
-			<p>Click on a list or namespace on the left to get started.</p>
+			<p>You can create a new list for your new tasks:</p>
 			<x-button
-				:to="{name: 'migrate.start'}"
+				:to="{name: 'list.create', params: { id: defaultNamespaceId }}"
 				:shadow="false"
-				v-if="migratorsEnabled"
+				class="ml-2"
+				v-if="defaultNamespaceId > 0"
 			>
+				Create a new list
+			</x-button>
+			<p class="mt-4" v-if="migratorsEnabled">
+				Or import your lists and tasks from other services into Vikunja:
+			</p>
+			<x-button :to="{ name: 'migrate.start' }" :shadow="false">
 				Import your data into Vikunja
 			</x-button>
 		</template>
-		<ShowTasks :show-all="true"/>
+		<ShowTasks :show-all="true" v-if="hasLists"/>
 	</div>
 </template>
 
 <script>
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'
 import ShowTasks from './tasks/ShowTasks'
 
 export default {
@@ -36,6 +45,20 @@ export default {
 		authenticated: state => state.auth.authenticated,
 		userInfo: state => state.auth.info,
 		hasTasks: state => state.hasTasks,
+		defaultNamespaceId: state => {
+			if (state.namespaces.namespaces.length === 0) {
+				return 0
+			}
+
+			return state.namespaces.namespaces[0].id
+		},
+		hasLists: state => {
+			if (state.namespaces.namespaces.length === 0) {
+				return false
+			}
+
+			return state.namespaces.namespaces[0].lists.length > 0
+		},
 	}),
 }
 </script>