@commonpub/layer 0.82.0 → 0.83.0

package/layouts/default.vue

@@ -71,6 +71,15 @@ function handleGlobalKeydown(e: KeyboardEvent): void {
   }
 }
 
+const avatarBtnRef = ref<HTMLButtonElement | null>(null);
+
+// Disclosure menu: Esc closes and returns focus to the trigger.
+function closeUserMenu(): void {
+  if (!userMenuOpen.value) return;
+  userMenuOpen.value = false;
+  avatarBtnRef.value?.focus();
+}
+
 // Close menus on click outside
 function handleClickOutside(e: MouseEvent): void {
   const target = e.target as HTMLElement;
@@ -162,32 +171,32 @@ const userUsername = computed(() => user.value?.username ?? '');
             <i class="fa-solid fa-plus"></i> <span class="cpub-new-text">New</span>
           </NuxtLink>
           <div class="cpub-user-menu-wrapper">
-            <button class="cpub-avatar-btn" aria-label="User menu" :aria-expanded="userMenuOpen" @click.stop="userMenuOpen = !userMenuOpen">
+            <button ref="avatarBtnRef" class="cpub-avatar-btn" aria-label="User menu" :aria-expanded="userMenuOpen" @click.stop="userMenuOpen = !userMenuOpen" @keydown.esc="closeUserMenu">
               <span class="cpub-user-avatar">
                 <img v-if="userImage" :src="userImage" :alt="user?.name || user?.username" class="cpub-user-avatar-img" />
                 <span v-else>{{ userInitial }}</span>
               </span>
             </button>
-            <div v-if="userMenuOpen" class="cpub-user-dropdown" role="menu">
+            <div v-if="userMenuOpen" class="cpub-user-dropdown" @keydown.esc="closeUserMenu">
               <!-- Mobile-only: messages/notifications relocated here from
                    the top bar (hidden on desktop, which keeps the icons). -->
-              <NuxtLink to="/messages" class="cpub-dropdown-item cpub-dropdown-item--mobile" role="menuitem" @click="userMenuOpen = false">
+              <NuxtLink to="/messages" class="cpub-dropdown-item cpub-dropdown-item--mobile" @click="userMenuOpen = false">
                 <i class="fa-solid fa-envelope"></i> Messages
                 <span v-if="unreadMessages > 0" class="cpub-dropdown-count">{{ unreadMessages > 99 ? '99+' : unreadMessages }}</span>
               </NuxtLink>
-              <NuxtLink to="/notifications" class="cpub-dropdown-item cpub-dropdown-item--mobile" role="menuitem" @click="userMenuOpen = false">
+              <NuxtLink to="/notifications" class="cpub-dropdown-item cpub-dropdown-item--mobile" @click="userMenuOpen = false">
                 <i class="fa-solid fa-bell"></i> Notifications
                 <span v-if="unreadCount > 0" class="cpub-dropdown-count">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
               </NuxtLink>
               <div class="cpub-dropdown-divider cpub-dropdown-item--mobile" />
-              <NuxtLink :to="`/u/${userUsername}`" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-user"></i> Profile</NuxtLink>
-              <NuxtLink to="/dashboard" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-gauge"></i> Dashboard</NuxtLink>
-              <NuxtLink to="/settings" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>
-              <button class="cpub-dropdown-item" role="menuitem" @click="setDarkMode(!isDark)">
+              <NuxtLink :to="`/u/${userUsername}`" class="cpub-dropdown-item" @click="userMenuOpen = false"><i class="fa-solid fa-user"></i> Profile</NuxtLink>
+              <NuxtLink to="/dashboard" class="cpub-dropdown-item" @click="userMenuOpen = false"><i class="fa-solid fa-gauge"></i> Dashboard</NuxtLink>
+              <NuxtLink to="/settings" class="cpub-dropdown-item" @click="userMenuOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>
+              <button class="cpub-dropdown-item" @click="setDarkMode(!isDark)">
                 <i :class="isDark ? 'fa-solid fa-sun' : 'fa-solid fa-moon'"></i> {{ isDark ? 'Light mode' : 'Dark mode' }}
               </button>
               <div class="cpub-dropdown-divider" />
-              <button class="cpub-dropdown-item" role="menuitem" @click="handleSignOut"><i class="fa-solid fa-right-from-bracket"></i> Sign out</button>
+              <button class="cpub-dropdown-item" @click="handleSignOut"><i class="fa-solid fa-right-from-bracket"></i> Sign out</button>
             </div>
           </div>
         </template>

package/nuxt.config.ts

@@ -100,6 +100,8 @@ export default defineNuxtConfig({
         video: true,
         contests: false,
         contestStageSubmissions: true,
+        contestProposals: false,
+        contestPii: false,
         events: false,
         learning: true,
         explainers: true,
@@ -117,6 +119,17 @@ export default defineNuxtConfig({
         actAsRegistry: false,
         announceToRegistry: true,
         publicApiMetricsFederation: false,
+        // Nested identity sub-flags must be declared here too, or
+        // NUXT_PUBLIC_FEATURES_IDENTITY_* env overrides silently drop (same
+        // rule as the booleans above). Mirrors @commonpub/config's
+        // IdentityFeatures; all default false.
+        identity: {
+          linkRemoteAccounts: false,
+          signInWithRemote: false,
+          actingAs: false,
+          remoteInteract: false,
+          remotePublish: false,
+        },
       },
       contentTypes: 'project,blog,explainer',
       contestCreation: 'admin',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.82.0",
+  "version": "0.83.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,16 +55,16 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
-    "@commonpub/config": "0.22.1",
-    "@commonpub/editor": "0.7.12",
+    "@commonpub/config": "0.23.0",
+    "@commonpub/editor": "0.8.0",
+    "@commonpub/explainer": "0.8.0",
+    "@commonpub/docs": "0.6.3",
+    "@commonpub/protocol": "0.14.0",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/protocol": "0.13.0",
-    "@commonpub/server": "2.89.0",
+    "@commonpub/schema": "0.46.0",
+    "@commonpub/server": "2.90.0",
     "@commonpub/theme-studio": "0.6.1",
-    "@commonpub/docs": "0.6.3",
-    "@commonpub/ui": "0.13.1",
-    "@commonpub/explainer": "0.7.15",
-    "@commonpub/schema": "0.45.0"
+    "@commonpub/ui": "0.13.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/[type]/index.vue

@@ -23,7 +23,7 @@ useSeoMeta({
 const sortBy = ref('recent');
 const sortOptions = ['recent', 'popular'] as const;
 
-const { data, pending } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+const { data, pending, error, refresh } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
   query: computed(() => ({
     status: 'published',
     type: contentType.value,
@@ -48,6 +48,11 @@ const { data, pending } = await useFetch<PaginatedResponse<Serialized<ContentLis
     </div>
 
     <p v-if="pending" class="cpub-listing-empty"><i class="fa-solid fa-circle-notch fa-spin"></i> Loading...</p>
+    <div v-else-if="error" class="cpub-fetch-error">
+      <div class="cpub-fetch-error-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
+      <div class="cpub-fetch-error-msg">Failed to load {{ contentType }}s.</div>
+      <button class="cpub-btn cpub-btn-sm" @click="refresh()">Retry</button>
+    </div>
     <div v-else-if="data?.items?.length" class="cpub-listing-grid">
       <ContentCard v-for="item in data.items" :key="item.id" :item="item" />
     </div>

package/pages/admin/api-keys.vue

@@ -6,6 +6,11 @@ definePageMeta({ layout: 'admin', middleware: 'auth' });
 
 useSeoMeta({ title: `API Keys, Admin, ${useSiteName()}` });
 
+// Keys only authenticate when the Public API feature is on (public-api-auth 404s
+// every /api/public/* route otherwise). Surface that so admins don't mint dead keys.
+const { publicApi } = useFeatures();
+const toast = useToast();
+
 interface KeyListResponse {
   items: AdminApiKeyView[];
   total: number;
@@ -122,8 +127,9 @@ async function revoke(id: string, name: string): Promise<void> {
   try {
     await $fetch(`/api/admin/api-keys/${id}`, { method: 'DELETE' });
     await refresh();
+    toast.success(`Revoked "${name}"`);
   } catch {
-    // toast would go here
+    toast.error('Failed to revoke key');
   }
 }
 
@@ -185,12 +191,16 @@ function fmtErrorRate(rate: number): string {
           <input type="checkbox" v-model="includeRevoked" @change="refresh()" />
           Show revoked
         </label>
-        <button class="cpub-btn cpub-btn-primary" @click="showCreate = true">
+        <button v-if="publicApi" class="cpub-btn cpub-btn-primary" @click="showCreate = true">
           <i class="fa-solid fa-plus"></i> New key
         </button>
       </div>
     </header>
 
+    <p v-if="!publicApi" class="cpub-admin-sub" role="status">
+      The Public API feature is disabled, so keys created here will not authenticate. Turn it on in Features to use API keys.
+    </p>
+
     <!-- One-time token reveal -->
     <div v-if="createdKey" class="cpub-key-reveal" role="alert">
       <div class="cpub-key-reveal-head">
@@ -298,7 +308,7 @@ function fmtErrorRate(rate: number): string {
 
     <!-- List -->
     <div v-if="pending" class="cpub-loading">Loading keys...</div>
-    <p v-else-if="listError" class="cpub-form-error">Failed to load keys.</p>
+    <p v-else-if="publicApi && listError" class="cpub-form-error">Failed to load keys.</p>
     <p v-else-if="!data?.items?.length" class="cpub-empty">
       No API keys yet. Create one to start consuming <code>/api/public/v1/*</code>.
     </p>

package/pages/admin/features.vue

@@ -25,6 +25,8 @@ const flagMeta: Record<string, { label: string; description: string; icon: strin
   video: { label: 'Video', description: 'Video content and categories', icon: 'fa-solid fa-video' },
   contests: { label: 'Contests', description: 'Contest system with judging', icon: 'fa-solid fa-trophy' },
   contestStageSubmissions: { label: 'Contest Stage Submissions', description: 'Per-stage submission forms for multi-round contests', icon: 'fa-solid fa-file-pen' },
+  contestProposals: { label: 'Contest Proposals', description: 'Form-first proposal entries with a draft placeholder project', icon: 'fa-solid fa-clipboard-list' },
+  contestPii: { label: 'Contest PII Fields', description: 'Offer personal-data fields (email, address) in submission forms', icon: 'fa-solid fa-user-shield' },
   learning: { label: 'Learning', description: 'Learning paths and courses', icon: 'fa-solid fa-graduation-cap' },
   explainers: { label: 'Explainers', description: 'Interactive explainer modules', icon: 'fa-solid fa-lightbulb' },
   editorial: { label: 'Editorial', description: 'Staff picks and content categories', icon: 'fa-solid fa-pen-fancy' },

package/pages/admin/federation.vue

@@ -57,7 +57,7 @@ async function removeTrusted(domain: string): Promise<void> {
     });
     await refreshTrusted();
   } catch {
-    alert('Failed to remove trusted instance');
+    toast.error('Failed to remove trusted instance');
   }
 }
 

package/pages/admin/layouts/[id].vue

@@ -17,11 +17,13 @@
 import type { LayoutRecord } from '@commonpub/server';
 import { PublishStepError } from '../../../composables/useLayoutEditor';
 import { useLayoutAnnouncer, narrateUndo, narrateRedo, narrateUndoEmpty, narrateRedoEmpty, narrateRowAdded, narrateRowRemoved } from '../../../composables/useLayoutAnnouncer';
-import { useLayoutHistory, addRowCommand, removeRowCommand } from '../../../composables/useLayoutHistory';
+import { useLayoutHistory, addRowCommand, removeRowCommand, insertSectionCommand } from '../../../composables/useLayoutHistory';
 import { useLayoutHotkeys } from '../../../composables/useLayoutHotkeys';
 import { DnDProvider } from '@vue-dnd-kit/core';
 import { useSectionRegistry } from '../../../sections/registry';
 import { useLayoutResize } from '../../../composables/useLayoutResize';
+import { createSectionFromSpec, paletteDragPayload } from '../../../composables/useLayoutDrag';
+import type { SectionDefinition } from '@commonpub/ui';
 
 definePageMeta({
   layout: 'admin',
@@ -163,6 +165,32 @@ function onAddRow(zoneSlug: string): void {
   }));
 }
 
+/**
+ * Keyboard-insert from the palette — WCAG 2.1.1 alternative to drag. Mirrors the
+ * drop path (createSectionFromSpec + push); appends to the last row of the first
+ * populated zone, adding a row if the layout has none. Direct mutation fires the
+ * dirty watcher + autosave, exactly like a drop.
+ */
+function onPaletteInsert(section: SectionDefinition): void {
+  const draft = editor.draft.value;
+  if (!draft || draft.zones.length === 0) return;
+  const zone = draft.zones.find((z) => z.rows.length > 0) ?? draft.zones[0]!;
+  let row = zone.rows[zone.rows.length - 1];
+  // Record each mutation to history so Cmd+Z reverses it and the undo stack
+  // stays in sync with the draft (mirrors onAddRow + the LayoutRow drop path).
+  if (!row) {
+    const position = zone.rows.length;
+    row = { id: crypto.randomUUID(), order: position, config: null, sections: [] };
+    zone.rows.push(row);
+    history.record(addRowCommand({ zoneSlug: zone.zone, position, row, label: `add row to ${zone.zone}` }));
+  }
+  const newSection = createSectionFromSpec(paletteDragPayload(section));
+  const at = row.sections.length;
+  row.sections.push(newSection);
+  history.record(insertSectionCommand({ rowId: row.id, at, section: newSection, label: `insert ${section.type}` }));
+  useLayoutAnnouncer().announce(`Inserted ${section.name} section into ${zone.zone}`);
+}
+
 /**
  * Session 164 polish — Remove row. Confirm before removing rows with
  * sections (destructive intent: section data goes away, only restorable
@@ -702,7 +730,7 @@ async function onConflictForceSave(): Promise<void> {
             :on-add-row="onAddRow"
             :on-remove-row="onRemoveRow"
           />
-          <AdminLayoutsPalette v-show="!chrome.paletteHidden.value" />
+          <AdminLayoutsPalette v-show="!chrome.paletteHidden.value" @insert="onPaletteInsert" />
           <AdminLayoutsInspector
             v-show="!chrome.inspectorHidden.value"
             :draft="editor.draft.value"

package/pages/admin/settings.vue

@@ -4,6 +4,7 @@ definePageMeta({ layout: 'admin', middleware: 'auth' });
 useSeoMeta({ title: `Settings, Admin, ${useSiteName()}` });
 
 const { data: settings, pending, refresh } = await useFetch<Record<string, string>>('/api/admin/settings');
+const toast = useToast();
 
 const saving = ref(false);
 const editKey = ref('');
@@ -40,7 +41,7 @@ async function saveSetting(key: string, value: string): Promise<void> {
     editValue.value = '';
     await refresh();
   } catch {
-    // Error handling via toast if available
+    toast.error('Failed to save setting');
   } finally {
     saving.value = false;
   }

package/pages/admin/users.vue

@@ -219,7 +219,7 @@ async function deleteUser(userId: string, username: string): Promise<void> {
 .admin-roles-editor { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 4px 0; }
 .admin-roles-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
 .admin-roles-check { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
-.admin-roles-save { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; padding: 3px 10px; border: var(--border-width-default) solid var(--accent); background: var(--accent); color: var(--accent-contrast, #fff); cursor: pointer; margin-left: auto; }
+.admin-roles-save { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; padding: 3px 10px; border: var(--border-width-default) solid var(--accent); background: var(--accent); color: var(--color-on-accent); cursor: pointer; margin-left: auto; }
 .admin-roles-save:disabled { opacity: 0.6; cursor: default; }
 .admin-empty { color: var(--text-faint); text-align: center; padding: 32px 0; }
 </style>

package/pages/admin/video-categories.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+useSeoMeta({ title: `Video Categories, Admin, ${useSiteName()}` });
+
+const toast = useToast();
+
+interface VideoCategory {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  sortOrder: number;
+}
+
+const { data: categories, refresh } = await useFetch<VideoCategory[]>('/api/videos/categories');
+
+const showForm = ref(false);
+const editingId = ref<string | null>(null);
+const form = ref({
+  name: '',
+  description: '',
+  sortOrder: 0,
+});
+
+function openNew(): void {
+  editingId.value = null;
+  form.value = { name: '', description: '', sortOrder: categories.value?.length ?? 0 };
+  showForm.value = true;
+}
+
+function openEdit(cat: VideoCategory): void {
+  editingId.value = cat.id;
+  form.value = {
+    name: cat.name,
+    description: cat.description ?? '',
+    sortOrder: cat.sortOrder,
+  };
+  showForm.value = true;
+}
+
+function cancelForm(): void {
+  showForm.value = false;
+  editingId.value = null;
+}
+
+async function saveCategory(): Promise<void> {
+  const payload = {
+    name: form.value.name,
+    description: form.value.description || undefined,
+    sortOrder: form.value.sortOrder,
+  };
+
+  try {
+    if (editingId.value) {
+      await $fetch(`/api/videos/categories/${editingId.value}`, { method: 'PUT', body: payload });
+      toast.success('Category updated');
+    } else {
+      await $fetch('/api/videos/categories', { method: 'POST', body: payload });
+      toast.success('Category created');
+    }
+    showForm.value = false;
+    editingId.value = null;
+    await refresh();
+  } catch {
+    toast.error('Failed to save category');
+  }
+}
+
+async function deleteCategory(cat: VideoCategory): Promise<void> {
+  if (!confirm(`Delete "${cat.name}"? Videos using this category will become uncategorized.`)) return;
+  try {
+    await $fetch(`/api/videos/categories/${cat.id}`, { method: 'DELETE' });
+    toast.success('Category deleted');
+    await refresh();
+  } catch {
+    toast.error('Failed to delete category');
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-admin-video-categories">
+    <div class="cpub-admin-header">
+      <h1 class="cpub-admin-title">Video Categories</h1>
+      <button class="cpub-btn cpub-btn-primary cpub-btn-sm" @click="openNew">
+        <i class="fa-solid fa-plus"></i> New Category
+      </button>
+    </div>
+
+    <!-- Category Form -->
+    <div v-if="showForm" class="cpub-cat-form">
+      <h2 class="cpub-cat-form-title">{{ editingId ? 'Edit Category' : 'New Category' }}</h2>
+      <div class="cpub-cat-form-grid">
+        <div class="cpub-cat-field">
+          <label for="cpub-vcat-name" class="cpub-cat-label">Name</label>
+          <input id="cpub-vcat-name" v-model="form.name" class="cpub-cat-input" placeholder="e.g. Tutorials" />
+        </div>
+        <div class="cpub-cat-field">
+          <label for="cpub-vcat-order" class="cpub-cat-label">Sort Order</label>
+          <input id="cpub-vcat-order" v-model.number="form.sortOrder" type="number" class="cpub-cat-input" min="0" />
+        </div>
+        <div class="cpub-cat-field cpub-cat-field--wide">
+          <label for="cpub-vcat-desc" class="cpub-cat-label">Description</label>
+          <input id="cpub-vcat-desc" v-model="form.description" class="cpub-cat-input" placeholder="Optional description" />
+        </div>
+      </div>
+      <div class="cpub-cat-form-actions">
+        <button class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="!form.name.trim()" @click="saveCategory">
+          {{ editingId ? 'Update' : 'Create' }}
+        </button>
+        <button class="cpub-btn cpub-btn-sm" @click="cancelForm">Cancel</button>
+      </div>
+    </div>
+
+    <!-- Categories Table -->
+    <div v-if="categories?.length" class="cpub-admin-table-wrap">
+      <table class="cpub-admin-table">
+        <thead>
+          <tr>
+            <th>Order</th>
+            <th>Name</th>
+            <th>Slug</th>
+            <th>Description</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="cat in categories" :key="cat.id">
+            <td class="cpub-admin-num">{{ cat.sortOrder }}</td>
+            <td><span class="cpub-cat-name">{{ cat.name }}</span></td>
+            <td class="cpub-admin-slug">{{ cat.slug }}</td>
+            <td class="cpub-admin-desc">{{ cat.description }}</td>
+            <td class="cpub-admin-actions">
+              <button class="cpub-admin-action" title="Edit" @click="openEdit(cat)">
+                <i class="fa-solid fa-pencil"></i>
+              </button>
+              <button class="cpub-admin-action cpub-admin-action--danger" title="Delete" @click="deleteCategory(cat)">
+                <i class="fa-solid fa-trash"></i>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p v-else class="cpub-empty">No video categories found. Create one to get started.</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
+.cpub-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); }
+
+.cpub-cat-form {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: var(--space-5);
+  margin-bottom: var(--space-6);
+}
+
+.cpub-cat-form-title { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-4); }
+
+.cpub-cat-form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+
+.cpub-cat-field { display: flex; flex-direction: column; gap: 4px; }
+.cpub-cat-field--wide { grid-column: 1 / -1; }
+.cpub-cat-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
+.cpub-cat-input {
+  font-size: 13px;
+  padding: 6px 10px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--bg);
+  color: var(--text);
+  outline: none;
+}
+.cpub-cat-input:focus { border-color: var(--accent); }
+
+.cpub-cat-form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
+
+.cpub-admin-table-wrap { overflow-x: auto; }
+.cpub-admin-table { width: 100%; border-collapse: collapse; }
+.cpub-admin-table th { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); text-align: left; padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border); }
+.cpub-admin-table td { padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border2); font-size: 13px; }
+.cpub-admin-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
+.cpub-admin-slug { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
+.cpub-admin-desc { color: var(--text-dim); }
+.cpub-admin-actions { display: flex; gap: 6px; }
+.cpub-admin-action { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
+.cpub-admin-action:hover { color: var(--accent); }
+.cpub-admin-action--danger:hover { color: var(--red); }
+
+.cpub-cat-name { display: flex; align-items: center; gap: 6px; font-weight: 500; }
+
+.cpub-empty { color: var(--text-faint); text-align: center; padding: var(--space-10) 0; }
+
+@media (max-width: 768px) {
+  .cpub-cat-form-grid { grid-template-columns: 1fr; }
+  .cpub-admin-header { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
+}
+</style>

package/pages/cert/[code].vue

@@ -2,7 +2,7 @@
 const route = useRoute();
 const code = route.params.code as string;
 
-const { data: certData } = useLazyFetch(`/api/cert/${code}`);
+const { data: certData, pending } = useLazyFetch(`/api/cert/${code}`);
 
 useSeoMeta({
   title: () => certData.value ? `Certificate, ${certData.value.path.title}, ${useSiteName()}` : `Certificate, ${useSiteName()}`,
@@ -12,7 +12,11 @@ useSeoMeta({
 
 <template>
   <div class="cert-page">
-    <div v-if="certData" class="cert-card">
+    <div v-if="pending" class="cert-not-found">
+      <div class="cert-not-found-icon"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+      <p>Loading certificate...</p>
+    </div>
+    <div v-else-if="certData" class="cert-card">
       <!-- Certificate Badge -->
       <div class="cert-badge-wrap">
         <div class="cert-badge">