feat: empty list message

README.md

@@ -12,7 +12,7 @@
 - [x] list option: move completed below
 - [x] list option: hide completed
 - [x] options in cookies
-- [ ] Empty list message
+- [x] Empty list message
 - [x] change lang
 - [ ] toasts
 - [ ] handle errors

resources/lang/en.json

@@ -42,6 +42,8 @@
     "resets": "Resets",
     "completed": "Completed",
     "new_task_hint": "New task",
+    "empty_hint": "Looks like there's nothing here, start by adding a new task.",
+    "all_completed_hint": "Looks like everything's been done!",
     "options": {
         "title": "Options",
         "sort_by": "Sort by",

resources/lang/fr.json

@@ -42,6 +42,8 @@
     "resets": "Reviens",
     "completed": "Complété",
     "new_task_hint": "Nouvelle tâche",
+    "empty_hint": "On dirait qu'il n'y a rien ici, commence par ajouter une tâche.",
+    "all_completed_hint": "On dirait bien que tout a été fait !",
     "options": {
         "title": "Options",
         "sort_by": "Trier par",

resources/ts/components/TaskList.vue

@@ -19,6 +19,8 @@ const showNextReset = booleanCookieRef("toutDouxShowNextReset", false);
 const separateCompleted = booleanCookieRef("toutDouxSeparateCompleted", false);
 
 const hasCompleted = computed<boolean>(() => tasks.value.some(taskCompleted));
+const empty = computed<boolean>(() => tasks.value.length === 0);
+const allCompleted = computed<boolean>(() => tasks.value.every(taskCompleted));
 
 function fetchTasks() {
     void getTasks(list.value)
@@ -88,6 +90,12 @@ onBeforeMount(fetchTasks);
                 />
             </li>
         </template>
+        <li v-if="empty" class="list-row italic text-xl font-extralight">
+            {{ $t('empty_hint') }}
+        </li>
+        <li v-if="allCompleted && separateCompleted" class="list-row italic text-xl font-extralight">
+            {{ $t('all_completed_hint') }}
+        </li>
         <li class="list-row">
             <div class="list-col-grow">
                 <input