@commonpub/layer 0.32.0 → 0.34.0

package/components/NotificationItem.vue

@@ -21,6 +21,11 @@ const emit = defineEmits<{ read: [id: string] }>();
 // work; otherwise it stays a plain div.
 const destination = computed(() => props.notification.link || props.notification.targetUrl || null);
 
+// Resolve NuxtLink to the actual component. Passing the string 'NuxtLink' to
+// <component :is> can fail to resolve during SSR (renders a bogus <nuxtlink>
+// element → hydration mismatch + a dead link); the resolved component is stable.
+const NuxtLinkComponent = resolveComponent('NuxtLink');
+
 function onActivate(): void {
   if (!props.notification.read) emit('read', props.notification.id);
 }
@@ -41,7 +46,7 @@ const iconMap: Record<string, string> = {
 
 <template>
   <component
-    :is="destination ? 'NuxtLink' : 'div'"
+    :is="destination ? NuxtLinkComponent : 'div'"
     :to="destination || undefined"
     class="cpub-notif"
     :class="{ 'cpub-notif-unread': !notification.read, 'cpub-notif-link-row': destination }"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -54,15 +54,15 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.7.0",
-    "@commonpub/docs": "0.6.3",
     "@commonpub/config": "0.16.0",
-    "@commonpub/learning": "0.5.2",
     "@commonpub/editor": "0.7.11",
-    "@commonpub/explainer": "0.7.15",
+    "@commonpub/protocol": "0.12.0",
     "@commonpub/schema": "0.24.0",
+    "@commonpub/docs": "0.6.3",
     "@commonpub/server": "2.66.0",
     "@commonpub/ui": "0.9.1",
-    "@commonpub/protocol": "0.12.0"
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/explainer": "0.7.15"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/[type]/index.vue

@@ -56,8 +56,13 @@ const { data, pending } = await useFetch<PaginatedResponse<Serialized<ContentLis
 </template>
 
 <style scoped>
+/* Centered, padded content container (was left-aligned with no padding — content
+   hugged the left edge + cards stretched on wide screens). ~1200px reads like
+   deveco's gold-standard listing width. */
 .cpub-listing {
-  max-width: var(--content-max-width);
+  max-width: 1200px;
+  margin-inline: auto;
+  padding: 0 var(--space-6, 24px);
 }
 
 .cpub-listing-header {

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

@@ -4,6 +4,7 @@ import type { Serialized, ContestEntryItem, ContestJudgeItem } from '@commonpub/
 const route = useRoute();
 const slug = route.params.slug as string;
 const toast = useToast();
+const { extract: extractError } = useApiError();
 const { isAuthenticated, isAdmin, user } = useAuth();
 
 const { data: contest } = useLazyFetch(`/api/contests/${slug}`);
@@ -146,8 +147,8 @@ async function submitEntry(): Promise<void> {
     submitContentId.value = '';
     toast.success('Entry submitted!');
     refreshNuxtData();
-  } catch {
-    toast.error('Failed to submit entry');
+  } catch (err: unknown) {
+    toast.error(extractError(err));
   } finally {
     submitting.value = false;
   }
@@ -278,6 +279,18 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
           <!-- ENTRIES -->
           <div v-show="activeTab === 'entries'" id="cpub-panel-entries" role="tabpanel" aria-labelledby="cpub-tab-entries" tabindex="0">
+            <div v-if="c?.status === 'active'" class="cpub-entries-cta">
+              <div class="cpub-entries-cta-text">
+                <p class="cpub-entries-cta-title"><i class="fa-solid fa-trophy"></i> Enter this contest</p>
+                <p class="cpub-entries-cta-sub">Submit one of your published projects — or start a new one.</p>
+              </div>
+              <button v-if="isAuthenticated" class="cpub-btn cpub-btn-primary cpub-btn-lg" @click="showSubmitDialog = true">
+                <i class="fa-solid fa-upload"></i> Submit Entry
+              </button>
+              <NuxtLink v-else :to="`/auth/login?redirect=/contests/${slug}`" class="cpub-btn cpub-btn-primary cpub-btn-lg">
+                <i class="fa-solid fa-right-to-bracket"></i> Log in to enter
+              </NuxtLink>
+            </div>
             <ContestEntries
               :entries="entries"
               :contest-status="c?.status"
@@ -333,6 +346,11 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
 /* LAYOUT */
 .cpub-contest-main { max-width: 1100px; margin: 0 auto; padding: 32px; }
+
+.cpub-entries-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
+.cpub-entries-cta-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
+.cpub-entries-cta-title i { color: var(--accent); }
+.cpub-entries-cta-sub { font-size: 12px; color: var(--text-dim); margin: 2px 0 0; }
 .cpub-contest-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
 .cpub-contest-body { min-width: 0; }
 

package/server/api/contests/[slug]/entries.post.ts

@@ -1,5 +1,7 @@
 import { submitContestEntry, getContestBySlug, canViewContest } from '@commonpub/server';
 import type { ContestEntryItem } from '@commonpub/server';
+import { contentItems } from '@commonpub/schema';
+import { eq } from 'drizzle-orm';
 import { z } from 'zod';
 
 const submitEntrySchema = z.object({
@@ -19,9 +21,34 @@ export default defineEventHandler(async (event): Promise<ContestEntryItem> => {
   }
   const input = await parseBody(event, submitEntrySchema);
 
+  // Produce a SPECIFIC reason on failure (the old single catch-all 400 hid why
+  // submission failed — most commonly the contest isn't active yet).
+  if (contest.status !== 'active') {
+    const detail = contest.status === 'upcoming'
+      ? 'Entries open once the contest is active.'
+      : contest.status === 'judging'
+        ? 'Submissions are closed — the contest is being judged.'
+        : `The contest is ${contest.status}.`;
+    throw createError({ statusCode: 400, statusMessage: `This contest isn't accepting entries right now. ${detail}` });
+  }
+  const [content] = await db
+    .select({ authorId: contentItems.authorId, status: contentItems.status, type: contentItems.type })
+    .from(contentItems)
+    .where(eq(contentItems.id, input.contentId))
+    .limit(1);
+  if (!content) throw createError({ statusCode: 400, statusMessage: 'That content no longer exists.' });
+  if (content.authorId !== user.id) throw createError({ statusCode: 403, statusMessage: 'You can only submit your own content.' });
+  if (content.status !== 'published') throw createError({ statusCode: 400, statusMessage: 'That project isn’t published yet — publish it first, then submit.' });
+  const eligible = contest.eligibleContentTypes ?? null;
+  if (eligible && eligible.length > 0 && !eligible.includes(content.type)) {
+    throw createError({ statusCode: 400, statusMessage: `This contest only accepts: ${eligible.join(', ')}.` });
+  }
+
+  // submitContestEntry re-validates (defense in depth) + enforces the per-user
+  // cap + dedupes; a null here means already-entered or over the entry limit.
   const entry = await submitContestEntry(db, contest.id, input.contentId, user.id);
   if (!entry) {
-    throw createError({ statusCode: 400, statusMessage: 'Cannot submit entry. Contest may not be active, or content is not published or not owned by you.' });
+    throw createError({ statusCode: 400, statusMessage: 'Couldn’t submit — you may have already entered this project, or reached the contest’s entry limit.' });
   }
   return entry;
 });