chore: 1.1.0

package.json

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

pyproject.toml

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

resources/css/style.css

@@ -12,27 +12,36 @@ body {
 }
 
 .bg-hero {
-    --size: 5vh;
+    --size: 15vh;
     --angle: 45deg;
     background: repeating-linear-gradient(
         var(--angle),
-        var(--color-base-200) calc(0 * var(--size)),
-        var(--color-base-200) calc(1 * var(--size)),
-        var(--color-secondary) calc(1 * var(--size)),
-        var(--color-secondary) calc(2 * var(--size)),
-        var(--color-base-200) calc(2 * var(--size)),
-        var(--color-base-200) calc(3 * var(--size)),
-        var(--color-accent) calc(3 * var(--size)),
-        var(--color-accent) calc(4 * var(--size)),
-        var(--color-base-200) calc(4 * var(--size))
+        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-size: calc(4 * var(--size) / sin(var(--angle)))
-        calc(4 * var(--size) / sin(var(--angle)));
+    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(4 * var(--size) / sin(var(--angle))) 0;
+        background-position: calc(var(--size) / sin(var(--angle))) 0;
     }
 }

resources/lang/en.json

@@ -78,5 +78,11 @@
     "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"
 }

resources/lang/fr.json

@@ -78,5 +78,11 @@
     "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"
 }

resources/ts/components/CronInput.vue

@@ -2,7 +2,8 @@
 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);

resources/ts/components/RecentItem.vue

@@ -0,0 +1,15 @@
+<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"
+    >
+        <arrow-big-right-dash-icon :size="16" class="inline" />
+        <span class="underline">{{ list }}</span>
+    </router-link>
+</template>

resources/ts/components/TaskItem.vue

@@ -1,5 +1,12 @@
 <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";
@@ -151,7 +158,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 +170,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/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/lists.ts

@@ -0,0 +1,20 @@
+import { getCookie, setCookie } from "@/lib/cookies";
+
+const COOKIE_NAME = "recent-lists";
+const MAX_RECENT_LISTS = 32;
+
+export function getRecentLists(): string[] {
+    const rawData = getCookie(COOKIE_NAME, "");
+    if (!rawData) {
+        return [];
+    }
+    return rawData.split(",");
+}
+
+export function saveRecentList(list: string): void {
+    const recentLists = [list]
+        .concat(getRecentLists())
+        .filter((v, i, a) => a.indexOf(v) === i)
+        .slice(0, MAX_RECENT_LISTS);
+    setCookie(COOKIE_NAME, recentLists.join(","));
+}

resources/ts/views/HomeView.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { ArrowBigRightDashIcon, DicesIcon } from "@lucide/vue";
+import { getRecentLists } from "@/lib/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 recentLists = ref<string[]>(getRecentLists());
 
 function onRandom() {
     listNameInput.value = generateSlug(4);
@@ -27,31 +32,39 @@ onBeforeRouteUpdate(updateTitle);
 </script>
 
 <template>
-    <div class="p-4">
-        <div
-            class="mb-4 italic text-xl font-extralight"
-        >{{ $t('home') }}<br/>{{ $t('call_to_action') }}</div>
-        <div class="flex gap-2 mb-4">
-            <input
-                v-model="listNameInput"
-                type="text"
-                :placeholder="$t('new_task_hint')"
-                class="input grow"
-                @input="onInput"
-            />
-            <button class="btn btn-square" @click="onRandom">
-                <dices-icon />
-            </button>
+    <div
+        class="p-4 italic text-xl font-extralight"
+    >{{ $t('home') }}<br/>{{ $t('call_to_action') }}</div>
+    <div class="flex gap-2 p-4">
+        <input
+            v-model="listNameInput"
+            type="text"
+            :placeholder="$t('new_task_hint')"
+            class="input grow"
+            @input="onInput"
+        />
+        <button class="btn btn-square" @click="onRandom">
+            <dices-icon />
+        </button>
+    </div>
+    <div class="w-full">
+        <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="collapse collapse-arrow font-light text-sm">
+        <input id="recent-dropdown" type="checkbox" />
+        <div class="collapse-title">
+            <history-icon class="inline" :size="16" />
+            {{ $t("recent") }}
         </div>
-        <div class="w-full">
-            <router-link
-                class="btn btn-lg px-4"
-                :class="listNameInput.trim().length === 0 ? 'btn-disabled' : ''"
-                :to="`/${listNameInput.trim()}`"
-            >
-                <arrow-big-right-dash-icon class="inline" />
-                {{ $t("home_button") }}
-            </router-link>
+        <div class="collapse-content">
+            <recent-item v-for="(list, i) in recentLists" :key="`recent-${i}`" :list="list" />
         </div>
     </div>
 </template>

resources/ts/views/ListView.vue

@@ -9,7 +9,7 @@ import {
     CircleCheckBigIcon,
     CheckCheckIcon,
     SearchIcon,
-    Share2Icon
+    Share2Icon,
 } from "@lucide/vue";
 const TaskItem = defineAsyncComponent(
     () => import("@/components/TaskItem.vue"),
@@ -21,6 +21,7 @@ import { useAlertStore } from "@/stores/alerts";
 import { useI18n } from "vue-i18n";
 import { onBeforeRouteUpdate, useRoute } from "vue-router";
 import { shareLink } from "@/lib/share";
+import { saveRecentList } from "@/lib/lists";
 
 const route = useRoute();
 
@@ -56,6 +57,9 @@ function fetchTasks() {
                 tasks.value = data;
                 reSortTasks();
                 loading.value = false;
+                if (data.length && list.value) {
+                    saveRecentList(list.value);
+                }
                 setTimeout(fetchTasks, 10000);
             })
             .catch(() => {
@@ -131,9 +135,9 @@ function onChangeSortReverse() {
 
 function onShare() {
     shareLink(
-        `Tout Doux - ${list.value ?? ''}`,
-        i18n.t('share_text'),
-        `${document.location.href.split('?')[0] ?? ''}?lang=${i18n.locale.value}`
+        `Tout Doux - ${list.value ?? ""}`,
+        i18n.t("share_text"),
+        `${document.location.href.split("?")[0] ?? ""}?lang=${i18n.locale.value}`,
     )
         .then((viaShare) => {
             if (!viaShare) {
@@ -141,13 +145,13 @@ function onShare() {
             }
         })
         .catch(() => {
-            alertError(i18n.t("alerts.share_error"))
+            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)})`;
     }
 }
 
@@ -238,17 +242,18 @@ onBeforeRouteUpdate((to) => {
         <button
             class="btn btn-square"
             :disabled="loading || taskInput.trim().length === 0"
+            :title="$t('add_button')"
             @click="onNewTask"
         >
             <circle-plus-icon />
         </button>
     </div>
-    <div>
+    <div v-if="!empty">
         <button class="btn btn-sm px-4" @click="onShare">
-            <share-2-icon class="inline" :size="16" /> {{ $t('share_button') }}
+            <share-2-icon class="inline" :size="16" /> {{ $t("share_button") }}
         </button>
     </div>
-    <div class="collapse collapse-arrow font-light text-sm">
+    <div v-if="!empty" 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" />

uv.lock

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