@commonpub/layer 0.25.0 → 0.26.0

package/pages/contests/[slug]/edit.vue

@@ -15,96 +15,95 @@ const saving = ref(false);
 const title = ref('');
 const description = ref('');
 const rules = ref('');
+const bannerUrl = ref('');
 const startDate = ref('');
 const endDate = ref('');
 const judgingEndDate = ref('');
-const prizes = ref<Array<{ place: number; title: string; description: string; value: string }>>([]);
-const judgeIds = ref<string[]>([]);
-const judgeSearch = ref('');
-const judgeSearchResults = ref<Array<{ id: string; username: string; displayName: string | null }>>([]);
-const searchingJudges = ref(false);
+const communityVotingEnabled = ref(false);
+const judgingVisibility = ref<'public' | 'judges-only' | 'private'>('judges-only');
 
-interface JudgeDisplay { id: string; username: string; displayName: string | null }
-const resolvedJudges = ref<JudgeDisplay[]>([]);
+interface Prize { place: number | null; category: string; title: string; description: string; value: string }
+const prizes = ref<Prize[]>([]);
+
+interface Criterion { label: string; weight: number | null; description: string }
+const criteria = ref<Criterion[]>([]);
 
 // Load current data
-watch(contest, async (c) => {
+watch(contest, (c) => {
   if (!c) return;
   title.value = c.title ?? '';
   description.value = c.description ?? '';
   rules.value = c.rules ?? '';
+  bannerUrl.value = c.bannerUrl ?? '';
   startDate.value = c.startDate ? new Date(c.startDate).toISOString().slice(0, 16) : '';
   endDate.value = c.endDate ? new Date(c.endDate).toISOString().slice(0, 16) : '';
   judgingEndDate.value = c.judgingEndDate ? new Date(c.judgingEndDate).toISOString().slice(0, 16) : '';
-  prizes.value = (c.prizes ?? []).map((p: { place: number; title: string; description?: string; value?: string }) => ({
-    place: p.place,
+  communityVotingEnabled.value = !!c.communityVotingEnabled;
+  judgingVisibility.value = (c.judgingVisibility as typeof judgingVisibility.value) ?? 'judges-only';
+  prizes.value = (c.prizes ?? []).map((p: { place?: number; category?: string; title: string; description?: string; value?: string }) => ({
+    place: p.place ?? null,
+    category: p.category ?? '',
     title: p.title,
     description: p.description ?? '',
     value: p.value ?? '',
   }));
-  judgeIds.value = [...(c.judges ?? [])];
-  // Resolve judge IDs to display info
-  if (judgeIds.value.length > 0) {
-    try {
-      const data = await $fetch<{ items: JudgeDisplay[] }>('/api/users', { query: { ids: judgeIds.value.join(',') } });
-      resolvedJudges.value = data.items;
-    } catch { /* ignore */ }
-  }
+  criteria.value = (c.judgingCriteria ?? []).map((cr: { label: string; weight?: number; description?: string }) => ({
+    label: cr.label,
+    weight: cr.weight ?? null,
+    description: cr.description ?? '',
+  }));
 }, { immediate: true });
 
-async function searchJudge(): Promise<void> {
-  const q = judgeSearch.value.trim();
-  if (!q || q.length < 2) { judgeSearchResults.value = []; return; }
-  searchingJudges.value = true;
-  try {
-    const data = await $fetch<{ items: Array<{ id: string; username: string; displayName: string | null }> }>('/api/users', { query: { q, limit: 5 } });
-    judgeSearchResults.value = data.items.filter((u) => !judgeIds.value.includes(u.id));
-  } catch { judgeSearchResults.value = []; }
-  finally { searchingJudges.value = false; }
-}
-
-function addJudge(u: { id: string; username: string; displayName: string | null }): void {
-  if (!judgeIds.value.includes(u.id)) {
-    judgeIds.value.push(u.id);
-    resolvedJudges.value.push(u);
-  }
-  judgeSearch.value = '';
-  judgeSearchResults.value = [];
-}
-
-function removeJudge(id: string): void {
-  judgeIds.value = judgeIds.value.filter((jid) => jid !== id);
-  resolvedJudges.value = resolvedJudges.value.filter((j) => j.id !== id);
-}
-
 function addPrize(): void {
-  const nextPlace = prizes.value.length + 1;
-  prizes.value.push({ place: nextPlace, title: '', description: '', value: '' });
+  prizes.value.push({ place: null, category: '', title: '', description: '', value: '' });
 }
-
 function removePrize(index: number): void {
   prizes.value.splice(index, 1);
-  prizes.value.forEach((p, i) => { p.place = i + 1; });
+}
+function prizeLabel(prize: Prize, idx: number): string {
+  if (prize.category.trim()) return prize.category;
+  const labels = ['1st', '2nd', '3rd', '4th', '5th', '6th'];
+  return prize.place ? `${labels[prize.place - 1] || `${prize.place}th`} Place` : `${labels[idx] || `${idx + 1}th`} Place`;
 }
 
-function placeLabel(place: number): string {
-  if (place === 1) return '1st Place';
-  if (place === 2) return '2nd Place';
-  if (place === 3) return '3rd Place';
-  return `${place}th Place`;
+function addCriterion(): void {
+  criteria.value.push({ label: '', weight: null, description: '' });
+}
+function removeCriterion(index: number): void {
+  criteria.value.splice(index, 1);
 }
+const criteriaTotal = computed(() => criteria.value.reduce((s, c) => s + (c.weight ?? 0), 0));
+
+const dateError = computed(() => {
+  if (startDate.value && endDate.value && new Date(endDate.value) <= new Date(startDate.value)) {
+    return 'End date must be after the start date.';
+  }
+  if (judgingEndDate.value && endDate.value && new Date(judgingEndDate.value) < new Date(endDate.value)) {
+    return 'Judging end date must be on or after the end date.';
+  }
+  return '';
+});
 
 async function handleSave(): Promise<void> {
+  if (dateError.value) { toast.error(dateError.value); return; }
   saving.value = true;
   try {
     const prizeData = prizes.value
       .filter((p) => p.title.trim())
       .map((p) => ({
-        place: p.place,
+        place: typeof p.place === 'number' && Number.isFinite(p.place) && p.place > 0 ? p.place : undefined,
+        category: p.category.trim() || undefined,
         title: p.title,
         description: p.description || undefined,
         value: p.value || undefined,
       }));
+    const criteriaData = criteria.value
+      .filter((c) => c.label.trim())
+      .map((c) => ({
+        label: c.label.trim(),
+        weight: typeof c.weight === 'number' && Number.isFinite(c.weight) ? c.weight : undefined,
+        description: c.description.trim() || undefined,
+      }));
 
     await $fetch(`/api/contests/${slug}`, {
       method: 'PUT',
@@ -112,11 +111,14 @@ async function handleSave(): Promise<void> {
         title: title.value,
         description: description.value || undefined,
         rules: rules.value || undefined,
+        bannerUrl: bannerUrl.value || undefined,
         startDate: startDate.value ? new Date(startDate.value).toISOString() : undefined,
         endDate: endDate.value ? new Date(endDate.value).toISOString() : undefined,
         judgingEndDate: judgingEndDate.value ? new Date(judgingEndDate.value).toISOString() : undefined,
-        prizes: prizeData.length > 0 ? prizeData : undefined,
-        judges: judgeIds.value.length > 0 ? judgeIds.value : undefined,
+        communityVotingEnabled: communityVotingEnabled.value,
+        judgingVisibility: judgingVisibility.value,
+        prizes: prizeData,
+        judgingCriteria: criteriaData,
       },
     });
     toast.success('Contest updated');
@@ -134,10 +136,7 @@ async function transitionStatus(newStatus: string): Promise<void> {
     : `Change contest status to "${newStatus}"?`;
   if (!confirm(msg)) return;
   try {
-    await $fetch(`/api/contests/${slug}/transition`, {
-      method: 'POST',
-      body: { status: newStatus },
-    });
+    await $fetch(`/api/contests/${slug}/transition`, { method: 'POST', body: { status: newStatus } });
     toast.success(`Status changed to ${newStatus}`);
     await refresh();
   } catch (err: unknown) {
@@ -173,6 +172,10 @@ async function transitionStatus(newStatus: string): Promise<void> {
           <label class="cpub-form-label">Rules</label>
           <textarea v-model="rules" class="cpub-form-textarea" rows="4" placeholder="One rule per line" />
         </div>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Banner Image URL</label>
+          <input v-model="bannerUrl" type="url" class="cpub-form-input" placeholder="https://..." />
+        </div>
       </section>
 
       <section class="cpub-form-section">
@@ -191,14 +194,25 @@ async function transitionStatus(newStatus: string): Promise<void> {
           <label class="cpub-form-label">Judging End Date</label>
           <input v-model="judgingEndDate" type="datetime-local" class="cpub-form-input" />
         </div>
+        <p v-if="dateError" class="cpub-form-error" role="alert">{{ dateError }}</p>
       </section>
 
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Prizes</h2>
         <div v-for="(prize, i) in prizes" :key="i" class="cpub-prize-row">
           <div class="cpub-prize-header">
-            <span class="cpub-prize-label">{{ placeLabel(prize.place) }}</span>
-            <button type="button" class="cpub-prize-remove" @click="removePrize(i)"><i class="fa-solid fa-times"></i></button>
+            <span class="cpub-prize-label">{{ prizeLabel(prize, i) }}</span>
+            <button type="button" class="cpub-prize-remove" aria-label="Remove prize" @click="removePrize(i)"><i class="fa-solid fa-times"></i></button>
+          </div>
+          <div class="cpub-form-row">
+            <div class="cpub-form-field">
+              <label class="cpub-form-label">Place</label>
+              <input v-model.number="prize.place" type="number" min="1" class="cpub-form-input" placeholder="1" />
+            </div>
+            <div class="cpub-form-field">
+              <label class="cpub-form-label">Category (optional)</label>
+              <input v-model="prize.category" type="text" class="cpub-form-input" placeholder="e.g. Best in Show" />
+            </div>
           </div>
           <div class="cpub-form-row">
             <div class="cpub-form-field">
@@ -219,37 +233,49 @@ async function transitionStatus(newStatus: string): Promise<void> {
       </section>
 
       <section class="cpub-form-section">
-        <h2 class="cpub-form-section-title">Judges</h2>
-        <div v-if="resolvedJudges.length" class="cpub-judge-list">
-          <div v-for="judge in resolvedJudges" :key="judge.id" class="cpub-judge-chip">
-            <span>{{ judge.displayName || judge.username }}</span>
-            <button type="button" class="cpub-judge-chip-remove" @click="removeJudge(judge.id)"><i class="fa-solid fa-times"></i></button>
-          </div>
+        <h2 class="cpub-form-section-title">Judging</h2>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Score Visibility</label>
+          <select v-model="judgingVisibility" class="cpub-form-input">
+            <option value="judges-only">Judges only — scores hidden until results</option>
+            <option value="public">Public — show scores during judging</option>
+            <option value="private">Private — scores stay with organizers</option>
+          </select>
+        </div>
+        <label class="cpub-form-check">
+          <input v-model="communityVotingEnabled" type="checkbox" />
+          <span>Enable community voting</span>
+        </label>
+
+        <div class="cpub-subhead">
+          <h3 class="cpub-form-subtitle">Judging Criteria <span v-if="criteriaTotal" class="cpub-form-hint-inline">{{ criteriaTotal }} pts</span></h3>
+          <button type="button" class="cpub-btn cpub-btn-sm" @click="addCriterion"><i class="fa-solid fa-plus"></i> Add Criterion</button>
         </div>
-        <div v-else class="cpub-judge-empty">No judges assigned.</div>
-        <div class="cpub-judge-search">
-          <input
-            v-model="judgeSearch"
-            type="text"
-            class="cpub-form-input"
-            placeholder="Search users by name or username..."
-            @input="searchJudge"
-          />
-          <div v-if="judgeSearchResults.length" class="cpub-judge-dropdown">
-            <button
-              v-for="u in judgeSearchResults"
-              :key="u.id"
-              type="button"
-              class="cpub-judge-option"
-              @click="addJudge(u)"
-            >
-              <strong>{{ u.displayName || u.username }}</strong>
-              <span class="cpub-judge-option-username">@{{ u.username }}</span>
-            </button>
+        <div v-for="(crit, ci) in criteria" :key="ci" class="cpub-criterion-row">
+          <div class="cpub-form-row">
+            <div class="cpub-form-field" style="flex: 3">
+              <label class="cpub-form-label">Criterion</label>
+              <input v-model="crit.label" type="text" class="cpub-form-input" placeholder="e.g. Documentation" />
+            </div>
+            <div class="cpub-form-field" style="flex: 1">
+              <label class="cpub-form-label">Points</label>
+              <input v-model.number="crit.weight" type="number" min="0" max="100" class="cpub-form-input" placeholder="20" />
+            </div>
+            <button type="button" class="cpub-prize-remove cpub-criterion-del" aria-label="Remove criterion" @click="removeCriterion(ci)"><i class="fa-solid fa-times"></i></button>
+          </div>
+          <div class="cpub-form-field">
+            <input v-model="crit.description" type="text" class="cpub-form-input" placeholder="What judges look for (optional)" />
           </div>
         </div>
       </section>
 
+      <!-- Judge panel (single source of truth: contest_judges table) -->
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Judges</h2>
+        <p class="cpub-form-hint">Invited judges receive a notification and must accept before they can score.</p>
+        <ContestJudgeManager :contest-slug="slug" :is-owner="true" />
+      </section>
+
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Status Transitions</h2>
         <div class="cpub-status-actions">
@@ -273,7 +299,7 @@ async function transitionStatus(newStatus: string): Promise<void> {
         </div>
       </section>
 
-      <button type="submit" class="cpub-btn cpub-btn-primary" :disabled="saving || !title.trim()">
+      <button type="submit" class="cpub-btn cpub-btn-primary" :disabled="saving || !title.trim() || !!dateError">
         <i class="fa-solid fa-floppy-disk"></i> {{ saving ? 'Saving...' : 'Save Changes' }}
       </button>
     </form>
@@ -306,11 +332,21 @@ async function transitionStatus(newStatus: string): Promise<void> {
 .cpub-form-textarea { resize: vertical; }
 .cpub-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 
-.cpub-prize-row { border: var(--border-width-default) solid var(--border); padding: 14px; margin-bottom: 10px; background: var(--surface2); }
+.cpub-form-error { font-size: 12px; color: var(--red); margin-top: 8px; }
+.cpub-form-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
+.cpub-form-check input { width: 14px; height: 14px; }
+.cpub-subhead { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
+.cpub-form-subtitle { font-size: 12px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
+.cpub-form-hint-inline { font-size: 10px; color: var(--accent); }
+.cpub-form-hint { font-size: 11px; color: var(--text-faint); margin: 0 0 12px; line-height: 1.5; }
+
+.cpub-prize-row, .cpub-criterion-row { border: var(--border-width-default) solid var(--border); padding: 14px; margin-bottom: 10px; background: var(--surface2); }
 .cpub-prize-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
-.cpub-prize-label { font-size: 11px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
+.cpub-prize-label { font-size: 11px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
 .cpub-prize-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; }
 .cpub-prize-remove:hover { color: var(--red); }
+.cpub-criterion-row .cpub-form-row { align-items: flex-end; }
+.cpub-criterion-del { align-self: flex-end; margin-bottom: 12px; }
 
 .cpub-status-actions { display: flex; gap: 8px; flex-wrap: wrap; }
 .cpub-transition-btn { display: inline-flex; align-items: center; gap: 6px; }
@@ -319,17 +355,10 @@ async function transitionStatus(newStatus: string): Promise<void> {
 .cpub-transition-complete { color: var(--accent); border-color: var(--accent-border); }
 .cpub-transition-cancel { color: var(--red); border-color: var(--red-border); }
 
-.cpub-judge-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
-.cpub-judge-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); font-size: 11px; font-family: var(--font-mono); color: var(--accent); }
-.cpub-judge-chip-remove { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 10px; padding: 0; }
-.cpub-judge-chip-remove:hover { color: var(--red); }
-.cpub-judge-empty { font-size: 12px; color: var(--text-faint); margin-bottom: 12px; }
-.cpub-judge-search { position: relative; }
-.cpub-judge-dropdown { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-lg); max-height: 200px; overflow-y: auto; }
-.cpub-judge-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; background: none; border: none; border-bottom: var(--border-width-default) solid var(--border); cursor: pointer; font-size: 12px; color: var(--text); text-align: left; }
-.cpub-judge-option:last-child { border-bottom: none; }
-.cpub-judge-option:hover { background: var(--surface2); }
-.cpub-judge-option-username { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; }
-
 .cpub-not-found { text-align: center; padding: 64px; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 12px; }
+
+@media (max-width: 768px) {
+  .cpub-contest-edit { padding: 16px; }
+  .cpub-form-row { grid-template-columns: 1fr; }
+}
 </style>

package/pages/contests/[slug]/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Serialized, ContestEntryItem } from '@commonpub/server';
+import type { Serialized, ContestEntryItem, ContestJudgeItem } from '@commonpub/server';
 
 const route = useRoute();
 const slug = route.params.slug as string;
@@ -8,29 +8,64 @@ const { isAuthenticated, isAdmin, user } = useAuth();
 
 const { data: contest } = useLazyFetch(`/api/contests/${slug}`);
 const { data: apiEntriesData, refresh: refreshEntries } = useLazyFetch<{ items: Serialized<ContestEntryItem>[]; total: number }>(`/api/contests/${slug}/entries`);
+const { data: judgesData, refresh: refreshJudges } = useLazyFetch<ContestJudgeItem[]>(`/api/contests/${slug}/judges`);
 
 useSeoMeta({
   title: () => `${contest.value?.title || 'Contest'} — ${useSiteName()}`,
   ogTitle: () => `${contest.value?.title || 'Contest'} — ${useSiteName()}`,
-  ogImage: '/og-default.png',
+  ogImage: () => contest.value?.bannerUrl || '/og-default.png',
 });
 
 const c = computed(() => contest.value);
 const entries = computed(() => apiEntriesData.value?.items ?? []);
+const judges = computed<ContestJudgeItem[]>(() => judgesData.value ?? []);
 const isOwner = computed(() => isAdmin.value || !!(user.value?.id && c.value?.createdById === user.value.id));
-const isJudge = computed(() => !!(user.value?.id && ((c.value?.judges ?? []) as string[]).includes(user.value.id)));
+
+// Judge state derives entirely from the contest_judges table (single source of
+// truth) — not the legacy `judges` jsonb column.
+const myJudge = computed(() => judges.value.find((j) => j.userId === user.value?.id) ?? null);
+const pendingInvite = computed(() => !!myJudge.value && !myJudge.value.acceptedAt);
+const canJudge = computed(() => !!myJudge.value && !!myJudge.value.acceptedAt && myJudge.value.role !== 'guest');
+
+// Tabs ----------------------------------------------------------------------
+interface Tab { key: string; label: string; icon: string; count?: number }
+const tabs = computed<Tab[]>(() => {
+  const t: Tab[] = [{ key: 'overview', label: 'Overview', icon: 'fa-circle-info' }];
+  if (c.value?.rules) t.push({ key: 'rules', label: 'Rules', icon: 'fa-file-lines' });
+  if (c.value?.prizes?.length) t.push({ key: 'prizes', label: 'Prizes', icon: 'fa-trophy' });
+  t.push({ key: 'entries', label: 'Entries', icon: 'fa-box-open', count: c.value?.entryCount ?? entries.value.length });
+  if (judges.value.length || isOwner.value) t.push({ key: 'judges', label: 'Judges', icon: 'fa-gavel', count: judges.value.length || undefined });
+  return t;
+});
+const activeTab = ref('overview');
+watch(tabs, (list) => {
+  if (!list.some((t) => t.key === activeTab.value)) activeTab.value = 'overview';
+});
+
+// WAI-ARIA tabs keyboard pattern (arrow keys + Home/End, roving focus).
+function focusTab(key: string): void {
+  activeTab.value = key;
+  nextTick(() => {
+    if (typeof document !== 'undefined') document.getElementById(`cpub-tab-${key}`)?.focus();
+  });
+}
+function onTabKey(e: KeyboardEvent, key: string): void {
+  const keys = tabs.value.map((t) => t.key);
+  const i = keys.indexOf(key);
+  if (i < 0) return;
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); focusTab(keys[(i + 1) % keys.length]!); }
+  else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); focusTab(keys[(i - 1 + keys.length) % keys.length]!); }
+  else if (e.key === 'Home') { e.preventDefault(); focusTab(keys[0]!); }
+  else if (e.key === 'End') { e.preventDefault(); focusTab(keys[keys.length - 1]!); }
+}
 
 // Admin contest management
 const transitioning = ref(false);
-
 async function transitionStatus(newStatus: string): Promise<void> {
   if (newStatus === 'cancelled' && !confirm('Cancel this contest? This cannot be undone.')) return;
   transitioning.value = true;
   try {
-    await $fetch(`/api/contests/${slug}/transition`, {
-      method: 'POST',
-      body: { status: newStatus },
-    });
+    await $fetch(`/api/contests/${slug}/transition`, { method: 'POST', body: { status: newStatus } });
     toast.success(`Contest ${newStatus}`);
     refreshNuxtData();
   } catch {
@@ -40,6 +75,21 @@ async function transitionStatus(newStatus: string): Promise<void> {
   }
 }
 
+// Judge invite acceptance
+const accepting = ref(false);
+async function acceptInvite(): Promise<void> {
+  accepting.value = true;
+  try {
+    await $fetch(`/api/contests/${slug}/judges/accept`, { method: 'POST' });
+    toast.success('You are now a judge for this contest');
+    await refreshJudges();
+  } catch {
+    toast.error('Failed to accept invitation');
+  } finally {
+    accepting.value = false;
+  }
+}
+
 // Entry submission
 const showSubmitDialog = ref(false);
 const submitContentId = ref('');
@@ -48,6 +98,7 @@ const { data: userContent } = useFetch('/api/content', {
   query: { status: 'published', limit: 50 },
   immediate: isAuthenticated.value,
 });
+const enteredContentIds = computed(() => new Set(entries.value.map((e) => e.contentId)));
 
 function copyLink(): void {
   if (typeof window !== 'undefined' && window.navigator?.clipboard) {
@@ -60,10 +111,7 @@ async function submitEntry(): Promise<void> {
   if (!submitContentId.value) return;
   submitting.value = true;
   try {
-    await $fetch(`/api/contests/${slug}/entries`, {
-      method: 'POST',
-      body: { contentId: submitContentId.value },
-    });
+    await $fetch(`/api/contests/${slug}/entries`, { method: 'POST', body: { contentId: submitContentId.value } });
     showSubmitDialog.value = false;
     submitContentId.value = '';
     toast.success('Entry submitted!');
@@ -103,14 +151,19 @@ async function withdrawEntry(entryId: string): Promise<void> {
       <div class="cpub-submit-dialog" role="dialog" aria-label="Submit entry">
         <div class="cpub-submit-header">
           <h2>Submit Entry</h2>
-          <button class="cpub-submit-close" @click="showSubmitDialog = false"><i class="fa-solid fa-times"></i></button>
+          <button class="cpub-submit-close" aria-label="Close" @click="showSubmitDialog = false"><i class="fa-solid fa-times"></i></button>
         </div>
         <div class="cpub-submit-body">
           <p class="cpub-submit-hint">Select one of your published projects to submit as an entry.</p>
-          <select v-model="submitContentId" class="cpub-submit-select">
+          <select v-model="submitContentId" class="cpub-submit-select" aria-label="Select a project to submit">
             <option value="">Select a project...</option>
-            <option v-for="item in (userContent?.items ?? [])" :key="item.id" :value="item.id">
-              {{ item.title }} ({{ item.type }})
+            <option
+              v-for="item in (userContent?.items ?? [])"
+              :key="item.id"
+              :value="item.id"
+              :disabled="enteredContentIds.has(item.id)"
+            >
+              {{ item.title }} ({{ item.type }}){{ enteredContentIds.has(item.id) ? ' — already entered' : '' }}
             </option>
           </select>
         </div>
@@ -126,32 +179,80 @@ async function withdrawEntry(entryId: string): Promise<void> {
     <!-- MAIN CONTENT -->
     <div class="cpub-contest-main">
       <div class="cpub-contest-layout">
-        <div>
-          <!-- ABOUT -->
-          <div class="cpub-about-section">
-            <div class="cpub-sec-head">
-              <h2><i class="fa fa-circle-info" style="color: var(--accent);"></i> About This Contest</h2>
+        <div class="cpub-contest-body">
+          <!-- Judge invite banner -->
+          <div v-if="pendingInvite" class="cpub-invite-banner">
+            <div class="cpub-invite-text">
+              <i class="fa-solid fa-gavel"></i>
+              <span>You've been invited to judge this contest.</span>
             </div>
-            <div class="cpub-about-card">
-              <p>{{ c?.description || 'No description available for this contest.' }}</p>
+            <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="accepting" @click="acceptInvite">
+              {{ accepting ? 'Accepting...' : 'Accept invitation' }}
+            </button>
+          </div>
+
+          <!-- Tab bar -->
+          <div class="cpub-tabbar" role="tablist" aria-label="Contest sections">
+            <button
+              v-for="tab in tabs"
+              :id="`cpub-tab-${tab.key}`"
+              :key="tab.key"
+              role="tab"
+              type="button"
+              class="cpub-tab"
+              :class="{ 'cpub-tab-active': activeTab === tab.key }"
+              :aria-selected="activeTab === tab.key"
+              :aria-controls="`cpub-panel-${tab.key}`"
+              :tabindex="activeTab === tab.key ? 0 : -1"
+              @click="activeTab = tab.key"
+              @keydown="onTabKey($event, tab.key)"
+            >
+              <i class="fa-solid" :class="tab.icon"></i> {{ tab.label }}
+              <span v-if="tab.count != null" class="cpub-tab-count">{{ tab.count }}</span>
+            </button>
+          </div>
+
+          <!-- OVERVIEW -->
+          <div v-show="activeTab === 'overview'" id="cpub-panel-overview" role="tabpanel" aria-labelledby="cpub-tab-overview" tabindex="0">
+            <div class="cpub-about-section">
+              <div class="cpub-sec-head"><h2><i class="fa fa-circle-info" style="color: var(--accent);"></i> About This Contest</h2></div>
+              <div class="cpub-about-card">
+                <p>{{ c?.description || 'No description available for this contest.' }}</p>
+              </div>
             </div>
+            <ContestJudgingCriteria v-if="c?.judgingCriteria?.length" :criteria="c.judgingCriteria" />
+          </div>
+
+          <!-- RULES -->
+          <div v-show="activeTab === 'rules'" id="cpub-panel-rules" role="tabpanel" aria-labelledby="cpub-tab-rules" tabindex="0">
+            <ContestRules v-if="c?.rules" :rules="c.rules" />
+          </div>
+
+          <!-- PRIZES -->
+          <div v-show="activeTab === 'prizes'" id="cpub-panel-prizes" role="tabpanel" aria-labelledby="cpub-tab-prizes" tabindex="0">
+            <ContestPrizes v-if="c?.prizes?.length" :prizes="c.prizes" />
+          </div>
+
+          <!-- ENTRIES -->
+          <div v-show="activeTab === 'entries'" id="cpub-panel-entries" role="tabpanel" aria-labelledby="cpub-tab-entries" tabindex="0">
+            <ContestEntries
+              :entries="entries"
+              :contest-status="c?.status"
+              :contest-slug="slug"
+              :current-user-id="user?.id"
+              :community-voting-enabled="c?.communityVotingEnabled"
+              @withdraw="withdrawEntry"
+            />
           </div>
 
-          <ContestRules v-if="c?.rules" :rules="c.rules" />
-          <ContestPrizes v-if="c?.prizes?.length" :prizes="c.prizes" />
-          <ContestJudges v-if="c?.judges?.length" :judge-ids="c.judges" />
-          <ContestJudgeManager v-if="isOwner && c" :contest-slug="slug" :is-owner="isOwner" />
-          <ContestEntries
-            :entries="entries"
-            :contest-status="c?.status"
-            :contest-slug="slug"
-            :current-user-id="user?.id"
-            :community-voting-enabled="c?.communityVotingEnabled"
-            @withdraw="withdrawEntry"
-          />
+          <!-- JUDGES -->
+          <div v-show="activeTab === 'judges'" id="cpub-panel-judges" role="tabpanel" aria-labelledby="cpub-tab-judges" tabindex="0">
+            <ContestJudges :judges="judges" />
+            <ContestJudgeManager v-if="isOwner && c" :contest-slug="slug" :is-owner="isOwner" @changed="refreshJudges" />
+          </div>
         </div>
 
-        <ContestSidebar :contest="c" :is-owner="isOwner" :is-judge="isJudge" @copy-link="copyLink" />
+        <ContestSidebar :contest="c" :is-owner="isOwner" :can-judge="canJudge" @copy-link="copyLink" />
       </div>
     </div>
   </div>
@@ -173,6 +274,23 @@ async function withdrawEntry(entryId: string): Promise<void> {
 /* LAYOUT */
 .cpub-contest-main { max-width: 1100px; margin: 0 auto; padding: 32px; }
 .cpub-contest-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
+.cpub-contest-body { min-width: 0; }
+
+/* INVITE BANNER */
+.cpub-invite-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
+.cpub-invite-text { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
+.cpub-invite-text i { color: var(--accent); }
+
+/* TABS */
+.cpub-tabbar { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: var(--border-width-default) solid var(--border); margin-bottom: 20px; }
+.cpub-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); cursor: pointer; }
+.cpub-tab:hover { color: var(--text-dim); }
+.cpub-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
+.cpub-tab i { font-size: 11px; }
+.cpub-tab-count { font-size: 9px; padding: 1px 6px; background: var(--surface2); border: var(--border-width-default) solid var(--border2); color: var(--text-dim); }
+.cpub-tab-active .cpub-tab-count { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
+
+[role="tabpanel"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
 
 /* SECTION HEADERS */
 .cpub-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
@@ -181,7 +299,7 @@ async function withdrawEntry(entryId: string): Promise<void> {
 /* ABOUT */
 .cpub-about-section { margin-bottom: 20px; }
 .cpub-about-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-md); font-size: 12px; color: var(--text-dim); line-height: 1.7; }
-.cpub-about-card p { margin: 0; }
+.cpub-about-card p { margin: 0; white-space: pre-line; }
 
 @media (max-width: 768px) {
   .cpub-contest-main { padding: 20px 16px; }