From 427a702bd40b45ac7dfb5dbc1e99970546dd044c Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 17 Jan 2021 20:53:09 +0100
Subject: [PATCH] Add clearer call to action when no lists are available yet

---
 src/views/Home.vue            | 35 +++++++++++++++++++++++++++++------
 src/views/list/views/List.vue |  2 ++
 src/views/tasks/ShowTasks.vue |  4 ++--
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index b960ef3219..2d9005b050 100644
--- a/src/views/Home.vue
+++ b/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>
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 8b1ef69248..aba20f2e75 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -170,6 +170,7 @@ import {saveListView} from '@/helpers/saveListView'
 import Rights from '../../../models/rights.json'
 import {mapState} from 'vuex'
 import FilterPopup from '@/components/list/partials/filter-popup'
+import {HAS_TASKS} from '@/store/mutation-types'
 
 export default {
 	name: 'List',
@@ -322,6 +323,7 @@ export default {
 								this.taskService.update(task)
 									.then(updatedTask => {
 										this.updateTasks(updatedTask)
+										this.$store.commit(HAS_TASKS, true)
 									})
 									.catch(e => {
 										this.error(e, this)
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index a8951767bd..644959f116 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -8,8 +8,8 @@
 		>
 			Show tasks without dates
 		</fancycheckbox>
-		<h3 v-if="showAll">Current tasks</h3>
-		<h3 v-else>
+		<h3 v-if="showAll && tasks.length > 0">Current tasks</h3>
+		<h3 v-else-if="!showAll">
 			Tasks from
 			<flat-pickr
 				:class="{ 'disabled': taskService.loading}"