feat(app): add bookmarks/favorites with IndexedDB persistence

Create favorites Pinia store with IndexedDB backend for persistent
favorites. Add FavoriteButton.vue heart toggle (accent-colored when
active). Create FavoritesGrid.vue with type filtering. Wire favorite
buttons into FilmCard and SongCard. Add Favorites tab to ContentPanel
that appears when items are saved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-03 20:49:57 +00:00
co-authored by Claude Opus 4.6
parent 1991d75850
commit 258a03d7f1
8 changed files with 365 additions and 4 deletions
@@ -0,0 +1,41 @@
<template>
<button
class="p-1 rounded-full transition-all duration-200 active:scale-125"
:class="favorited
? 'text-accent hover:text-accent/80'
: isDark
? 'text-white/20 hover:text-white/50'
: 'text-gray-300 hover:text-gray-500'"
:aria-label="favorited ? 'Remove from favorites' : 'Add to favorites'"
@click.stop="$emit('toggle')"
>
<svg
class="w-4 h-4 transition-transform duration-200"
:class="{ 'scale-110': favorited }"
:fill="favorited ? 'currentColor' : 'none'"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
/>
</svg>
</button>
</template>
<script setup lang="ts">
import { useTheme } from '@/composables/useTheme'
defineProps<{
favorited: boolean
}>()
defineEmits<{
toggle: []
}>()
const { isDark } = useTheme()
</script>