Benutzer, Sammlungen, Wünsche und zwei Kartenansichten

Die Runde ist jetzt benannt. Der Host pflegt die Namensliste im neuen Reiter
"Verwaltung", alle anderen wählen sich oben rechts einen aus. Der Name landet
serverseitig an Vorschlägen und Wertungen, statt aus einem Textfeld zu
kommen, in das jeder schreiben konnte, was er wollte.

Dazu zwei Sammelstellen, beide nach Person gruppiert und für alle sichtbar,
aber nur selbst bearbeitbar:
- "Sammlungen": Filme, die man sehen möchte. Getrennt vom Rad-Vorschlag,
  von dem es weiterhin einen je Person gibt.
- "Wünsche": was der Seite noch fehlt. Der Host darf hier alle Einträge
  ändern und löschen.

Die Filmliste hat jetzt zwei Ansichten. Kompakt ist die gewohnte Karte,
Details stellt Cover, Text und vier Szenenbilder nebeneinander — eine Karte
so breit wie vier kompakte oder die halbe Reihe, je nachdem was zuerst
zutrifft. Reihen und Einzelfilme sind dabei exakt gleich hoch; die
Blätterleiste liegt dafür über dem Cover statt darunter.

Die Filmansicht nutzt die Breite: links Cover, Text und Knöpfe, rechts der
Trailer, darunter die Bilder. Ein Klick zeigt ein Bild in voller Größe.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013XVnRop5c3or3B8xE2hpgZ

frontend/src/components/VerwaltungTab.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  items: { type: Array, default: () => [] },
+})
+
+const neuerName = ref('')
+const fehler = ref('')
+
+async function anlegen() {
+  fehler.value = ''
+  const resp = await fetch('/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name: neuerName.value }),
+  })
+  if (resp.ok) neuerName.value = ''
+  else fehler.value = 'Der Name ist leer oder schon vergeben.'
+}
+
+async function entfernen(user) {
+  await fetch(`/api/users/${user.id}`, { method: 'DELETE' })
+}
+</script>
+
+<template>
+  <div class="verwaltung-tab">
+    <section>
+      <h3>Benutzer</h3>
+
+      <div class="anlegen">
+        <input
+          v-model="neuerName"
+          type="text"
+          placeholder="Name hinzufügen"
+          maxlength="40"
+          @keyup.enter="anlegen"
+        />
+        <button type="button" @click="anlegen">Hinzufügen</button>
+      </div>
+      <p v-if="fehler" class="fehler">{{ fehler }}</p>
+
+      <ul v-if="items.length" class="liste">
+        <li v-for="u in items" :key="u.id">
+          <span class="name">{{ u.name }}</span>
+          <button
+            type="button"
+            class="weg"
+            title="Aus der Runde nehmen"
+            @click="entfernen(u)"
+          >
+            ×
+          </button>
+        </li>
+      </ul>
+      <p v-else class="leer">Noch niemand in der Runde.</p>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.verwaltung-tab {
+  max-width: 26rem;
+}
+
+h3 {
+  margin-bottom: 0.8rem;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.anlegen {
+  display: flex;
+  gap: 0.4rem;
+  margin-bottom: 1.25rem;
+}
+
+.anlegen input {
+  flex: 1;
+  padding: 0.55rem 0.8rem;
+  font-size: 0.92rem;
+}
+
+.anlegen button {
+  padding: 0.55rem 1rem;
+  font-size: 0.88rem;
+  font-weight: 600;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.anlegen button:hover {
+  border-color: var(--accent);
+}
+
+.liste {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  list-style: none;
+}
+
+.liste li {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.55rem 0.85rem;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.name {
+  flex: 1;
+  font-size: 0.95rem;
+}
+
+.weg {
+  padding: 0.15rem 0.4rem;
+  color: var(--muted);
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.weg:hover {
+  color: var(--accent);
+}
+
+.leer,
+.fehler {
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+.fehler {
+  margin-bottom: 0.8rem;
+  color: var(--accent);
+}
+</style>