round 4

web/vue-app/src/components/task/TaskView.vue

@@ -1,10 +1,19 @@
 <template>
   <div class="task-view">
+    <div v-if="taskCountRef === 0" class="no-tasks-message">
+      <div>No Tasks</div>
+      <div class="sub-message">
+        <button class="create-btn" @click="createTask">Create</button> a task
+      </div>
+    </div>
+
     <TaskList
+      v-else
       ref="taskListRef"
       :deletable="true"
       @edit-task="(taskId) => $router.push({ name: 'EditTask', params: { id: taskId } })"
       @delete-task="confirmDeleteTask"
+      @loading-complete="(count) => (taskCountRef = count)"
     />
 
     <!-- Floating Action Button -->
@@ -37,6 +46,7 @@ const $router = useRouter()
 const showConfirm = ref(false)
 const taskToDelete = ref<string | null>(null)
 const taskListRef = ref()
+const taskCountRef = ref<number>(0)
 
 function confirmDeleteTask(taskId: string) {
   taskToDelete.value = taskId
@@ -145,4 +155,37 @@ const createTask = () => {
 .fab:hover {
   background: #5a67d8;
 }
+
+.no-tasks-message {
+  margin: 2rem 0;
+  font-size: 1.15rem;
+  font-weight: 600;
+  text-align: center;
+  color: #fdfdfd;
+  line-height: 1.5;
+}
+.sub-message {
+  margin-top: 0.3rem;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #b5ccff;
+}
+.create-btn {
+  background: #fff;
+  color: #2563eb;
+  border: 2px solid #2563eb;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  margin-right: 0.1rem;
+  cursor: pointer;
+  transition:
+    background 0.18s,
+    color 0.18s;
+}
+.create-btn:hover {
+  background: #2563eb;
+  color: #fff;
+}
 </style>