@commonpub/layer 0.82.0 → 0.83.1

package/pages/mirror/[id].vue

@@ -146,7 +146,7 @@ useSeoMeta({
   display: flex; align-items: center; gap: 4px; font-size: 11px;
 }
 .cpub-fed-banner-follow {
-  margin-left: auto; background: var(--accent); color: var(--accent-text, #fff); border: none;
+  margin-left: auto; background: var(--accent); color: var(--color-on-accent); border: none;
   font-size: 11px; font-weight: 600; padding: 3px 10px; cursor: pointer;
   display: flex; align-items: center; gap: 4px; white-space: nowrap;
 }

package/pages/products/[slug].vue

@@ -1,10 +1,45 @@
 <script setup lang="ts">
 const route = useRoute();
 const slug = route.params.slug as string;
+const toast = useToast();
 
-const { data: product, pending } = useLazyFetch(`/api/products/${slug}`) as { data: Ref<Record<string, any> | null>; pending: Ref<boolean> };
+const { data: product, pending, refresh } = useLazyFetch(`/api/products/${slug}`) as { data: Ref<Record<string, any> | null>; pending: Ref<boolean>; refresh: () => Promise<void> };
 const { data: projectsUsing } = useLazyFetch(`/api/products/${slug}/content`) as { data: Ref<any[] | null> };
 
+const { user } = useAuth();
+const canModerate = useCan('content.moderate');
+// PUT is owner-only on the server (updateProduct), so only the owner may edit.
+const canEdit = computed(() => !!user.value && product.value?.createdBy?.id === user.value.id);
+// DELETE allows owner OR content.moderate on the server.
+const canDelete = computed(() => canEdit.value || canModerate.value);
+
+const showEdit = ref(false);
+const deleting = ref(false);
+
+async function handleUpdated(updated: { slug: string }): Promise<void> {
+  // The slug regenerates when the name changes; route to the new slug if so.
+  if (updated.slug && updated.slug !== slug) {
+    await navigateTo(`/products/${updated.slug}`);
+  } else {
+    await refresh();
+  }
+}
+
+async function handleDelete(): Promise<void> {
+  if (!product.value) return;
+  if (!confirm(`Delete "${product.value.name}"? This cannot be undone.`)) return;
+  deleting.value = true;
+  try {
+    await $fetch(`/api/products/${product.value.id}`, { method: 'DELETE' });
+    toast.success('Product deleted');
+    await navigateTo('/products');
+  } catch {
+    toast.error('Failed to delete product');
+  } finally {
+    deleting.value = false;
+  }
+}
+
 useSeoMeta({
   title: () => product.value ? `${product.value.name}, ${useSiteName()}` : `Product, ${useSiteName()}`,
   description: () => product.value?.description ?? '',
@@ -23,10 +58,18 @@ useSeoMeta({
       <div class="product-main">
         <div class="product-header">
           <div class="product-icon"><i class="fa-solid fa-microchip"></i></div>
-          <div>
+          <div class="product-header-main">
             <h1 class="product-name">{{ product.name }}</h1>
             <span v-if="product.category" class="product-category">{{ product.category }}</span>
           </div>
+          <div v-if="canEdit || canDelete" class="product-header-actions">
+            <button v-if="canEdit" class="cpub-btn cpub-btn-sm" aria-label="Edit product" @click="showEdit = true">
+              <i class="fa-solid fa-pen"></i> Edit
+            </button>
+            <button v-if="canDelete" class="cpub-btn cpub-btn-sm cpub-product-delete" aria-label="Delete product" :disabled="deleting" @click="handleDelete">
+              <i class="fa-solid fa-trash"></i> {{ deleting ? 'Deleting...' : 'Delete' }}
+            </button>
+          </div>
         </div>
 
         <p v-if="product.description" class="product-desc">{{ product.description }}</p>
@@ -83,6 +126,13 @@ useSeoMeta({
         </div>
       </aside>
     </div>
+
+    <ProductEditModal
+      v-if="showEdit"
+      :product="{ id: product.id, name: product.name, description: product.description, category: product.category, purchaseUrl: product.purchaseUrl, datasheetUrl: product.datasheetUrl, status: product.status }"
+      @close="showEdit = false"
+      @updated="handleUpdated"
+    />
   </div>
   <div v-else class="product-not-found">
     <h1>Product not found</h1>
@@ -97,6 +147,9 @@ useSeoMeta({
 .product-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; }
 
 .product-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
+.product-header-main { flex: 1; min-width: 0; }
+.product-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
+.cpub-product-delete:hover { color: var(--red); border-color: var(--red); }
 .product-icon { width: 56px; height: 56px; border: var(--border-width-default) solid var(--border); background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); }
 .product-name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
 .product-category { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); text-transform: capitalize; }

package/pages/products/index.vue

@@ -4,7 +4,7 @@ useSeoMeta({ title: `Products, ${useSiteName()}`, description: 'Browse products,
 const search = ref('');
 const category = ref('');
 
-const { data: productsData, pending } = useFetch('/api/products', {
+const { data: productsData, pending, error, refresh } = useFetch('/api/products', {
   query: computed(() => ({
     q: search.value || undefined,
     category: category.value || undefined,
@@ -57,6 +57,11 @@ const categories = [
 
     <!-- Grid -->
     <div v-if="pending" class="products-loading">Loading...</div>
+    <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 products.</div>
+      <button class="cpub-btn cpub-btn-sm" @click="refresh()">Retry</button>
+    </div>
     <div v-else-if="products.length" class="products-grid">
       <NuxtLink
         v-for="product in products"

package/pages/settings/account.vue

@@ -72,22 +72,22 @@ async function handleDeleteAccount(): Promise<void> {
     <h2 class="cpub-section-title-lg">Account Settings</h2>
 
     <div class="cpub-form-group">
-      <label class="cpub-form-label">Email</label>
-      <input type="email" class="cpub-input" :value="user?.email" disabled />
+      <label for="acct-email" class="cpub-form-label">Email</label>
+      <input id="acct-email" type="email" class="cpub-input" :value="user?.email" disabled />
       <span class="cpub-form-hint">Contact support to change your email.</span>
     </div>
 
     <form class="cpub-form-group" @submit.prevent="handlePasswordChange">
-      <label class="cpub-form-label">Change Password</label>
-      <input v-model="currentPassword" type="password" class="cpub-input" placeholder="Current password" required />
-      <input v-model="newPassword" type="password" class="cpub-input cpub-mt-2" placeholder="New password (min 8 characters)" required minlength="8" />
+      <label for="acct-current-password" class="cpub-form-label">Change Password</label>
+      <input id="acct-current-password" v-model="currentPassword" type="password" class="cpub-input" placeholder="Current password" aria-label="Current password" required />
+      <input v-model="newPassword" type="password" class="cpub-input cpub-mt-2" placeholder="New password (min 8 characters)" aria-label="New password (min 8 characters)" required minlength="8" />
       <button type="submit" class="cpub-btn cpub-btn-sm cpub-mt-2" :disabled="passwordLoading">
         {{ passwordLoading ? 'Updating...' : 'Update Password' }}
       </button>
     </form>
 
     <div class="cpub-form-group">
-      <label class="cpub-form-label">Your Data</label>
+      <span class="cpub-form-label">Your Data</span>
       <p class="cpub-form-hint cpub-mb-2">Download a copy of all your data in JSON format.</p>
       <a href="/api/auth/export-data" download class="cpub-btn cpub-btn-sm">
         <i class="fa-solid fa-download"></i> Download My Data
@@ -104,8 +104,8 @@ async function handleDeleteAccount(): Promise<void> {
 
       <template v-if="deleteConfirm">
         <div class="cpub-form-group">
-          <label class="cpub-form-label">Type your username <strong>{{ user?.username ?? '' }}</strong> to confirm</label>
-          <input v-model="deleteConfirmText" type="text" class="cpub-input" :placeholder="user?.username" autocomplete="off" />
+          <label for="acct-delete-confirm" class="cpub-form-label">Type your username <strong>{{ user?.username ?? '' }}</strong> to confirm</label>
+          <input id="acct-delete-confirm" v-model="deleteConfirmText" type="text" class="cpub-input" :placeholder="user?.username" autocomplete="off" />
         </div>
         <div class="cpub-danger-actions">
           <button

package/pages/settings/profile.vue

@@ -5,6 +5,7 @@ useSeoMeta({ title: `Edit Profile, ${useSiteName()}` });
 const { user } = useAuth();
 const toast = useToast();
 const { extract: extractError } = useApiError();
+const { uploadFile } = useFileUpload();
 const saving = ref(false);
 const isDirty = ref(false);
 
@@ -30,7 +31,14 @@ const form = ref({
   bannerUrl: '',
 });
 
+// Stable row ids so v-for keys survive splice-removal (keying by array index
+// rebinds v-model to the wrong row after deleting an entry).
+let rowIdCounter = 0;
+function nextRowId(): string { return `row-${rowIdCounter++}`; }
+
 const skills = ref<string[]>([]);
+// Parallel id list kept in lockstep with `skills` for stable v-for keys.
+const skillIds = ref<string[]>([]);
 const socialLinks = ref({
   github: '',
   twitter: '',
@@ -41,7 +49,7 @@ const socialLinks = ref({
   discord: '',
 });
 const pronouns = ref('');
-const experience = ref<Array<{ title: string; company: string; startDate: string; endDate: string; description: string }>>([]);
+const experience = ref<Array<{ _id: string; title: string; company: string; startDate: string; endDate: string; description: string }>>([]);
 
 const emailNotifications = ref<{
   digest: 'daily' | 'weekly' | 'none';
@@ -80,6 +88,7 @@ if (profile.value) {
 
   if (Array.isArray(p.skills)) {
     skills.value = (p.skills as unknown[]).filter((s): s is string => typeof s === 'string');
+    skillIds.value = skills.value.map(() => nextRowId());
   }
   pronouns.value = p.pronouns || '';
   if (p.socialLinks) {
@@ -95,6 +104,7 @@ if (profile.value) {
   const profileRecord = p as Record<string, unknown>;
   if (Array.isArray(profileRecord.experience)) {
     experience.value = (profileRecord.experience as Array<Record<string, unknown>>).map((e) => ({
+      _id: nextRowId(),
       title: String(e.title || ''),
       company: String(e.company || ''),
       startDate: String(e.startDate || ''),
@@ -123,14 +133,17 @@ onMounted(() => {
 
 function addSkill(): void {
   skills.value.push('');
+  skillIds.value.push(nextRowId());
 }
 
 function removeSkill(index: number): void {
   skills.value.splice(index, 1);
+  skillIds.value.splice(index, 1);
 }
 
 function addExperience(): void {
   experience.value.push({
+    _id: nextRowId(),
     title: '',
     company: '',
     startDate: '',
@@ -146,11 +159,8 @@ function removeExperience(index: number): void {
 async function handleAvatarUpload(event: Event): Promise<void> {
   const file = (event.target as HTMLInputElement).files?.[0];
   if (!file) return;
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('purpose', 'avatar');
   try {
-    const result = await $fetch<{ url: string }>('/api/files/upload', { method: 'POST', body: formData });
+    const result = await uploadFile(file, 'avatar');
     form.value.avatarUrl = result.url;
   } catch (err: unknown) {
     toast.error(extractError(err));
@@ -160,11 +170,8 @@ async function handleAvatarUpload(event: Event): Promise<void> {
 async function handleBannerUpload(event: Event): Promise<void> {
   const file = (event.target as HTMLInputElement).files?.[0];
   if (!file) return;
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('purpose', 'banner');
   try {
-    const result = await $fetch<{ url: string }>('/api/files/upload', { method: 'POST', body: formData });
+    const result = await uploadFile(file, 'banner');
     form.value.bannerUrl = result.url;
   } catch (err: unknown) {
     toast.error(extractError(err));
@@ -179,7 +186,9 @@ async function handleSave(): Promise<void> {
       body: {
         ...form.value,
         skills: skills.value.filter((s) => s.trim()),
-        experience: experience.value.filter((e) => e.title.trim()),
+        experience: experience.value
+          .filter((e) => e.title.trim())
+          .map(({ _id, ...rest }) => rest),
         pronouns: pronouns.value || undefined,
         socialLinks: socialLinks.value,
         ...(emailNotificationsEnabled.value ? { emailNotifications: emailNotifications.value } : {}),
@@ -206,7 +215,7 @@ async function handleSave(): Promise<void> {
 
         <!-- Banner upload -->
         <div class="cpub-form-group">
-          <label class="cpub-form-label">Banner Image</label>
+          <span class="cpub-form-label">Banner Image</span>
           <button
             type="button"
             class="cpub-banner-upload"
@@ -236,7 +245,7 @@ async function handleSave(): Promise<void> {
 
         <!-- Avatar upload -->
         <div class="cpub-form-group">
-          <label class="cpub-form-label">Avatar</label>
+          <span class="cpub-form-label">Avatar</span>
           <button
             type="button"
             class="cpub-avatar-upload"
@@ -361,7 +370,7 @@ async function handleSave(): Promise<void> {
 
         <div
           v-for="(_skill, index) in skills"
-          :key="index"
+          :key="skillIds[index]"
           class="cpub-skill-row"
         >
           <input
@@ -456,7 +465,7 @@ async function handleSave(): Promise<void> {
 
         <div
           v-for="(entry, index) in experience"
-          :key="index"
+          :key="entry._id"
           class="cpub-experience-card"
         >
           <div class="cpub-experience-header">

package/pages/u/[username]/[type]/[slug]/edit.vue

@@ -121,11 +121,9 @@ const { errors: publishErrors, showErrors: showPublishErrors, validate, dismiss:
 });
 
 // --- Provide upload + search handlers to block components via inject ---
+const { uploadFile } = useFileUpload();
 provide(UPLOAD_HANDLER_KEY, async (file: File) => {
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('purpose', 'content');
-  const res = await $fetch<{ url: string; width?: number | null; height?: number | null }>('/api/files/upload', { method: 'POST', body: formData });
+  const res = await uploadFile<{ url: string; width?: number | null; height?: number | null }>(file, 'content');
   return { url: res.url, width: res.width ?? null, height: res.height ?? null };
 });
 
@@ -306,7 +304,7 @@ async function handlePublish(): Promise<void> {
 }
 
 // --- Schedule (deferred publish) ---
-// metadata.scheduledAt is set by the editor's schedule control (e.g. BlogEditor).
+// metadata.scheduledAt is set by the editor's schedule control (e.g. ArticleEditor).
 const canSchedule = computed(() => !!(metadata.value.scheduledAt as string | undefined));
 async function handleSchedule(): Promise<void> {
   await doSchedule(validate);
@@ -345,6 +343,15 @@ if (import.meta.client) {
   onUnmounted(() => { window.removeEventListener('beforeunload', onBeforeUnload); });
 }
 
+// --- Warn before in-app navigation (beforeunload only covers full-page unload) ---
+onBeforeRouteLeave((_to, _from, next) => {
+  if (isDirty.value && !window.confirm('You have unsaved changes. Leave anyway?')) {
+    next(false);
+  } else {
+    next();
+  }
+});
+
 // --- Markdown import ---
 const showImportDialog = ref(false);
 const { importing, importMarkdown } = useMarkdownImport(blockEditor);

package/pages/u/[username]/followers.vue

@@ -4,12 +4,20 @@ const username = route.params.username as string;
 
 useSeoMeta({ title: `Followers, @${username}, ${useSiteName()}` });
 
-const { data: followers } = useLazyFetch<Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>>(`/api/users/${username}/followers`);
+type FollowRow = { id: string; username: string; displayName: string | null; avatarUrl: string | null; isFollowing?: boolean };
+const { data: followers } = useLazyFetch<{ items: FollowRow[]; total: number }>(`/api/users/${username}/followers`);
 const { isAuthenticated, user } = useAuth();
 const toast = useToast();
 
 const followingState = ref<Record<string, boolean>>({});
 
+// Seed each row's button from the VIEWER's real relationship (server-provided).
+watch(followers, (d) => {
+  for (const f of d?.items ?? []) {
+    followingState.value[f.username] = !!f.isFollowing;
+  }
+}, { immediate: true });
+
 async function toggleFollow(targetUsername: string, isFollowing: boolean): Promise<void> {
   try {
     if (isFollowing) {
@@ -32,8 +40,8 @@ async function toggleFollow(targetUsername: string, isFollowing: boolean): Promi
       <h1 class="follow-title">Followers</h1>
     </div>
 
-    <div v-if="followers?.length" class="follow-list">
-      <div v-for="f in (followers as Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>)" :key="f.id" class="follow-item">
+    <div v-if="followers?.items?.length" class="follow-list">
+      <div v-for="f in followers.items" :key="f.id" class="follow-item">
         <NuxtLink :to="`/u/${f.username}`" class="follow-user">
           <div class="follow-avatar">
             <img v-if="f.avatarUrl" :src="f.avatarUrl" :alt="f.displayName || f.username" class="follow-avatar-img" />

package/pages/u/[username]/following.vue

@@ -4,17 +4,19 @@ const username = route.params.username as string;
 
 useSeoMeta({ title: `Following, @${username}, ${useSiteName()}` });
 
-const { data: following } = useLazyFetch<Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>>(`/api/users/${username}/following`);
+type FollowRow = { id: string; username: string; displayName: string | null; avatarUrl: string | null; isFollowing?: boolean };
+const { data: following } = useLazyFetch<{ items: FollowRow[]; total: number }>(`/api/users/${username}/following`);
 const { isAuthenticated, user } = useAuth();
 const toast = useToast();
 
 const followingState = ref<Record<string, boolean>>({});
 
-// Initialize all as "following" since they appear in this user's following list
-watch(following, (f) => {
-  if (!f) return;
-  for (const u of (f as Array<{ username: string }>)) {
-    followingState.value[u.username] = true;
+// Seed each row from the VIEWER's real relationship. (This is the profile owner's
+// following list — whether the VIEWER also follows each account is server-provided
+// per row, NOT implied by membership in this list.)
+watch(following, (d) => {
+  for (const u of d?.items ?? []) {
+    followingState.value[u.username] = !!u.isFollowing;
   }
 }, { immediate: true });
 
@@ -40,8 +42,8 @@ async function toggleFollow(targetUsername: string, isFollowing: boolean): Promi
       <h1 class="follow-title">Following</h1>
     </div>
 
-    <div v-if="following?.length" class="follow-list">
-      <div v-for="f in (following as Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>)" :key="f.id" class="follow-item">
+    <div v-if="following?.items?.length" class="follow-list">
+      <div v-for="f in following.items" :key="f.id" class="follow-item">
         <NuxtLink :to="`/u/${f.username}`" class="follow-user">
           <div class="follow-avatar">
             <img v-if="f.avatarUrl" :src="f.avatarUrl" :alt="f.displayName || f.username" class="follow-avatar-img" />

package/pages/u/[username]/index.vue

@@ -41,6 +41,11 @@ const tabDefs = computed(() => {
   if (learningEnabled.value) {
     tabs.push({ value: 'learning', label: 'Learning', icon: 'fa-solid fa-graduation-cap' });
   }
+  // Owner-only: their unpublished work. Draft visibility is also enforced
+  // server-side from the authenticated viewer, so this tab is the surface only.
+  if (isOwnProfile.value) {
+    tabs.push({ value: 'drafts', label: 'Drafts', icon: 'fa-solid fa-file-pen' });
+  }
   tabs.push({ value: 'about', label: 'About', icon: 'fa-solid fa-id-card' });
   return tabs;
 });
@@ -97,6 +102,34 @@ const isOwnProfile = computed(() => user.value?.username === username);
 const following = ref(false);
 const followLoading = ref(false);
 
+// Per-tab paginated content (projects/articles/explainers/drafts). The single
+// `content` fetch above still feeds the heatmap + About-tab teaser; these tabs
+// get their own keyset-paginated list with a Load more button.
+const FEED_TAB_TYPE: Record<string, string | undefined> = {
+  projects: 'project',
+  articles: 'blog', // the 'blog' filter also matches legacy 'article' rows server-side
+  explainers: 'explainer',
+  drafts: undefined, // the owner's drafts of any type
+};
+const FEED_TABS = ['projects', 'articles', 'explainers', 'drafts'];
+const isFeedTab = computed(() => FEED_TABS.includes(activeTab.value));
+const feedQuery = computed(() => {
+  const isDrafts = activeTab.value === 'drafts';
+  const type = FEED_TAB_TYPE[activeTab.value];
+  return {
+    ...(type ? { type } : {}),
+    ...(isDrafts ? { drafts: 'true' } : {}),
+    limit: 12,
+  };
+});
+const {
+  items: tabItems,
+  pending: tabPending,
+  loadMore: loadMoreTab,
+  canLoadMore: canLoadMoreTab,
+  loadingMore: loadingMoreTab,
+} = useProfileContent(username, feedQuery);
+
 // Initialize follow state from API response
 watch(() => profile.value, (profileData) => {
   if (profileData && typeof (profileData as Record<string, unknown>).isFollowing === 'boolean') {
@@ -277,8 +310,8 @@ async function handleReport(): Promise<void> {
 
     <!-- Content -->
     <div class="cpub-profile-main">
-      <!-- Projects / Articles / Explainers / Videos tabs -->
-      <template v-if="['projects', 'articles', 'explainers'].includes(activeTab)">
+      <!-- Projects / Articles / Explainers / Drafts tabs -->
+      <template v-if="isFeedTab">
         <!-- Section header -->
         <div class="cpub-sec-head">
           <h2>
@@ -287,12 +320,23 @@ async function handleReport(): Promise<void> {
           </h2>
         </div>
 
-        <div v-if="filteredContent.length" class="cpub-grid-3">
-          <ContentCard v-for="item in filteredContent" :key="item.id" :item="item" />
-        </div>
-        <div v-else class="cpub-empty-state">
-          <p class="cpub-empty-state-title">No {{ activeTab }} yet</p>
+        <div v-if="tabPending && !tabItems.length" class="cpub-empty-state">
+          <p class="cpub-empty-state-title">Loading...</p>
         </div>
+        <template v-else>
+          <div v-if="tabItems.length" class="cpub-grid-3">
+            <ContentCard v-for="item in tabItems" :key="item.id" :item="item" />
+          </div>
+          <div v-else class="cpub-empty-state">
+            <p class="cpub-empty-state-title">{{ activeTab === 'drafts' ? 'No drafts yet' : `No ${activeTab} yet` }}</p>
+          </div>
+          <div v-if="canLoadMoreTab" class="cpub-load-more-row">
+            <button class="cpub-btn-load-more" :disabled="loadingMoreTab" @click="loadMoreTab">
+              <i :class="loadingMoreTab ? 'fa-solid fa-circle-notch fa-spin' : 'fa-solid fa-rotate'"></i>
+              {{ loadingMoreTab ? 'Loading...' : 'Load more' }}
+            </button>
+          </div>
+        </template>
       </template>
 
       <!-- Learning tab — Certificates + In-progress paths -->
@@ -894,4 +938,26 @@ async function handleReport(): Promise<void> {
   .cpub-profile-stat { min-width: 100%; padding: 10px 16px; }
   .cpub-profile-name { font-size: 18px; }
 }
+
+.cpub-load-more-row { display: flex; justify-content: center; padding: 20px 0 4px; }
+.cpub-btn-load-more {
+  padding: 8px 28px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  color: var(--text-dim);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.15s;
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+}
+.cpub-btn-load-more:hover {
+  background: var(--surface2);
+  color: var(--text);
+  box-shadow: var(--shadow-md);
+  transform: translate(-1px, -1px);
+}
 </style>

package/pages/videos/index.vue

@@ -22,6 +22,9 @@ const { data: videosData, pending: loadingVideos } = useFetch<{ items: any[]; to
 });
 
 const videos = computed(() => videosData.value?.items ?? []);
+// The first video is shown in the Featured hero, so the grid below skips it
+// (otherwise the most-recent video renders twice).
+const gridVideos = computed(() => videos.value.slice(1));
 const totalVideos = computed(() => videosData.value?.total ?? 0);
 
 const filterOptions = computed(() => {
@@ -75,8 +78,7 @@ function formatDate(dateStr: string): string {
         <select v-model="sortOption" class="cpub-sort-select">
           <option value="recent">Sort: Most Recent</option>
           <option value="viewed">Sort: Most Viewed</option>
-          <option value="rated">Sort: Top Rated</option>
-          <option value="shortest">Sort: Shortest First</option>
+          <option value="liked">Sort: Most Liked</option>
         </select>
       </div>
     </div>
@@ -113,10 +115,10 @@ function formatDate(dateStr: string): string {
             </div>
           </div>
 
-          <hr v-if="videos.length" class="cpub-divider" style="margin:20px 0;" />
+          <hr v-if="gridVideos.length" class="cpub-divider" style="margin:20px 0;" />
 
-          <!-- VIDEO GRID -->
-          <div class="cpub-sec-head">
+          <!-- VIDEO GRID — shown when there are non-featured videos, or while loading -->
+          <div v-if="loadingVideos || gridVideos.length" class="cpub-sec-head">
             <h2>Recent Videos</h2>
             <span class="cpub-sec-sub">{{ totalVideos }} videos</span>
           </div>
@@ -134,15 +136,16 @@ function formatDate(dateStr: string): string {
             </div>
           </div>
 
-          <!-- Real data -->
-          <div v-else-if="videos.length" class="cpub-video-grid">
-            <NuxtLink v-for="v in videos" :key="v.id" :to="`/videos/${v.id}`" style="text-decoration: none;">
+          <!-- Real data (skip videos[0] — it's the Featured hero above) -->
+          <div v-else-if="gridVideos.length" class="cpub-video-grid">
+            <NuxtLink v-for="v in gridVideos" :key="v.id" :to="`/videos/${v.id}`" style="text-decoration: none;">
               <VideoCard :video="v" />
             </NuxtLink>
           </div>
 
-          <!-- Empty state -->
-          <div v-else class="cpub-empty-state">
+          <!-- Empty state — only when there are genuinely no videos (not just an
+               empty grid because the sole video is in the Featured hero above). -->
+          <div v-else-if="!videos.length" class="cpub-empty-state">
             <div class="cpub-empty-icon"><i class="fa-solid fa-film"></i></div>
             <p class="cpub-empty-title">No videos yet</p>
             <p class="cpub-empty-sub">Be the first to upload a video to the community.</p>

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

@@ -6,9 +6,9 @@ const querySchema = z.object({
 });
 
 export default defineEventHandler(async (event) => {
+  requireFeature('publicApi');
   requirePermission(event, 'apikeys.manage');
-  const id = getRouterParam(event, 'id');
-  if (!id) throw createError({ statusCode: 400, statusMessage: 'Missing id' });
+  const { id } = parseParams(event, { id: 'uuid' });
   const parsed = querySchema.safeParse(getQuery(event));
   if (!parsed.success) {
     throw createError({ statusCode: 400, statusMessage: 'Invalid query parameters' });

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

@@ -1,9 +1,9 @@
 import { revokeApiKey, createAuditEntry } from '@commonpub/server';
 
 export default defineEventHandler(async (event) => {
+  requireFeature('publicApi');
   const user = requirePermission(event, 'apikeys.manage');
-  const id = getRouterParam(event, 'id');
-  if (!id) throw createError({ statusCode: 400, statusMessage: 'Missing id' });
+  const { id } = parseParams(event, { id: 'uuid' });
   const db = useDB();
   const result = await revokeApiKey(db, id, user.id);
   if (!result) throw createError({ statusCode: 404, statusMessage: 'Key not found or already revoked' });

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

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

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

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