feat: vue router and quality of life icons

2026-07-14 12:32:41 +02:00
parent 531b976b87
commit 210f7c5cf4
13 changed files with 270 additions and 112 deletions
@@ -1,8 +1,6 @@
 <script setup lang="ts">
+import { ListTodoIcon } from "@lucide/vue";
 import { ref, onMounted, defineAsyncComponent } from "vue";
-const TaskList = defineAsyncComponent(
-    () => import("@/components/TaskList.vue"),
-);
 const PageFooter = defineAsyncComponent(
    () => import("@/components/PageFooter.vue"),
 );
@@ -32,9 +30,9 @@ onMounted(() => {
                    <h1
                        class="p-4 pb-2 text-4xl font-bold opacity-60 tracking-wide select-none"
                    >
-                        Tout Doux
+                        <list-todo-icon :stroke-width="3" :size="32" class="inline" /> Tout Doux
                    </h1>
-                    <task-list />
+                    <router-view />
                </div>
            </div>
        </div>
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Alert } from "@/types";
 import { computed, ref, onBeforeMount } from "vue";
-import { CircleX, CircleAlert, CircleCheck, Info } from "@lucide/vue";
+import { CircleXIcon, CircleAlertIcon, CircleCheckIcon, InfoIcon } from "@lucide/vue";

 const props = defineProps<{ alert: Alert }>();
 const dismissed = ref<boolean>(false);
@@ -32,13 +32,13 @@ onBeforeMount(() => {
        :class="`alert-${alert.type}`"
        @click="onDismiss"
    >
-        <CircleX v-if="alert.type === 'error'" />
+        <circle-x-icon v-if="alert.type === 'error'" class="inline" />
        <!-- alert-error -->
-        <CircleAlert v-if="alert.type === 'warning'" />
+        <circle-alert-icon v-if="alert.type === 'warning'" class="inline" />
        <!-- alert-warning -->
-        <CircleCheck v-if="alert.type === 'success'" />
+        <circle-check-icon v-if="alert.type === 'success'" class="inline" />
        <!-- alert-success -->
-        <Info v-if="alert.type === 'info'" />
+        <info-icon v-if="alert.type === 'info'" class="inline" />
        <!-- alert-info -->
        <span>{{ alert.message }}</span>
    </div>
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onBeforeMount, ref, watch, computed, defineAsyncComponent } from "vue";
 import type { Task } from "@/types";
-import { Copy, Trash, Save, X } from "@lucide/vue";
+import { CopyIcon, TrashIcon, SaveIcon, XIcon } from "@lucide/vue";
 import { updateTask } from "@/api/tasks";
 const CronInput = defineAsyncComponent(
    () => import("@/components/CronInput.vue"),
@@ -135,20 +135,20 @@ watch(task, () => {
            <div class="flex flex-col gap-2">
                <div class="flex justify-evenly">
                    <button class="btn btn-square me-1" @click="onClose">
-                        <X />
+                        <x-icon />
                    </button>
                    <button class="btn btn-square me-1" @click="onSave">
-                        <Save />
+                        <save-icon />
                    </button>
                    <button class="btn btn-square me-1" @click="onClone">
-                        <Copy />
+                        <copy-icon />
                    </button>
                    <button class="btn btn-square" @click="onDelete">
-                        <Trash />
+                        <trash-icon />
                    </button>
                </div>
                <input v-model="editName" type="text" class="input w-full" />
-                <CronInput v-model="editCron" :edit-mode="editMode" />
+                <cron-input v-model="editCron" :edit-mode="editMode" />
            </div>
        </template>
    </div>
@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 import { createI18n } from "vue-i18n";
 import App from "@/App.vue";
+import router from "@/router";
 import { getLang } from "@/lib/lang";
 import { createPinia } from "pinia";
 const en = await import("@lang/en.json");
@@ -17,4 +18,4 @@ const i18n = createI18n({

 const pinia = createPinia();

-createApp(App).use(i18n).use(pinia).mount("#app");
+createApp(App).use(router).use(i18n).use(pinia).mount("#app");
@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "@/views/HomeView.vue";
+import ListView from "@/views/ListView.vue";
+import NotFoundView from "@/views/NotFoundView.vue";
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        { path: "/", component: HomeView },
+        { path: "/:pathMatch([\\w-]+)", component: ListView },
+        { path: "/:pathMatch(.*)", component: NotFoundView },
+    ],
+});
+
+export default router;
@@ -0,0 +1,3 @@
+<template>
+    TODO
+</template>
@@ -2,7 +2,7 @@
 import { ref, onBeforeMount, computed, defineAsyncComponent } from "vue";
 import type { Task } from "@/types";
 import { getTasks, createTask, deleteTask } from "@/api/tasks";
-import { CirclePlus } from "@lucide/vue";
+import { CirclePlusIcon, ArrowDownUpIcon, Settings2Icon, CircleCheckBigIcon, CheckCheckIcon, SearchIcon } from "@lucide/vue";
 const TaskItem = defineAsyncComponent(
    () => import("@/components/TaskItem.vue"),
 );
@@ -123,14 +123,14 @@ onBeforeMount(fetchTasks);
                />
            </li>
        </template>
-        <li v-if="empty" class="list-row italic text-xl font-extralight">
-            {{ $t("empty_hint") }}
+        <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"
+            class="list-row italic text-xl font-extralight self-center"
        >
-            {{ $t("all_completed_hint") }}
+            <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">
@@ -138,7 +138,7 @@ onBeforeMount(fetchTasks);
                    v-model="taskInput"
                    type="text"
                    :placeholder="$t('new_task_hint')"
-                    class="input"
+                    class="input w-full"
                    @keyup.enter="onNewTask"
                />
            </div>
@@ -148,7 +148,7 @@ onBeforeMount(fetchTasks);
                    :disabled="taskInput.trim().length === 0"
                    @click="onNewTask"
                >
-                    <CirclePlus />
+                    <circle-plus-icon />
                </button>
            </div>
        </li>
@@ -158,7 +158,7 @@ onBeforeMount(fetchTasks);
        class="collapse collapse-arrow"
    >
        <input id="completed-dropdown" type="checkbox" />
-        <div class="collapse-title mb-0">{{ $t("completed") }}</div>
+        <div class="collapse-title mb-0"><circle-check-big-icon class="inline" :size="24" /> {{ $t("completed") }}</div>
        <div class="collapse-content p-0">
            <ul class="list">
                <template
@@ -180,11 +180,11 @@ onBeforeMount(fetchTasks);
    </div>
    <div class="collapse collapse-arrow font-light text-sm">
        <input id="options-dropdown" type="checkbox" />
-        <div class="collapse-title">{{ $t("options.title") }}</div>
-        <div class="collapse-content text-sm">
+        <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">
-                    Sort by
+                    <arrow-down-up-icon class="inline" /> {{ $t("options.sort_by") }}
                    <select
                        v-model="sortType"
                        class="select"
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { CircleQuestionMarkIcon } from "@lucide/vue";
+</script>
+
+<template>
+    <div class="italic text-xl font-extralight mb-2">
+        <circle-question-mark-icon class="inline" /> {{ $t('not_found') }}
+    </div>
+    <router-link to="/" class="btn mb-4">{{ $t('not_found_button') }}</router-link>
+</template>