feat: add list name and task count to list viw

resources/ts/views/ListView.vue

@@ -2,7 +2,14 @@
 import { ref, onBeforeMount, computed, defineAsyncComponent } from "vue";
 import type { Task } from "@/types";
 import { getTasks, createTask, deleteTask } from "@/api/tasks";
-import { CirclePlusIcon, ArrowDownUpIcon, Settings2Icon, CircleCheckBigIcon, CheckCheckIcon, SearchIcon } from "@lucide/vue";
+import {
+    CirclePlusIcon,
+    ArrowDownUpIcon,
+    Settings2Icon,
+    CircleCheckBigIcon,
+    CheckCheckIcon,
+    SearchIcon,
+} from "@lucide/vue";
 const TaskItem = defineAsyncComponent(
     () => import("@/components/TaskItem.vue"),
 );
@@ -11,28 +18,29 @@ import { SortType } from "@/enums";
 import { booleanCookieRef, enumCookieRef } from "@/lib/cookies";
 import { useAlertStore } from "@/stores/alerts";
 import { useI18n } from "vue-i18n";
-import { onBeforeRouteUpdate, useRoute } from 'vue-router'
+import { onBeforeRouteUpdate, useRoute } from "vue-router";
 
 const route = useRoute();
 
-const list = ref<string|null>(null);
+const list = ref<string | null>(null);
 const taskInput = ref<string>("");
 const tasks = ref<Task[]>([]);
 
-const sortType = enumCookieRef<SortType>(
-    "sSortType",
-    SortType.CREATED_AT,
-);
+const sortType = enumCookieRef<SortType>("sSortType", SortType.CREATED_AT);
 const sortReverse = booleanCookieRef("sortReverse", false);
 const showLastChecked = booleanCookieRef("showLastChecked", false);
 const showNextReset = booleanCookieRef("showNextReset", false);
 const separateCompleted = booleanCookieRef("separateCompleted", true);
 
-const completedCount = computed<number>(() => tasks.value.filter(taskCompleted).length);
+const completedCount = computed<number>(
+    () => tasks.value.filter(taskCompleted).length,
+);
 const taskCount = computed<number>(() => tasks.value.length);
 const hasCompleted = computed<boolean>(() => completedCount.value > 0);
 const empty = computed<boolean>(() => taskCount.value === 0);
-const allCompleted = computed<boolean>(() => taskCount.value === completedCount.value);
+const allCompleted = computed<boolean>(
+    () => taskCount.value === completedCount.value,
+);
 
 const i18n = useI18n();
 
@@ -124,10 +132,14 @@ onBeforeMount(() => {
 onBeforeRouteUpdate((to) => {
     list.value = to.params.list as string;
     fetchTasks();
-})
+});
 </script>
 
 <template>
+    <div class="list-row italic text-sm font-extralight self-center">
+        {{ list }}
+        <span v-if="taskCount">({{ completedCount }} / {{ taskCount }})</span>
+    </div>
     <ul class="list">
         <template v-for="(task, i) in tasks" :key="task.id">
             <li v-if="tasks[i] && (!separateCompleted || !taskCompleted(task))">
@@ -140,14 +152,23 @@ onBeforeRouteUpdate((to) => {
                 />
             </li>
         </template>
-        <li v-if="empty" class="list-row italic text-xl font-extralight self-center">
-            <span><search-icon class="inline" /> <span v-html="$t('empty_hint')"></span></span>
+        <li
+            v-if="empty"
+            class="list-row italic text-xl font-extralight self-center"
+        >
+            <span
+                ><search-icon class="inline" />
+                <span v-html="$t('empty_hint')"></span
+            ></span>
         </li>
         <li
             v-else-if="allCompleted && separateCompleted"
             class="list-row italic text-xl font-extralight self-center"
         >
-            <span><check-check-icon class="inline" /> <span v-html="$t('all_completed_hint')"></span></span>
+            <span
+                ><check-check-icon class="inline" />
+                <span v-html="$t('all_completed_hint')"></span
+            ></span>
         </li>
         <li class="list-row">
             <div class="list-col-grow">
@@ -175,7 +196,10 @@ onBeforeRouteUpdate((to) => {
         class="collapse collapse-arrow"
     >
         <input id="completed-dropdown" type="checkbox" />
-        <div class="collapse-title mb-0"><circle-check-big-icon class="inline" :size="24" /> {{ $t("completed") }} ({{ completedCount }})</div>
+        <div class="collapse-title mb-0">
+            <circle-check-big-icon class="inline" :size="24" />
+            {{ $t("completed") }} ({{ completedCount }})
+        </div>
         <div class="collapse-content p-0">
             <ul class="list">
                 <template
@@ -197,11 +221,15 @@ onBeforeRouteUpdate((to) => {
     </div>
     <div class="collapse collapse-arrow font-light text-sm">
         <input id="options-dropdown" type="checkbox" />
-        <div class="collapse-title"><settings-2-icon class="inline" :size="16" /> {{ $t("options.title") }}</div>
+        <div class="collapse-title">
+            <settings-2-icon class="inline" :size="16" />
+            {{ $t("options.title") }}
+        </div>
         <div class="collapse-content">
             <fieldset class="fieldset flex flex-col gap-2">
                 <label class="label">
-                    <arrow-down-up-icon class="inline" /> {{ $t("options.sort_by") }}
+                    <arrow-down-up-icon class="inline" />
+                    {{ $t("options.sort_by") }}
                     <select
                         v-model="sortType"
                         class="select"