update

frontend/src/components/MerklisteTab.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { posterUrl } from '../images'
 
 const props = defineProps({
@@ -23,9 +23,28 @@ const gruppen = computed(() => {
     }
     nach.get(schluessel).filme.push(item)
   }
+  for (const gruppe of nach.values()) gruppe.schluessel = gruppe.titel
   return [...nach.values()].sort((a, b) => b.mine - a.mine)
 })
 
+// Je Sammlung ein eigener Filter. Ohne Auswahl steht alles da.
+const filter = ref({})
+
+function umschalten(gruppe, wert) {
+  filter.value = {
+    ...filter.value,
+    [gruppe.schluessel]: filter.value[gruppe.schluessel] === wert ? null : wert,
+  }
+}
+
+function gefiltert(gruppe) {
+  const wahl = filter.value[gruppe.schluessel]
+  if (!wahl) return gruppe.filme
+  return gruppe.filme.filter(
+    (f) => (f.genres || []).includes('Horror') === (wahl === 'horror')
+  )
+}
+
 const emit = defineEmits(['open', 'changed'])
 
 async function vergessen(item) {
@@ -48,11 +67,27 @@ async function oeffnen(item) {
     <section v-for="gruppe in gruppen" :key="gruppe.titel">
       <h3>
         {{ gruppe.titel }}
-        <span class="anzahl">{{ gruppe.filme.length }}</span>
+        <span class="anzahl">{{ gefiltert(gruppe).length }}</span>
+        <span class="schalter">
+          <button
+            type="button"
+            :class="{ an: filter[gruppe.schluessel] === 'horror' }"
+            @click="umschalten(gruppe, 'horror')"
+          >
+            Horror
+          </button>
+          <button
+            type="button"
+            :class="{ an: filter[gruppe.schluessel] === 'kein' }"
+            @click="umschalten(gruppe, 'kein')"
+          >
+            Kein Horror
+          </button>
+        </span>
       </h3>
 
       <div class="grid">
-        <article v-for="item in gruppe.filme" :key="item.id" class="karte">
+        <article v-for="item in gefiltert(gruppe)" :key="item.id" class="karte">
           <button type="button" class="cover" @click="oeffnen(item)">
             <img
               v-if="posterUrl(item.poster_path, 'w342')"
@@ -64,8 +99,11 @@ async function oeffnen(item) {
           </button>
 
           <div class="text">
-            <h4 @click="oeffnen(item)">{{ item.title }}</h4>
+            <h5 @click="oeffnen(item)">{{ item.title }}</h5>
             <p v-if="item.year" class="jahr">{{ item.year }}</p>
+            <p v-if="item.genres?.length" class="genres">
+              {{ item.genres.join(' · ') }}
+            </p>
             <button
               v-if="item.mine"
               type="button"
@@ -151,13 +189,41 @@ h3 {
   border-radius: 20px;
 }
 
-h4 {
+.schalter {
+  display: flex;
+  margin-left: 0.4rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+}
+
+.schalter button {
+  padding: 0.2rem 0.6rem;
+  color: var(--muted);
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  background: var(--bg);
+}
+
+.schalter button.an {
+  color: var(--text);
+  background: var(--bg-soft);
+}
+
+.genres {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+h5 {
   font-size: 0.98rem;
   line-height: 1.25;
   cursor: pointer;
 }
 
-h4:hover {
+h5:hover {
   color: var(--accent);
 }