archy/packages/app/src/components/content/FilmGrid.vue

<template>
  <div class="h-full flex flex-col">
    <div class="p-4 space-y-3" :style="isDark
      ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
      : 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
    >
      <div class="flex items-center justify-between">
        <h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
          {{ title }}
        </h3>
        <span class="text-[10px] font-mono" :class="isDark ? 'text-white/30' : 'text-gray-400'">
          {{ filteredFilms.length }} films
        </span>
      </div>

      <input
        v-model="search"
        type="text"
        placeholder="Search films..."
        class="w-full px-3 py-2 rounded-lg text-xs outline-none transition-colors"
        :class="isDark
          ? 'bg-white/5 text-white/80 placeholder:text-white/25 focus:bg-white/10'
          : 'bg-black/3 text-gray-800 placeholder:text-gray-400 focus:bg-black/5'"
      />

      <div class="flex flex-wrap gap-1.5">
        <button
          v-for="genre in topGenres"
          :key="genre"
          class="text-[10px] px-2 py-1 rounded-md transition-all duration-150"
          :class="activeGenre === genre
            ? 'nav-tab-active'
            : isDark
              ? 'text-white/40 hover:text-white/70 hover:bg-white/5'
              : 'text-gray-500 hover:text-gray-800 hover:bg-black/5'"
          @click="activeGenre = activeGenre === genre ? null : genre"
        >
          {{ genre }}
        </button>
      </div>
    </div>

    <div class="flex-1 overflow-y-auto custom-scrollbar p-3">
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
        <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'"
          @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="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>
        </button>
      </div>

      <div v-if="filteredFilms.length === 0" class="flex items-center justify-center py-12">
        <p class="text-sm" :class="isDark ? 'text-white/30' : 'text-gray-400'">
          No films match your search
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { Film } from '@aiui/core/types/content'
import { useTheme } from '@/composables/useTheme'
import { handleImgError } from '@/composables/useImageFallback'

const props = withDefaults(defineProps<{
  films: Film[]
  title?: string
}>(), {
  title: 'Recommended Films',
})

defineEmits<{ selectFilm: [film: Film] }>()

const { isDark } = useTheme()
const search = ref('')
const activeGenre = ref<string | null>(null)

const topGenres = computed(() => {
  const counts = new Map<string, number>()
  for (const f of props.films) {
    for (const g of f.genres) {
      counts.set(g, (counts.get(g) ?? 0) + 1)
    }
  }
  return [...counts.entries()]
    .sort((a, b) => b[1] - a[1])
    .slice(0, 8)
    .map(([g]) => g)
})

const filteredFilms = computed(() => {
  let result = props.films
  if (search.value) {
    const q = search.value.toLowerCase()
    result = result.filter(
      (f) =>
        f.title.toLowerCase().includes(q) ||
        f.director.toLowerCase().includes(q) ||
        f.cast.some((c) => c.toLowerCase().includes(q))
    )
  }
  if (activeGenre.value) {
    result = result.filter((f) => f.genres.includes(activeGenre.value!))
  }
  return result
})
</script>