From ea9a50a2f7acd0c7b74bdc8661e133551a92009c Mon Sep 17 00:00:00 2001
From: Klemek <klemek.dev@proton.me>
Date: Wed, 15 Jul 2026 16:34:37 +0200
Subject: [PATCH] feat: recent lists

---
 resources/lang/en.json                 |  3 +-
 resources/lang/fr.json                 |  3 +-
 resources/ts/components/CronInput.vue  |  3 +-
 resources/ts/components/RecentItem.vue | 15 ++++++
 resources/ts/constants.ts              |  1 -
 resources/ts/lib/lang.ts               |  2 +-
 resources/ts/lib/lists.ts              | 20 ++++++++
 resources/ts/views/HomeView.vue        | 65 +++++++++++++++-----------
 resources/ts/views/ListView.vue        |  4 ++
 9 files changed, 85 insertions(+), 31 deletions(-)
 create mode 100644 resources/ts/components/RecentItem.vue
 delete mode 100644 resources/ts/constants.ts
 create mode 100644 resources/ts/lib/lists.ts

diff --git a/resources/lang/en.json b/resources/lang/en.json
index f4ca824..f4f7c25 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -83,5 +83,6 @@
     "cancel_button": "Cancel editing",
     "save_button": "Save task",
     "clone_button": "Clone task",
-    "delete_button": "Delete task"
+    "delete_button": "Delete task",
+    "recent": "Recent lists"
 }
diff --git a/resources/lang/fr.json b/resources/lang/fr.json
index 0e3f8da..05e4462 100644
--- a/resources/lang/fr.json
+++ b/resources/lang/fr.json
@@ -83,5 +83,6 @@
     "cancel_button": "Annuler la modification",
     "save_button": "Sauvegarder la tâche",
     "clone_button": "Cloner la tâche",
-    "delete_button": "Supprimer la tâche"
+    "delete_button": "Supprimer la tâche",
+    "recent": "Listes récentes"
 }
diff --git a/resources/ts/components/CronInput.vue b/resources/ts/components/CronInput.vue
index 8a4b2c5..f6d7138 100644
--- a/resources/ts/components/CronInput.vue
+++ b/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);
diff --git a/resources/ts/components/RecentItem.vue b/resources/ts/components/RecentItem.vue
new file mode 100644
index 0000000..c4ab976
--- /dev/null
+++ b/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>
diff --git a/resources/ts/constants.ts b/resources/ts/constants.ts
deleted file mode 100644
index 6d144bb..0000000
--- a/resources/ts/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const DEFAULT_CRON = "0 0 * * *";
diff --git a/resources/ts/lib/lang.ts b/resources/ts/lib/lang.ts
index 6caf71a..7088038 100644
--- a/resources/ts/lib/lang.ts
+++ b/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);
diff --git a/resources/ts/lib/lists.ts b/resources/ts/lib/lists.ts
new file mode 100644
index 0000000..f874f33
--- /dev/null
+++ b/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(","));
+}
diff --git a/resources/ts/views/HomeView.vue b/resources/ts/views/HomeView.vue
index bccefb8..118c8aa 100644
--- a/resources/ts/views/HomeView.vue
+++ b/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>
diff --git a/resources/ts/views/ListView.vue b/resources/ts/views/ListView.vue
index b3750c2..00330f0 100644
--- a/resources/ts/views/ListView.vue
+++ b/resources/ts/views/ListView.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(() => {