update

frontend/src/App.vue

@@ -105,6 +105,10 @@ watch(activeTab, async () => {
   leiste.querySelector('.active')?.scrollIntoView({ inline: 'center', block: 'nearest' })
 })
 
+// Ohne gewählten Namen darf man alles lesen, aber nichts eintragen —
+// für Zuschauer, die noch nicht in der Runde stehen
+const angemeldet = computed(() => !!ich.value)
+
 const selected = ref(null)
 
 // Der Katalog liefert nur sechs Bildpfade je Film. Beim Öffnen holen wir
@@ -188,8 +192,8 @@ onMounted(load)
         >
           Filter
         </button>
-        <NamensWahl v-if="!host" :items="runde" :mine="ich" @waehlen="michSetzen" />
-        <span v-else class="host">Host</span>
+        <span v-if="host" class="host">Host</span>
+        <NamensWahl :items="runde" :mine="ich" @waehlen="michSetzen" />
       </div>
     </header>
 
@@ -236,6 +240,7 @@ onMounted(load)
       v-else-if="activeTab === 'wheel'"
       ref="rad"
       :host="host"
+      :angemeldet="angemeldet"
       :merkliste="merkliste"
       :mine="meinVorschlag?.id ?? null"
       :gesehen-ids="gesehenIds"
@@ -246,12 +251,14 @@ onMounted(load)
     <WatchedTab
       v-else-if="activeTab === 'watched'"
       :host="host"
+      :angemeldet="angemeldet"
       @open="selected = $event"
       @changed="ladeGesehen"
     />
 
     <MerklisteTab
       v-else-if="activeTab === 'merkliste'"
+      :angemeldet="angemeldet"
       :gesehen-ids="gesehenIds"
       :items="merkliste"
       :ich="ich"
@@ -264,6 +271,7 @@ onMounted(load)
       :items="wuensche"
       :ich="ich"
       :host="host"
+      :angemeldet="angemeldet"
       @changed="ladeWuensche"
     />
 
@@ -347,6 +355,7 @@ onMounted(load)
       :series="series"
       :mein-vorschlag="meinVorschlag"
       :host="host"
+      :angemeldet="angemeldet"
       :gesehen="gesehen.some((e) => e.movie_id === selected.id)"
       :gemerkt="merkliste.some((e) => e.mine && e.movie_id === selected.id)"
       @close="selected = null"

frontend/src/components/MerklisteTab.vue

@@ -4,6 +4,8 @@ import { posterUrl } from '../images'
 
 const props = defineProps({
   items: { type: Array, default: () => [] },
+  // Eine eigene Sammlung hat nur, wer in der Runde steht
+  angemeldet: Boolean,
   ich: { type: Object, default: null },
   gesehenIds: { type: Set, default: () => new Set() },
 })

frontend/src/components/MovieDetail.vue

@@ -7,6 +7,8 @@ const props = defineProps({
   series: { type: Array, default: () => [] },
   meinVorschlag: { type: Object, default: null },
   host: { type: Boolean, default: false },
+  // Ohne gewählten Namen gibt es keine Sammlung und keinen Vorschlag
+  angemeldet: { type: Boolean, default: false },
   gesehen: { type: Boolean, default: false },
   gemerkt: { type: Boolean, default: false },
 })
@@ -213,7 +215,7 @@ onUnmounted(() => {
               Ähnliche finden
             </button>
             <button
-              v-if="!host"
+              v-if="!host && angemeldet"
               type="button"
               class="merken"
               :class="{ an: gemerkt }"
@@ -221,7 +223,7 @@ onUnmounted(() => {
             >
               {{ gemerkt ? 'In Sammlung' : 'Zur Sammlung' }}
             </button>
-            <template v-if="!host">
+            <template v-if="!host && angemeldet">
               <button
                 type="button"
                 class="merken"
@@ -235,6 +237,11 @@ onUnmounted(() => {
                 Hat nicht geklappt.
               </span>
             </template>
+            <!-- Ohne Namen fehlen hier zwei Knöpfe — sonst sucht man
+                 vergeblich, warum -->
+            <p v-if="!host && !angemeldet" class="hinweis">
+              Zum Merken und Vorschlagen wähle oben rechts deinen Namen.
+            </p>
           </div>
 
           <div v-if="host || gesehen" class="gesehen">

frontend/src/components/VorschlagsListe.vue

@@ -7,6 +7,8 @@ const props = defineProps({
   items: { type: Array, default: () => [] },
   laden: Boolean,
   host: Boolean,
+  // Der Würfel zieht aus der eigenen Sammlung — die gibt es nur mit Namen
+  angemeldet: Boolean,
   merkliste: { type: Array, default: () => [] },
   mine: { type: Number, default: null },
   gesehenIds: { type: Set, default: () => new Set() },
@@ -51,7 +53,7 @@ async function wuerfeln() {
 
 <template>
   <aside class="liste">
-    <div v-if="!host" class="sammlung-wuerfeln">
+    <div v-if="!host && angemeldet" class="sammlung-wuerfeln">
       <div class="schalter">
         <button type="button" :class="{ an: nurHorror }" @click="nurHorror = true">
           Horror ({{ anzahlHorror }})

frontend/src/components/WatchedTab.vue

@@ -3,7 +3,11 @@ import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { posterUrl } from '../images'
 import { abonnieren } from '../live'
 
-const props = defineProps({ host: Boolean })
+const props = defineProps({
+  host: Boolean,
+  // Eine Wertung gehört einer Person — ohne Namen gäbe es keine
+  angemeldet: Boolean,
+})
 const emit = defineEmits(['open', 'changed'])
 
 const items = ref([])
@@ -231,7 +235,11 @@ onUnmounted(() => {
             <span v-else class="von">Noch keine Wertung</span>
           </p>
 
-          <div class="wertung" @mouseleave="schwebt = { id: null, wert: 0 }">
+          <div
+            v-if="angemeldet"
+            class="wertung"
+            @mouseleave="schwebt = { id: null, wert: 0 }"
+          >
             <button
               v-for="s in STERNE"
               :key="s"
@@ -248,7 +256,7 @@ onUnmounted(() => {
 
           <!-- Erst nach den Sternen: ein Text ohne Note ergäbe keine Wertung -->
           <button
-            v-if="item.mine"
+            v-if="item.mine && angemeldet"
             type="button"
             class="link"
             @click="rezensionOeffnen(item)"

frontend/src/components/WheelTab.vue

@@ -8,6 +8,7 @@ import VorschlagsListe from './VorschlagsListe.vue'
 
 defineProps({
   host: Boolean,
+  angemeldet: Boolean,
   // Beides hält die App schon aktuell — auch nach einem Namenswechsel
   merkliste: { type: Array, default: () => [] },
   mine: { type: Number, default: null },
@@ -171,6 +172,7 @@ defineExpose({ neu: laden_ })
       :items="items"
       :laden="laden"
       :host="host"
+      :angemeldet="angemeldet"
       :merkliste="merkliste"
       :mine="mine"
       :gesehen-ids="gesehenIds"

frontend/src/components/WuenscheTab.vue

@@ -5,6 +5,8 @@ const props = defineProps({
   items: { type: Array, default: () => [] },
   ich: { type: Object, default: null },
   host: Boolean,
+  // Ohne gewählten Namen bleibt der Reiter zum Mitlesen da
+  angemeldet: Boolean,
 })
 
 const emit = defineEmits(['changed'])
@@ -115,7 +117,7 @@ function datum(iso) {
 
 <template>
   <div class="wuensche-tab">
-    <div class="neu">
+    <div v-if="angemeldet" class="neu">
       <textarea
         v-model="entwurf"
         rows="2"
@@ -144,6 +146,7 @@ function datum(iso) {
               type="button"
               class="stimme"
               :class="{ an: w.voted, hat: w.votes > 0 }"
+              :disabled="!angemeldet"
               :title="w.voted ? 'Stimme zurücknehmen' : 'Dafür stimmen'"
               @click="abstimmen(w)"
             >
@@ -201,7 +204,7 @@ function datum(iso) {
                     ×
                   </button>
                 </p>
-                <div class="notiz-neu">
+                <div v-if="angemeldet" class="notiz-neu">
                   <input
                     v-model="notizEntwurf[w.id]"
                     type="text"
@@ -375,11 +378,15 @@ h3 {
   border-radius: 20px;
 }
 
-.stimme:hover {
+.stimme:hover:not(:disabled) {
   color: var(--text);
   border-color: var(--accent);
 }
 
+.stimme:disabled {
+  cursor: default;
+}
+
 .stimme.hat {
   color: var(--text);
 }