@commonpub/layer 0.49.0 → 0.51.0

package/components/CountdownTimer.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 const props = defineProps<{
   targetDate: string;
+  /** Tight single-line variant for listing cards (no big boxes, seconds dropped). */
+  compact?: boolean;
 }>();
 
 const timeLeft = ref({ days: 0, hours: 0, minutes: 0, seconds: 0 });
@@ -25,7 +27,14 @@ onUnmounted(() => clearInterval(timer));
 </script>
 
 <template>
-  <div class="cpub-countdown">
+  <div v-if="compact" class="cpub-countdown-compact">
+    <i class="fa-regular fa-clock"></i>
+    <span class="cpub-countdown-compact-time">
+      <template v-if="timeLeft.days > 0">{{ timeLeft.days }}d </template>{{ String(timeLeft.hours).padStart(2, '0') }}h {{ String(timeLeft.minutes).padStart(2, '0') }}m
+    </span>
+    <span class="cpub-countdown-compact-label">left</span>
+  </div>
+  <div v-else class="cpub-countdown">
     <div v-for="(val, key) in timeLeft" :key="key" class="cpub-countdown-unit">
       <span class="cpub-countdown-num">{{ String(val).padStart(2, '0') }}</span>
       <span class="cpub-countdown-label">{{ key }}</span>
@@ -65,4 +74,33 @@ onUnmounted(() => clearInterval(timer));
   display: block;
   margin-top: 4px;
 }
+
+/* Compact card variant — one tight line, no boxes. */
+.cpub-countdown-compact {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.cpub-countdown-compact > .fa-clock {
+  font-size: 11px;
+  color: var(--text-faint);
+  align-self: center;
+}
+
+.cpub-countdown-compact-time {
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: 0.01em;
+}
+
+.cpub-countdown-compact-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-faint);
+}
 </style>

package/components/contest/ContestHero.vue

@@ -18,18 +18,28 @@ const c = computed(() => props.contest);
 
 // Countdown timer
 const countdown = ref({ days: '00', hours: '00', mins: '00', secs: '00' });
+const targetPassed = ref(false);
 let countdownInterval: ReturnType<typeof setInterval> | null = null;
 
 function pad(n: number): string { return String(n).padStart(2, '0'); }
 
+// The countdown target depends on the lifecycle stage: an UPCOMING contest counts
+// down to when it OPENS (startDate); while JUDGING, to the judging deadline;
+// otherwise (active) to the submission close (endDate).
+const countdownTargetStr = computed<string | null>(() => {
+  const s = c.value?.status;
+  if (s === 'judging') return c.value?.judgingEndDate ?? c.value?.endDate ?? null;
+  if (s === 'upcoming') return c.value?.startDate ?? null;
+  return c.value?.endDate ?? null;
+});
+
 function updateCountdown(): void {
-  // 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 targetStr = countdownTargetStr.value;
   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 rawDiff = Math.floor((target.getTime() - now.getTime()) / 1000);
+  targetPassed.value = rawDiff <= 0;
+  let diff = Math.max(0, rawDiff);
   const days = Math.floor(diff / 86400); diff %= 86400;
   const hours = Math.floor(diff / 3600); diff %= 3600;
   const mins = Math.floor(diff / 60);
@@ -47,12 +57,58 @@ onUnmounted(() => {
 });
 
 const countdownLabel = computed(() => {
-  if (c.value?.status === 'completed' || c.value?.status === 'cancelled') return 'Contest ended';
-  if (c.value?.status === 'judging') return 'Judging ends in';
+  const s = c.value?.status;
+  if (s === 'completed' || s === 'cancelled') return 'Contest ended';
+  if (s === 'judging') return 'Judging ends in';
+  if (s === 'upcoming') return 'Opens in';
   return 'Submissions close in';
 });
 
 const isEnded = computed(() => c.value?.status === 'completed' || c.value?.status === 'cancelled');
+const isPaused = computed(() => c.value?.status === 'paused');
+const isDraft = computed(() => c.value?.status === 'draft');
+// Live countdown only while the clock is actually running AND its target is still
+// in the future. Once the target passes (an upcoming contest whose open date has
+// arrived, or an active one past its close), fall back to a static date note.
+const showCountdown = computed(() => !isEnded.value && !isPaused.value && !isDraft.value && !!countdownTargetStr.value && !targetPassed.value);
+
+function fmtDate(s: string | null | undefined): string {
+  if (!s) return '';
+  return new Date(s).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+// Static date shown when the relevant target is in the past but the contest hasn't
+// been advanced yet (e.g. an upcoming contest whose open date arrived).
+const dateNote = computed<string | null>(() => {
+  if (isEnded.value || isPaused.value || isDraft.value || !targetPassed.value) return null;
+  if (c.value?.status === 'upcoming') return c.value?.startDate ? `Opens ${fmtDate(c.value.startDate)}` : null;
+  return c.value?.endDate ? `Closed ${fmtDate(c.value.endDate)}` : null;
+});
+
+// Client-side mirror of the server VALID_TRANSITIONS map (server/src/contest/contest.ts).
+// Keeps the inline admin controls in sync with what the API will actually accept —
+// bidirectional: go back a stage, pause/resume, reopen, etc.
+const VALID_TRANSITIONS: Record<string, string[]> = {
+  draft: ['upcoming', 'active', 'cancelled'],
+  upcoming: ['draft', 'active', 'cancelled'],
+  active: ['upcoming', 'paused', 'judging', 'cancelled'],
+  paused: ['active', 'upcoming', 'judging', 'cancelled'],
+  judging: ['active', 'paused', 'completed', 'cancelled'],
+  completed: ['judging'],
+  cancelled: ['draft', 'upcoming'],
+};
+const STATUS_ACTION: Record<string, { label: string; icon: string }> = {
+  draft: { label: 'Move to Draft', icon: 'fa-pen-ruler' },
+  upcoming: { label: 'Set Upcoming', icon: 'fa-clock' },
+  active: { label: 'Activate', icon: 'fa-play' },
+  paused: { label: 'Pause', icon: 'fa-pause' },
+  judging: { label: 'Start Judging', icon: 'fa-gavel' },
+  completed: { label: 'Complete', icon: 'fa-check' },
+  cancelled: { label: 'Cancel', icon: 'fa-ban' },
+};
+const availableTransitions = computed<string[]>(() => VALID_TRANSITIONS[c.value?.status ?? 'upcoming'] ?? []);
+function statusAction(s: string): { label: string; icon: string } {
+  return STATUS_ACTION[s] ?? { label: s, icon: 'fa-circle' };
+}
 
 // The hero shows the short `subheading` (a dedicated tagline field). For older
 // contests without one, fall back to a clean, plain-text, CSS-clamped excerpt of
@@ -116,19 +172,23 @@ const dateRange = computed<string>(() => {
               <button class="cpub-btn cpub-btn-lg cpub-btn-dark" @click="emit('copy-link')"><i class="fa fa-link"></i> Share</button>
             </div>
 
-            <!-- Admin controls -->
+            <!-- Admin controls — bidirectional, derived from the valid-transition map. -->
             <div v-if="isAdmin && c" class="cpub-admin-controls">
-              <span class="cpub-admin-controls-label"><i class="fa-solid fa-shield-halved"></i> Admin</span>
-              <button v-if="c.status === 'upcoming'" class="cpub-btn cpub-btn-sm" :disabled="transitioning" @click="emit('transition', 'active')"><i class="fa-solid fa-play"></i> Activate</button>
-              <button v-if="c.status === 'active'" class="cpub-btn cpub-btn-sm" :disabled="transitioning" @click="emit('transition', 'judging')"><i class="fa-solid fa-gavel"></i> Start Judging</button>
-              <button v-if="c.status === 'judging'" class="cpub-btn cpub-btn-sm" :disabled="transitioning" @click="emit('transition', 'completed')"><i class="fa-solid fa-check"></i> Complete</button>
-              <button v-if="c.status !== 'completed' && c.status !== 'cancelled'" class="cpub-btn cpub-btn-sm cpub-btn-cancel" :disabled="transitioning" @click="emit('transition', 'cancelled')"><i class="fa-solid fa-ban"></i> Cancel</button>
+              <span class="cpub-admin-controls-label"><i class="fa-solid fa-shield-halved"></i> Stage</span>
+              <button
+                v-for="t in availableTransitions"
+                :key="t"
+                class="cpub-btn cpub-btn-sm"
+                :class="{ 'cpub-btn-cancel': t === 'cancelled' }"
+                :disabled="transitioning"
+                @click="emit('transition', t)"
+              ><i class="fa-solid" :class="statusAction(t).icon"></i> {{ statusAction(t).label }}</button>
             </div>
           </div>
 
           <!-- RIGHT: countdown -->
           <aside class="cpub-hero-side">
-            <div v-if="!isEnded" class="cpub-countdown-section">
+            <div v-if="showCountdown" class="cpub-countdown-section">
               <div class="cpub-countdown-label"><i class="fa fa-clock"></i> {{ countdownLabel }}</div>
               <div class="cpub-countdown-row">
                 <div class="cpub-countdown-block">
@@ -152,6 +212,18 @@ const dateRange = computed<string>(() => {
                 </div>
               </div>
             </div>
+            <div v-else-if="isPaused" class="cpub-countdown-ended">
+              <i class="fa-solid fa-circle-pause"></i>
+              <span>Submissions paused</span>
+            </div>
+            <div v-else-if="isDraft" class="cpub-countdown-ended">
+              <i class="fa-solid fa-pen-ruler"></i>
+              <span>Draft — not launched</span>
+            </div>
+            <div v-else-if="dateNote" class="cpub-countdown-ended">
+              <i class="fa-regular fa-calendar"></i>
+              <span>{{ dateNote }}</span>
+            </div>
             <div v-else class="cpub-countdown-ended">
               <i class="fa-solid fa-flag-checkered"></i>
               <span>{{ countdownLabel }}</span>
@@ -215,6 +287,8 @@ const dateRange = computed<string>(() => {
 .cpub-status-pill[data-status="active"] { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
 .cpub-status-pill[data-status="judging"] { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
 .cpub-status-pill[data-status="upcoming"] { color: var(--yellow); border-color: var(--yellow); }
+.cpub-status-pill[data-status="paused"] { color: var(--yellow); border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, transparent); }
+.cpub-status-pill[data-status="draft"] { color: var(--hero-text-dim); border-color: var(--hero-border); border-style: dashed; }
 .cpub-status-pill[data-status="completed"], .cpub-status-pill[data-status="cancelled"] { color: var(--red); border-color: var(--red-border); }
 
 .cpub-hero-title { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 10px; color: var(--hero-text); }

package/components/contest/ContestSidebar.vue

@@ -22,7 +22,9 @@ function fmt(d: string | null | undefined): string | null {
 
 // 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 };
+// `draft` precedes everything (nothing has started); `paused` sits at the active
+// position (a deactivated-but-not-cancelled running contest).
+const STATUS_ORDER: Record<string, number> = { draft: -1, upcoming: 0, active: 1, paused: 1, judging: 2, completed: 3 };
 
 const timeline = computed<TimelineStep[]>(() => {
   const c = props.contest;
@@ -40,8 +42,10 @@ const timeline = computed<TimelineStep[]>(() => {
 
 function statusClass(status: string): string {
   const map: Record<string, string> = {
+    draft: 'cpub-status-draft',
     upcoming: 'cpub-status-upcoming',
     active: 'cpub-status-active',
+    paused: 'cpub-status-paused',
     judging: 'cpub-status-judging',
     completed: 'cpub-status-completed',
     cancelled: 'cpub-status-cancelled',
@@ -110,8 +114,10 @@ function statusClass(status: string): string {
 .cpub-sb-body { font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 8px; }
 .cpub-sb-row { display: flex; align-items: center; gap: 6px; }
 .cpub-sb-status { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; padding: 2px 8px; border: var(--border-width-default) solid; }
+.cpub-status-draft { color: var(--text-faint); border-color: var(--border2); background: var(--surface2); border-style: dashed; }
 .cpub-status-upcoming { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
 .cpub-status-active { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
+.cpub-status-paused { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
 .cpub-status-judging { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
 .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); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.49.0",
+  "version": "0.51.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,14 +55,14 @@
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
     "@commonpub/config": "0.18.0",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/explainer": "0.7.15",
     "@commonpub/docs": "0.6.3",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/editor": "0.7.11",
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/schema": "0.28.0",
     "@commonpub/protocol": "0.13.0",
     "@commonpub/ui": "0.9.2",
-    "@commonpub/server": "2.74.0",
-    "@commonpub/schema": "0.27.0"
+    "@commonpub/server": "2.75.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -13,6 +13,11 @@ useSeoMeta({ title: () => `Edit: ${contest.value?.title ?? 'Contest'} — ${useS
 
 const saving = ref(false);
 const title = ref('');
+// Editable slug — initialised from the loaded contest, manual override allowed.
+const slugInput = ref('');
+function slugify(s: string): string {
+  return s.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/(^-+)|(-+$)/g, '').slice(0, 255);
+}
 const subheading = ref('');
 const description = ref('');
 const rules = ref('');
@@ -42,6 +47,7 @@ function toggleRole(r: string): void {
   else visibleToRoles.value.push(r);
 }
 
+const showPrizes = ref(true);
 const prizesDescription = ref('');
 interface Prize { place: number | null; category: string; title: string; description: string; value: string }
 const prizes = ref<Prize[]>([]);
@@ -53,6 +59,7 @@ const criteria = ref<Criterion[]>([]);
 watch(contest, (c) => {
   if (!c) return;
   title.value = c.title ?? '';
+  slugInput.value = c.slug ?? '';
   subheading.value = c.subheading ?? '';
   description.value = c.description ?? '';
   rules.value = c.rules ?? '';
@@ -67,6 +74,7 @@ watch(contest, (c) => {
   maxEntriesPerUser.value = c.maxEntriesPerUser ?? null;
   visibility.value = (c.visibility as typeof visibility.value) ?? 'public';
   visibleToRoles.value = [...(c.visibleToRoles ?? [])];
+  showPrizes.value = c.showPrizes !== false;
   prizesDescription.value = c.prizesDescription ?? '';
   prizes.value = (c.prizes ?? []).map((p: { place?: number; category?: string; title?: string; description?: string; value?: string }) => ({
     place: p.place ?? null,
@@ -138,10 +146,11 @@ async function handleSave(): Promise<void> {
         description: c.description.trim() || undefined,
       }));
 
-    await $fetch(`/api/contests/${slug}`, {
+    const updated = await $fetch<{ slug: string }>(`/api/contests/${slug}`, {
       method: 'PUT',
       body: {
         title: title.value,
+        slug: slugify(slugInput.value) || undefined,
         subheading: subheading.value || undefined,
         description: description.value || undefined,
         rules: rules.value || undefined,
@@ -156,12 +165,20 @@ async function handleSave(): Promise<void> {
         maxEntriesPerUser: maxEntriesPerUser.value && maxEntriesPerUser.value > 0 ? maxEntriesPerUser.value : undefined,
         visibility: visibility.value,
         visibleToRoles: visibility.value === 'private' ? visibleToRoles.value : [],
+        showPrizes: showPrizes.value,
         prizesDescription: prizesDescription.value || undefined,
         prizes: prizeData,
         judgingCriteria: criteriaData,
       },
     });
     toast.success('Contest updated');
+    // Slug changed → the old URL no longer resolves. Navigate to the renamed
+    // contest's page — a different route component, so it loads fresh. (Navigating
+    // to the new /edit URL would reuse THIS component with its stale fetch key.)
+    if (updated?.slug && updated.slug !== slug) {
+      await navigateTo(`/contests/${updated.slug}`);
+      return;
+    }
     await refresh();
   } catch (err: unknown) {
     toast.error(extractError(err));
@@ -184,11 +201,36 @@ async function handleDelete(): Promise<void> {
   }
 }
 
+// Client mirror of the server VALID_TRANSITIONS map — bidirectional (go back a
+// stage, pause/resume, reopen). Kept in sync with server/src/contest/contest.ts.
+const VALID_TRANSITIONS: Record<string, string[]> = {
+  draft: ['upcoming', 'active', 'cancelled'],
+  upcoming: ['draft', 'active', 'cancelled'],
+  active: ['upcoming', 'paused', 'judging', 'cancelled'],
+  paused: ['active', 'upcoming', 'judging', 'cancelled'],
+  judging: ['active', 'paused', 'completed', 'cancelled'],
+  completed: ['judging'],
+  cancelled: ['draft', 'upcoming'],
+};
+const STATUS_ACTION: Record<string, { label: string; icon: string; tone?: 'go' | 'warn' | 'danger' }> = {
+  draft: { label: 'Move to Draft', icon: 'fa-pen-ruler' },
+  upcoming: { label: 'Set Upcoming', icon: 'fa-clock' },
+  active: { label: 'Activate', icon: 'fa-play', tone: 'go' },
+  paused: { label: 'Pause', icon: 'fa-pause', tone: 'warn' },
+  judging: { label: 'Begin Judging', icon: 'fa-gavel' },
+  completed: { label: 'Complete & Publish', icon: 'fa-flag-checkered', tone: 'go' },
+  cancelled: { label: 'Cancel', icon: 'fa-ban', tone: 'danger' },
+};
+const availableTransitions = computed<string[]>(() => VALID_TRANSITIONS[contest.value?.status ?? 'upcoming'] ?? []);
+function statusAction(s: string): { label: string; icon: string; tone?: string } {
+  return STATUS_ACTION[s] ?? { label: s, icon: 'fa-circle' };
+}
+
 async function transitionStatus(newStatus: string): Promise<void> {
-  const msg = newStatus === 'cancelled'
-    ? 'Cancel this contest? This cannot be undone.'
-    : `Change contest status to "${newStatus}"?`;
-  if (!confirm(msg)) return;
+  // Only the consequential transitions confirm; reversible nudges (pause/resume,
+  // go-back) just apply.
+  if (newStatus === 'cancelled' && !confirm('Cancel this contest? This cannot be undone.')) return;
+  if (newStatus === 'completed' && !confirm('Complete this contest and publish results? Final rankings will be calculated.')) return;
   try {
     await $fetch(`/api/contests/${slug}/transition`, { method: 'POST', body: { status: newStatus } });
     toast.success(`Status changed to ${newStatus}`);
@@ -218,6 +260,11 @@ async function transitionStatus(newStatus: string): Promise<void> {
           <label class="cpub-form-label">Title</label>
           <input v-model="title" type="text" class="cpub-form-input" />
         </div>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">URL Slug</label>
+          <input v-model="slugInput" type="text" class="cpub-form-input" @blur="slugInput = slugify(slugInput)" />
+          <p class="cpub-form-hint">The contest URL: <code>/contests/{{ slugify(slugInput) || 'your-contest' }}</code>. Changing it breaks old links — they won't redirect.</p>
+        </div>
         <div class="cpub-form-field">
           <label class="cpub-form-label">Subheading</label>
           <input v-model="subheading" type="text" maxlength="300" class="cpub-form-input" placeholder="One-line tagline shown in the contest header" />
@@ -280,6 +327,11 @@ async function transitionStatus(newStatus: string): Promise<void> {
 
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Prizes</h2>
+        <label class="cpub-form-check" style="margin-bottom: 10px;">
+          <input v-model="showPrizes" type="checkbox" />
+          <span>Show the Prizes tab on the contest page</span>
+        </label>
+        <p v-if="!showPrizes" class="cpub-form-hint">The Prizes tab is hidden — any prizes below are saved but not shown to visitors.</p>
         <p class="cpub-form-hint">Every field is optional. Use <strong>place</strong> for ranked prizes, a <strong>category</strong> for themed awards, or just a <strong>description</strong> — whatever fits. Cash value is optional.</p>
         <div class="cpub-form-field">
           <label class="cpub-form-label">Prizes overview (optional)</label>
@@ -391,44 +443,36 @@ async function transitionStatus(newStatus: string): Promise<void> {
       </section>
 
       <section class="cpub-form-section">
-        <h2 class="cpub-form-section-title">Status Transitions</h2>
+        <h2 class="cpub-form-section-title">Stage &amp; Status</h2>
         <p class="cpub-form-hint">
-          A contest moves through a lifecycle:
-          <strong>Upcoming</strong> → <strong>Active</strong> (accepting entries) →
-          <strong>Judging</strong> (entries closed, judges scoring) →
-          <strong>Completed</strong> (results &amp; rankings published). You can cancel at any
-          point before it completes. Current status:
+          A contest runs through <strong>Draft</strong> → <strong>Upcoming</strong> →
+          <strong>Active</strong> (accepting entries) → <strong>Judging</strong> →
+          <strong>Completed</strong>. You can move <em>backwards</em>, <strong>Pause</strong> to
+          temporarily stop submissions without cancelling, resume later, or cancel. Current status:
           <span class="cpub-status-badge" :class="`cpub-status-${contest.status}`">{{ contest.status }}</span>
         </p>
         <div class="cpub-status-actions">
-          <button v-if="contest.status === 'upcoming'" type="button" class="cpub-btn cpub-transition-btn cpub-transition-activate" @click="transitionStatus('active')">
-            <i class="fa-solid fa-play"></i> Start Contest
-          </button>
-          <button v-if="contest.status === 'active'" type="button" class="cpub-btn cpub-transition-btn cpub-transition-judging" @click="transitionStatus('judging')">
-            <i class="fa-solid fa-gavel"></i> Begin Judging
-          </button>
-          <button v-if="contest.status === 'judging'" type="button" class="cpub-btn cpub-transition-btn cpub-transition-complete" @click="transitionStatus('completed')">
-            <i class="fa-solid fa-flag-checkered"></i> Complete &amp; Publish Results
-          </button>
           <button
-            v-if="contest.status !== 'completed' && contest.status !== 'cancelled'"
+            v-for="t in availableTransitions"
+            :key="t"
             type="button"
-            class="cpub-btn cpub-transition-btn cpub-transition-cancel"
-            @click="transitionStatus('cancelled')"
+            class="cpub-btn cpub-transition-btn"
+            :class="{
+              'cpub-transition-activate': statusAction(t).tone === 'go',
+              'cpub-transition-judging': statusAction(t).tone === 'warn',
+              'cpub-transition-cancel': statusAction(t).tone === 'danger',
+            }"
+            @click="transitionStatus(t)"
           >
-            <i class="fa-solid fa-ban"></i> Cancel Contest
+            <i class="fa-solid" :class="statusAction(t).icon"></i> {{ statusAction(t).label }}
           </button>
-          <p v-if="contest.status === 'completed' || contest.status === 'cancelled'" class="cpub-status-terminal">
+          <p v-if="!availableTransitions.length" class="cpub-status-terminal">
             <i class="fa-solid fa-circle-check"></i>
-            This contest is {{ contest.status }} — no further status changes are available.
+            No status changes available from <strong>{{ contest.status }}</strong>.
           </p>
         </div>
       </section>
 
-      <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>
-
       <section class="cpub-form-section cpub-danger-zone">
         <h2 class="cpub-form-section-title cpub-danger-title">Danger Zone</h2>
         <div class="cpub-danger-row">
@@ -441,6 +485,19 @@ async function transitionStatus(newStatus: string): Promise<void> {
           </button>
         </div>
       </section>
+
+      <!-- Sticky save bar — always reachable without scrolling to the bottom. -->
+      <div class="cpub-edit-actionbar">
+        <span class="cpub-edit-actionbar-status">
+          Status <span class="cpub-status-badge" :class="`cpub-status-${contest.status}`">{{ contest.status }}</span>
+        </span>
+        <div class="cpub-edit-actionbar-btns">
+          <NuxtLink :to="`/contests/${slug}`" class="cpub-btn cpub-edit-cancel">Cancel</NuxtLink>
+          <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>
+        </div>
+      </div>
     </form>
   </div>
   <div v-else class="cpub-not-found"><p>Contest not found</p></div>
@@ -454,8 +511,10 @@ async function transitionStatus(newStatus: string): Promise<void> {
 .cpub-edit-subtitle { font-size: 13px; color: var(--text-dim); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
 
 .cpub-status-badge { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; padding: 2px 8px; border: var(--border-width-default) solid; }
+.cpub-status-draft { color: var(--text-faint); border-color: var(--border2); background: var(--surface2); border-style: dashed; }
 .cpub-status-upcoming { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
 .cpub-status-active { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
+.cpub-status-paused { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
 .cpub-status-judging { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
 .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); }
@@ -507,8 +566,27 @@ async function transitionStatus(newStatus: string): Promise<void> {
 
 .cpub-not-found { text-align: center; padding: 64px; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 12px; }
 
+/* Sticky save bar — pinned to the viewport bottom while editing the long form. */
+.cpub-edit-actionbar {
+  position: sticky;
+  bottom: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 4px -32px -32px;
+  padding: 14px 32px;
+  background: var(--surface);
+  border-top: 2px solid var(--border);
+  box-shadow: var(--shadow-lg);
+}
+.cpub-edit-actionbar-status { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
+.cpub-edit-actionbar-btns { display: flex; align-items: center; gap: 8px; }
+
 @media (max-width: 768px) {
   .cpub-contest-edit { padding: 16px; }
   .cpub-form-row { grid-template-columns: 1fr; }
+  .cpub-edit-actionbar { margin: 4px -16px -16px; padding: 12px 16px; }
 }
 </style>

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

@@ -52,7 +52,7 @@ 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 || c.value?.prizesDescription) t.push({ key: 'prizes', label: 'Prizes', icon: 'fa-trophy' });
+  if (c.value?.showPrizes !== false && (c.value?.prizes?.length || c.value?.prizesDescription)) 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 (participants.value.length) t.push({ key: 'participants', label: 'Participants', icon: 'fa-users', count: participants.value.length });
   if (judges.value.length || isOwner.value) t.push({ key: 'judges', label: 'Judges', icon: 'fa-gavel', count: judges.value.length || undefined });
@@ -303,7 +303,7 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
           <!-- 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 || c?.prizesDescription" :prizes="c?.prizes ?? []" :description="c?.prizesDescription" />
+            <ContestPrizes v-if="c?.showPrizes !== false && (c?.prizes?.length || c?.prizesDescription)" :prizes="c?.prizes ?? []" :description="c?.prizesDescription" />
           </div>
 
           <!-- ENTRIES -->

package/pages/contests/create.vue

@@ -8,6 +8,13 @@ const { extract: extractError } = useApiError();
 const saving = ref(false);
 
 const title = ref('');
+// Slug auto-derives from the title until the operator edits it manually.
+const slug = ref('');
+const slugTouched = ref(false);
+function slugify(s: string): string {
+  return s.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/(^-+)|(-+$)/g, '').slice(0, 255);
+}
+watch(title, (t) => { if (!slugTouched.value) slug.value = slugify(t); });
 const subheading = ref('');
 const description = ref('');
 const rules = ref('');
@@ -48,6 +55,7 @@ interface Prize {
   value: string;
 }
 
+const showPrizes = ref(true);
 const prizesDescription = ref('');
 // Prizes are entirely optional — start empty so a contest has NO prizes unless
 // the operator explicitly adds them (the old 3 pre-filled rows forced prizes
@@ -92,6 +100,7 @@ async function handleCreate(): Promise<void> {
       method: 'POST',
       body: {
         title: title.value,
+        slug: slugify(slug.value) || undefined,
         subheading: subheading.value || undefined,
         description: description.value || undefined,
         rules: rules.value || undefined,
@@ -106,6 +115,7 @@ async function handleCreate(): Promise<void> {
         visibleToRoles: visibility.value === 'private' && visibleToRoles.value.length ? visibleToRoles.value : undefined,
         eligibleContentTypes: eligibleContentTypes.value.length ? eligibleContentTypes.value : undefined,
         maxEntriesPerUser: maxEntriesPerUser.value && maxEntriesPerUser.value > 0 ? maxEntriesPerUser.value : undefined,
+        showPrizes: showPrizes.value,
         prizesDescription: prizesDescription.value || undefined,
         prizes: prizes.value
           .filter(p => p.title.trim() || p.description.trim() || p.category.trim() || (typeof p.place === 'number' && p.place > 0))
@@ -157,6 +167,11 @@ function prizeLabel(prize: Prize): string {
           <label for="contest-title" class="cpub-form-label">Title</label>
           <input id="contest-title" v-model="title" type="text" class="cpub-form-input" required placeholder="Maker Challenge 2026" />
         </div>
+        <div class="cpub-form-field">
+          <label for="contest-slug" class="cpub-form-label">URL Slug</label>
+          <input id="contest-slug" v-model="slug" type="text" class="cpub-form-input" placeholder="auto-generated from title" @input="slugTouched = true" @blur="slug = slugify(slug)" />
+          <p class="cpub-form-hint">Auto-fills from the title. Edit to set a custom URL: <code>/contests/{{ slugify(slug) || 'your-contest' }}</code></p>
+        </div>
         <div class="cpub-form-field">
           <label for="contest-subheading" class="cpub-form-label">Subheading</label>
           <input id="contest-subheading" v-model="subheading" type="text" maxlength="300" class="cpub-form-input" placeholder="One-line tagline shown in the contest header" />
@@ -291,6 +306,12 @@ function prizeLabel(prize: Prize): string {
           </button>
         </div>
 
+        <label class="cpub-form-check">
+          <input v-model="showPrizes" type="checkbox" />
+          <span>Show the Prizes tab on the contest page</span>
+        </label>
+        <p v-if="!showPrizes" class="cpub-form-hint">The Prizes tab is hidden — any prizes below are saved but not shown to visitors.</p>
+
         <p class="cpub-form-hint">Contests don't need prizes — leave this empty to skip them entirely. If you do add prizes, every field is optional: use <strong>place</strong> for ranked prizes (1st/2nd/3rd), a <strong>category</strong> for themed awards (e.g. "Best in Show"), or just a <strong>description</strong>. Cash value is optional.</p>
         <div class="cpub-form-field">
           <label for="prizes-desc" class="cpub-form-label">Prizes overview (optional)</label>
@@ -302,7 +323,7 @@ function prizeLabel(prize: Prize): string {
             <span class="cpub-prize-place">
               <i class="fa-solid fa-trophy"></i> {{ prizeLabel(prize) }}
             </span>
-            <button v-if="prizes.length > 1" type="button" class="cpub-delete-btn" aria-label="Remove prize" @click="removePrize(idx)">
+            <button type="button" class="cpub-delete-btn" aria-label="Remove prize" @click="removePrize(idx)">
               <i class="fa-solid fa-xmark"></i>
             </button>
           </div>
@@ -333,9 +354,15 @@ function prizeLabel(prize: Prize): string {
         </div>
       </section>
 
-      <button type="submit" class="cpub-btn cpub-btn-primary cpub-btn-lg" :disabled="saving || !title.trim() || !startDate || !endDate || !!dateError">
-        <i class="fa-solid fa-trophy"></i> {{ saving ? 'Creating...' : 'Create Contest' }}
-      </button>
+      <div class="cpub-edit-actionbar">
+        <span class="cpub-edit-actionbar-hint">Required: title, start &amp; end dates.</span>
+        <div class="cpub-edit-actionbar-btns">
+          <NuxtLink to="/contests" class="cpub-btn">Cancel</NuxtLink>
+          <button type="submit" class="cpub-btn cpub-btn-primary" :disabled="saving || !title.trim() || !startDate || !endDate || !!dateError">
+            <i class="fa-solid fa-trophy"></i> {{ saving ? 'Creating…' : 'Create Contest' }}
+          </button>
+        </div>
+      </div>
     </form>
   </div>
 </template>
@@ -380,10 +407,29 @@ function prizeLabel(prize: Prize): string {
 .cpub-delete-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; }
 .cpub-delete-btn:hover { color: var(--red); }
 
+/* Sticky create bar — Create button always reachable on the long form. */
+.cpub-edit-actionbar {
+  position: sticky;
+  bottom: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 4px -32px -32px;
+  padding: 14px 32px;
+  background: var(--surface);
+  border-top: 2px solid var(--border);
+  box-shadow: var(--shadow-lg);
+}
+.cpub-edit-actionbar-hint { font-size: 11px; color: var(--text-faint); }
+.cpub-edit-actionbar-btns { display: flex; align-items: center; gap: 8px; }
+
 @media (max-width: 768px) {
   .cpub-contest-create { padding: 16px; }
   .cpub-page-title { font-size: 20px; }
   .cpub-form-section { padding: 14px; }
   .cpub-form-row { grid-template-columns: 1fr; }
+  .cpub-edit-actionbar { margin: 4px -16px -16px; padding: 12px 16px; }
 }
 </style>

package/pages/contests/index.vue

@@ -68,7 +68,7 @@ const canCreateContest = computed(() => {
           </template>
           <span class="cpub-badge cpub-contest-thumb-badge" :class="{
             'cpub-badge-green': contest.status === 'active',
-            'cpub-badge-yellow': contest.status === 'upcoming',
+            'cpub-badge-yellow': contest.status === 'upcoming' || contest.status === 'paused',
             'cpub-badge-accent': contest.status === 'judging',
             'cpub-badge-red': contest.status === 'completed' || contest.status === 'cancelled',
           }">{{ contest.status }}</span>
@@ -78,8 +78,8 @@ const canCreateContest = computed(() => {
           <p v-if="cardBlurb(contest)" class="cpub-contest-card-blurb">
             {{ cardBlurb(contest) }}
           </p>
-          <div v-if="contest.endDate" style="margin-top: 8px">
-            <CountdownTimer :target-date="contest.endDate" />
+          <div v-if="contest.endDate && (contest.status === 'active' || contest.status === 'upcoming')" class="cpub-contest-card-countdown">
+            <CountdownTimer :target-date="contest.endDate" compact />
           </div>
           <div class="cpub-contest-card-meta">
             <span><i class="fa-solid fa-users"></i> {{ contest.entryCount }} entries</span>
@@ -135,6 +135,7 @@ const canCreateContest = computed(() => {
 
 .cpub-contest-card-title { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
 .cpub-contest-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
+.cpub-contest-card-countdown { margin-top: 10px; }
 
 .cpub-contest-card-blurb {
   font-size: 12px;

package/server/api/contests/[slug]/index.put.ts

@@ -9,7 +9,15 @@ export default defineEventHandler(async (event): Promise<ContestDetail> => {
   const { slug } = parseParams(event, { slug: 'string' });
   const input = await parseBody(event, updateContestSchema);
 
-  const result = await updateContest(db, slug, user.id, input);
+  let result;
+  try {
+    result = await updateContest(db, slug, user.id, input);
+  } catch (err) {
+    if (err instanceof Error && err.message === 'SLUG_TAKEN') {
+      throw createError({ statusCode: 409, statusMessage: 'That URL slug is already in use by another contest.' });
+    }
+    throw err;
+  }
   if (!result) throw createError({ statusCode: 403, statusMessage: 'Not authorized or contest not found' });
   return result;
 });

package/server/api/contests/index.post.ts

@@ -19,7 +19,8 @@ export default defineEventHandler(async (event): Promise<ContestDetail> => {
   const config = useConfig();
   const input = await parseBody(event, createContestSchema);
 
-  const base = slugify(input.title) || `contest-${Date.now()}`;
+  // Manual slug override (slugified defensively) falls back to the title.
+  const base = slugify(input.slug || input.title) || `contest-${Date.now()}`;
   // Ensure slug uniqueness so a duplicate title returns a clean contest instead
   // of a 500 from the unique-constraint violation.
   let slug = base;