@commonpub/layer 0.15.1 → 0.15.3

package/components/CommentSection.vue

@@ -12,7 +12,8 @@ interface Comment {
   createdAt: string;
   parentId: string | null;
   author: CommentAuthor | null;
-  replies?: Comment[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  replies?: any[];
 }
 
 const props = defineProps<{
@@ -38,6 +39,8 @@ const queryParams = computed(() =>
   isFederated.value ? undefined : { targetType: props.targetType, targetId: props.targetId, limit: commentLimit },
 );
 
+// @ts-ignore TS2589: useFetch<Comment[]> with this query shape hits deep
+// type instantiation in some consumer apps (notably shell). Runtime is fine.
 const { data: comments, refresh } = await useFetch<Comment[]>(commentUrl, { query: queryParams, lazy: true });
 
 const allCommentsLoaded = ref(false);

package/components/EventCalendar.vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import type { EventListItem } from '@commonpub/server';
+
+const props = defineProps<{
+  events: EventListItem[];
+}>();
+
+const today = new Date();
+const currentMonth = ref(today.getMonth());
+const currentYear = ref(today.getFullYear());
+
+const monthName = computed(() =>
+  new Date(currentYear.value, currentMonth.value).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }),
+);
+
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const;
+
+interface CalendarDay {
+  date: number;
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  events: EventListItem[];
+  key: string;
+}
+
+const calendarDays = computed<CalendarDay[]>(() => {
+  const year = currentYear.value;
+  const month = currentMonth.value;
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const daysInPrevMonth = new Date(year, month, 0).getDate();
+
+  // Build event lookup: dateString → events[]
+  const eventMap = new Map<string, EventListItem[]>();
+  for (const ev of props.events) {
+    const start = new Date(ev.startDate);
+    const end = new Date(ev.endDate);
+    // Mark each day the event spans
+    const d = new Date(start);
+    d.setHours(0, 0, 0, 0);
+    const endDay = new Date(end);
+    endDay.setHours(23, 59, 59, 999);
+    let safetyCount = 0;
+    while (d <= endDay && safetyCount++ < 366) {
+      const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+      const list = eventMap.get(key) ?? [];
+      list.push(ev);
+      eventMap.set(key, list);
+      d.setDate(d.getDate() + 1);
+    }
+  }
+
+  const days: CalendarDay[] = [];
+
+  // Previous month padding
+  for (let i = firstDay - 1; i >= 0; i--) {
+    const date = daysInPrevMonth - i;
+    const m = month === 0 ? 11 : month - 1;
+    const y = month === 0 ? year - 1 : year;
+    const key = `${y}-${m}-${date}`;
+    days.push({ date, isCurrentMonth: false, isToday: false, events: eventMap.get(key) ?? [], key: `p-${date}` });
+  }
+
+  // Current month
+  for (let date = 1; date <= daysInMonth; date++) {
+    const isToday = date === today.getDate() && month === today.getMonth() && year === today.getFullYear();
+    const key = `${year}-${month}-${date}`;
+    days.push({ date, isCurrentMonth: true, isToday, events: eventMap.get(key) ?? [], key: `c-${date}` });
+  }
+
+  // Next month padding (fill to complete 6 rows)
+  const remaining = 42 - days.length;
+  for (let date = 1; date <= remaining; date++) {
+    const m = month === 11 ? 0 : month + 1;
+    const y = month === 11 ? year + 1 : year;
+    const key = `${y}-${m}-${date}`;
+    days.push({ date, isCurrentMonth: false, isToday: false, events: eventMap.get(key) ?? [], key: `n-${date}` });
+  }
+
+  return days;
+});
+
+function prevMonth(): void {
+  if (currentMonth.value === 0) {
+    currentMonth.value = 11;
+    currentYear.value--;
+  } else {
+    currentMonth.value--;
+  }
+}
+
+function nextMonth(): void {
+  if (currentMonth.value === 11) {
+    currentMonth.value = 0;
+    currentYear.value++;
+  } else {
+    currentMonth.value++;
+  }
+}
+
+function goToday(): void {
+  currentMonth.value = today.getMonth();
+  currentYear.value = today.getFullYear();
+}
+
+const typeIcon: Record<string, string> = {
+  'in-person': 'fa-solid fa-location-dot',
+  'online': 'fa-solid fa-video',
+  'hybrid': 'fa-solid fa-arrows-split-up-and-left',
+};
+</script>
+
+<template>
+  <div class="cpub-calendar">
+    <div class="cpub-cal-header">
+      <button class="cpub-cal-nav" aria-label="Previous month" @click="prevMonth">
+        <i class="fa-solid fa-chevron-left"></i>
+      </button>
+      <button class="cpub-cal-title" @click="goToday">{{ monthName }}</button>
+      <button class="cpub-cal-nav" aria-label="Next month" @click="nextMonth">
+        <i class="fa-solid fa-chevron-right"></i>
+      </button>
+    </div>
+
+    <div class="cpub-cal-weekdays">
+      <div v-for="day in WEEKDAYS" :key="day" class="cpub-cal-weekday">{{ day }}</div>
+    </div>
+
+    <div class="cpub-cal-grid">
+      <div
+        v-for="day in calendarDays"
+        :key="day.key"
+        class="cpub-cal-day"
+        :class="{
+          'cpub-cal-other': !day.isCurrentMonth,
+          'cpub-cal-today': day.isToday,
+          'cpub-cal-has-events': day.events.length > 0,
+        }"
+      >
+        <span class="cpub-cal-date">{{ day.date }}</span>
+        <div v-if="day.events.length > 0" class="cpub-cal-events">
+          <NuxtLink
+            v-for="ev in day.events.slice(0, 2)"
+            :key="ev.id"
+            :to="`/events/${ev.slug}`"
+            class="cpub-cal-event"
+            :title="ev.title"
+          >
+            <i :class="typeIcon[ev.eventType] ?? 'fa-solid fa-calendar'" class="cpub-cal-event-icon"></i>
+            <span class="cpub-cal-event-title">{{ ev.title }}</span>
+          </NuxtLink>
+          <span v-if="day.events.length > 2" class="cpub-cal-more">
+            +{{ day.events.length - 2 }} more
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-calendar {
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-cal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-cal-nav {
+  background: none;
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text-dim);
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 11px;
+  transition: all 0.15s;
+}
+.cpub-cal-nav:hover { border-color: var(--border); color: var(--text); }
+
+.cpub-cal-title {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.cpub-cal-title:hover { color: var(--accent); }
+
+.cpub-cal-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border-bottom: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-cal-weekday {
+  padding: 6px 0;
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-faint);
+}
+
+.cpub-cal-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.cpub-cal-day {
+  min-height: 80px;
+  padding: 4px 6px;
+  border-right: var(--border-width-default) solid var(--border2);
+  border-bottom: var(--border-width-default) solid var(--border2);
+  position: relative;
+}
+.cpub-cal-day:nth-child(7n) { border-right: none; }
+
+.cpub-cal-other { background: var(--surface2); }
+.cpub-cal-other .cpub-cal-date { color: var(--text-faint); }
+
+.cpub-cal-today { background: var(--accent-bg); }
+.cpub-cal-today .cpub-cal-date {
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.cpub-cal-date {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-dim);
+  display: block;
+  margin-bottom: 2px;
+}
+
+.cpub-cal-events {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cpub-cal-event {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 1px 4px;
+  background: var(--accent-bg);
+  border-left: 2px solid var(--accent);
+  text-decoration: none;
+  overflow: hidden;
+  transition: background 0.12s;
+}
+.cpub-cal-event:hover { background: var(--surface3); }
+
+.cpub-cal-event-icon {
+  font-size: 8px;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.cpub-cal-event-title {
+  font-size: 10px;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.4;
+}
+
+.cpub-cal-more {
+  font-size: 9px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  padding-left: 4px;
+}
+
+@media (max-width: 768px) {
+  .cpub-cal-day { min-height: 50px; padding: 2px 3px; }
+  .cpub-cal-event-title { display: none; }
+  .cpub-cal-event { padding: 2px; justify-content: center; border-left: none; }
+  .cpub-cal-event-icon { font-size: 10px; }
+  .cpub-cal-more { display: none; }
+}
+</style>

package/components/contest/ContestEntries.vue

@@ -1,16 +1,78 @@
 <script setup lang="ts">
-import type { Serialized, ContestEntryItem } from '@commonpub/server';
+import type { Serialized, ContestEntryItem, ContestEntryVoteInfo } from '@commonpub/server';
 
 const props = defineProps<{
   entries: Serialized<ContestEntryItem>[];
   contestStatus?: string;
+  contestSlug?: string;
   currentUserId?: string;
+  communityVotingEnabled?: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'withdraw', entryId: string): void;
 }>();
 
+const { isAuthenticated } = useAuth();
+const toast = useToast();
+
+// Vote state: entryId → { count, voted }
+const voteMap = ref<Map<string, { count: number; voted: boolean }>>(new Map());
+const votingEntry = ref<string | null>(null);
+
+// Fetch vote data — always set up the fetch (server returns [] when voting is disabled).
+// Cannot conditionally call useLazyFetch because props from useLazyFetch parent
+// may still be undefined during setup.
+if (props.contestSlug) {
+  const { data: voteData } = useLazyFetch<ContestEntryVoteInfo[]>(
+    `/api/contests/${props.contestSlug}/votes`,
+  );
+  watch(voteData, (data) => {
+    if (!data) return;
+    const map = new Map<string, { count: number; voted: boolean }>();
+    for (const v of data) {
+      map.set(v.entryId, { count: v.count, voted: v.voted });
+    }
+    voteMap.value = map;
+  }, { immediate: true });
+}
+
+function getVoteCount(entryId: string): number {
+  return voteMap.value.get(entryId)?.count ?? 0;
+}
+
+function hasVoted(entryId: string): boolean {
+  return voteMap.value.get(entryId)?.voted ?? false;
+}
+
+async function toggleVote(entryId: string): Promise<void> {
+  if (!isAuthenticated.value || !props.contestSlug || votingEntry.value) return;
+  votingEntry.value = entryId;
+
+  const currentlyVoted = hasVoted(entryId);
+  const currentCount = getVoteCount(entryId);
+
+  // Optimistic update
+  voteMap.value.set(entryId, {
+    count: currentlyVoted ? currentCount - 1 : currentCount + 1,
+    voted: !currentlyVoted,
+  });
+
+  try {
+    if (currentlyVoted) {
+      await $fetch(`/api/contests/${props.contestSlug}/entries/${entryId}/vote`, { method: 'DELETE' });
+    } else {
+      await $fetch(`/api/contests/${props.contestSlug}/entries/${entryId}/vote`, { method: 'POST' });
+    }
+  } catch {
+    // Revert optimistic update
+    voteMap.value.set(entryId, { count: currentCount, voted: currentlyVoted });
+    toast.error(currentlyVoted ? 'Failed to remove vote' : 'Failed to vote');
+  } finally {
+    votingEntry.value = null;
+  }
+}
+
 function confirmWithdraw(entryId: string): void {
   if (confirm('Withdraw this entry? This cannot be undone.')) {
     emit('withdraw', entryId);
@@ -50,6 +112,18 @@ function confirmWithdraw(entryId: string): void {
           </div>
           <div class="cpub-entry-footer">
             <span v-if="entry.score != null" class="cpub-entry-score">Score: {{ entry.score }}</span>
+            <button
+              v-if="communityVotingEnabled"
+              class="cpub-entry-vote-btn"
+              :class="{ voted: hasVoted(entry.id) }"
+              :disabled="!isAuthenticated || votingEntry === entry.id"
+              :aria-pressed="hasVoted(entry.id)"
+              :aria-label="hasVoted(entry.id) ? 'Remove vote' : 'Vote for this entry'"
+              @click.prevent="toggleVote(entry.id)"
+            >
+              <i :class="hasVoted(entry.id) ? 'fa-solid fa-heart' : 'fa-regular fa-heart'"></i>
+              <span>{{ getVoteCount(entry.id) }}</span>
+            </button>
             <button
               v-if="currentUserId && entry.userId === currentUserId && contestStatus === 'active'"
               class="cpub-withdraw-btn"
@@ -100,6 +174,19 @@ function confirmWithdraw(entryId: string): void {
 .cpub-entry-meta { color: var(--text-faint); }
 .cpub-entry-footer { display: flex; align-items: center; gap: 6px; }
 .cpub-entry-score { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); display: flex; align-items: center; gap: 3px; }
+
+.cpub-entry-vote-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 11px; font-family: var(--font-mono); font-weight: 600;
+  padding: 3px 8px; border: var(--border-width-default) solid var(--border2);
+  background: var(--surface); color: var(--text-dim); cursor: pointer;
+  transition: all 0.15s;
+}
+.cpub-entry-vote-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
+.cpub-entry-vote-btn.voted { color: var(--red); border-color: var(--red); }
+.cpub-entry-vote-btn:disabled { opacity: 0.4; cursor: default; }
+.cpub-entry-vote-btn i { font-size: 10px; }
+
 .cpub-withdraw-btn { display: flex; align-items: center; gap: 4px; font-size: 10px; font-family: var(--font-mono); padding: 3px 8px; border-radius: var(--radius); border: var(--border-width-default) solid var(--red-border); background: var(--surface); color: var(--red); cursor: pointer; margin-left: auto; }
 .cpub-withdraw-btn:hover { background: var(--red-bg); }
 

package/error.vue

@@ -9,6 +9,13 @@ const props = defineProps<{
 
 useSeoMeta({ title: `${props.error.statusCode} — CommonPub` });
 
+// Error pages render outside app.vue's NuxtLayout tree during SSR,
+// so the theme plugin's useHead may not propagate. Re-apply here.
+const themeId = useState<string>('cpub-theme', () => 'base');
+if (themeId.value && themeId.value !== 'base') {
+  useHead({ htmlAttrs: { 'data-theme': themeId.value } });
+}
+
 const isNotFound = computed(() => props.error.statusCode === 404);
 
 function handleBack(): void {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.15.1",
+  "version": "0.15.3",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -30,7 +30,7 @@
     "@aws-sdk/client-s3": "^3.1010.0",
     "@commonpub/explainer": "^0.7.11",
     "@commonpub/schema": "^0.13.0",
-    "@commonpub/server": "^2.42.0",
+    "@commonpub/server": "^2.43.0",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bold": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.0",
@@ -53,13 +53,13 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.5.1",
     "@commonpub/docs": "0.6.2",
     "@commonpub/config": "0.10.0",
-    "@commonpub/editor": "0.7.9",
-    "@commonpub/learning": "0.5.0",
     "@commonpub/protocol": "0.9.9",
-    "@commonpub/ui": "0.8.5"
+    "@commonpub/learning": "0.5.0",
+    "@commonpub/ui": "0.8.5",
+    "@commonpub/auth": "0.5.1",
+    "@commonpub/editor": "0.7.9"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/admin/content.vue

@@ -12,7 +12,22 @@ interface Category {
   icon: string | null;
 }
 
-const { data, refresh } = await useFetch('/api/content', {
+interface AdminContentItem {
+  id: string;
+  source?: string;
+  title: string;
+  slug: string;
+  type: string;
+  status: string;
+  isEditorial?: boolean;
+  isFeatured?: boolean;
+  categoryId?: string | null;
+  viewCount?: number;
+  createdAt: string;
+  author?: { id: string; username: string; displayName: string | null } | null;
+}
+
+const { data, refresh } = await useFetch<{ items: AdminContentItem[] }>('/api/content', {
   query: { limit: 50, sort: 'recent' },
 });
 const { data: categories } = await useFetch<Category[]>('/api/categories');
@@ -22,7 +37,11 @@ const selectAll = ref(false);
 
 watch(selectAll, (val) => {
   if (val && data.value?.items) {
-    selectedIds.value = new Set(data.value.items.filter(i => i.source !== 'federated').map(i => i.id));
+    selectedIds.value = new Set(
+      data.value.items
+        .filter((i: AdminContentItem) => i.source !== 'federated')
+        .map((i: AdminContentItem) => i.id),
+    );
   } else {
     selectedIds.value = new Set();
   }

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

@@ -144,7 +144,9 @@ async function withdrawEntry(entryId: string): Promise<void> {
           <ContestEntries
             :entries="entries"
             :contest-status="c?.status"
+            :contest-slug="slug"
             :current-user-id="user?.id"
+            :community-voting-enabled="c?.communityVotingEnabled"
             @withdraw="withdrawEntry"
           />
         </div>

package/pages/dashboard.vue

@@ -15,8 +15,19 @@ const activeTab = ref<'content' | 'bookmarks' | 'learning'>('content');
 const contentSort = ref<'newest' | 'oldest' | 'popular'>('newest');
 const contentTypeFilter = ref('');
 
+interface DashContentItem {
+  id: string;
+  type: string;
+  slug: string;
+  title: string;
+  status: string;
+  createdAt: string;
+  viewCount?: number;
+  likeCount?: number;
+}
+
 // My content (all statuses)
-const { data: myContent, status: contentStatus } = await useFetch('/api/content', {
+const { data: myContent, status: contentStatus } = await useFetch<{ items: DashContentItem[] }>('/api/content', {
   query: { authorId: user.value?.id },
   headers: reqHeaders,
 });
@@ -65,19 +76,27 @@ function sortItems<T extends { createdAt: string; viewCount?: number; likeCount?
   return sorted;
 }
 
-const drafts = computed(() =>
-  sortItems(filterByType((myContent.value?.items ?? []).filter((i: { status: string }) => i.status === 'draft'))),
+const drafts = computed<DashContentItem[]>(() =>
+  sortItems<DashContentItem>(
+    filterByType<DashContentItem>(
+      (myContent.value?.items ?? []).filter((i: DashContentItem) => i.status === 'draft'),
+    ),
+  ),
 );
-const published = computed(() =>
-  sortItems(filterByType((myContent.value?.items ?? []).filter((i: { status: string }) => i.status === 'published'))),
+const published = computed<DashContentItem[]>(() =>
+  sortItems<DashContentItem>(
+    filterByType<DashContentItem>(
+      (myContent.value?.items ?? []).filter((i: DashContentItem) => i.status === 'published'),
+    ),
+  ),
 );
 
 // Stats use ALL items (unfiltered) so totals don't change with filter selection
-const allPublished = computed(() =>
-  (myContent.value?.items ?? []).filter((i: { status: string }) => i.status === 'published'),
+const allPublished = computed<DashContentItem[]>(() =>
+  (myContent.value?.items ?? []).filter((i: DashContentItem) => i.status === 'published'),
 );
-const allDrafts = computed(() =>
-  (myContent.value?.items ?? []).filter((i: { status: string }) => i.status === 'draft'),
+const allDrafts = computed<DashContentItem[]>(() =>
+  (myContent.value?.items ?? []).filter((i: DashContentItem) => i.status === 'draft'),
 );
 const totalViews = computed(() =>
   allPublished.value.reduce((sum, item) => sum + (item.viewCount ?? 0), 0),

package/pages/docs/[siteSlug]/edit.vue

@@ -24,9 +24,10 @@ const { data: site, refresh: refreshSite } = await useFetch<{ id: string; name:
 
 // Version selector
 const selectedVersion = ref('');
+type SiteVersion = { id: string; version: string; isDefault: boolean };
 watch(site, (s) => {
   if (s?.versions?.length && !selectedVersion.value) {
-    const def = s.versions.find((v) => v.isDefault) ?? s.versions[0];
+    const def = s.versions.find((v: SiteVersion) => v.isDefault) ?? s.versions[0];
     if (def) selectedVersion.value = def.version;
   }
 }, { immediate: true });
@@ -34,7 +35,7 @@ watch(site, (s) => {
 // Resolve selected version string → version UUID for write operations
 const selectedVersionId = computed(() => {
   if (!site.value?.versions?.length || !selectedVersion.value) return undefined;
-  return site.value.versions.find((v) => v.version === selectedVersion.value)?.id;
+  return site.value.versions.find((v: SiteVersion) => v.version === selectedVersion.value)?.id;
 });
 
 const { data: rawPages, refresh: refreshPages } = await useFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null; content: string | BlockTuple[] | null; format?: string }>>(() => {

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

@@ -27,6 +27,7 @@ const saving = ref(false);
 const form = reactive({
   title: event.value.title,
   description: event.value.description ?? '',
+  coverImage: event.value.coverImage ?? '',
   eventType: event.value.eventType,
   status: event.value.status,
   startDate: new Date(event.value.startDate).toISOString().slice(0, 16),
@@ -61,6 +62,7 @@ async function submit(): Promise<void> {
       isFeatured: form.isFeatured,
     };
     if (form.description) body.description = form.description;
+    body.coverImage = form.coverImage || null;
     if (form.location) body.location = form.location;
     if (form.locationUrl) body.locationUrl = form.locationUrl;
     if (form.onlineUrl) body.onlineUrl = form.onlineUrl;
@@ -92,6 +94,8 @@ async function submit(): Promise<void> {
         <textarea v-model="form.description" class="cpub-form-textarea" rows="4" />
       </div>
 
+      <ImageUpload v-model="form.coverImage" purpose="cover" label="Cover Image" hint="Recommended: 16:9 aspect ratio" />
+
       <div class="cpub-form-row">
         <div class="cpub-form-field">
           <label class="cpub-form-label">Type</label>

package/pages/events/create.vue

@@ -9,6 +9,7 @@ const saving = ref(false);
 const form = reactive({
   title: '',
   description: '',
+  coverImage: '',
   eventType: 'in-person' as 'in-person' | 'online' | 'hybrid',
   startDate: '',
   endDate: '',
@@ -24,6 +25,10 @@ async function submit(): Promise<void> {
     toast.error('Title, start date, and end date are required');
     return;
   }
+  if (new Date(form.startDate) >= new Date(form.endDate)) {
+    toast.error('End date must be after start date');
+    return;
+  }
 
   saving.value = true;
   try {
@@ -35,6 +40,7 @@ async function submit(): Promise<void> {
       timezone: form.timezone,
     };
     if (form.description) body.description = form.description;
+    if (form.coverImage) body.coverImage = form.coverImage;
     if (form.location) body.location = form.location;
     if (form.locationUrl) body.locationUrl = form.locationUrl;
     if (form.onlineUrl) body.onlineUrl = form.onlineUrl;
@@ -69,6 +75,8 @@ async function submit(): Promise<void> {
         <textarea v-model="form.description" class="cpub-form-textarea" rows="4" placeholder="Describe the event..." />
       </div>
 
+      <ImageUpload v-model="form.coverImage" purpose="cover" label="Cover Image" hint="Recommended: 16:9 aspect ratio" />
+
       <div class="cpub-form-row">
         <div class="cpub-form-field">
           <label class="cpub-form-label">Type</label>

package/pages/events/index.vue

@@ -4,7 +4,53 @@ import type { EventListItem } from '@commonpub/server';
 useSeoMeta({ title: `Events — ${useSiteName()}` });
 
 const { isAuthenticated } = useAuth();
-const { data } = await useFetch<{ items: EventListItem[]; total: number }>('/api/events');
+const route = useRoute();
+const router = useRouter();
+
+const LIMIT = 12;
+
+const activeFilter = ref<string>((route.query.filter as string) || 'upcoming');
+const page = ref(Math.max(1, Number(route.query.page) || 1));
+const viewMode = ref<'grid' | 'calendar'>(route.query.view === 'calendar' ? 'calendar' : 'grid');
+
+const queryParams = computed(() => {
+  // Calendar view fetches more events (no pagination, wider window)
+  if (viewMode.value === 'calendar') {
+    const q: Record<string, string | number> = { limit: 100 };
+    if (activeFilter.value === 'mine') q.myEvents = 'true';
+    return q;
+  }
+  const q: Record<string, string | number> = { limit: LIMIT, offset: (page.value - 1) * LIMIT };
+  if (activeFilter.value === 'upcoming') q.upcoming = 'true';
+  if (activeFilter.value === 'featured') q.featured = 'true';
+  if (activeFilter.value === 'past') {
+    q.status = 'completed';
+  }
+  if (activeFilter.value === 'mine') q.myEvents = 'true';
+  return q;
+});
+
+const { data, refresh } = await useFetch<{ items: EventListItem[]; total: number }>('/api/events', {
+  query: queryParams,
+});
+
+const totalPages = computed(() => Math.max(1, Math.ceil((data.value?.total ?? 0) / LIMIT)));
+
+function setFilter(filter: string): void {
+  activeFilter.value = filter;
+  page.value = 1;
+  router.replace({ query: { filter, page: undefined, view: viewMode.value !== 'grid' ? viewMode.value : undefined } });
+}
+
+function setPage(p: number): void {
+  page.value = p;
+  router.replace({ query: { ...route.query, page: p > 1 ? String(p) : undefined } });
+}
+
+function setView(mode: 'grid' | 'calendar'): void {
+  viewMode.value = mode;
+  router.replace({ query: { ...route.query, view: mode !== 'grid' ? mode : undefined } });
+}
 </script>
 
 <template>
@@ -16,20 +62,80 @@ const { data } = await useFetch<{ items: EventListItem[]; total: number }>('/api
       </NuxtLink>
     </div>
 
-    <div v-if="data?.items?.length" class="cpub-events-grid">
-      <EventCard v-for="event in data.items" :key="event.id" :event="event" />
-    </div>
-    <div v-else class="cpub-empty-state">
-      <div class="cpub-empty-state-icon"><i class="fa-solid fa-calendar-days"></i></div>
-      <p class="cpub-empty-state-title">No events yet</p>
-      <p class="cpub-empty-state-desc">Check back soon for upcoming events.</p>
+    <div class="cpub-events-toolbar">
+      <div v-if="viewMode === 'grid'" class="cpub-events-filters" role="group" aria-label="Filter events">
+        <button
+          v-for="f in [
+            { key: 'upcoming', label: 'Upcoming', icon: 'fa-solid fa-arrow-right', auth: false },
+            { key: 'featured', label: 'Featured', icon: 'fa-solid fa-star', auth: false },
+            { key: 'mine', label: 'My Events', icon: 'fa-solid fa-user', auth: true },
+            { key: 'all', label: 'All', icon: 'fa-solid fa-calendar-days', auth: false },
+            { key: 'past', label: 'Past', icon: 'fa-solid fa-clock-rotate-left', auth: false },
+          ].filter(f => !f.auth || isAuthenticated)"
+          :key="f.key"
+          class="cpub-filter-btn"
+          :class="{ active: activeFilter === f.key }"
+          :aria-pressed="activeFilter === f.key"
+          @click="setFilter(f.key)"
+        >
+          <i :class="f.icon"></i> {{ f.label }}
+        </button>
+      </div>
+      <div v-else class="cpub-events-filters" />
+
+      <div class="cpub-view-toggle" role="group" aria-label="View mode">
+        <button
+          class="cpub-view-btn"
+          :class="{ active: viewMode === 'grid' }"
+          :aria-pressed="viewMode === 'grid'"
+          aria-label="Grid view"
+          @click="setView('grid')"
+        >
+          <i class="fa-solid fa-grid-2"></i>
+        </button>
+        <button
+          class="cpub-view-btn"
+          :class="{ active: viewMode === 'calendar' }"
+          :aria-pressed="viewMode === 'calendar'"
+          aria-label="Calendar view"
+          @click="setView('calendar')"
+        >
+          <i class="fa-solid fa-calendar"></i>
+        </button>
+      </div>
     </div>
+
+    <template v-if="viewMode === 'calendar'">
+      <EventCalendar :events="data?.items ?? []" />
+    </template>
+    <template v-else>
+      <div v-if="data?.items?.length" class="cpub-events-grid">
+        <EventCard v-for="event in data.items" :key="event.id" :event="event" />
+      </div>
+      <div v-else class="cpub-empty-state">
+        <div class="cpub-empty-state-icon"><i class="fa-solid fa-calendar-days"></i></div>
+        <p class="cpub-empty-state-title">No events found</p>
+        <p class="cpub-empty-state-desc">
+          {{ activeFilter === 'upcoming' ? 'No upcoming events scheduled.' : activeFilter === 'past' ? 'No past events.' : activeFilter === 'mine' ? "You haven't created or registered for any events yet." : 'Check back soon for events.' }}
+        </p>
+      </div>
+
+      <nav v-if="totalPages > 1" class="cpub-events-pagination" aria-label="Events pagination">
+        <button class="cpub-page-btn" :disabled="page <= 1" aria-label="Previous page" @click="setPage(page - 1)">
+          <i class="fa-solid fa-chevron-left"></i>
+        </button>
+        <span class="cpub-page-info">{{ page }} / {{ totalPages }}</span>
+        <button class="cpub-page-btn" :disabled="page >= totalPages" aria-label="Next page" @click="setPage(page + 1)">
+          <i class="fa-solid fa-chevron-right"></i>
+        </button>
+      </nav>
+    </template>
   </div>
 </template>
 
 <style scoped>
 .cpub-events-page { max-width: 960px; margin: 0 auto; padding: 32px; }
-.cpub-events-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
+.cpub-events-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
 .cpub-btn-create {
   font-size: 12px; padding: 6px 14px; background: var(--accent); color: var(--color-text-inverse);
   border: var(--border-width-default) solid var(--border); text-decoration: none;
@@ -38,8 +144,54 @@ const { data } = await useFetch<{ items: EventListItem[]; total: number }>('/api
 }
 .cpub-btn-create:hover { box-shadow: var(--shadow-md); transform: translate(-1px, -1px); }
 
+.cpub-events-toolbar {
+  display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px;
+}
+.cpub-events-filters {
+  display: flex; gap: 6px; flex-wrap: wrap;
+}
+.cpub-filter-btn {
+  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
+  text-transform: uppercase; letter-spacing: 0.04em;
+  padding: 5px 12px; border: var(--border-width-default) solid var(--border2);
+  background: var(--surface); color: var(--text-dim); cursor: pointer;
+  display: inline-flex; align-items: center; gap: 5px;
+  transition: all 0.15s;
+}
+.cpub-filter-btn:hover { border-color: var(--border); color: var(--text); }
+.cpub-filter-btn.active {
+  background: var(--accent); color: var(--color-text-inverse);
+  border-color: var(--border); box-shadow: var(--shadow-sm);
+}
+.cpub-filter-btn i { font-size: 10px; }
+
+.cpub-view-toggle { display: flex; gap: 2px; flex-shrink: 0; }
+.cpub-view-btn {
+  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
+  border: var(--border-width-default) solid var(--border2); background: var(--surface);
+  color: var(--text-faint); cursor: pointer; font-size: 12px; transition: all 0.15s;
+}
+.cpub-view-btn:hover { border-color: var(--border); color: var(--text); }
+.cpub-view-btn.active { background: var(--accent); color: var(--color-text-inverse); border-color: var(--border); }
+
 .cpub-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
 
+.cpub-events-pagination {
+  display: flex; align-items: center; justify-content: center; gap: 12px;
+  margin-top: 24px; padding-top: 20px; border-top: var(--border-width-default) solid var(--border2);
+}
+.cpub-page-btn {
+  padding: 6px 10px; border: var(--border-width-default) solid var(--border);
+  background: var(--surface); color: var(--text); cursor: pointer;
+  font-size: 12px; transition: all 0.15s;
+}
+.cpub-page-btn:hover:not(:disabled) { box-shadow: var(--shadow-sm); }
+.cpub-page-btn:disabled { opacity: 0.3; cursor: default; }
+.cpub-page-info {
+  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
+  letter-spacing: 0.04em;
+}
+
 @media (max-width: 768px) {
   .cpub-events-page { padding: 16px; }
   .cpub-events-grid { grid-template-columns: 1fr; }

package/pages/index.vue

@@ -58,7 +58,19 @@ const { data: communities, pending: communitiesPending } = await useFetch('/api/
   query: { limit: 4 },
 });
 
-const { data: contests, pending: contestsPending } = await useFetch('/api/contests', {
+interface ContestListItem {
+  id: string;
+  slug: string;
+  title: string;
+  status: string;
+  description?: string | null;
+  bannerUrl?: string | null;
+  startDate?: string | null;
+  endDate?: string | null;
+  entryCount?: number;
+}
+
+const { data: contests, pending: contestsPending } = await useFetch<{ items: ContestListItem[] }>('/api/contests', {
   query: { limit: 3 },
 });
 
@@ -66,9 +78,9 @@ const heroDismissed = ref(false);
 const joinedHubs = ref(new Set<string>());
 
 // Active contest for hero banner
-const activeContest = computed(() => {
+const activeContest = computed<ContestListItem | null>(() => {
   const items = contests.value?.items;
-  return items?.find((c) => c.status === 'active') ?? null;
+  return items?.find((c: ContestListItem) => c.status === 'active') ?? null;
 });
 
 const isAuthenticated = computed(() => !!user.value);

package/pages/settings/profile.vue

@@ -79,7 +79,7 @@ if (profile.value) {
   form.value.bannerUrl = p.bannerUrl || '';
 
   if (Array.isArray(p.skills)) {
-    skills.value = p.skills.filter((s): s is string => typeof s === 'string');
+    skills.value = (p.skills as unknown[]).filter((s): s is string => typeof s === 'string');
   }
   pronouns.value = p.pronouns || '';
   if (p.socialLinks) {

package/server/api/contests/[slug]/judges/index.post.ts

@@ -26,7 +26,11 @@ export default defineEventHandler(async (event) => {
   }
 
   const body = await parseBody(event, addJudgeSchema);
-  const result = await addContestJudge(db, contest.id, body.userId, (body.role ?? 'judge') as JudgeRole);
+  const result = await addContestJudge(db, contest.id, body.userId, (body.role ?? 'judge') as JudgeRole, {
+    contestSlug: slug,
+    contestTitle: contest.title,
+    invitedBy: user.id,
+  });
 
   if (!result.added) {
     throw createError({ statusCode: 400, statusMessage: result.error ?? 'Failed to add judge' });

package/server/api/contests/[slug]/votes.get.ts

@@ -0,0 +1,19 @@
+import { getContestBySlug, getContestEntryVotes } from '@commonpub/server';
+import type { ContestEntryVoteInfo } from '@commonpub/server';
+
+/**
+ * GET /api/contests/:slug/votes
+ * Batch-fetch vote counts + current user's vote status for all entries.
+ */
+export default defineEventHandler(async (event): Promise<ContestEntryVoteInfo[]> => {
+  requireFeature('contests');
+  const db = useDB();
+  const { slug } = parseParams(event, { slug: 'string' });
+  const user = getOptionalUser(event);
+
+  const contest = await getContestBySlug(db, slug);
+  if (!contest || contest.status === 'upcoming') throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  if (!contest.communityVotingEnabled) return [];
+
+  return getContestEntryVotes(db, contest.id, user?.id ?? null);
+});

package/server/api/events/[slug]/rsvp.delete.ts

@@ -14,10 +14,10 @@ export default defineEventHandler(async (event) => {
   const existing = await getEventBySlug(db, slug);
   if (!existing) throw createError({ statusCode: 404, statusMessage: 'Event not found' });
 
-  const cancelled = await cancelRsvp(db, existing.id, user.id);
-  if (!cancelled) {
+  const result = await cancelRsvp(db, existing.id, user.id);
+  if (!result.cancelled) {
     throw createError({ statusCode: 400, statusMessage: 'No RSVP found' });
   }
 
-  return { cancelled: true };
+  return { cancelled: true, promoted: !!result.promoted };
 });

package/server/api/events/[slug].put.ts

@@ -4,7 +4,7 @@ import { z } from 'zod';
 const updateEventSchema = z.object({
   title: z.string().min(1).max(255).optional(),
   description: z.string().max(10000).optional(),
-  coverImage: z.string().max(500).optional(),
+  coverImage: z.string().max(500).nullable().optional(),
   eventType: z.enum(['in-person', 'online', 'hybrid']).optional(),
   status: z.enum(['draft', 'published', 'active', 'completed', 'cancelled']).optional(),
   startDate: z.string().datetime().optional(),

package/server/api/events/index.get.ts

@@ -1,6 +1,8 @@
 import { listEvents } from '@commonpub/server';
 import type { EventStatus } from '@commonpub/server';
 
+const PUBLIC_STATUSES = new Set<string>(['published', 'active', 'completed']);
+
 /**
  * GET /api/events
  * List published/active events (public).
@@ -9,12 +11,24 @@ export default defineEventHandler(async (event) => {
   requireFeature('events');
   const db = useDB();
   const query = getQuery(event);
+  const user = getOptionalUser(event);
+
+  // Only allow public-safe status values; ignore anything else
+  const rawStatus = query.status as string | undefined;
+  const status = rawStatus && PUBLIC_STATUSES.has(rawStatus) ? (rawStatus as EventStatus) : undefined;
+
+  // "My Events" filter: only allowed for the authenticated user's own ID
+  let userId: string | undefined;
+  if (query.myEvents === 'true' && user?.id) {
+    userId = user.id;
+  }
 
   return listEvents(db, {
-    status: (query.status as EventStatus) || undefined,
+    status,
     hubId: (query.hubId as string) || undefined,
     upcoming: query.upcoming === 'true',
     featured: query.featured === 'true',
+    userId,
     limit: query.limit ? Number(query.limit) : undefined,
     offset: query.offset ? Number(query.offset) : undefined,
   });