feat: page title

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>

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"
                 />

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>