update

frontend/src/components/KiTab.vue

@@ -0,0 +1,225 @@
+<script setup>
+// Filme finden, indem man beschreibt, was man sucht. Die KI schlägt vor,
+// TMDB bestätigt — was es dort nicht gibt, kommt nicht an. Auf Wunsch
+// geht die eigene Sammlung mit, dann kennt die KI den Geschmack. Die
+// Filterleiste geht als Vorgabe mit und siebt hinterher noch einmal.
+import { computed, ref } from 'vue'
+import MovieCard from './MovieCard.vue'
+import { filterParameter } from '../filter.js'
+
+const props = defineProps({
+  angemeldet: Boolean,
+  gesehenIds: { type: Set, default: () => new Set() },
+  ohneGesehene: { type: Boolean, default: true },
+  filter: { type: Object, default: () => ({}) },
+  ansicht: { type: String, default: 'kompakt' },
+})
+
+const emit = defineEmits(['open'])
+
+const MAX = 1000
+
+const beschreibung = ref('')
+const mitSammlung = ref(false)
+const vorschlaege = ref([])
+const laden = ref(false)
+const fehler = ref('')
+const gefragt = ref(false)
+
+// Eine verstellte Leiste ist schon eine Frage: "Horror ab 2015" reicht
+const leisteVerstellt = computed(() => {
+  const { sort, ...rest } = filterParameter(props.filter)
+  return Object.values(rest).some((w) => w !== '' && w != null)
+})
+
+const kannFragen = computed(
+  () =>
+    !laden.value &&
+    (beschreibung.value.trim().length > 0 || mitSammlung.value || leisteVerstellt.value)
+)
+
+async function fragen() {
+  if (!kannFragen.value) return
+  laden.value = true
+  fehler.value = ''
+  try {
+    const resp = await fetch('/api/ki-suche', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        beschreibung: beschreibung.value.trim(),
+        mit_sammlung: props.angemeldet && mitSammlung.value,
+        ohne_gesehene: props.ohneGesehene,
+        ...filterParameter(props.filter),
+      }),
+    })
+    if (!resp.ok) {
+      const daten = await resp.json().catch(() => ({}))
+      throw new Error(daten.detail || 'Das hat nicht geklappt.')
+    }
+    vorschlaege.value = await resp.json()
+    gefragt.value = true
+  } catch (err) {
+    fehler.value = err.message
+  } finally {
+    laden.value = false
+  }
+}
+
+async function open(movie) {
+  const resp = await fetch(`/api/search/${movie.id}`)
+  if (resp.ok) emit('open', await resp.json())
+}
+</script>
+
+<template>
+  <div class="ki-tab">
+    <div class="frage">
+      <textarea
+        v-model="beschreibung"
+        :maxlength="MAX"
+        rows="3"
+        placeholder="Was suchst du? Zum Beispiel: langsamer Folk-Horror ohne viel Gore, gern aus Europa, ab 2010 …"
+        @keydown.ctrl.enter="fragen"
+      ></textarea>
+      <div class="zeile">
+        <label v-if="angemeldet" class="schalter">
+          <input v-model="mitSammlung" type="checkbox" />
+          Meine Sammlung mitgeben
+        </label>
+        <span class="rest"></span>
+        <button type="button" class="los" :disabled="!kannFragen" @click="fragen">
+          {{ laden ? 'Überlegt …' : 'Vorschlagen' }}
+        </button>
+      </div>
+    </div>
+
+    <p v-if="laden" class="note">Die KI überlegt. Das dauert ein paar Sekunden.</p>
+    <p v-else-if="fehler" class="note error">{{ fehler }}</p>
+    <p v-else-if="gefragt && !vorschlaege.length" class="note">
+      Nichts Brauchbares gefunden. Beschreib es anders.
+    </p>
+
+    <!-- Wo sonst die Inhaltsangabe steht, sagt hier die KI, warum der
+         Film passt -->
+    <div class="grid" :class="ansicht">
+      <MovieCard
+        v-for="movie in vorschlaege"
+        :key="movie.id"
+        :movie="{ ...movie, teaser: movie.grund }"
+        :ansicht="ansicht"
+        :gesehen="gesehenIds.has(movie.id)"
+        @open="open"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ki-tab {
+  min-width: 0;
+}
+
+.frage {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  margin-bottom: 1.5rem;
+}
+
+textarea {
+  width: 100%;
+  min-height: 5.5rem;
+  padding: 0.9rem 1.1rem;
+  color: var(--text);
+  font: inherit;
+  font-size: 1.05rem;
+  line-height: 1.5;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  resize: vertical;
+}
+
+textarea:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: -1px;
+}
+
+.zeile {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.schalter {
+  display: flex;
+  gap: 0.45rem;
+  align-items: center;
+  color: var(--muted);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.schalter input {
+  accent-color: var(--accent);
+}
+
+.rest {
+  flex: 1;
+}
+
+.los {
+  padding: 0.6rem 1.4rem;
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 600;
+  background: var(--accent);
+  border-radius: 8px;
+}
+
+.los:hover:not(:disabled) {
+  filter: brightness(1.15);
+}
+
+.los:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* Wie in der Suche: Poster im Raster, Detailkarten zu zweit nebeneinander */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  gap: 1.1rem;
+}
+
+.grid.details {
+  grid-template-columns: repeat(
+    auto-fill,
+    min(calc(50% - 0.55rem), calc(4 * 190px + 3 * 1.1rem))
+  );
+}
+
+.note {
+  padding: 2.5rem 0;
+  color: var(--muted);
+  text-align: center;
+}
+
+.note.error {
+  color: var(--accent);
+}
+
+@media (max-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
+    gap: 0.6rem;
+  }
+
+  .grid.details {
+    grid-template-columns: 1fr;
+  }
+}
+</style>