feat(chat): enhance chat functionality with song integration and UI improvements

- Updated ChatHeader and ChatMessage components to support song selection and display.
- Enhanced useContentPanel to handle both film and song content, allowing for richer interactions.
- Improved FilmCard and added SongCard components for better media representation.
- Refactored environment variables for better configuration management.
- Updated .gitignore to include development chat history.

Made-with: Cursor
This commit is contained in:
Dorian
2026-03-02 18:16:04 +00:00
parent 6f79f0860d
commit 80aeefa4bf
27 changed files with 1751 additions and 143 deletions
@@ -41,44 +41,49 @@
</div>
<div class="flex-1 overflow-y-auto custom-scrollbar p-3">
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
<button
v-for="film in filteredFilms"
:key="film.id"
class="group rounded-xl overflow-hidden transition-all duration-200"
:class="isDark ? 'hover:ring-1 hover:ring-white/20' : 'hover:ring-1 hover:ring-black/10'"
class="group flex flex-col items-stretch text-left w-full"
@click="$emit('selectFilm', film)"
>
<div class="aspect-[2/3] relative">
<img
:src="film.posterUrl"
:alt="film.title"
class="w-full h-full object-cover"
loading="lazy"
@error="(e) => handleImgError(e, film.title, film.year)"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
<div class="poster-card flex-1 min-h-0">
<div class="aspect-[2/3] relative w-full overflow-hidden rounded-[10px]">
<img
:src="film.posterUrl"
:alt="film.title"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
loading="lazy"
@error="(e) => handleImgError(e, film.title, film.year)"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
<div class="absolute bottom-0 left-0 right-0 p-2">
<p class="text-[11px] font-semibold text-white/90 leading-tight truncate">
{{ film.title }}
</p>
<div class="flex items-center gap-1 mt-0.5">
<span class="text-[9px] text-accent font-bold"> {{ film.rating }}</span>
<span class="text-[9px] text-white/40">{{ film.year }}</span>
<div class="absolute bottom-0 left-0 right-0 p-2">
<p class="text-[11px] font-semibold text-white/90 leading-tight truncate">
{{ film.title }}
</p>
<div class="flex items-center gap-1 mt-0.5">
<span class="text-[9px] text-accent font-bold"> {{ film.rating }}</span>
<span class="text-[9px] text-white/40">{{ film.year }}</span>
</div>
</div>
<div class="absolute top-1.5 right-1.5 flex gap-0.5">
<span
v-for="src in film.sources.slice(0, 2)"
:key="src.type"
class="text-[8px] px-1 py-0.5 rounded bg-black/60 text-white/70 backdrop-blur-sm"
>
{{ src.type }}
</span>
</div>
</div>
<div class="absolute top-1.5 right-1.5 flex gap-0.5">
<span
v-for="src in film.sources.slice(0, 2)"
:key="src.type"
class="text-[8px] px-1 py-0.5 rounded bg-black/60 text-white/70 backdrop-blur-sm"
>
{{ src.type }}
</span>
</div>
</div>
<p class="text-xs font-semibold mt-2 truncate px-0.5"
:class="isDark ? 'text-white/90' : 'text-gray-900'">
{{ film.title }}
</p>
</button>
</div>