feat(chat): enhance film integration and UI improvements

- 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
2026-03-02 16:48:17 +00:00
parent ece4b8256f
commit 464069b2f2
13 changed files with 658 additions and 112 deletions
@@ -0,0 +1,94 @@
+<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>