From b2068865e834aea0dda6ec72172a1b351e3e4aa4 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 24 Jan 2026 14:08:18 +0100
Subject: [PATCH] feat: display description hint on empty state

Show a welcome message explaining Fail Well's purpose when no tasks exist.
This helps new users understand the app's workflow.

Fixes #9
---
 src/views/HomeView.vue | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 95c965f..b7d7474 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -60,6 +60,17 @@ onUnmounted(() => {
   <main>
     <div class="content-tasks columns is-centered is-vcentered">
       <div class="new-task-container column">
+        <section v-if="!hasTask" class="description-hint">
+          <h1 class="title is-3">Welcome to Fail Well</h1>
+          <p class="subtitle is-6">Track your feedback loops during tasks.</p>
+          <div class="content">
+            <p>
+              Plan your steps with time estimates, then record how long they
+              actually take. Compare planned vs actual to better understand what
+              went wrong and what can be improved.
+            </p>
+          </div>
+        </section>
         <div class="buttons">
           <router-link :to="{ name: 'new-task' }" class="button is-primary">
             new task
@@ -74,7 +85,7 @@ onUnmounted(() => {
           </div>
         </section>
       </div>
-      <task-list class="column task-list" />
+      <task-list v-if="hasTask" class="column task-list" />
     </div>
     <!--
     <footer>
@@ -116,6 +127,15 @@ main {
   text-align: center;
 }
 
+.description-hint {
+  margin: 2rem 1rem;
+  padding: 1.5rem;
+  text-align: center;
+  background-color: #f5f5f5;
+  border-radius: 0.5rem;
+  max-width: 400px;
+}
+
 .task-list {
   max-height: 60vh;
   overflow-y: auto;