feat: add wishlist

2026-09-30 19:15:57 +02:00
parent ab3bbb6338
commit 1f6061b998
57 changed files with 638 additions and 232 deletions
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const search = ref('')
+const { years, errors } = useDiary(search)
+const log = useLog()
+</script>
+
+<template>
+  <div class="mx-auto max-w-3xl">
+    <div class="mb-8 flex flex-wrap items-center justify-between gap-3">
+      <h1 class="text-2xl font-semibold text-highlighted">Diary</h1>
+      <div class="flex w-full items-center gap-2 sm:w-auto">
+        <UInput v-model="search" icon="i-lucide-search" placeholder="Search the diary" class="flex-1 sm:w-64 sm:flex-none" />
+        <UButton icon="i-lucide-plus" label="Log" @click="log.show()" />
+      </div>
+    </div>
+
+    <UAlert
+      v-for="{ what, error } in errors"
+      :key="what"
+      color="error"
+      variant="subtle"
+      icon="i-lucide-triangle-alert"
+      :title="`Couldn't load your ${what}`"
+      :description="errorMessage(error)"
+      class="mb-6"
+    />
+
+    <section v-for="group in years" :key="group.year" class="mb-10">
+      <header class="sticky top-0 z-10 mb-4 bg-default/90 py-2 backdrop-blur">
+        <h2 class="text-xl font-semibold text-highlighted tabular-nums">{{ group.year }}</h2>
+      </header>
+
+      <UTimeline :items="group.items" color="primary" size="md" :ui="{ wrapper: 'pb-6' }">
+        <template #wrapper="{ item }">
+          <DiaryEntry :key="item.value" :entry="item.entry" :search="search" />
+        </template>
+      </UTimeline>
+    </section>
+
+    <p v-if="!years.length && !errors.length" class="py-16 text-center text-muted">
+      {{ search ? 'Nothing in the diary matches your search.' : 'Nothing logged yet.' }}
+    </p>
+  </div>
+</template>