Iterate admin pages with smarter workflows

frontend/src/views/admin/AdminSettingsView.vue

@@ -39,6 +39,28 @@ const checks = computed(() => [
     icon: ShieldCheck,
   },
 ])
+const featureGates = computed(() => [
+  {
+    label: 'Nominierungen',
+    state: seasonDetail.value.currentPhase.toLowerCase().includes('nomin'),
+    note: 'Public-Nominierungen sollten nur im passenden Zeitraum aktiv sein.',
+  },
+  {
+    label: 'Voting',
+    state: seasonDetail.value.currentPhase.toLowerCase().includes('voting'),
+    note: 'Voting sollte erst aktiv sein, wenn Kategorien und Kandidaten gepflegt sind.',
+  },
+  {
+    label: 'Community-only Ergebnis',
+    state: true,
+    note: 'Aktuell als Community-basierte Auswertung geplant.',
+  },
+  {
+    label: 'Clip-Moderation',
+    state: false,
+    note: 'Admin-API fuer ClipSubmissions fehlt noch und sollte spaeter ergaenzt werden.',
+  },
+])
 
 watch(
   seasonDetail,
@@ -125,5 +147,28 @@ async function saveSettings() {
         </div>
       </Card>
     </section>
+
+    <Card class="p-6">
+      <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Feature Gates</p>
+      <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Was ist aktuell aktiv?</h2>
+      <div class="mt-5 grid gap-3 md:grid-cols-2">
+        <div
+          v-for="gate in featureGates"
+          :key="gate.label"
+          class="rounded-[22px] border p-4"
+          :class="gate.state ? 'border-emerald-100 bg-emerald-50/40' : 'border-slate-100 bg-slate-50/70'"
+        >
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <p class="font-semibold text-slate-900">{{ gate.label }}</p>
+              <p class="mt-1 text-sm leading-6 text-slate-500">{{ gate.note }}</p>
+            </div>
+            <span class="rounded-full px-3 py-1 text-xs font-semibold" :class="gate.state ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-200 text-slate-600'">
+              {{ gate.state ? 'aktiv' : 'inaktiv' }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </Card>
   </div>
 </template>