Files
bookorbit/client/src/features/annotations/components/AnnotationBookThumb.vue
T
neon af8f55976f feat(client): add the Nostalgia appearance style
Add a Style setting beside mode, accent, radius and background. Nostalgia restyles the app through
tokens only (neutral surface palettes, system type, flat shell, top glow) and pins background,
opacity and brightness. Add a top glow reach slider for both styles. Tidy the theme layer first:
charts read live tokens, bare `rounded` follows the radius scale, one shared sign-in toolbar.
Also carries the settings page header redesign.
2026-10-09 01:01:57 +00:00

30 lines
874 B
Vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { BookOpen } from '@lucide/vue'
import { useCoverVersions } from '@/features/book/composables/useCoverVersions'
const props = defineProps<{ bookId: number; title?: string | null }>()
const { coverUrl } = useCoverVersions()
const failed = ref(false)
const src = computed(() => coverUrl(props.bookId, 'thumbnail'))
watch(
() => props.bookId,
() => {
failed.value = false
},
)
function handleError() {
failed.value = true
}
</script>
<template>
<span class="relative flex shrink-0 items-center justify-center overflow-hidden rounded-xs border border-border bg-muted">
<img v-if="!failed" :src="src" :alt="title ?? ''" loading="lazy" class="h-full w-full object-cover" @error="handleError" />
<BookOpen v-else :size="14" class="text-muted-foreground" />
</span>
</template>