@commonpub/layer 0.25.1 → 0.27.0

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,15 @@ 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)));
+
+// Restrict the submit picker to the contest's eligible content types (if set).
+const eligibleTypes = computed<string[]>(() => (c.value?.eligibleContentTypes as string[] | undefined) ?? []);
+const submittableContent = computed(() => {
+  const items = (userContent.value?.items ?? []) as Array<{ id: string; title: string; type: string }>;
+  if (eligibleTypes.value.length === 0) return items;
+  return items.filter((i) => eligibleTypes.value.includes(i.type));
+});
 
 function copyLink(): void {
   if (typeof window !== 'undefined' && window.navigator?.clipboard) {
@@ -60,10 +119,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,16 +159,27 @@ 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">
+          <p class="cpub-submit-hint">
+            Select one of your published projects to submit as an entry.
+            <template v-if="eligibleTypes.length"> This contest accepts: {{ eligibleTypes.join(', ') }}.</template>
+          </p>
+          <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 submittableContent"
+              :key="item.id"
+              :value="item.id"
+              :disabled="enteredContentIds.has(item.id)"
+            >
+              {{ item.title }} ({{ item.type }}){{ enteredContentIds.has(item.id) ? ' — already entered' : '' }}
             </option>
           </select>
+          <p v-if="submittableContent.length === 0" class="cpub-submit-hint" style="margin-top: 10px; margin-bottom: 0;">
+            No eligible published content found.
+          </p>
         </div>
         <div class="cpub-submit-footer">
           <button class="cpub-btn cpub-btn-sm" @click="showSubmitDialog = false">Cancel</button>
@@ -126,32 +193,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>
 
-          <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"
-          />
+          <!-- 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>
+
+          <!-- 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 +288,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 +313,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; }

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

@@ -4,10 +4,12 @@ definePageMeta({ middleware: 'auth' });
 const route = useRoute();
 const slug = route.params.slug as string;
 const { user } = useAuth();
+const toast = useToast();
 
-import type { Serialized, ContestDetail, ContestEntryItem } from '@commonpub/server';
+import type { Serialized, ContestDetail, ContestEntryItem, ContestJudgeItem } from '@commonpub/server';
 
 const { data: contest } = useLazyFetch<Serialized<ContestDetail>>(`/api/contests/${slug}`);
+const { data: judgesData, refresh: refreshJudges } = useLazyFetch<ContestJudgeItem[]>(`/api/contests/${slug}/judges`);
 const { data: entriesData, refresh: refreshEntries } = useLazyFetch<{ items: (Serialized<ContestEntryItem> & { judgeScores?: Array<{ judgeId: string; score: number; feedback?: string }> })[]; total: number }>(
   `/api/contests/${slug}/entries`,
   { query: { includeJudgeScores: true } },
@@ -15,10 +17,26 @@ const { data: entriesData, refresh: refreshEntries } = useLazyFetch<{ items: (Se
 
 useSeoMeta({ title: () => `Judge: ${contest.value?.title || 'Contest'} — ${useSiteName()}` });
 
-const isJudge = computed(() => {
-  if (!contest.value || !user.value) return false;
-  return ((contest.value.judges ?? []) as string[]).includes(user.value.id);
-});
+// Judge authorization derives from the contest_judges table.
+const myJudge = computed(() => (judgesData.value ?? []).find((j) => j.userId === user.value?.id) ?? null);
+const pendingInvite = computed(() => !!myJudge.value && !myJudge.value.acceptedAt);
+const isGuest = computed(() => myJudge.value?.role === 'guest');
+const canScore = computed(() => !!myJudge.value && !!myJudge.value.acceptedAt && !isGuest.value);
+const inJudgingPhase = computed(() => contest.value?.status === 'judging');
+
+const accepting = ref(false);
+async function acceptInvite(): Promise<void> {
+  accepting.value = true;
+  try {
+    await $fetch(`/api/contests/${slug}/judges/accept`, { method: 'POST' });
+    toast.success('Invitation accepted');
+    await refreshJudges();
+  } catch {
+    toast.error('Failed to accept invitation');
+  } finally {
+    accepting.value = false;
+  }
+}
 
 const entryList = computed(() => {
   const items = entriesData.value?.items ?? [];
@@ -63,6 +81,10 @@ watch(entryList, (list) => {
 }, { immediate: true });
 
 async function submitScore(entryId: string): Promise<void> {
+  if (!inJudgingPhase.value) {
+    error.value = 'Scoring is only open during the judging phase.';
+    return;
+  }
   const score = scoring.value[entryId];
   if (score === undefined || score < 1 || score > 100) {
     error.value = 'Score must be between 1 and 100.';
@@ -83,7 +105,9 @@ async function submitScore(entryId: string): Promise<void> {
       },
     });
     success.value = 'Score submitted for entry.';
-    await refreshEntries();
+    await refreshEntries().catch(() => {
+      success.value = 'Score saved — refresh to see the updated totals.';
+    });
   } catch (err: unknown) {
     error.value = (err as { data?: { message?: string } })?.data?.message || 'Failed to submit score.';
   } finally {
@@ -106,18 +130,45 @@ async function submitScore(entryId: string): Promise<void> {
     </header>
 
     <!-- Loading -->
-    <div v-if="!contest" class="cpub-judge-empty">
+    <div v-if="!contest || !judgesData" class="cpub-judge-empty">
       <p>Loading...</p>
     </div>
 
-    <!-- Auth guard -->
-    <div v-else-if="!isJudge" class="cpub-judge-unauthorized">
+    <!-- Not a judge -->
+    <div v-else-if="!myJudge" class="cpub-judge-unauthorized">
       <i class="fa-solid fa-lock"></i>
       <p>You are not a judge for this contest.</p>
       <NuxtLink :to="`/contests/${slug}`" class="cpub-btn cpub-btn-sm">Back to Contest</NuxtLink>
     </div>
 
+    <!-- Pending invitation -->
+    <div v-else-if="pendingInvite" class="cpub-judge-unauthorized">
+      <i class="fa-solid fa-envelope-open-text"></i>
+      <p>You've been invited to judge this contest. Accept to begin scoring.</p>
+      <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="accepting" @click="acceptInvite">
+        {{ accepting ? 'Accepting...' : 'Accept invitation' }}
+      </button>
+    </div>
+
+    <!-- Guest judge (view-only) -->
+    <div v-else-if="isGuest" class="cpub-judge-unauthorized">
+      <i class="fa-solid fa-eye"></i>
+      <p>You are a guest judge and can view entries but cannot submit scores.</p>
+      <NuxtLink :to="`/contests/${slug}`" class="cpub-btn cpub-btn-sm">Back to Contest</NuxtLink>
+    </div>
+
     <template v-else>
+      <!-- Judging not open yet -->
+      <div v-if="!inJudgingPhase" class="cpub-judge-notice" role="status">
+        <i class="fa-solid fa-circle-info"></i>
+        Scoring opens when the contest enters the judging phase (currently <strong>{{ contest.status }}</strong>).
+      </div>
+
+      <!-- Rubric guidance -->
+      <div v-if="contest.judgingCriteria?.length" class="cpub-judge-rubric">
+        <ContestJudgingCriteria :criteria="contest.judgingCriteria" compact />
+      </div>
+
       <!-- Progress bar -->
       <div v-if="totalCount > 0" class="cpub-judge-progress">
         <div class="cpub-judge-progress-label">
@@ -162,7 +213,7 @@ async function submitScore(entryId: string): Promise<void> {
                 />
                 <button
                   class="cpub-judge-score-btn"
-                  :disabled="submitting === entry.id"
+                  :disabled="submitting === entry.id || !inJudgingPhase"
                   @click="submitScore(entry.id)"
                 >
                   {{ submitting === entry.id ? '...' : entry.myScore !== null ? 'Update' : 'Score' }}
@@ -195,6 +246,10 @@ async function submitScore(entryId: string): Promise<void> {
 .cpub-judge-unauthorized { text-align: center; padding: 48px 0; color: var(--text-faint); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
 .cpub-judge-unauthorized i { font-size: 24px; }
 
+.cpub-judge-notice { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 12px; color: var(--text-dim); background: var(--surface2); border: var(--border-width-default) solid var(--border); }
+.cpub-judge-notice i { color: var(--accent); }
+.cpub-judge-rubric { margin-bottom: 20px; }
+
 .cpub-judge-progress { margin-bottom: 20px; }
 .cpub-judge-progress-label { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 6px; }
 .cpub-judge-progress-bar { height: 6px; background: var(--surface2); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); overflow: hidden; }

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

@@ -1,16 +1,37 @@
 <script setup lang="ts">
-import type { Serialized, ContestDetail, ContestEntryItem } from '@commonpub/server';
+import type { Serialized, ContestDetail, ContestEntryItem, ContestEntryVoteInfo } from '@commonpub/server';
 
 const route = useRoute();
 const slug = route.params.slug as string;
 
 const { data: contest } = useLazyFetch<Serialized<ContestDetail>>(`/api/contests/${slug}`);
 const { data: entriesData } = useLazyFetch<{ items: Serialized<ContestEntryItem>[]; total: number }>(`/api/contests/${slug}/entries`);
+const { data: votesData } = useLazyFetch<ContestEntryVoteInfo[]>(`/api/contests/${slug}/votes`);
 
 useSeoMeta({
   title: () => `Results: ${contest.value?.title || 'Contest'} — ${useSiteName()}`,
 });
 
+// Community-vote tallies (only when the contest enabled community voting).
+const votingEnabled = computed(() => !!contest.value?.communityVotingEnabled);
+const voteCounts = computed<Map<string, number>>(() => {
+  const m = new Map<string, number>();
+  for (const v of votesData.value ?? []) m.set(v.entryId, v.count);
+  return m;
+});
+function voteCount(entryId: string): number {
+  return voteCounts.value.get(entryId) ?? 0;
+}
+const communityChoice = computed(() => {
+  if (!votingEnabled.value) return null;
+  let best: { id: string; count: number } | null = null;
+  for (const [id, count] of voteCounts.value) {
+    if (count > 0 && (!best || count > best.count)) best = { id, count };
+  }
+  if (!best) return null;
+  return rankedEntries.value.find((e) => e.id === best!.id) ?? null;
+});
+
 const rankedEntries = computed(() => {
   const items = [...(entriesData.value?.items ?? [])];
   items.sort((a, b) => (a.rank ?? 999) - (b.rank ?? 999));
@@ -23,7 +44,7 @@ const leaderboard = computed(() => rankedEntries.value);
 const prizes = computed(() => contest.value?.prizes ?? []);
 
 function prizeForRank(rank: number): { title: string; value?: string } | null {
-  const prize = prizes.value.find((p: { place: number; title: string; value?: string }) => p.place === rank);
+  const prize = prizes.value.find((p: { place?: number; title: string; value?: string }) => p.place === rank);
   return prize ?? null;
 }
 
@@ -62,6 +83,13 @@ function medalColor(rank: number): string {
     </div>
 
     <template v-else-if="contest">
+      <!-- COMMUNITY CHOICE -->
+      <div v-if="communityChoice" class="cpub-community-choice">
+        <div class="cpub-cc-label"><i class="fa-solid fa-heart"></i> Community Choice</div>
+        <NuxtLink :to="`/u/${communityChoice.authorUsername}/${communityChoice.contentType}/${communityChoice.contentSlug}`" class="cpub-cc-title">{{ communityChoice.contentTitle }}</NuxtLink>
+        <span class="cpub-cc-meta">by {{ communityChoice.authorName }} · {{ voteCount(communityChoice.id) }} votes</span>
+      </div>
+
       <!-- PODIUM -->
       <div v-if="podium.length > 0" class="cpub-podium">
         <div
@@ -100,6 +128,7 @@ function medalColor(rank: number): string {
               <th>Entry</th>
               <th>Author</th>
               <th>Score</th>
+              <th v-if="votingEnabled">Votes</th>
             </tr>
           </thead>
           <tbody>
@@ -117,6 +146,7 @@ function medalColor(rank: number): string {
                 <NuxtLink :to="`/u/${entry.authorUsername}`" class="cpub-lb-author-link">{{ entry.authorName }}</NuxtLink>
               </td>
               <td class="cpub-lb-score">{{ entry.score ?? '—' }}</td>
+              <td v-if="votingEnabled" class="cpub-lb-votes"><i class="fa-solid fa-heart"></i> {{ voteCount(entry.id) }}</td>
             </tr>
           </tbody>
         </table>
@@ -166,6 +196,14 @@ function medalColor(rank: number): string {
 .cpub-lb-top3 { background: var(--surface2); }
 .cpub-lb-rank { font-family: var(--font-mono); font-weight: 700; display: flex; align-items: center; gap: 6px; }
 .cpub-lb-score { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
+.cpub-lb-votes { font-family: var(--font-mono); color: var(--red); }
+.cpub-lb-votes i { font-size: 10px; }
+
+.cpub-community-choice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 24px; background: var(--red-bg); border: var(--border-width-default) solid var(--red-border); }
+.cpub-cc-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red); display: flex; align-items: center; gap: 5px; }
+.cpub-cc-title { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; }
+.cpub-cc-title:hover { color: var(--accent); }
+.cpub-cc-meta { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
 .cpub-lb-entry-link { color: var(--text); text-decoration: none; font-weight: 500; }
 .cpub-lb-entry-link:hover { color: var(--accent); }
 .cpub-lb-author-link { color: var(--text-dim); text-decoration: none; }