fix: use task id as hash

README.md

@@ -4,6 +4,8 @@
 
 > A shareable task list with auto resetting items.
 
+![](./public/assets/preview.jpg)
+
 **[todo.klemek.fr](https://todo.klemek.fr)**
 
 ## Running your own

app/models/task.py

@@ -5,9 +5,6 @@ import tortoise.validators
 
 from app.models.base import AbstractModel
 
-# https://stackoverflow.com/a/57639657
-CRONTAB_REGEX = r"^(@(annually|yearly|monthly|weekly|daily|hourly|reboot))|(@every (\d+(ns|us|µs|ms|s|m|h))+)|((((\d+,)+\d+|(\d+(\/|-)\d+)|\d+|\*) ?){5,7})$"
-
 
 class Task(AbstractModel):
     list_name = tortoise.fields.CharField(max_length=128, db_index=True, null=False)
@@ -15,7 +12,6 @@ class Task(AbstractModel):
     reset_cron = tortoise.fields.CharField(
         max_length=64,
         null=True,
-        validators=[tortoise.validators.RegexValidator(CRONTAB_REGEX, 0)],
     )
     check_date = tortoise.fields.DatetimeField(null=True)
     previous_check_date = tortoise.fields.DatetimeField(null=True)

app/server.py

@@ -6,6 +6,7 @@ import flask_limiter
 import flask_limiter.util
 import gunicorn.app.base
 import tortoise
+from tortoise.functions import Count
 
 from app import PKG_NAME
 from app.lang import get_lang
@@ -56,6 +57,18 @@ class Server(gunicorn.app.base.BaseApplication):
                 lang=lambda key: get_lang(locale, key),
             )
 
+        @self.app.route("/api/meta", methods=["GET"])
+        async def metadata() -> dict:
+            return {
+                "tasks": await Task.all().count(),
+                "lists": (
+                    await Task.all()
+                    .annotate(count=Count("list_name", distinct=True))
+                    .first()
+                    .values("count")
+                )["count"],
+            }
+
         @self.app.route("/api/lists/<list_name>/tasks", methods=["GET"])
         async def get_tasks(list_name: str) -> list:
             return await Task.filter(list_name=list_name[:128]).values()

index.html

@@ -16,7 +16,7 @@
         <!-- card related -->
         <meta property="og:title" content="{{ title }}">
         <meta property="og:description" content="{{ lang('home') }}">
-        <meta property="og:image" content="{{ app_url }}/assets/favicon-96x96.jpg">
+        <meta property="og:image" content="{{ app_url }}/assets/preview.jpg">
         <meta property="og:url" content="{{ app_url }}/{{ path }}">
 
         <script

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tout-doux",
-    "version": "1.0.3",
+    "version": "1.4.0",
     "private": true,
     "type": "module",
     "engines": {

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "tout-doux"
-version = "1.0.3"
+version = "1.4.0"
 description = ""
 requires-python = ">=3.14"
 dependencies = [

resources/css/style.css

@@ -10,3 +10,38 @@ body {
     font-style: normal;
     font-variation-settings: "wdth" 100;
 }
+
+.bg-hero {
+    --size: 15vh;
+    --angle: 45deg;
+    background: repeating-linear-gradient(
+        var(--angle),
+        var(--color-base-200) 0%,
+        var(--color-base-200) 12.5%,
+        var(--color-secondary) 12.5%,
+        var(--color-secondary) 25%,
+        var(--color-base-200) 25%,
+        var(--color-base-200) 37.5%,
+        var(--color-accent) 37.5%,
+        var(--color-accent) 50%,
+        var(--color-base-200) 50%,
+        var(--color-base-200) 62.5%,
+        var(--color-secondary) 62.5%,
+        var(--color-secondary) 75%,
+        var(--color-base-200) 75%,
+        var(--color-base-200) 87.5%,
+        var(--color-accent) 87.5%,
+        var(--color-accent) 100%,
+        var(--color-base-200) 100%
+    );
+    background-repeat: repeat;
+    background-size: calc(var(--size) / sin(var(--angle)))
+        calc(var(--size) / sin(var(--angle)));
+    animation: BackgroundAnimate 10s linear infinite reverse;
+}
+
+@keyframes BackgroundAnimate {
+    0% {
+        background-position: calc(var(--size) / sin(var(--angle))) 0;
+    }
+}

resources/lang/en.json

@@ -1,12 +1,13 @@
 {
     "cron": {
         "type": {
-            "one_time": "One time",
+            "manual": "Manual",
             "every_day": "Every day",
             "every_week": "Every week",
             "every_month": "Every month",
             "every_year": "Every year",
-            "specific": "Specific"
+            "custom": "Custom (cron syntax)",
+            "one_time": "One time (then delete)"
         },
         "week": [
             "Monday",
@@ -78,5 +79,12 @@
     "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",
+    "recent": "Recent lists",
+    "metadata": "{lists} lists / {tasks} tasks"
 }

resources/lang/fr.json

@@ -1,12 +1,13 @@
 {
     "cron": {
         "type": {
-            "one_time": "Une seule fois",
+            "manual": "Manuel",
             "every_day": "Tous les jours",
             "every_week": "Toutes les semaines",
             "every_month": "Tous les mois",
             "every_year": "Tous les ans",
-            "specific": "Spécifique"
+            "custom": "Personnalisé (syntaxe cron)",
+            "one_time": "Une seule fois (puis suppression)"
         },
         "week": [
             "Lundi",
@@ -78,5 +79,12 @@
     "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",
+    "recent": "Listes récentes",
+    "metadata": "{lists} listes / {tasks} tâches"
 }

resources/ts/App.vue

@@ -22,16 +22,22 @@ onMounted(() => {
         :style="{ display: visible ? 'flex' : 'none' }"
         class="min-h-screen flex-col w-screen"
     >
-        <div class="hero bg-base-200 grow">
+        <div class="hero bg-hero grow">
             <div class="hero-content text-center p-0">
                 <div
-                    class="max-w-md min-w-96 bg-base-100 rounded-box shadow-md"
+                    class="max-w-md min-w-96 bg-base-100 rounded-box shadow-md p-4"
                 >
-                    <h1
+                    <router-link
-                        class="p-4 pb-2 text-4xl font-bold opacity-60 tracking-wide select-none"
+                        to="/"
+                        class="text-4xl font-bold opacity-60 tracking-wide select-none"
                     >
-                        <list-todo-icon :stroke-width="3" :size="32" class="inline" /> Tout Doux
+                        <list-todo-icon
-                    </h1>
+                            :stroke-width="3"
+                            :size="32"
+                            class="inline"
+                        />
+                        Tout Doux
+                    </router-link>
                     <router-view />
                 </div>
             </div>

resources/ts/api/meta.ts

@@ -0,0 +1,6 @@
+import type { Metadata } from "@/types";
+
+export async function getMetadata(): Promise<Metadata> {
+    const response = await fetch(`/api/meta`);
+    return await response.json();
+}

resources/ts/components/CronInput.vue

@@ -2,14 +2,15 @@
 import { ref, onBeforeMount, watch } from "vue";
 import { getCron, parseCron, validCron } from "@/lib/cron";
 import { CronType } from "@/enums";
-import { DEFAULT_CRON } from "@/constants";
+
+const DEFAULT_CRON = "0 0 * * *";
 
 const cron = defineModel<string | null>({ required: true });
 const rawCron = ref<string>(DEFAULT_CRON);
 const valid = ref<boolean>(true);
 const props = defineProps<{ editMode: boolean }>();
 
-const cronType = ref<CronType>(CronType.ONE_TIME);
+const cronType = ref<CronType>(CronType.MANUAL);
 const cronValue = ref<number>(0);
 
 function onCronChanged() {
@@ -33,7 +34,7 @@ function onChangeCronType() {
         case CronType.EVERY_YEAR:
             cronValue.value = 1;
             break;
-        case CronType.SPECIFIC:
+        case CronType.CUSTOM:
             cron.value ??= DEFAULT_CRON;
             break;
     }
@@ -63,8 +64,8 @@ watch(cron, () => {
 <template>
     <div class="flex gap-2">
         <select v-model="cronType" class="select flex-1" @change="onChangeCronType">
-            <option :value="CronType.ONE_TIME">
+            <option :value="CronType.MANUAL">
-                {{ $t("cron.type.one_time") }}
+                {{ $t("cron.type.manual") }}
             </option>
             <option :value="CronType.EVERY_DAY">
                 {{ $t("cron.type.every_day") }}
@@ -78,8 +79,11 @@ watch(cron, () => {
             <option :value="CronType.EVERY_YEAR">
                 {{ $t("cron.type.every_year") }}
             </option>
-            <option :value="CronType.SPECIFIC">
+            <option :value="CronType.CUSTOM">
-                {{ $t("cron.type.specific") }}
+                {{ $t("cron.type.custom") }}
+            </option>
+            <option :value="CronType.ONE_TIME">
+                {{ $t("cron.type.one_time") }}
             </option>
         </select>
         <select
@@ -148,7 +152,7 @@ watch(cron, () => {
             </option>
         </select>
         <input
-            v-if="cronType === CronType.SPECIFIC"
+            v-if="cronType === CronType.CUSTOM"
             v-model="rawCron"
             type="text"
             class="input font-mono flex-1"

resources/ts/components/PageFooter.vue

@@ -1,9 +1,23 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import { getMetadata } from "@/api/meta";
+import type { Metadata } from "@/types";
+import { defineAsyncComponent, onBeforeMount, ref } from "vue";
+
+const metadata = ref<Metadata|null>(null);
 
 const LangInput = defineAsyncComponent(
     () => import("@/components/LangInput.vue"),
 );
+
+function fetchMetadata() {
+    void getMetadata()
+        .then((data) => {
+            metadata.value = data;
+            setTimeout(fetchMetadata, 600000);
+        });
+}
+
+onBeforeMount(fetchMetadata);
 </script>
 
 <template>
@@ -19,6 +33,7 @@ const LangInput = defineAsyncComponent(
                 >
                     klemek
                 </a>
+                <span v-if="metadata">- {{ $t("metadata", metadata) }}</span>
             </p>
         </aside>
     </footer>

resources/ts/components/RecentItem.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ArrowBigRightDashIcon } from "@lucide/vue";
+
+defineProps<{ list: string }>();
+</script>
+
+<template>
+    <router-link
+        :to="`/${list}`"
+        class="w-full flex gap-2 mb-2 hover:underline"
+    >
+        <arrow-big-right-dash-icon :size="16" class="inline" /> {{ list }}
+    </router-link>
+</template>

resources/ts/components/TaskItem.vue

@@ -1,15 +1,23 @@
 <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";
 const CronInput = defineAsyncComponent(
     () => import("@/components/CronInput.vue"),
 );
-import { taskCompleted, taskNextReset } from "@/lib/tasks";
+import { isTemporary, taskCompleted, taskNextReset } from "@/lib/tasks";
 import { relativeTime } from "@/lib/dates";
 import { useAlertStore } from "@/stores/alerts";
 import { useI18n } from "vue-i18n";
+import { isOneTime } from "@/lib/cron";
 
 const emit =
     defineEmits<(e: "clone" | "delete" | "updated", task: Task) => void>();
@@ -31,9 +39,11 @@ const i18n = useI18n();
 const { alertSuccess, alertError } = useAlertStore();
 
 async function onOpen() {
-    editMode.value = true;
+    if (!isTemporary(task.value)) {
-    await nextTick();
+        editMode.value = true;
-    editNameInput.value?.focus();
+        await nextTick();
+        editNameInput.value?.focus();
+    }
 }
 
 function onClose() {
@@ -44,10 +54,14 @@ function onClose() {
 
 function onSave() {
     if (editName.value.trim()) {
-        updateTask(task.value.id, {
+        const data = {
             name: editName.value.trim(),
             reset_cron: editCron.value,
-        })
+        };
+        task.value.name = editName.value.trim();
+        task.value.reset_cron = editCron.value;
+        editMode.value = false;
+        updateTask(task.value.id, data)
             .then((newTask) => {
                 task.value = newTask;
                 emit("updated", newTask);
@@ -56,46 +70,59 @@ function onSave() {
             .catch(() => {
                 alertError(i18n.t("alerts.task_update_error"));
             });
-        task.value.name = editName.value;
-        task.value.reset_cron = editCron.value;
-        editMode.value = false;
     }
 }
 
 function onCheck() {
-    if (!checked.value) {
+    if (!isTemporary(task.value)) {
-        updateTask(task.value.id, {
+        if (!checked.value) {
-            check_date: new Date().toISOString(),
+            if (isOneTime(task.value.reset_cron)) {
-            previous_check_date: task.value.check_date?.toISOString(),
+                emit("delete", task.value);
-        })
+            } else {
-            .then((newTask) => {
+                const data = {
-                task.value = newTask;
+                    check_date: new Date().toISOString(),
-                emit("updated", newTask);
+                    previous_check_date: task.value.check_date?.toISOString(),
-            })
+                };
-            .catch(() => {
+                task.value.previous_check_date = task.value.check_date;
-                alertError(i18n.t("alerts.task_update_error"));
+                task.value.check_date = new Date();
-            });
+                updateTask(task.value.id, data)
-    } else {
+                    .then((data) => {
-        updateTask(task.value.id, {
+                        task.value = data;
-            check_date: null,
+                        emit("updated", data);
-            previous_check_date: task.value.check_date?.toISOString(),
+                    })
-        })
+                    .catch(() => {
-            .then((newTask) => {
+                        alertError(i18n.t("alerts.task_update_error"));
-                task.value = newTask;
+                    });
-                emit("updated", newTask);
+            }
-            })
+        } else {
-            .catch(() => {
+            const data = {
-                alertError(i18n.t("alerts.task_update_error"));
+                check_date: null,
-            });
+                previous_check_date: task.value.check_date?.toISOString(),
+            };
+            task.value.previous_check_date = task.value.check_date;
+            task.value.check_date = null;
+            updateTask(task.value.id, data)
+                .then((data) => {
+                    task.value = data;
+                    emit("updated", data);
+                })
+                .catch(() => {
+                    alertError(i18n.t("alerts.task_update_error"));
+                });
+        }
     }
 }
 
 function onClone() {
-    emit("clone", task.value);
+    if (!isTemporary(task.value)) {
+        emit("clone", task.value);
+    }
 }
 
 function onDelete() {
-    emit("delete", task.value);
+    if (!isTemporary(task.value)) {
+        emit("delete", task.value);
+    }
 }
 
 onBeforeMount(() => {
@@ -105,6 +132,7 @@ onBeforeMount(() => {
         refreshKey.value++;
     }, 60000);
 });
+
 watch(task, () => {
     if (!editMode.value && task.value.name !== editName.value) {
         editName.value = task.value.name;
@@ -124,7 +152,7 @@ watch(task, () => {
                     type="checkbox"
                     class="checkbox"
                     :checked="checked"
-                    @click.prevent="onCheck"
+                    @click="onCheck"
                 />
             </div>
             <div
@@ -151,7 +179,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 +191,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/constants.ts

@@ -1 +0,0 @@
-export const DEFAULT_CRON = "0 0 * * *";

resources/ts/enums.ts

@@ -1,10 +1,11 @@
 export enum CronType {
-    ONE_TIME,
+    MANUAL,
     EVERY_DAY,
     EVERY_WEEK,
     EVERY_MONTH,
     EVERY_YEAR,
-    SPECIFIC,
+    CUSTOM,
+    ONE_TIME,
 }
 
 export enum SortType {

resources/ts/lib/cron.ts

@@ -1,12 +1,19 @@
 import { CronType } from "@/enums";
 import { CronExpressionParser } from "cron-parser";
 
+const ONE_TIME_VALUE = "@one-time";
+
 export function parseCron(cron: string | null): {
     type: CronType;
     value: number;
 } {
     let value: RegExpMatchArray | null;
     if (cron === null) {
+        return {
+            type: CronType.MANUAL,
+            value: 0,
+        };
+    } else if (cron === ONE_TIME_VALUE) {
         return {
             type: CronType.ONE_TIME,
             value: 0,
@@ -33,7 +40,7 @@ export function parseCron(cron: string | null): {
         };
     } else {
         return {
-            type: CronType.SPECIFIC,
+            type: CronType.CUSTOM,
             value: 0,
         };
     }
@@ -45,6 +52,8 @@ export function getCron(
     fallback: string,
 ): string | null {
     switch (type) {
+        case CronType.ONE_TIME:
+            return ONE_TIME_VALUE;
         case CronType.EVERY_DAY:
             return `0 ${value.toFixed(0)} * * *`;
         case CronType.EVERY_WEEK:
@@ -53,7 +62,7 @@ export function getCron(
             return `0 0 ${value.toFixed(0)} * *`;
         case CronType.EVERY_YEAR:
             return `0 0 1 ${value.toFixed(0)} *`;
-        case CronType.SPECIFIC:
+        case CronType.CUSTOM:
             if (validCron(fallback)) {
                 return fallback;
             }
@@ -62,6 +71,10 @@ export function getCron(
     return null;
 }
 
+export function isOneTime(cron: string | null): boolean {
+    return cron === ONE_TIME_VALUE;
+}
+
 export function validCron(cron: string): boolean {
     try {
         CronExpressionParser.parse(cron);

resources/ts/lib/lang.ts

@@ -1,4 +1,4 @@
-import { getCookie, setCookie } from "./cookies";
+import { getCookie, setCookie } from "@/lib/cookies";
 
 export function getLang() {
     const params = new URLSearchParams(document.location.search);

resources/ts/lib/tasks.ts

@@ -1,6 +1,9 @@
 import { SortType } from "@/enums";
-import type { RawTask, Task } from "@/types";
+import type { RawTask, Task, TaskCreateData } from "@/types";
 import { CronExpressionParser } from "cron-parser";
+import { isOneTime } from "@/lib/cron";
+
+const TEMPORARY_ID = "tmp";
 
 export function parseTask(task: RawTask): Task {
     return {
@@ -16,13 +19,34 @@ export function parseTask(task: RawTask): Task {
     };
 }
 
+export function newTemporaryTask(data: TaskCreateData): Task {
+    return {
+        id: TEMPORARY_ID,
+        name: data.name,
+        reset_cron: data.reset_cron,
+        created_at: new Date(),
+        updated_at: new Date(),
+        check_date: null,
+        previous_check_date: null,
+    };
+}
+
+export function isTemporary(task: Task): boolean {
+    return task.id === TEMPORARY_ID;
+}
+
 export function taskNextReset(task: Task): Date | null {
-    if (task.check_date === null || task.reset_cron === null) {
+    if (
+        task.check_date === null ||
+        task.reset_cron === null ||
+        isOneTime(task.reset_cron)
+    ) {
         return null;
     }
     try {
         const interval = CronExpressionParser.parse(task.reset_cron, {
             currentDate: task.check_date,
+            hashSeed: task.id,
         });
         return interval.next().toDate();
     } catch {

resources/ts/stores/lists.ts

@@ -0,0 +1,25 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import { getCookie, setCookie } from "@/lib/cookies";
+
+const COOKIE_NAME = "recent-lists";
+const MAX_RECENT_LISTS = 32;
+
+export const useListStore = defineStore("lists", () => {
+    const lists = ref<string[]>([]);
+
+    const rawData = getCookie(COOKIE_NAME, "");
+    if (rawData) {
+        lists.value = rawData.split(",");
+    }
+
+    function addList(list: string) {
+        lists.value = [list]
+            .concat(lists.value)
+            .filter((v, i, a) => a.indexOf(v) === i)
+            .slice(0, MAX_RECENT_LISTS);
+        setCookie(COOKIE_NAME, lists.value.join(","));
+    }
+
+    return { lists, addList };
+});

resources/ts/types.ts

@@ -46,3 +46,8 @@ export interface Alert {
     created: Date;
     seconds: number;
 }
+
+export interface Metadata {
+    tasks: number;
+    lists: number;
+}

resources/ts/views/HomeView.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
-import { ArrowBigRightDashIcon, DicesIcon } from "@lucide/vue";
+import { useListStore } from "@/stores/lists";
+import { ArrowBigRightDashIcon, DicesIcon, HistoryIcon } from "@lucide/vue";
 import { generateSlug } from "random-word-slugs";
-import { onBeforeMount, ref } from "vue";
+import { defineAsyncComponent, onBeforeMount, ref } from "vue";
 import { onBeforeRouteUpdate } from "vue-router";
+const RecentItem = defineAsyncComponent(
+    () => import("@/components/RecentItem.vue"),
+);
 
 const listNameInput = ref<string>(generateSlug(4));
 
+const { lists: recentLists } = useListStore();
+
 function onRandom() {
     listNameInput.value = generateSlug(4);
 }
@@ -19,39 +25,54 @@ function onInput() {
 }
 
 function updateTitle() {
-    document.title = 'Tout Doux';
+    document.title = "Tout Doux";
 }
 
-onBeforeMount(updateTitle)
+onBeforeMount(updateTitle);
 onBeforeRouteUpdate(updateTitle);
 </script>
 
 <template>
-    <div class="p-4">
+    <div class="italic mt-4 text-xl font-extralight">
-        <div
+        {{ $t("home") }}<br />{{ $t("call_to_action") }}
-            class="mb-4 italic text-xl font-extralight"
+    </div>
-        >{{ $t('home') }}<br/>{{ $t('call_to_action') }}</div>
+    <div class="flex gap-2 mt-4">
-        <div class="flex gap-2 mb-4">
+        <input
-            <input
+            v-model="listNameInput"
-                v-model="listNameInput"
+            type="text"
-                type="text"
+            :placeholder="$t('new_task_hint')"
-                :placeholder="$t('new_task_hint')"
+            class="input grow"
-                class="input grow"
+            @input="onInput"
-                @input="onInput"
+        />
-            />
+        <button class="btn btn-square" @click="onRandom">
-            <button class="btn btn-square" @click="onRandom">
+            <dices-icon />
-                <dices-icon />
+        </button>
-            </button>
+    </div>
+    <div class="mt-4">
+        <router-link
+            class="btn btn-lg"
+            :class="listNameInput.trim().length === 0 ? 'btn-disabled' : ''"
+            :to="`/${listNameInput.trim()}`"
+        >
+            <arrow-big-right-dash-icon class="inline" />
+            {{ $t("home_button") }}
+        </router-link>
+    </div>
+    <div
+        v-if="recentLists.length"
+        class="mt-4 -mb-4 lh collapse collapse-arrow font-light text-sm"
+    >
+        <input id="recent-dropdown p-0" type="checkbox" />
+        <div class="collapse-title p-0 content-center">
+            <history-icon class="inline" :size="16" />
+            {{ $t("recent") }}
         </div>
-        <div class="w-full">
+        <div class="collapse-content">
-            <router-link
+            <recent-item
-                class="btn btn-lg px-4"
+                v-for="(list, i) in recentLists"
-                :class="listNameInput.trim().length === 0 ? 'btn-disabled' : ''"
+                :key="`recent-${i}`"
-                :to="`/${listNameInput.trim()}`"
+                :list="list"
-            >
+            />
-                <arrow-big-right-dash-icon class="inline" />
-                {{ $t("home_button") }}
-            </router-link>
         </div>
     </div>
 </template>

resources/ts/views/ListView.vue

@@ -9,24 +9,27 @@ import {
     CircleCheckBigIcon,
     CheckCheckIcon,
     SearchIcon,
-    Share2Icon
+    Share2Icon,
 } from "@lucide/vue";
 const TaskItem = defineAsyncComponent(
     () => import("@/components/TaskItem.vue"),
 );
-import { taskCompleted, sortTasks } from "@/lib/tasks";
+import { taskCompleted, sortTasks, newTemporaryTask } from "@/lib/tasks";
 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 { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute } from "vue-router";
 import { shareLink } from "@/lib/share";
+import { useListStore } from "@/stores/lists";
 
 const route = useRoute();
 
 const list = ref<string | null>(null);
+const loading = ref<boolean>(true);
 const taskInput = ref<string>("");
 const tasks = ref<Task[]>([]);
+const refreshTimeout = ref<number>(0);
 
 const sortType = enumCookieRef<SortType>("sSortType", SortType.CREATED_AT);
 const sortReverse = booleanCookieRef("sortReverse", false);
@@ -47,14 +50,21 @@ const allCompleted = computed<boolean>(
 const i18n = useI18n();
 
 const { alertSuccess, alertError, alertWarning } = useAlertStore();
+const { addList } = useListStore();
 
-function fetchTasks() {
+function fetchTasks(requestedList: string) {
-    if (list.value) {
+    const initialList = list.value;
+    if (list.value === requestedList) {
         getTasks(list.value)
             .then((data: Task[]) => {
-                tasks.value = data;
+                if (list.value === initialList) {
-                reSortTasks();
+                    tasks.value = data;
-                setTimeout(fetchTasks, 10000);
+                    reSortTasks(true);
+                    loading.value = false;
+                    refreshTimeout.value = setTimeout(() => {
+                        fetchTasks(list.value ?? "");
+                    }, 10000);
+                }
             })
             .catch(() => {
                 if (tasks.value.length !== 0) {
@@ -66,20 +76,28 @@ function fetchTasks() {
     }
 }
 
-function reSortTasks() {
+function reSortTasks(update = false) {
     tasks.value = sortTasks(tasks.value, sortType.value, sortReverse.value);
-    updateTitle();
+    if (update) {
+        updateTitle();
+        if (tasks.value.length && list.value) {
+            addList(list.value);
+        }
+    }
 }
 
 function onNewTask() {
-    if (taskInput.value.trim() && list.value) {
+    if (taskInput.value.trim() && list.value && !loading.value) {
-        createTask(list.value, {
+        const data = {
             name: taskInput.value.trim(),
             reset_cron: null,
-        })
+        };
+        const task = newTemporaryTask(data);
+        tasks.value.push(task);
+        reSortTasks(true);
+        createTask(list.value, data)
             .then((data: Task) => {
-                tasks.value.push(data);
+                task.id = data.id;
-                reSortTasks();
                 alertSuccess(i18n.t("alerts.task_created"));
             })
             .catch(() => {
@@ -91,14 +109,23 @@ function onNewTask() {
     }
 }
 
+function onUpdateTask() {
+    reSortTasks(true);
+}
+
 function onCloneTask(task: Task) {
     if (list.value) {
-        createTask(list.value, {
+        const data = {
             name: task.name,
             reset_cron: task.reset_cron,
-        })
+        };
+        const newTask = newTemporaryTask(data);
+        tasks.value.push(newTask);
+        reSortTasks(true);
+        createTask(list.value, data)
             .then((data: Task) => {
-                tasks.value.push(data);
+                task.id = data.id;
+                reSortTasks(true);
                 alertSuccess(i18n.t("alerts.task_cloned"));
             })
             .catch(() => {
@@ -108,6 +135,8 @@ function onCloneTask(task: Task) {
 }
 
 function onDeleteTask(task: Task) {
+    tasks.value.splice(tasks.value.indexOf(task), 1);
+    reSortTasks(true);
     deleteTask(task.id)
         .then(() => {
             alertSuccess(i18n.t("alerts.task_deleted"));
@@ -115,8 +144,6 @@ function onDeleteTask(task: Task) {
         .catch(() => {
             alertError(i18n.t("alerts.task_delete_error"));
         });
-
-    tasks.value.splice(tasks.value.indexOf(task), 1);
 }
 
 function onChangeSortType() {
@@ -128,105 +155,97 @@ function onChangeSortReverse() {
 }
 
 function onShare() {
-    shareLink(
+    if (!empty.value) {
-        `Tout Doux - ${list.value ?? ''}`,
+        shareLink(
-        i18n.t('share_text'),
+            `Tout Doux - ${list.value ?? ""}`,
-        `${document.location.href.split('?')[0] ?? ''}?lang=${i18n.locale.value}`
+            i18n.t("share_text"),
-    )
+            `${document.location.href.split("?")[0] ?? ""}?lang=${i18n.locale.value}`,
-        .then((viaShare) => {
+        )
-            if (!viaShare) {
+            .then((viaShare) => {
-                alertSuccess(i18n.t("alerts.share_clipboard"));
+                if (!viaShare) {
-            }
+                    alertSuccess(i18n.t("alerts.share_clipboard"));
-        })
+                }
-        .catch(() => {
+            })
-            alertError(i18n.t("alerts.share_error"))
+            .catch(() => {
-        });
+                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)})`;
     }
 }
 
 onBeforeMount(() => {
     list.value = (route.params.list as string).slice(0, 128);
-    fetchTasks();
+    fetchTasks(list.value);
 });
 
 onBeforeRouteUpdate((to) => {
     list.value = (to.params.list as string).slice(0, 128);
-    fetchTasks();
+    fetchTasks(list.value);
+});
+
+onBeforeRouteLeave(() => {
+    clearTimeout(refreshTimeout.value);
 });
 </script>
 
 <template>
-    <div class="list-row italic text-sm font-extralight self-center">
+    <div
+        class="list-row italic text-sm font-extralight self-center"
+        :class="!empty ? 'cursor-pointer hover:underline' : ''"
+        :title="!empty ? $t('share_button') : ''"
+        @click="onShare"
+    >
         {{ list }}
-        <span v-if="taskCount">({{ completedCount }} / {{ taskCount }})</span>
+        <span v-if="!empty"
+            >({{ completedCount }} / {{ taskCount }})&nbsp;<share-2-icon
+                class="inline"
+                :size="16"
+                :stroke-width="1"
+        /></span>
     </div>
-    <ul class="list">
+    <div
+        v-if="!loading && empty"
+        class="mt-4 mb-4 italic text-xl font-extralight"
+    >
+        <search-icon class="inline" />
+        <span v-html="$t('empty_hint')"></span>
+    </div>
+    <div
+        v-else-if="!loading && allCompleted && separateCompleted"
+        class="mt-4 mb-4 italic text-xl font-extralight"
+    >
+        <check-check-icon class="inline" />
+        <span v-html="$t('all_completed_hint')"></span>
+    </div>
+    <ul v-else class="list">
         <template v-for="(task, i) in tasks" :key="task.id">
             <li v-if="tasks[i] && (!separateCompleted || !taskCompleted(task))">
                 <task-item
                     v-model="tasks[i]"
                     :show-last-checked="showLastChecked"
                     :show-next-reset="showNextReset"
-                    @updated="updateTitle"
+                    @updated="onUpdateTask"
                     @clone="onCloneTask"
                     @delete="onDeleteTask"
                 />
             </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>
-        <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>
-        </li>
-        <li class="list-row">
-            <div class="list-col-grow">
-                <input
-                    v-model="taskInput"
-                    type="text"
-                    :placeholder="$t('new_task_hint')"
-                    class="input w-full"
-                    @keyup.enter="onNewTask"
-                />
-            </div>
-            <div>
-                <button
-                    class="btn btn-square"
-                    :disabled="taskInput.trim().length === 0"
-                    @click="onNewTask"
-                >
-                    <circle-plus-icon />
-                </button>
-            </div>
-        </li>
     </ul>
     <div
         v-if="separateCompleted && hasCompleted"
-        class="collapse collapse-arrow"
+        class="collapse collapse-arrow mb-4"
     >
-        <input id="completed-dropdown" type="checkbox" />
+        <input id="completed-dropdown p-0" type="checkbox" />
-        <div class="collapse-title mb-0">
+        <div class="collapse-title p-0 content-center">
             <circle-check-big-icon class="inline" :size="24" />
             {{ $t("completed") }} ({{ completedCount }})
         </div>
-        <div class="collapse-content p-0">
+        <div class="collapse-content p-0 -mb-4">
             <ul class="list">
                 <template
                     v-for="(task, i) in tasks"
@@ -245,14 +264,29 @@ onBeforeRouteUpdate((to) => {
             </ul>
         </div>
     </div>
-    <div>
+    <div class="flex gap-2">
-        <button class="btn btn-sm px-4" @click="onShare">
+        <input
-            <share-2-icon class="inline" :size="16" /> {{ $t('share_button') }}
+            v-model="taskInput"
+            type="text"
+            :placeholder="$t('new_task_hint')"
+            class="input grow"
+            @keyup.enter="onNewTask"
+        />
+        <button
+            class="btn btn-square"
+            :disabled="loading || taskInput.trim().length === 0"
+            :title="$t('add_button')"
+            @click="onNewTask"
+        >
+            <circle-plus-icon />
         </button>
     </div>
-    <div class="collapse collapse-arrow font-light text-sm">
+    <div
-        <input id="options-dropdown" type="checkbox" />
+        v-if="!empty"
-        <div class="collapse-title">
+        class="mt-4 -mb-4 collapse collapse-arrow font-light text-sm"
+    >
+        <input id="options-dropdown p-0" type="checkbox" />
+        <div class="collapse-title p-0 content-center">
             <settings-2-icon class="inline" :size="16" />
             {{ $t("options.title") }}
         </div>

resources/ts/views/NotFoundView.vue

@@ -4,18 +4,20 @@ import { onBeforeMount } from "vue";
 import { onBeforeRouteUpdate } from "vue-router";
 
 function updateTitle() {
-    document.title = 'Tout Doux - Not Found';
+    document.title = "Tout Doux - Not Found";
 }
 
-onBeforeMount(updateTitle)
+onBeforeMount(updateTitle);
 onBeforeRouteUpdate(updateTitle);
 </script>
 
 <template>
-    <div class="italic text-xl font-extralight mb-4">
+    <div class="italic text-xl font-extralight mt-4">
-        <circle-question-mark-icon class="inline" /> {{ $t('not_found') }}
+        <circle-question-mark-icon class="inline" /> {{ $t("not_found") }}
     </div>
-    <div class="w-full">
+    <div class="w-full mt-4">
-        <router-link to="/" class="btn mb-4 px-4">{{ $t('not_found_button') }}</router-link>
+        <router-link to="/" class="btn">{{
+            $t("not_found_button")
+        }}</router-link>
     </div>
 </template>

uv.lock

@@ -323,7 +323,7 @@ asyncpg = [
 
 [[package]]
 name = "tout-doux"
-version = "1.0.3"
+version = "1.4.0"
 source = { editable = "." }
 dependencies = [
     { name = "flask", extra = ["async"] },