@commonpub/layer 0.28.1 → 0.30.0

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

@@ -13,6 +13,7 @@ useSeoMeta({ title: () => `Edit: ${contest.value?.title ?? 'Contest'} — ${useS
 
 const saving = ref(false);
 const title = ref('');
+const subheading = ref('');
 const description = ref('');
 const rules = ref('');
 const bannerUrl = ref('');
@@ -31,6 +32,15 @@ function toggleType(type: string): void {
   else eligibleContentTypes.value.push(type);
 }
 
+const visibility = ref<'public' | 'unlisted' | 'private'>('public');
+const visibleToRoles = ref<string[]>([]);
+const ROLE_OPTIONS = ['member', 'pro', 'verified', 'staff', 'admin'];
+function toggleRole(r: string): void {
+  const i = visibleToRoles.value.indexOf(r);
+  if (i >= 0) visibleToRoles.value.splice(i, 1);
+  else visibleToRoles.value.push(r);
+}
+
 interface Prize { place: number | null; category: string; title: string; description: string; value: string }
 const prizes = ref<Prize[]>([]);
 
@@ -41,6 +51,7 @@ const criteria = ref<Criterion[]>([]);
 watch(contest, (c) => {
   if (!c) return;
   title.value = c.title ?? '';
+  subheading.value = c.subheading ?? '';
   description.value = c.description ?? '';
   rules.value = c.rules ?? '';
   bannerUrl.value = c.bannerUrl ?? '';
@@ -51,10 +62,12 @@ watch(contest, (c) => {
   judgingVisibility.value = (c.judgingVisibility as typeof judgingVisibility.value) ?? 'judges-only';
   eligibleContentTypes.value = [...(c.eligibleContentTypes ?? [])];
   maxEntriesPerUser.value = c.maxEntriesPerUser ?? null;
-  prizes.value = (c.prizes ?? []).map((p: { place?: number; category?: string; title: string; description?: string; value?: string }) => ({
+  visibility.value = (c.visibility as typeof visibility.value) ?? 'public';
+  visibleToRoles.value = [...(c.visibleToRoles ?? [])];
+  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,
+    title: p.title ?? '',
     description: p.description ?? '',
     value: p.value ?? '',
   }));
@@ -71,10 +84,15 @@ function addPrize(): void {
 function removePrize(index: number): void {
   prizes.value.splice(index, 1);
 }
-function prizeLabel(prize: Prize, idx: number): string {
+function prizeLabel(prize: Prize): 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`;
+  if (prize.place && prize.place > 0) {
+    const labels = ['1st', '2nd', '3rd', '4th', '5th', '6th'];
+    return `${labels[prize.place - 1] || `${prize.place}th`} Place`;
+  }
+  // No place + no category: a flexible/description-only prize — don't invent
+  // a placement (the old code labelled these "Nth Place" by row index).
+  return 'Prize';
 }
 
 function addCriterion(): void {
@@ -100,13 +118,13 @@ async function handleSave(): Promise<void> {
   saving.value = true;
   try {
     const prizeData = prizes.value
-      .filter((p) => p.title.trim())
+      .filter((p) => p.title.trim() || p.description.trim() || p.category.trim() || (typeof p.place === 'number' && p.place > 0))
       .map((p) => ({
         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,
+        title: p.title.trim() || undefined,
+        description: p.description.trim() || undefined,
+        value: p.value.trim() || undefined,
       }));
     const criteriaData = criteria.value
       .filter((c) => c.label.trim())
@@ -120,6 +138,7 @@ async function handleSave(): Promise<void> {
       method: 'PUT',
       body: {
         title: title.value,
+        subheading: subheading.value || undefined,
         description: description.value || undefined,
         rules: rules.value || undefined,
         bannerUrl: bannerUrl.value || undefined,
@@ -130,6 +149,8 @@ async function handleSave(): Promise<void> {
         judgingVisibility: judgingVisibility.value,
         eligibleContentTypes: eligibleContentTypes.value,
         maxEntriesPerUser: maxEntriesPerUser.value && maxEntriesPerUser.value > 0 ? maxEntriesPerUser.value : undefined,
+        visibility: visibility.value,
+        visibleToRoles: visibility.value === 'private' ? visibleToRoles.value : [],
         prizes: prizeData,
         judgingCriteria: criteriaData,
       },
@@ -143,6 +164,20 @@ async function handleSave(): Promise<void> {
   }
 }
 
+const deleting = ref(false);
+async function handleDelete(): Promise<void> {
+  if (!confirm('Permanently delete this contest? All entries, judges, and reviewers are removed. This cannot be undone.')) return;
+  deleting.value = true;
+  try {
+    await $fetch(`/api/contests/${slug}`, { method: 'DELETE' });
+    toast.success('Contest deleted');
+    await navigateTo('/contests');
+  } catch (err: unknown) {
+    toast.error(extractError(err));
+    deleting.value = false;
+  }
+}
+
 async function transitionStatus(newStatus: string): Promise<void> {
   const msg = newStatus === 'cancelled'
     ? 'Cancel this contest? This cannot be undone.'
@@ -177,17 +212,23 @@ 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">Subheading</label>
+          <input v-model="subheading" type="text" maxlength="300" class="cpub-form-input" placeholder="One-line tagline shown in the contest header" />
+          <p class="cpub-form-hint">Short plain-text tagline shown under the title in the hero. The Description below is the full body.</p>
+        </div>
         <div class="cpub-form-field">
           <label class="cpub-form-label">Description</label>
-          <textarea v-model="description" class="cpub-form-textarea" rows="3" />
+          <textarea v-model="description" class="cpub-form-textarea" rows="4" />
+          <p class="cpub-form-hint">Supports Markdown (headings, lists, bold, links) and inline HTML. Shown formatted on the contest page.</p>
         </div>
         <div class="cpub-form-field">
           <label class="cpub-form-label">Rules</label>
-          <textarea v-model="rules" class="cpub-form-textarea" rows="4" placeholder="One rule per line" />
+          <textarea v-model="rules" class="cpub-form-textarea" rows="6" placeholder="One rule per line, or full Markdown" />
+          <p class="cpub-form-hint">Supports Markdown. Plain one-rule-per-line text is rendered as a numbered list.</p>
         </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://..." />
+          <ImageUpload v-model="bannerUrl" purpose="banner" label="Banner Image" hint="Wide image shown across the top of the contest page (~4:1)." />
         </div>
       </section>
 
@@ -230,9 +271,10 @@ async function transitionStatus(newStatus: string): Promise<void> {
 
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Prizes</h2>
+        <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 v-for="(prize, i) in prizes" :key="i" class="cpub-prize-row">
           <div class="cpub-prize-header">
-            <span class="cpub-prize-label">{{ prizeLabel(prize, i) }}</span>
+            <span class="cpub-prize-label">{{ prizeLabel(prize) }}</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">
@@ -300,6 +342,33 @@ async function transitionStatus(newStatus: string): Promise<void> {
         </div>
       </section>
 
+      <!-- Visibility & Access -->
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Visibility &amp; Access</h2>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Who can see this contest</label>
+          <select v-model="visibility" class="cpub-form-input">
+            <option value="public">Public — listed and visible to everyone</option>
+            <option value="unlisted">Unlisted — visible by direct link, hidden from listings</option>
+            <option value="private">Private — restricted</option>
+          </select>
+        </div>
+        <div v-if="visibility === 'private'" class="cpub-form-field">
+          <span class="cpub-form-label">Also visible to roles</span>
+          <div class="cpub-type-options" role="group" aria-label="Roles that can view">
+            <label v-for="r in ROLE_OPTIONS" :key="r" class="cpub-form-check">
+              <input type="checkbox" :checked="visibleToRoles.includes(r)" @change="toggleRole(r)" />
+              <span>{{ r }}</span>
+            </label>
+          </div>
+        </div>
+        <div class="cpub-subhead">
+          <h3 class="cpub-form-subtitle">Reviewers</h3>
+        </div>
+        <p class="cpub-form-hint">Reviewers can view this contest (even while it's private or in draft) without being a judge or an admin — view access scoped to this contest only. They can't edit or score entries.</p>
+        <ContestStakeholderManager :contest-slug="slug" />
+      </section>
+
       <!-- Judge panel (single source of truth: contest_judges table) -->
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Judges</h2>
@@ -309,6 +378,14 @@ async function transitionStatus(newStatus: string): Promise<void> {
 
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Status Transitions</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:
+          <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
@@ -317,7 +394,7 @@ async function transitionStatus(newStatus: string): Promise<void> {
             <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
+            <i class="fa-solid fa-flag-checkered"></i> Complete &amp; Publish Results
           </button>
           <button
             v-if="contest.status !== 'completed' && contest.status !== 'cancelled'"
@@ -327,12 +404,29 @@ async function transitionStatus(newStatus: string): Promise<void> {
           >
             <i class="fa-solid fa-ban"></i> Cancel Contest
           </button>
+          <p v-if="contest.status === 'completed' || contest.status === 'cancelled'" class="cpub-status-terminal">
+            <i class="fa-solid fa-circle-check"></i>
+            This contest is {{ contest.status }} — no further status changes are available.
+          </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">
+          <div>
+            <p class="cpub-danger-label">Delete this contest</p>
+            <p class="cpub-form-hint">Permanently removes the contest and all of its entries, judges, and reviewers. This cannot be undone.</p>
+          </div>
+          <button type="button" class="cpub-btn cpub-btn-danger cpub-danger-btn" :disabled="deleting" @click="handleDelete">
+            <i class="fa-solid fa-trash"></i> {{ deleting ? 'Deleting...' : 'Delete Contest' }}
+          </button>
+        </div>
+      </section>
     </form>
   </div>
   <div v-else class="cpub-not-found"><p>Contest not found</p></div>
@@ -387,6 +481,16 @@ 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-status-terminal { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; margin: 0; }
+.cpub-status-terminal i { color: var(--green); }
+
+.cpub-danger-zone { border-color: var(--red-border); }
+.cpub-danger-title { color: var(--red); }
+.cpub-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.cpub-danger-label { font-size: 13px; font-weight: 600; margin: 0 0 2px; }
+.cpub-danger-btn { color: var(--red); border-color: var(--red-border); flex-shrink: 0; }
+.cpub-danger-btn:hover:not(:disabled) { background: var(--red-bg); }
+
 .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) {

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

@@ -27,6 +27,25 @@ const myJudge = computed(() => judges.value.find((j) => j.userId === user.value?
 const pendingInvite = computed(() => !!myJudge.value && !myJudge.value.acceptedAt);
 const canJudge = computed(() => !!myJudge.value && !!myJudge.value.acceptedAt && myJudge.value.role !== 'guest');
 
+// Unique entrants (the people), distinct from entries (the submissions).
+interface Participant { username: string; name: string; avatar: string | null; count: number }
+const participants = computed<Participant[]>(() => {
+  const map = new Map<string, Participant>();
+  for (const e of entries.value) {
+    const cur = map.get(e.authorUsername);
+    if (cur) cur.count++;
+    else map.set(e.authorUsername, { username: e.authorUsername, name: e.authorName, avatar: e.authorAvatarUrl, count: 1 });
+  }
+  return [...map.values()];
+});
+
+// Visibility banner shown to those who can see a non-public contest.
+const visibilityNote = computed(() => {
+  if (!c.value || c.value.visibility === 'public') return null;
+  if (c.value.visibility === 'unlisted') return { icon: 'fa-link', text: 'Unlisted — visible by direct link only, hidden from listings.' };
+  return { icon: 'fa-lock', text: 'Private — visible only to you, reviewers, judges, and allowed roles.' };
+});
+
 // Tabs ----------------------------------------------------------------------
 interface Tab { key: string; label: string; icon: string; count?: number }
 const tabs = computed<Tab[]>(() => {
@@ -34,6 +53,7 @@ const tabs = computed<Tab[]>(() => {
   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 (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 });
   return t;
 });
@@ -207,6 +227,12 @@ async function withdrawEntry(entryId: string): Promise<void> {
             </button>
           </div>
 
+          <!-- Visibility banner (non-public contests, shown to those who can see it) -->
+          <div v-if="visibilityNote" class="cpub-visibility-banner">
+            <i class="fa-solid" :class="visibilityNote.icon"></i>
+            <span>{{ visibilityNote.text }}</span>
+          </div>
+
           <!-- Tab bar -->
           <div class="cpub-tabbar" role="tablist" aria-label="Contest sections">
             <button
@@ -233,7 +259,8 @@ async function withdrawEntry(entryId: string): Promise<void> {
             <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>
+                <CpubMarkdown v-if="c?.description" :source="c.description" />
+                <p v-else>No description available for this contest.</p>
               </div>
             </div>
             <ContestJudgingCriteria v-if="c?.judgingCriteria?.length" :criteria="c.judgingCriteria" />
@@ -261,6 +288,23 @@ async function withdrawEntry(entryId: string): Promise<void> {
             />
           </div>
 
+          <!-- PARTICIPANTS -->
+          <div v-show="activeTab === 'participants'" id="cpub-panel-participants" role="tabpanel" aria-labelledby="cpub-tab-participants" tabindex="0">
+            <div class="cpub-sec-head"><h2><i class="fa-solid fa-users" style="color: var(--accent);"></i> Participants</h2><span class="cpub-sec-sub">{{ participants.length }}</span></div>
+            <div class="cpub-participant-grid">
+              <NuxtLink v-for="p in participants" :key="p.username" :to="`/u/${p.username}`" class="cpub-participant">
+                <span class="cpub-participant-av">
+                  <img v-if="p.avatar" :src="p.avatar" :alt="p.name" />
+                  <span v-else>{{ (p.name || p.username || '?').charAt(0).toUpperCase() }}</span>
+                </span>
+                <span class="cpub-participant-info">
+                  <span class="cpub-participant-name">{{ p.name }}</span>
+                  <span class="cpub-participant-meta">{{ p.count }} {{ p.count === 1 ? 'entry' : 'entries' }}</span>
+                </span>
+              </NuxtLink>
+            </div>
+          </div>
+
           <!-- JUDGES -->
           <div v-show="activeTab === 'judges'" id="cpub-panel-judges" role="tabpanel" aria-labelledby="cpub-tab-judges" tabindex="0">
             <ContestJudges :judges="judges" />
@@ -309,9 +353,25 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
 [role="tabpanel"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
 
+/* VISIBILITY BANNER */
+.cpub-visibility-banner { 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-visibility-banner i { color: var(--accent); }
+
 /* SECTION HEADERS */
 .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); }
+
+/* PARTICIPANTS */
+.cpub-participant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
+.cpub-participant { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); text-decoration: none; }
+.cpub-participant:hover { box-shadow: var(--shadow-accent); }
+.cpub-participant-av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; 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-participant-av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.cpub-participant-info { display: flex; flex-direction: column; min-width: 0; }
+.cpub-participant-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cpub-participant-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
+@media (max-width: 480px) { .cpub-participant-grid { grid-template-columns: 1fr; } }
 
 /* ABOUT */
 .cpub-about-section { margin-bottom: 20px; }

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

@@ -5,7 +5,14 @@ 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`);
+// Full standings: rank-ordered (not submit-ordered) + a high cap so every
+// finalist surfaces, not just the 20 most-recent entries.
+const { data: entriesData } = useLazyFetch<{ items: Serialized<ContestEntryItem>[]; total: number }>(
+  `/api/contests/${slug}/entries`,
+  { query: { order: 'rank', limit: 100 } },
+);
+const totalEntries = computed(() => entriesData.value?.total ?? 0);
+const shownEntries = computed(() => rankedEntries.value.length);
 const { data: votesData } = useLazyFetch<ContestEntryVoteInfo[]>(`/api/contests/${slug}/votes`);
 
 useSeoMeta({
@@ -43,8 +50,8 @@ 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);
+function prizeForRank(rank: number): { title?: string; value?: string } | null {
+  const prize = prizes.value.find((p: { place?: number; title?: string; value?: string }) => p.place === rank);
   return prize ?? null;
 }
 
@@ -120,7 +127,13 @@ function medalColor(rank: number): string {
 
       <!-- LEADERBOARD -->
       <div v-if="leaderboard.length > 0" class="cpub-leaderboard">
-        <h2 class="cpub-leaderboard-title">Full Leaderboard</h2>
+        <div class="cpub-leaderboard-head">
+          <h2 class="cpub-leaderboard-title">Full Standings</h2>
+          <span class="cpub-leaderboard-count">
+            {{ totalEntries }} {{ totalEntries === 1 ? 'entry' : 'entries' }}
+            <template v-if="shownEntries < totalEntries"> · showing top {{ shownEntries }}</template>
+          </span>
+        </div>
         <div class="cpub-leaderboard-scroll">
         <table class="cpub-leaderboard-table">
           <thead>
@@ -191,7 +204,9 @@ function medalColor(rank: number): string {
 
 /* LEADERBOARD */
 .cpub-leaderboard { margin-bottom: 32px; }
-.cpub-leaderboard-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
+.cpub-leaderboard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
+.cpub-leaderboard-title { font-size: 16px; font-weight: 700; }
+.cpub-leaderboard-count { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); }
 /* Horizontal scroll on narrow screens instead of overflowing the page. */
 .cpub-leaderboard-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
 .cpub-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 420px; }

package/pages/contests/create.vue

@@ -8,6 +8,7 @@ const { extract: extractError } = useApiError();
 const saving = ref(false);
 
 const title = ref('');
+const subheading = ref('');
 const description = ref('');
 const rules = ref('');
 const bannerUrl = ref('');
@@ -17,6 +18,16 @@ const judgingEndDate = ref('');
 const communityVotingEnabled = ref(false);
 const judgingVisibility = ref<'public' | 'judges-only' | 'private'>('judges-only');
 
+// Visibility & access
+const visibility = ref<'public' | 'unlisted' | 'private'>('public');
+const visibleToRoles = ref<string[]>([]);
+const ROLE_OPTIONS = ['member', 'pro', 'verified', 'staff', 'admin'];
+function toggleRole(r: string): void {
+  const i = visibleToRoles.value.indexOf(r);
+  if (i >= 0) visibleToRoles.value.splice(i, 1);
+  else visibleToRoles.value.push(r);
+}
+
 // Entry rules
 const { enabledTypeMeta } = useContentTypes();
 const eligibleContentTypes = ref<string[]>([]); // empty = all types allowed
@@ -80,6 +91,7 @@ async function handleCreate(): Promise<void> {
       method: 'POST',
       body: {
         title: title.value,
+        subheading: subheading.value || undefined,
         description: description.value || undefined,
         rules: rules.value || undefined,
         bannerUrl: bannerUrl.value || undefined,
@@ -88,16 +100,18 @@ async function handleCreate(): Promise<void> {
         judgingEndDate: judgingEndDate.value ? new Date(judgingEndDate.value).toISOString() : undefined,
         communityVotingEnabled: communityVotingEnabled.value,
         judgingVisibility: judgingVisibility.value,
+        visibility: visibility.value,
+        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,
         prizes: prizes.value
-          .filter(p => p.title.trim())
+          .filter(p => p.title.trim() || p.description.trim() || p.category.trim() || (typeof p.place === 'number' && p.place > 0))
           .map(p => ({
             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,
+            title: p.title.trim() || undefined,
+            description: p.description.trim() || undefined,
+            value: p.value.trim() || undefined,
           })),
         judgingCriteria: criteria.value
           .filter(c => c.label.trim())
@@ -117,10 +131,13 @@ async function handleCreate(): Promise<void> {
   }
 }
 
-function prizeLabel(prize: Prize, idx: number): string {
+function prizeLabel(prize: Prize): string {
   if (prize.category.trim()) return prize.category;
-  const labels = ['1st', '2nd', '3rd', '4th', '5th', '6th'];
-  return `${labels[idx] || `${idx + 1}th`} Place`;
+  if (prize.place && prize.place > 0) {
+    const labels = ['1st', '2nd', '3rd', '4th', '5th', '6th'];
+    return `${labels[prize.place - 1] || `${prize.place}th`} Place`;
+  }
+  return 'Prize';
 }
 </script>
 
@@ -137,17 +154,23 @@ function prizeLabel(prize: Prize, idx: number): 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-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" />
+          <p class="cpub-form-hint">Short plain-text tagline shown under the title in the hero. The Description below is the full body.</p>
+        </div>
         <div class="cpub-form-field">
           <label for="contest-desc" class="cpub-form-label">Description</label>
-          <textarea id="contest-desc" v-model="description" class="cpub-form-textarea" rows="3" placeholder="Describe your contest..." />
+          <textarea id="contest-desc" v-model="description" class="cpub-form-textarea" rows="4" placeholder="Describe your contest. Supports Markdown — # headings, - lists, **bold**, [links](url)…" />
+          <p class="cpub-form-hint">Supports Markdown (headings, lists, bold, links) and inline HTML. Shown formatted on the contest page.</p>
         </div>
         <div class="cpub-form-field">
           <label for="contest-rules" class="cpub-form-label">Rules</label>
-          <textarea id="contest-rules" v-model="rules" class="cpub-form-textarea" rows="4" placeholder="Contest rules and requirements (one per line)..." />
+          <textarea id="contest-rules" v-model="rules" class="cpub-form-textarea" rows="6" placeholder="Contest rules and requirements. Supports Markdown — one rule per line, or full Markdown." />
+          <p class="cpub-form-hint">Supports Markdown. Plain one-rule-per-line text is rendered as a numbered list.</p>
         </div>
         <div class="cpub-form-field">
-          <label for="contest-banner" class="cpub-form-label">Banner Image URL</label>
-          <input id="contest-banner" v-model="bannerUrl" type="url" class="cpub-form-input" placeholder="https://..." />
+          <ImageUpload v-model="bannerUrl" purpose="banner" label="Banner Image" hint="Wide image shown across the top of the contest page (~4:1)." />
         </div>
       </section>
 
@@ -171,6 +194,30 @@ function prizeLabel(prize: Prize, idx: number): string {
         <p v-if="dateError" class="cpub-form-error" role="alert">{{ dateError }}</p>
       </section>
 
+      <!-- Visibility & Access -->
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Visibility &amp; Access</h2>
+        <div class="cpub-form-field">
+          <label for="visibility" class="cpub-form-label">Who can see this contest</label>
+          <select id="visibility" v-model="visibility" class="cpub-form-input">
+            <option value="public">Public — listed and visible to everyone</option>
+            <option value="unlisted">Unlisted — visible by direct link, hidden from listings</option>
+            <option value="private">Private — restricted (you can publish it later)</option>
+          </select>
+        </div>
+        <div v-if="visibility === 'private'" class="cpub-form-field">
+          <span class="cpub-form-label">Also visible to roles</span>
+          <p class="cpub-form-hint">Owner, admins, judges, and reviewers (added after creation) can always see it. Optionally grant whole roles too.</p>
+          <div class="cpub-type-options" role="group" aria-label="Roles that can view">
+            <label v-for="r in ROLE_OPTIONS" :key="r" class="cpub-form-check">
+              <input type="checkbox" :checked="visibleToRoles.includes(r)" @change="toggleRole(r)" />
+              <span>{{ r }}</span>
+            </label>
+          </div>
+        </div>
+        <p v-if="visibility === 'private'" class="cpub-form-hint">Add named reviewers (stakeholders) from the contest's Edit page after creating it.</p>
+      </section>
+
       <!-- Entry Rules -->
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Entries</h2>
@@ -238,11 +285,11 @@ function prizeLabel(prize: Prize, idx: number): string {
           </button>
         </div>
 
-        <p class="cpub-form-hint">Use <strong>place</strong> for ranked prizes (1st/2nd/3rd) or a <strong>category</strong> for themed awards (e.g. "Best in Show").</p>
+        <p class="cpub-form-hint">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 v-for="(prize, idx) in prizes" :key="idx" class="cpub-prize-card">
           <div class="cpub-prize-header">
             <span class="cpub-prize-place">
-              <i class="fa-solid fa-trophy"></i> {{ prizeLabel(prize, idx) }}
+              <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)">
               <i class="fa-solid fa-xmark"></i>

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

@@ -126,7 +126,7 @@ const typeIcon = computed(() => {
         </div>
 
         <div v-if="event.description" class="cpub-event-description">
-          {{ event.description }}
+          <CpubMarkdown :source="event.description" />
         </div>
 
         <div class="cpub-event-organizer">

package/pages/notifications.vue

@@ -27,6 +27,14 @@ async function deleteNotification(id: string): Promise<void> {
   await $fetch(`/api/notifications/${id}`, { method: 'DELETE' });
   refresh();
 }
+
+// Fired when a row is clicked/navigated — mark it read so the unread highlight
+// + nav badge clear. Fire-and-forget: navigation proceeds regardless.
+function onNotificationRead(id: string): void {
+  $fetch('/api/notifications/read', { method: 'POST', body: { notificationId: id } })
+    .then(() => refresh())
+    .catch(() => {});
+}
 </script>
 
 <template>
@@ -59,6 +67,7 @@ async function deleteNotification(id: string): Promise<void> {
         v-for="n in filteredNotifications"
         :key="n.id"
         :notification="n"
+        @read="onNotificationRead"
       />
       <div v-if="!filteredNotifications.length" class="cpub-empty-state">
         <div class="cpub-empty-state-icon"><i class="fa-solid fa-bell-slash"></i></div>

package/server/api/admin/api-keys/[id]/usage.get.ts

@@ -6,7 +6,7 @@ const querySchema = z.object({
 });
 
 export default defineEventHandler(async (event) => {
-  requireAdmin(event);
+  requirePermission(event, 'apikeys.manage');
   const id = getRouterParam(event, 'id');
   if (!id) throw createError({ statusCode: 400, statusMessage: 'Missing id' });
   const parsed = querySchema.safeParse(getQuery(event));

package/server/api/admin/api-keys/[id].delete.ts

@@ -1,7 +1,7 @@
 import { revokeApiKey, createAuditEntry } from '@commonpub/server';
 
 export default defineEventHandler(async (event) => {
-  const user = requireAdmin(event);
+  const user = requirePermission(event, 'apikeys.manage');
   const id = getRouterParam(event, 'id');
   if (!id) throw createError({ statusCode: 400, statusMessage: 'Missing id' });
   const db = useDB();

package/server/api/admin/api-keys/index.get.ts

@@ -1,7 +1,7 @@
 import { listApiKeys } from '@commonpub/server';
 
 export default defineEventHandler(async (event) => {
-  requireAdmin(event);
+  requirePermission(event, 'apikeys.manage');
   const query = getQuery(event);
   const includeRevoked = query.includeRevoked === 'true' || query.includeRevoked === '1';
   const db = useDB();

package/server/api/admin/api-keys/index.post.ts

@@ -14,7 +14,7 @@ import { createApiKeySchema } from '@commonpub/schema';
  * land in the metadata column.
  */
 export default defineEventHandler(async (event) => {
-  const user = requireAdmin(event);
+  const user = requirePermission(event, 'apikeys.manage');
   const body = await readBody(event);
   const parsed = createApiKeySchema.safeParse(body);
   if (!parsed.success) {