feat: add titles to icon-only buttons

resources/lang/en.json

@@ -78,5 +78,10 @@
     "call_to_action": "Create your list below:",
     "home_button": "Let's go !",
     "share_button": "Share my list",
-    "share_text": "Check my list on Tout Doux!"
+    "share_text": "Check my list on Tout Doux!",
+    "add_button": "Add task",
+    "cancel_button": "Cancel editing",
+    "save_button": "Save task",
+    "clone_button": "Clone task",
+    "delete_button": "Delete task"
 }

resources/lang/fr.json

@@ -78,5 +78,10 @@
     "call_to_action": "Créez ta liste ci-dessous :",
     "home_button": "C'est parti !",
     "share_button": "Partager ma liste",
-    "share_text": "Regarde ma liste sur Tout Doux!"
+    "share_text": "Regarde ma liste sur Tout Doux!",
+    "add_button": "Ajouter la tâche",
+    "cancel_button": "Annuler la modification",
+    "save_button": "Sauvegarder la tâche",
+    "clone_button": "Cloner la tâche",
+    "delete_button": "Supprimer la tâche"
 }

resources/ts/components/TaskItem.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { onBeforeMount, ref, watch, computed, defineAsyncComponent, nextTick } from "vue";
+import {
+    onBeforeMount,
+    ref,
+    watch,
+    computed,
+    defineAsyncComponent,
+    nextTick,
+} from "vue";
 import type { Task } from "@/types";
 import { CopyIcon, TrashIcon, SaveIcon, XIcon } from "@lucide/vue";
 import { updateTask } from "@/api/tasks";
@@ -151,7 +158,11 @@ watch(task, () => {
         <template v-else>
             <div class="list-col-grow flex flex-col gap-2">
                 <div class="flex justify-evenly">
-                    <button class="btn btn-square me-1" @click="onClose">
+                    <button
+                        class="btn btn-square me-1"
+                        :title="$t('cancel_button')"
+                        @click="onClose"
+                    >
                         <x-icon />
                     </button>
                     <button
@@ -159,14 +170,23 @@ watch(task, () => {
                         :class="
                             editName.trim().length === 0 ? 'btn-disabled' : ''
                         "
+                        :title="$t('save_button')"
                         @click="onSave"
                     >
                         <save-icon />
                     </button>
-                    <button class="btn btn-square me-1" @click="onClone">
+                    <button
+                        class="btn btn-square me-1"
+                        :title="$t('clone_button')"
+                        @click="onClone"
+                    >
                         <copy-icon />
                     </button>
-                    <button class="btn btn-square" @click="onDelete">
+                    <button
+                        class="btn btn-square"
+                        :title="$t('delete_button')"
+                        @click="onDelete"
+                    >
                         <trash-icon />
                     </button>
                 </div>

resources/ts/views/ListView.vue

@@ -9,7 +9,7 @@ import {
     CircleCheckBigIcon,
     CheckCheckIcon,
     SearchIcon,
-    Share2Icon
+    Share2Icon,
 } from "@lucide/vue";
 const TaskItem = defineAsyncComponent(
     () => import("@/components/TaskItem.vue"),
@@ -131,9 +131,9 @@ function onChangeSortReverse() {
 
 function onShare() {
     shareLink(
-        `Tout Doux - ${list.value ?? ''}`,
-        i18n.t('share_text'),
-        `${document.location.href.split('?')[0] ?? ''}?lang=${i18n.locale.value}`
+        `Tout Doux - ${list.value ?? ""}`,
+        i18n.t("share_text"),
+        `${document.location.href.split("?")[0] ?? ""}?lang=${i18n.locale.value}`,
     )
         .then((viaShare) => {
             if (!viaShare) {
@@ -141,13 +141,13 @@ function onShare() {
             }
         })
         .catch(() => {
-            alertError(i18n.t("alerts.share_error"))
+            alertError(i18n.t("alerts.share_error"));
         });
 }
 
 function updateTitle() {
     if (list.value !== null) {
-        document.title = `Tout Doux - ${list.value} (${completedCount.value.toFixed(0)}/${taskCount.value.toFixed(0)})`
+        document.title = `Tout Doux - ${list.value} (${completedCount.value.toFixed(0)}/${taskCount.value.toFixed(0)})`;
     }
 }
 
@@ -238,6 +238,7 @@ onBeforeRouteUpdate((to) => {
         <button
             class="btn btn-square"
             :disabled="loading || taskInput.trim().length === 0"
+            :title="$t('add_button')"
             @click="onNewTask"
         >
             <circle-plus-icon />
@@ -245,7 +246,7 @@ onBeforeRouteUpdate((to) => {
     </div>
     <div>
         <button class="btn btn-sm px-4" @click="onShare">
-            <share-2-icon class="inline" :size="16" /> {{ $t('share_button') }}
+            <share-2-icon class="inline" :size="16" /> {{ $t("share_button") }}
         </button>
     </div>
     <div class="collapse collapse-arrow font-light text-sm">