feat: recent lists

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/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

@@ -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(() => {