From d6f90c710e5cff9b802bdd70d02f49268a8b56e1 Mon Sep 17 00:00:00 2001
From: klemek <klemek.dev@proton.me>
Date: Tue, 14 Jul 2026 14:33:01 +0200
Subject: [PATCH] feat: page title

---
 resources/ts/components/TaskItem.vue |  5 ++++-
 resources/ts/views/HomeView.vue      | 10 +++++++++-
 resources/ts/views/ListView.vue      |  8 ++++++++
 resources/ts/views/NotFoundView.vue  |  9 +++++++++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/resources/ts/components/TaskItem.vue b/resources/ts/components/TaskItem.vue
index ab87a24..f637167 100644
--- a/resources/ts/components/TaskItem.vue
+++ b/resources/ts/components/TaskItem.vue
@@ -11,7 +11,7 @@ import { relativeTime } from "@/lib/dates";
 import { useAlertStore } from "@/stores/alerts";
 import { useI18n } from "vue-i18n";
 
-const emit = defineEmits<(e: "clone" | "delete", task: Task) => void>();
+const emit = defineEmits<(e: "clone" | "delete" | "updated", task: Task) => void>();
 
 const task = defineModel<Task>({ required: true });
 defineProps<{ showLastChecked: boolean; showNextReset: boolean }>();
@@ -39,6 +39,7 @@ function onSave() {
     })
         .then((newTask) => {
             task.value = newTask;
+            emit("updated", newTask);
             alertSuccess(i18n.t("alerts.task_updated"));
         })
         .catch(() => {
@@ -57,6 +58,7 @@ function onCheck() {
         })
             .then((newTask) => {
                 task.value = newTask;
+                emit("updated", newTask);
             })
             .catch(() => {
                 alertError(i18n.t("alerts.task_update_error"));
@@ -68,6 +70,7 @@ function onCheck() {
         })
             .then((newTask) => {
                 task.value = newTask;
+                emit("updated", newTask);
             })
             .catch(() => {
                 alertError(i18n.t("alerts.task_update_error"));
diff --git a/resources/ts/views/HomeView.vue b/resources/ts/views/HomeView.vue
index d9055f0..ab70009 100644
--- a/resources/ts/views/HomeView.vue
+++ b/resources/ts/views/HomeView.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ArrowBigRightDashIcon, DicesIcon } from "@lucide/vue";
 import { generateSlug } from "random-word-slugs";
-import { ref } from "vue";
+import { onBeforeMount, ref } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
 
 const listNameInput = ref<string>(generateSlug(4));
 
@@ -16,6 +17,13 @@ function onInput() {
         .replace(/[^a-z0-9-]/g, "")
         .toLowerCase();
 }
+
+function updateTitle() {
+    document.title = 'Tout Doux';
+}
+
+onBeforeMount(updateTitle)
+onBeforeRouteUpdate(updateTitle);
 </script>
 
 <template>
diff --git a/resources/ts/views/ListView.vue b/resources/ts/views/ListView.vue
index 4b49bf0..3ec66e2 100644
--- a/resources/ts/views/ListView.vue
+++ b/resources/ts/views/ListView.vue
@@ -66,6 +66,7 @@ function fetchTasks() {
 
 function reSortTasks() {
     tasks.value = sortTasks(tasks.value, sortType.value, sortReverse.value);
+    updateTitle();
 }
 
 function onNewTask() {
@@ -124,6 +125,12 @@ function onChangeSortReverse() {
     reSortTasks();
 }
 
+function updateTitle() {
+    if (list.value !== null) {
+        document.title = `Tout Doux - ${list.value} (${completedCount.value.toFixed(0)}/${taskCount.value.toFixed(0)})`
+    }
+}
+
 onBeforeMount(() => {
     list.value = route.params.list as string;
     fetchTasks();
@@ -147,6 +154,7 @@ onBeforeRouteUpdate((to) => {
                     v-model="tasks[i]"
                     :show-last-checked="showLastChecked"
                     :show-next-reset="showNextReset"
+                    @updated="updateTitle"
                     @clone="onCloneTask"
                     @delete="onDeleteTask"
                 />
diff --git a/resources/ts/views/NotFoundView.vue b/resources/ts/views/NotFoundView.vue
index c348417..3ee27f2 100644
--- a/resources/ts/views/NotFoundView.vue
+++ b/resources/ts/views/NotFoundView.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
 import { CircleQuestionMarkIcon } from "@lucide/vue";
+import { onBeforeMount } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
+
+function updateTitle() {
+    document.title = 'Tout Doux - Not Found';
+}
+
+onBeforeMount(updateTitle)
+onBeforeRouteUpdate(updateTitle);
 </script>
 
 <template>