update

frontend/src/components/MovieDetail.vue

@@ -6,9 +6,11 @@ const props = defineProps({
   movie: { type: Object, required: true },
   series: { type: Array, default: () => [] },
   meinVorschlag: { type: Object, default: null },
+  host: { type: Boolean, default: false },
+  gesehen: { type: Boolean, default: false },
 })
 
-const emit = defineEmits(['close', 'open', 'suggested'])
+const emit = defineEmits(['close', 'open', 'suggested', 'watched'])
 
 const vorschlagen = ref({ zustand: 'bereit', name: '' })
 
@@ -35,6 +37,24 @@ async function abschicken() {
   }
 }
 
+const merken = ref({ zustand: 'bereit' })
+
+async function alsGesehen() {
+  merken.value = { zustand: 'laeuft' }
+  try {
+    const resp = await fetch('/api/watched', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ movie_id: props.movie.id }),
+    })
+    if (!resp.ok) throw new Error()
+    merken.value = { zustand: 'fertig' }
+    emit('watched')
+  } catch {
+    merken.value = { zustand: 'fehler' }
+  }
+}
+
 const poster = computed(() => posterUrl(props.movie.poster_path, 'w342'))
 const shots = computed(() =>
   (props.movie.images || []).map((path) => backdropUrl(path, 'w780'))
@@ -143,6 +163,23 @@ onUnmounted(() => {
               </span>
             </template>
           </div>
+
+          <div v-if="host || gesehen" class="gesehen">
+            <span v-if="gesehen || merken.zustand === 'fertig'" class="ok">
+              Steht unter „Gesehen“.
+            </span>
+            <button
+              v-else-if="host"
+              type="button"
+              :disabled="merken.zustand === 'laeuft'"
+              @click="alsGesehen"
+            >
+              Als gesehen markieren
+            </button>
+            <span v-if="merken.zustand === 'fehler'" class="fehler">
+              Hat nicht geklappt.
+            </span>
+          </div>
         </div>
       </header>
 
@@ -348,6 +385,32 @@ h2 {
   cursor: default;
 }
 
+.gesehen {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+  margin-top: 0.6rem;
+}
+
+.gesehen button {
+  padding: 0.45rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 7px;
+}
+
+.gesehen button:hover:not(:disabled) {
+  border-color: var(--accent);
+}
+
+.gesehen button:disabled {
+  color: var(--muted);
+  cursor: default;
+}
+
 .hinweis {
   flex-basis: 100%;
   color: var(--muted);