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,31 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  subtitle?: string | null
+}>()
+
+const background = computed(() => {
+  let hue = 0
+  for (const char of props.title) hue = (hue * 31 + char.codePointAt(0)!) % 360
+  return `linear-gradient(155deg, hsl(${hue} 38% 40%), hsl(${(hue + 24) % 360} 42% 22%))`
+})
+</script>
+
+<template>
+  <div
+    class="relative size-full overflow-hidden text-white [container-type:inline-size]"
+    :style="{ background }"
+    role="img"
+    :aria-label="`Cover of ${title}`"
+  >
+    <span class="absolute inset-y-0 left-[7cqw] w-px bg-white/25" aria-hidden="true" />
+    <div class="flex size-full flex-col justify-between gap-1 p-[8cqw] pl-[12cqw]">
+      <span class="font-serif text-[clamp(0.5rem,11cqw,1.05rem)] leading-tight font-semibold text-balance wrap-anywhere line-clamp-6">
+        {{ title }}
+      </span>
+      <span v-if="subtitle" class="text-[clamp(0.4rem,7cqw,0.7rem)] leading-tight tracking-wide text-white/75 uppercase wrap-anywhere line-clamp-2">
+        {{ subtitle }}
+      </span>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { Entry } from '../types/entry'
+
+const props = defineProps<{ entry: Entry, search: string }>()
+
+const COLLAPSE_AFTER_CHARS = 320
+const COLLAPSE_AFTER_LINES = 5
+
+const { showCovers } = useAppConfig().diary
+const expanded = ref(false)
+
+const searching = computed(() => searchTerms(props.search).length > 0)
+const isLong = computed(() =>
+  props.entry.text.length > COLLAPSE_AFTER_CHARS || props.entry.text.split('\n').length > COLLAPSE_AFTER_LINES
+)
+const collapsed = computed(() => isLong.value && !expanded.value && !searching.value)
+const wordCount = computed(() => props.entry.text.split(/\s+/).filter(Boolean).length)
+const parts = computed(() => highlight(props.entry.text, props.search))
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <div
+      v-if="showCovers && entry.kind === 'review'"
+      class="aspect-2/3 w-16 shrink-0 self-start overflow-hidden rounded shadow-sm ring-1 ring-default"
+    >
+      <CoverTile :title="entry.review.title" :subtitle="entry.review.author" />
+    </div>
+
+    <article class="min-w-0 flex-1">
+      <div class="flex min-w-0 items-baseline gap-3">
+        <span class="shrink-0 text-xs text-muted tabular-nums">{{ formatDate(entry.date) }}</span>
+        <p v-if="entry.kind === 'review'" class="min-w-0 truncate">
+          <span class="font-medium text-highlighted">{{ entry.review.title }}</span>
+          <span v-if="entry.review.author" class="ml-3 text-sm text-muted">{{ entry.review.author }}</span>
+        </p>
+      </div>
+
+      <p
+        class="mt-1.5 text-sm leading-relaxed whitespace-pre-line text-default"
+        :class="{ 'line-clamp-5': collapsed }"
+      ><template v-for="(part, index) in parts" :key="index"><mark v-if="part.hit" class="rounded-sm bg-primary/30 px-0.5 text-highlighted">{{ part.text }}</mark><template v-else>{{ part.text }}</template></template></p>
+
+      <UButton
+        v-if="isLong && !searching"
+        size="xs"
+        color="neutral"
+        variant="link"
+        class="mt-1 px-0"
+        :label="expanded ? 'Show less' : `Read more (${wordCount} words)`"
+        @click="expanded = !expanded"
+      />
+    </article>
+  </div>
+</template>
@@ -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>
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { open, close } = useLog()
+
+const tabs = [
+  { label: 'Note', value: 'note', icon: NOTE_ICON, slot: 'note' as const },
+  { label: 'Review', value: 'review', icon: REVIEW_ICON, slot: 'review' as const }
+]
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Log">
+    <template #body>
+      <UTabs :items="tabs" default-value="note" class="w-full" :ui="{ content: 'pt-4' }">
+        <template #note>
+          <NoteForm @saved="close()" />
+        </template>
+        <template #review>
+          <ReviewForm @saved="close()" />
+        </template>
+      </UTabs>
+    </template>
+  </UModal>
+</template>
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const emit = defineEmits<{ saved: [] }>()
+
+const state = reactive({ date: todayIso(), text: '' })
+const { saving, save } = useSaveEntry({ url: '/api/diary/notes', dataKey: 'diary-notes', noun: 'note', onSaved: () => emit('saved') })
+
+function onSubmit(event: FormSubmitEvent<NewNoteInput>) {
+  return save(event.data)
+}
+</script>
+
+<template>
+  <UForm :schema="newNoteSchema" :state="state" class="space-y-5" @submit="onSubmit">
+    <UFormField label="Date" name="date" required>
+      <UInput v-model="state.date" type="date" />
+    </UFormField>
+
+    <UFormField label="Note" name="text" required>
+      <UTextarea v-model="state.text" :rows="8" autoresize :maxrows="18" class="w-full" autofocus />
+    </UFormField>
+
+    <UButton type="submit" label="Save note" :icon="NOTE_ICON" :loading="saving" />
+  </UForm>
+</template>
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const emit = defineEmits<{ unlocked: [] }>()
+
+const password = ref('')
+const error = ref<string>()
+const unlocking = ref(false)
+
+async function unlock() {
+  if (!password.value) return
+  unlocking.value = true
+  error.value = undefined
+  try {
+    await $fetch('/api/diary/login', { method: 'POST', body: { password: password.value } })
+    emit('unlocked')
+  } catch (e) {
+    error.value = errorMessage(e) ?? 'Couldn\'t unlock the diary'
+    password.value = ''
+  } finally {
+    unlocking.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal :open="true" :dismissible="false" :close="false" title="Diary" description="Enter your password to open the diary.">
+    <template #body>
+      <form class="space-y-4" @submit.prevent="unlock">
+        <UFormField label="Password" :error="error">
+          <UInput v-model="password" type="password" autocomplete="current-password" class="w-full" autofocus />
+        </UFormField>
+        <UButton type="submit" label="Unlock" icon="i-lucide-lock-open" :loading="unlocking" :disabled="!password" />
+      </form>
+    </template>
+  </UModal>
+</template>
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const emit = defineEmits<{ saved: [] }>()
+
+const { data: books, status } = useFetch<DiaryBook[]>('/api/diary/books', { key: 'diary-books', default: () => [], lazy: true })
+
+// Recently read books first, then the rest by title
+const bookItems = computed(() => books.value
+  .toSorted((a, b) => (b.readDate ?? '').localeCompare(a.readDate ?? '') || a.title.localeCompare(b.title, 'de'))
+  .map(book => ({
+    label: book.title,
+    description: book.authors.join('; '),
+    originalTitle: book.originalTitle,
+    value: book.id
+  })))
+
+const state = reactive({ bookId: undefined as number | undefined, date: todayIso(), text: '' })
+const { saving, save } = useSaveEntry({
+  url: '/api/diary/reviews',
+  dataKey: ['diary-reviews', 'diary-books'],
+  noun: 'review',
+  onSaved: () => emit('saved')
+})
+
+watch(() => state.bookId, (id) => {
+  state.date = books.value.find(book => book.id === id)?.readDate ?? todayIso()
+})
+
+function onSubmit(event: FormSubmitEvent<NewReviewInput>) {
+  return save(event.data)
+}
+</script>
+
+<template>
+  <UForm :schema="newReviewSchema" :state="state" class="space-y-5" @submit="onSubmit">
+    <UFormField label="Book" name="bookId" required>
+      <USelectMenu
+        v-model="state.bookId"
+        :items="bookItems"
+        value-key="value"
+        :filter-fields="['label', 'description', 'originalTitle']"
+        :loading="status === 'pending'"
+        :search-input="{ placeholder: 'Title or author' }"
+        placeholder="Pick a book"
+        icon="i-lucide-book-open"
+        virtualize
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField label="Read on" name="date" help="Saved as the book's read date" required>
+      <UInput v-model="state.date" type="date" />
+    </UFormField>
+
+    <UFormField label="Review" name="text" required>
+      <UTextarea v-model="state.text" :rows="8" autoresize :maxrows="18" class="w-full" />
+    </UFormField>
+
+    <UButton type="submit" label="Save review" :icon="REVIEW_ICON" :loading="saving" />
+  </UForm>
+</template>