style(content): add distinct placeholder covers per content type

Each content type now has a unique fallback cover with fitting typography:
- Books: Georgia serif italic with spine detail
- Films: Helvetica Neue with separator line
- TV Series: SF Pro Display (new dedicated generator)
- Music: system-ui with vinyl record motif
- Podcasts: system-ui with microphone icon

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-03 07:21:45 +00:00
co-authored by Claude Opus 4.6
parent e8ebe56d9e
commit cddfe93c5c
4 changed files with 50 additions and 26 deletions
@@ -64,7 +64,7 @@
import { ref, computed, onMounted } from 'vue'
import type { TVSeries } from '@aiui/core/types/content'
import { useTheme } from '@/composables/useTheme'
import { generatePosterFallback, fetchTmdbTVPoster } from '@/composables/useImageFallback'
import { generateTVSeriesFallback, fetchTmdbTVPoster } from '@/composables/useImageFallback'
const props = defineProps<{ series: TVSeries }>()
defineEmits<{ select: [series: TVSeries] }>()
@@ -79,7 +79,7 @@ const posterSrc = computed(() => {
})
const fallbackPoster = computed(() =>
generatePosterFallback(props.series.title, props.series.year)
generateTVSeriesFallback(props.series.title, props.series.year)
)
const yearDisplay = computed(() => {
@@ -127,7 +127,7 @@
import { ref, computed, onMounted } from 'vue'
import type { TVSeries } from '@aiui/core/types/content'
import { useTheme } from '@/composables/useTheme'
import { generatePosterFallback, fetchTmdbTVPoster } from '@/composables/useImageFallback'
import { generateTVSeriesFallback, fetchTmdbTVPoster } from '@/composables/useImageFallback'
const props = defineProps<{ series: TVSeries }>()
defineEmits<{ back: [] }>()
@@ -142,7 +142,7 @@ const coverSrc = computed(() => {
})
const fallbackCover = computed(() =>
generatePosterFallback(props.series.title, props.series.year)
generateTVSeriesFallback(props.series.title, props.series.year)
)
const yearDisplay = computed(() => {
@@ -116,7 +116,7 @@
import { ref, computed, reactive, onMounted, watch } from 'vue'
import type { TVSeries } from '@aiui/core/types/content'
import { useTheme } from '@/composables/useTheme'
import { generatePosterFallback, fetchTmdbTVPoster } from '@/composables/useImageFallback'
import { generateTVSeriesFallback, fetchTmdbTVPoster } from '@/composables/useImageFallback'
const props = withDefaults(defineProps<{
series: TVSeries[]
@@ -139,7 +139,7 @@ function coverSrc(s: TVSeries): string | null {
}
function fallbackFor(s: TVSeries): string {
return generatePosterFallback(s.title, s.year)
return generateTVSeriesFallback(s.title, s.year)
}
function onCoverError(s: TVSeries) {