Dorian
464069b2f2
- Updated ChatMessage component to display inline film cards and added functionality for selecting films. - Improved ChatWindow to handle film-related content and update the panel with selected films. - Refactored useAI to streamline film recommendation prompts and context. - Enhanced ChatPage layout for better film library access and user experience. - Updated service worker revision for PWA improvements. Made-with: Cursor
95 lines
2.4 KiB
Vue
95 lines
2.4 KiB
Vue
<template>
|
|
<Transition name="panel">
|
|
<aside
|
|
v-if="panelOpen"
|
|
class="glass-card overflow-hidden flex flex-col"
|
|
:class="isMobile
|
|
? 'fixed inset-0 z-30'
|
|
: 'w-80 xl:w-96 shrink-0'"
|
|
>
|
|
<div
|
|
v-if="isMobile"
|
|
class="p-3 flex items-center justify-between"
|
|
:style="isDark
|
|
? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
|
|
: 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
|
|
>
|
|
<h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
|
|
{{ panelTitle }}
|
|
</h3>
|
|
<button
|
|
class="p-2 rounded-lg transition-colors"
|
|
:class="isDark
|
|
? 'text-white/70 hover:bg-white/10'
|
|
: 'text-gray-500 hover:bg-black/5'"
|
|
@click="closePanel"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1 min-h-0">
|
|
<FilmDetail
|
|
v-if="selectedFilm"
|
|
:film="selectedFilm"
|
|
@back="closeFilmDetail"
|
|
/>
|
|
<FilmGrid
|
|
v-else
|
|
:films="panelFilms"
|
|
:title="panelTitle"
|
|
@select-film="openFilmDetail"
|
|
/>
|
|
</div>
|
|
</aside>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
import { useTheme } from '@/composables/useTheme'
|
|
import { useContentPanel } from '@/composables/useContentPanel'
|
|
import FilmGrid from './FilmGrid.vue'
|
|
import FilmDetail from './FilmDetail.vue'
|
|
|
|
const { isDark } = useTheme()
|
|
const {
|
|
panelOpen,
|
|
panelFilms,
|
|
panelTitle,
|
|
selectedFilm,
|
|
openFilmDetail,
|
|
closeFilmDetail,
|
|
closePanel,
|
|
} = useContentPanel()
|
|
|
|
const windowWidth = ref(window.innerWidth)
|
|
const isMobile = computed(() => windowWidth.value < 1024)
|
|
|
|
function onResize() {
|
|
windowWidth.value = window.innerWidth
|
|
}
|
|
|
|
onMounted(() => window.addEventListener('resize', onResize))
|
|
onUnmounted(() => window.removeEventListener('resize', onResize))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.panel-enter-active {
|
|
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.panel-leave-active {
|
|
transition: all 0.2s ease-in;
|
|
}
|
|
.panel-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
.panel-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
</style>
|