@commonpub/layer 0.50.0 → 0.51.0

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,16 +57,32 @@ 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 makes sense while the clock is actually running.
-const showCountdown = computed(() => !isEnded.value && !isPaused.value && !isDraft.value);
+// 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 —
@@ -194,6 +220,10 @@ const dateRange = computed<string>(() => {
               <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>

package/package.json

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

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

@@ -473,10 +473,6 @@ async function transitionStatus(newStatus: string): Promise<void> {
         </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">
@@ -489,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>
@@ -557,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/create.vue

@@ -354,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>
@@ -401,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>