@commonpub/layer 0.25.1 → 0.26.0

package/components/contest/ContestHero.vue

@@ -23,7 +23,11 @@ let countdownInterval: ReturnType<typeof setInterval> | null = null;
 function pad(n: number): string { return String(n).padStart(2, '0'); }
 
 function updateCountdown(): void {
-  const target = c.value?.endDate ? new Date(c.value.endDate) : new Date();
+  // During judging, count down to the judging deadline (if set); otherwise the
+  // submission end date.
+  const isJudging = c.value?.status === 'judging';
+  const targetStr = isJudging ? (c.value?.judgingEndDate ?? c.value?.endDate) : c.value?.endDate;
+  const target = targetStr ? new Date(targetStr) : new Date();
   const now = new Date();
   let diff = Math.max(0, Math.floor((target.getTime() - now.getTime()) / 1000));
   const days = Math.floor(diff / 86400); diff %= 86400;
@@ -126,7 +130,7 @@ const isEnded = computed(() => c.value?.status === 'completed' || c.value?.statu
           <div class="cpub-hero-stat-label">Entries</div>
         </div>
         <div class="cpub-hero-stat">
-          <div class="cpub-hero-stat-val">{{ c?.status ?? 'draft' }}</div>
+          <div class="cpub-hero-stat-val">{{ c?.status ?? 'upcoming' }}</div>
           <div class="cpub-hero-stat-label">Status</div>
         </div>
       </div>

package/components/contest/ContestJudgeManager.vue

@@ -6,6 +6,8 @@ const props = defineProps<{
   isOwner: boolean;
 }>();
 
+const emit = defineEmits<{ (e: 'changed'): void }>();
+
 const toast = useToast();
 const { data: judges, refresh } = useLazyFetch<ContestJudgeItem[]>(
   `/api/contests/${props.contestSlug}/judges`,
@@ -49,10 +51,11 @@ async function addJudge(userId: string): Promise<void> {
       method: 'POST',
       body: { userId, role: newJudgeRole.value },
     });
-    toast.success('Judge added');
+    toast.success('Judge invited');
     searchQuery.value = '';
     searchResults.value = [];
     await refresh();
+    emit('changed');
   } catch {
     toast.error('Failed to add judge');
   } finally {
@@ -66,6 +69,7 @@ async function removeJudge(userId: string): Promise<void> {
     await ($fetch as Function)(`/api/contests/${props.contestSlug}/judges/${userId}`, { method: 'DELETE' });
     toast.success('Judge removed');
     await refresh();
+    emit('changed');
   } catch {
     toast.error('Failed to remove judge');
   }

package/components/contest/ContestJudges.vue

@@ -1,35 +1,30 @@
 <script setup lang="ts">
-const props = defineProps<{
-  judgeIds: string[];
-}>();
-
-interface JudgeInfo {
-  id: string;
-  username: string;
-  displayName: string | null;
-  avatarUrl: string | null;
-}
+import type { ContestJudgeItem } from '@commonpub/server';
 
-const { data: judgesData } = useLazyFetch<{ items: JudgeInfo[] }>('/api/users', {
-  query: computed(() => ({ ids: props.judgeIds.join(','), limit: 50 })),
-  immediate: props.judgeIds.length > 0,
-});
+defineProps<{
+  judges: ContestJudgeItem[];
+}>();
 
-const judges = computed<JudgeInfo[]>(() => judgesData.value?.items ?? []);
+const roleLabels: Record<string, string> = {
+  lead: 'Lead Judge',
+  judge: 'Judge',
+  guest: 'Guest Judge',
+};
 </script>
 
 <template>
-  <div v-if="judgeIds.length > 0" class="cpub-judges-section">
+  <div v-if="judges.length > 0" class="cpub-judges-section">
     <div class="cpub-sec-head">
       <h2><i class="fa-solid fa-gavel" style="color: var(--accent);"></i> Judges</h2>
     </div>
     <div class="cpub-judges-grid">
       <div v-for="judge in judges" :key="judge.id" class="cpub-judge-card">
         <div class="cpub-judge-av">
-          <img v-if="judge.avatarUrl" :src="judge.avatarUrl" :alt="judge.displayName || judge.username" class="cpub-judge-av-img" />
-          <span v-else>{{ (judge.displayName || judge.username || '?').charAt(0).toUpperCase() }}</span>
+          <img v-if="judge.userAvatar" :src="judge.userAvatar" :alt="judge.userName" class="cpub-judge-av-img" />
+          <span v-else>{{ (judge.userName || '?').charAt(0).toUpperCase() }}</span>
         </div>
-        <NuxtLink :to="`/u/${judge.username}`" class="cpub-judge-name">{{ judge.displayName || judge.username }}</NuxtLink>
+        <NuxtLink :to="`/u/${judge.userUsername}`" class="cpub-judge-name">{{ judge.userName }}</NuxtLink>
+        <div class="cpub-judge-role">{{ roleLabels[judge.role] || judge.role }}</div>
       </div>
     </div>
   </div>
@@ -43,8 +38,9 @@ const judges = computed<JudgeInfo[]>(() => judgesData.value?.items ?? []);
 .cpub-judge-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow-md); }
 .cpub-judge-av { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-family: var(--font-mono); border: var(--border-width-default) solid var(--border); background: var(--surface3); color: var(--text-dim); overflow: hidden; }
 .cpub-judge-av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
-.cpub-judge-name { font-size: 11px; font-weight: 600; color: var(--text); text-decoration: none; }
+.cpub-judge-name { font-size: 11px; font-weight: 600; color: var(--text); text-decoration: none; display: block; }
 .cpub-judge-name:hover { color: var(--accent); }
+.cpub-judge-role { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-top: 3px; }
 
 @media (max-width: 768px) { .cpub-judges-grid { grid-template-columns: 1fr 1fr; } }
 @media (max-width: 480px) { .cpub-judges-grid { grid-template-columns: 1fr; } }

package/components/contest/ContestJudgingCriteria.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { ContestJudgingCriterion } from '@commonpub/server';
+
+const props = defineProps<{
+  criteria: ContestJudgingCriterion[];
+  /** Render in a denser, frameless layout (used as in-page guidance). */
+  compact?: boolean;
+}>();
+
+const totalWeight = computed(() =>
+  props.criteria.reduce((sum, c) => sum + (c.weight ?? 0), 0),
+);
+const hasWeights = computed(() => props.criteria.some((c) => (c.weight ?? 0) > 0));
+</script>
+
+<template>
+  <div v-if="criteria.length > 0" class="cpub-criteria-section" :class="{ 'cpub-criteria-compact': compact }">
+    <div v-if="!compact" class="cpub-sec-head">
+      <h2><i class="fa-solid fa-list-check" style="color: var(--teal);"></i> Judging Criteria</h2>
+      <span v-if="hasWeights" class="cpub-sec-sub">{{ totalWeight }} pts total</span>
+    </div>
+    <div class="cpub-criteria-card">
+      <div v-for="(crit, i) in criteria" :key="i" class="cpub-criterion">
+        <div class="cpub-criterion-head">
+          <span class="cpub-criterion-label">{{ crit.label }}</span>
+          <span v-if="crit.weight != null && crit.weight > 0" class="cpub-criterion-weight">{{ crit.weight }} pts</span>
+        </div>
+        <p v-if="crit.description" class="cpub-criterion-desc">{{ crit.description }}</p>
+        <div v-if="hasWeights && crit.weight" class="cpub-criterion-bar">
+          <div class="cpub-criterion-bar-fill" :style="{ width: `${Math.min(100, (crit.weight / Math.max(totalWeight, 1)) * 100)}%` }"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+.cpub-sec-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
+.cpub-sec-sub { font-size: 11px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); }
+
+.cpub-criteria-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 14px; }
+.cpub-criteria-compact .cpub-criteria-card { box-shadow: none; border-style: dashed; margin-bottom: 0; }
+
+.cpub-criterion-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+.cpub-criterion-label { font-size: 13px; font-weight: 600; color: var(--text); }
+.cpub-criterion-weight { font-size: 10px; font-family: var(--font-mono); font-weight: 700; color: var(--accent); white-space: nowrap; }
+.cpub-criterion-desc { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 4px 0 0; }
+.cpub-criterion-bar { height: 4px; background: var(--surface2); border: var(--border-width-default) solid var(--border); margin-top: 8px; overflow: hidden; }
+.cpub-criterion-bar-fill { height: 100%; background: var(--accent); }
+</style>

package/components/contest/ContestPrizes.vue

@@ -1,26 +1,31 @@
 <script setup lang="ts">
+interface Prize { place?: number; category?: string; title: string; description?: string; value?: string }
 defineProps<{
-  prizes: Array<{ place: number; title: string; description?: string; value?: string }>;
+  prizes: Prize[];
 }>();
 
-function placeLabel(place: number): string {
+function prizeLabel(prize: Prize): string {
+  if (prize.category) return prize.category.toUpperCase();
+  const place = prize.place;
   if (place === 1) return '1ST PLACE';
   if (place === 2) return '2ND PLACE';
   if (place === 3) return '3RD PLACE';
-  return `${place}TH PLACE`;
+  if (place) return `${place}TH PLACE`;
+  return 'PRIZE';
 }
 
-function placeColor(place: number): string {
-  if (place === 1) return 'gold';
-  if (place === 2) return 'silver';
-  if (place === 3) return 'bronze';
+function prizeColor(prize: Prize): string {
+  if (prize.category) return 'default';
+  if (prize.place === 1) return 'gold';
+  if (prize.place === 2) return 'silver';
+  if (prize.place === 3) return 'bronze';
   return 'default';
 }
 
-function placeIcon(place: number): string {
-  if (place === 1) return 'fa-trophy';
-  if (place === 2) return 'fa-medal';
-  if (place === 3) return 'fa-award';
+function prizeIcon(prize: Prize): string {
+  if (prize.place === 1) return 'fa-trophy';
+  if (prize.place === 2) return 'fa-medal';
+  if (prize.place === 3) return 'fa-award';
   return 'fa-star';
 }
 </script>
@@ -32,14 +37,14 @@ function placeIcon(place: number): string {
     </div>
     <div class="cpub-prize-grid">
       <div
-        v-for="prize in prizes"
-        :key="prize.place"
+        v-for="(prize, i) in prizes"
+        :key="i"
         class="cpub-prize-card"
-        :class="`cpub-prize-${placeColor(prize.place)}`"
+        :class="`cpub-prize-${prizeColor(prize)}`"
       >
-        <div class="cpub-prize-rank" :class="`cpub-prize-rank-${placeColor(prize.place)}`">{{ placeLabel(prize.place) }}</div>
-        <div class="cpub-prize-icon" :class="`cpub-prize-icon-${placeColor(prize.place)}`"><i class="fa-solid" :class="placeIcon(prize.place)"></i></div>
-        <div v-if="prize.value" class="cpub-prize-amount" :class="`cpub-prize-amount-${placeColor(prize.place)}`">{{ prize.value }}</div>
+        <div class="cpub-prize-rank" :class="`cpub-prize-rank-${prizeColor(prize)}`">{{ prizeLabel(prize) }}</div>
+        <div class="cpub-prize-icon" :class="`cpub-prize-icon-${prizeColor(prize)}`"><i class="fa-solid" :class="prizeIcon(prize)"></i></div>
+        <div v-if="prize.value" class="cpub-prize-amount" :class="`cpub-prize-amount-${prizeColor(prize)}`">{{ prize.value }}</div>
         <div class="cpub-prize-title">{{ prize.title }}</div>
         <div v-if="prize.description" class="cpub-prize-desc">{{ prize.description }}</div>
       </div>

package/components/contest/ContestSidebar.vue

@@ -1,16 +1,43 @@
 <script setup lang="ts">
 import type { Serialized, ContestDetail } from '@commonpub/server';
 
-defineProps<{
+const props = defineProps<{
   contest: Serialized<ContestDetail> | null;
   isOwner?: boolean;
-  isJudge?: boolean;
+  /** True when the viewer is an accepted, non-guest judge able to score. */
+  canJudge?: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'copy-link'): void;
 }>();
 
+type StepState = 'done' | 'current' | 'upcoming';
+interface TimelineStep { label: string; date: string | null; state: StepState; icon: string }
+
+function fmt(d: string | null | undefined): string | null {
+  if (!d) return null;
+  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+// Ordinal position of each status along the lifecycle, used to mark steps
+// done / current / upcoming.
+const STATUS_ORDER: Record<string, number> = { upcoming: 0, active: 1, judging: 2, completed: 3 };
+
+const timeline = computed<TimelineStep[]>(() => {
+  const c = props.contest;
+  if (!c || c.status === 'cancelled') return [];
+  const pos = STATUS_ORDER[c.status] ?? 0;
+  const stepState = (idx: number): StepState => (idx < pos ? 'done' : idx === pos ? 'current' : 'upcoming');
+  const steps: TimelineStep[] = [
+    { label: 'Opens', date: fmt(c.startDate), state: stepState(0), icon: 'fa-flag' },
+    { label: 'Submissions close', date: fmt(c.endDate), state: stepState(1), icon: 'fa-pen-to-square' },
+    { label: 'Judging', date: fmt(c.judgingEndDate) ?? fmt(c.endDate), state: stepState(2), icon: 'fa-gavel' },
+    { label: 'Results', date: null, state: stepState(3), icon: 'fa-ranking-star' },
+  ];
+  return steps;
+});
+
 function statusClass(status: string): string {
   const map: Record<string, string> = {
     upcoming: 'cpub-status-upcoming',
@@ -25,7 +52,7 @@ function statusClass(status: string): string {
 
 <template>
   <div class="cpub-sidebar">
-    <!-- STATUS -->
+    <!-- STATUS + TIMELINE -->
     <div class="cpub-sb-card">
       <div class="cpub-sb-title"><i class="fa-solid fa-circle-info"></i> Status</div>
       <div class="cpub-sb-body">
@@ -33,11 +60,24 @@ function statusClass(status: string): string {
           <strong>Status:</strong>
           <span class="cpub-sb-status" :class="statusClass(contest?.status ?? '')">{{ contest?.status ?? 'unknown' }}</span>
         </div>
-        <div v-if="contest?.startDate" class="cpub-sb-row"><strong>Starts:</strong> {{ new Date(contest.startDate).toLocaleDateString() }}</div>
-        <div v-if="contest?.endDate" class="cpub-sb-row"><strong>Ends:</strong> {{ new Date(contest.endDate).toLocaleDateString() }}</div>
-        <div v-if="contest?.judgingEndDate" class="cpub-sb-row"><strong>Judging ends:</strong> {{ new Date(contest.judgingEndDate).toLocaleDateString() }}</div>
         <div class="cpub-sb-row"><strong>Entries:</strong> {{ contest?.entryCount ?? 0 }}</div>
       </div>
+
+      <ol v-if="timeline.length" class="cpub-timeline">
+        <li
+          v-for="step in timeline"
+          :key="step.label"
+          class="cpub-tl-step"
+          :class="`cpub-tl-${step.state}`"
+        >
+          <span class="cpub-tl-dot"><i class="fa-solid" :class="step.icon"></i></span>
+          <div class="cpub-tl-content">
+            <div class="cpub-tl-label">{{ step.label }}<span v-if="step.state === 'current'" class="cpub-tl-now">Now</span></div>
+            <div v-if="step.date" class="cpub-tl-date">{{ step.date }}</div>
+          </div>
+        </li>
+      </ol>
+      <p v-else-if="contest?.status === 'cancelled'" class="cpub-sb-cancelled">This contest was cancelled.</p>
     </div>
 
     <!-- LINKS -->
@@ -52,7 +92,7 @@ function statusClass(status: string): string {
       <i class="fa-solid fa-pen-to-square"></i> Edit Contest
     </NuxtLink>
 
-    <NuxtLink v-if="isJudge && (contest?.status === 'judging')" :to="`/contests/${contest?.slug}/judge`" class="cpub-btn cpub-sb-link cpub-sb-judge">
+    <NuxtLink v-if="canJudge && (contest?.status === 'judging')" :to="`/contests/${contest?.slug}/judge`" class="cpub-btn cpub-sb-link cpub-sb-judge">
       <i class="fa-solid fa-gavel"></i> Judge Entries
     </NuxtLink>
 
@@ -76,6 +116,23 @@ function statusClass(status: string): string {
 .cpub-status-completed { color: var(--text-faint); border-color: var(--border2); background: var(--surface2); }
 .cpub-status-cancelled { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
 
+/* TIMELINE */
+.cpub-timeline { list-style: none; margin: 14px 0 0; padding: 0; }
+.cpub-tl-step { display: flex; gap: 10px; position: relative; padding-bottom: 14px; }
+.cpub-tl-step:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 22px; bottom: 0; width: var(--border-width-default); background: var(--border2); }
+.cpub-tl-dot { width: 23px; height: 23px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: var(--border-width-default) solid var(--border2); background: var(--surface); color: var(--text-faint); font-size: 9px; border-radius: 50%; z-index: 1; }
+.cpub-tl-content { padding-top: 2px; }
+.cpub-tl-label { font-size: 12px; font-weight: 600; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
+.cpub-tl-date { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); margin-top: 1px; }
+.cpub-tl-now { font-size: 8px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); border: var(--border-width-default) solid var(--accent-border); background: var(--accent-bg); padding: 1px 5px; }
+
+.cpub-tl-done .cpub-tl-dot { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
+.cpub-tl-done .cpub-tl-label { color: var(--text); }
+.cpub-tl-current .cpub-tl-dot { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
+.cpub-tl-current .cpub-tl-label { color: var(--text); font-weight: 700; }
+
+.cpub-sb-cancelled { font-size: 11px; color: var(--red); margin: 10px 0 0; }
+
 .cpub-sb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
 .cpub-sb-btn { flex: 1; justify-content: center; }
 .cpub-sb-link { width: 100%; text-align: center; display: block; margin-top: 12px; }

package/components/homepage/ContestsSection.vue

@@ -4,7 +4,12 @@ import type { HomepageSectionConfig } from '@commonpub/server';
 const props = defineProps<{ config: HomepageSectionConfig }>();
 
 const limit = computed(() => props.config.limit ?? 3);
-const { data: contests } = await useFetch('/api/contests', { query: { limit }, lazy: true });
+// Only surface contests that are open for entries — the card is titled
+// "Active Contests" and links to "Enter Contest".
+const { data: contests } = await useFetch('/api/contests', {
+  query: computed(() => ({ limit: limit.value, status: 'active' })),
+  lazy: true,
+});
 </script>
 
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -53,16 +53,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/config": "0.15.0",
-    "@commonpub/editor": "0.7.11",
-    "@commonpub/schema": "0.18.0",
-    "@commonpub/server": "2.59.0",
-    "@commonpub/ui": "0.9.1",
+    "@commonpub/auth": "0.6.0",
     "@commonpub/docs": "0.6.3",
+    "@commonpub/editor": "0.7.11",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/auth": "0.6.0",
+    "@commonpub/protocol": "0.12.0",
     "@commonpub/explainer": "0.7.15",
-    "@commonpub/protocol": "0.12.0"
+    "@commonpub/ui": "0.9.1",
+    "@commonpub/schema": "0.19.0",
+    "@commonpub/server": "2.60.0",
+    "@commonpub/config": "0.15.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",