feat: recent lists

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>