@commonpub/layer 0.8.3 → 0.8.5

package/pages/contests/index.vue

@@ -28,7 +28,8 @@ const canCreateContest = computed(() => {
           <span class="cpub-badge" :class="{
             'cpub-badge-green': contest.status === 'active',
             'cpub-badge-yellow': contest.status === 'upcoming',
-            'cpub-badge-red': contest.status === 'completed',
+            'cpub-badge-accent': contest.status === 'judging',
+            'cpub-badge-red': contest.status === 'completed' || contest.status === 'cancelled',
           }">{{ contest.status }}</span>
           <h3 style="font-size: 15px; font-weight: 600; margin: 8px 0">
             <NuxtLink :to="`/contests/${contest.slug}`" style="color: var(--text); text-decoration: none">

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

@@ -12,11 +12,11 @@ const pagePath = computed(() => {
 const selectedVersion = ref('');
 
 const { data: site } = useLazyFetch<{ id: string; name: string; slug: string; description: string; ownerId: string; versions: Array<{ id: string; label: string; slug: string; version: string; isDefault: boolean }> }>(() => `/api/docs/${siteSlug.value}`);
-const { data: nav, refresh: refreshNav } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+const { data: nav, refresh: refreshNav } = useLazyFetch<Array<{ id: string; title: string; sidebarLabel?: string | null; slug: string; sortOrder: number; parentId: string | null }>>(() => {
   const base = `/api/docs/${siteSlug.value}/nav`;
   return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
 });
-const { data: pages } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+const { data: pages } = useLazyFetch<Array<{ id: string; title: string; sidebarLabel?: string | null; slug: string; sortOrder: number; parentId: string | null }>>(() => {
   const base = `/api/docs/${siteSlug.value}/pages`;
   return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
 });
@@ -59,6 +59,7 @@ const isOwner = computed(() => site.value && user.value && site.value.ownerId ==
 interface NavTreeNode {
   id: string;
   title: string;
+  sidebarLabel?: string | null;
   slug: string;
   sortOrder: number;
   parentId: string | null;
@@ -67,7 +68,7 @@ interface NavTreeNode {
 
 const navTree = computed<NavTreeNode[]>(() => {
   if (!pages.value) return [];
-  const allPages = pages.value as Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>;
+  const allPages = pages.value as Array<{ id: string; title: string; sidebarLabel?: string | null; slug: string; sortOrder: number; parentId: string | null }>;
   const byParent = new Map<string | null, typeof allPages>();
   for (const p of allPages) {
     const key = p.parentId ?? null;
@@ -270,7 +271,7 @@ useSeoMeta({
             <div class="docs-nav-item" :class="{ active: node.slug === pagePath }">
               <div class="docs-nav-row">
                 <NuxtLink :to="`/docs/${siteSlug}/${node.slug}`" class="docs-nav-link" @click="sidebarOpen = false">
-                  {{ node.title }}
+                  {{ node.sidebarLabel || node.title }}
                 </NuxtLink>
                 <button
                   v-if="node.children.length"
@@ -291,7 +292,7 @@ useSeoMeta({
                   :class="{ active: child.slug === pagePath }"
                   @click="sidebarOpen = false"
                 >
-                  {{ child.title }}
+                  {{ child.sidebarLabel || child.title }}
                 </NuxtLink>
               </div>
             </div>

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

@@ -31,6 +31,12 @@ watch(site, (s) => {
   }
 }, { immediate: true });
 
+// 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;
+});
+
 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 }>>(() => {
   const base = `/api/docs/${siteSlug.value}/pages`;
   return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
@@ -101,6 +107,8 @@ const selectedPage = computed<DocsPage | null>(() =>
 
 // Page properties (right panel)
 const pageSlug = ref('');
+const pageSidebarLabel = ref('');
+const pageDescription = ref('');
 const pageStatus = ref<'draft' | 'published'>('draft');
 const savingPage = ref(false);
 const autoSaveTimer = ref<ReturnType<typeof setTimeout> | null>(null);
@@ -139,6 +147,8 @@ async function selectPage(pageId: string): Promise<void> {
 
   // Load properties
   pageSlug.value = page.slug ?? '';
+  pageSidebarLabel.value = (page as unknown as Record<string, unknown>).sidebarLabel as string ?? '';
+  pageDescription.value = (page as unknown as Record<string, unknown>).description as string ?? '';
   pageStatus.value = ((page as unknown as Record<string, unknown>).status as 'draft' | 'published') || 'draft';
   isDirty.value = false;
   autoSaveStatus.value = 'idle';
@@ -160,6 +170,8 @@ async function saveCurrentPage(): Promise<void> {
       body: {
         title: selectedPage.value?.title,
         slug: pageSlug.value,
+        sidebarLabel: pageSidebarLabel.value || null,
+        description: pageDescription.value || null,
         content: blockEditor.toBlockTuples(),
       },
     });
@@ -222,7 +234,7 @@ watch(() => blockEditor.blocks.value, () => {
   scheduleAutoSave();
 }, { deep: true });
 
-watch(pageSlug, () => {
+watch([pageSlug, pageSidebarLabel, pageDescription], () => {
   if (isLoadingPage.value) return;
   isDirty.value = true;
   scheduleAutoSave();
@@ -281,6 +293,7 @@ async function handleCreatePage(parentId: string | null, title: string): Promise
         content: [['paragraph', { html: '' }]],
         parentId: parentId ?? undefined,
         sortOrder: (pages.value?.length ?? 0) + 1,
+        versionId: selectedVersionId.value,
       },
     });
     await refreshPages();
@@ -306,6 +319,21 @@ async function handleRenamePage(pageId: string, newTitle: string): Promise<void>
   }
 }
 
+async function handleDuplicatePage(pageId: string): Promise<void> {
+  try {
+    const result = await $fetch(`/api/docs/${siteSlug.value}/pages/${pageId}/duplicate`, {
+      method: 'POST',
+    });
+    await refreshPages();
+    if (result && typeof result === 'object' && 'id' in result) {
+      selectPage((result as { id: string }).id);
+    }
+    toast('Page duplicated', 'success');
+  } catch (err: unknown) {
+    toast(err instanceof Error ? err.message : 'Failed to duplicate page', 'error');
+  }
+}
+
 async function handleDeletePage(pageId: string): Promise<void> {
   try {
     await $fetch(`/api/docs/${siteSlug.value}/pages/${pageId}`, { method: 'DELETE' });
@@ -325,7 +353,7 @@ async function handleReorder(pageIds: string[]): Promise<void> {
   try {
     await $fetch(`/api/docs/${siteSlug.value}/pages/reorder`, {
       method: 'POST',
-      body: { pageIds },
+      body: { pageIds, version: selectedVersion.value || undefined },
     });
     await refreshPages();
   } catch {
@@ -535,6 +563,7 @@ async function createVersion(): Promise<void> {
           @select="selectPage"
           @create="handleCreatePage"
           @rename="handleRenamePage"
+          @duplicate="handleDuplicatePage"
           @delete="handleDeletePage"
           @reorder="handleReorder"
           @reparent="handleReparent"
@@ -612,6 +641,17 @@ async function createVersion(): Promise<void> {
               <input v-model="pageSlug" class="cpub-docs-field-input" placeholder="page-slug" />
             </div>
 
+            <div class="cpub-docs-field">
+              <label class="cpub-docs-field-label">Sidebar Label</label>
+              <input v-model="pageSidebarLabel" class="cpub-docs-field-input" placeholder="Short label for nav" maxlength="128" />
+              <span class="cpub-docs-field-hint">Shown in sidebar instead of title when set</span>
+            </div>
+
+            <div class="cpub-docs-field">
+              <label class="cpub-docs-field-label">Description</label>
+              <textarea v-model="pageDescription" class="cpub-docs-field-textarea" placeholder="Brief page description" rows="2" maxlength="2000" />
+            </div>
+
             <div class="cpub-docs-field">
               <label class="cpub-docs-field-label">Status</label>
               <div class="cpub-docs-status-row">
@@ -973,6 +1013,22 @@ async function createVersion(): Promise<void> {
   outline: none;
 }
 
+.cpub-docs-field-textarea {
+  padding: 6px 8px;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  color: var(--text);
+  font-size: 12px;
+  font-family: var(--font-sans);
+  resize: vertical;
+  min-height: 40px;
+}
+
+.cpub-docs-field-textarea:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+
 .cpub-docs-field-hint {
   font-size: 10px;
   color: var(--text-faint);

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

@@ -5,11 +5,11 @@ const siteSlug = computed(() => route.params.siteSlug as string);
 const selectedVersion = ref('');
 
 const { data: site, pending: sitePending, error: siteError, refresh: refreshSite } = useLazyFetch<{ id: string; name: string; slug: string; description: string; ownerId: string; versions: Array<{ id: string; label: string; slug: string; version: string; isDefault: boolean }> }>(() => `/api/docs/${siteSlug.value}`);
-const { data: nav, refresh: refreshNav } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+const { data: nav, refresh: refreshNav } = useLazyFetch<Array<{ id: string; title: string; sidebarLabel?: string | null; slug: string; sortOrder: number; parentId: string | null }>>(() => {
   const base = `/api/docs/${siteSlug.value}/nav`;
   return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
 });
-const { data: pages, refresh: refreshPages } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+const { data: pages, refresh: refreshPages } = useLazyFetch<Array<{ id: string; title: string; sidebarLabel?: string | null; slug: string; sortOrder: number; parentId: string | null }>>(() => {
   const base = `/api/docs/${siteSlug.value}/pages`;
   return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
 });
@@ -21,6 +21,7 @@ const isOwner = computed(() => site.value && user.value && site.value.ownerId ==
 interface NavTreeNode {
   id: string;
   title: string;
+  sidebarLabel?: string | null;
   slug: string;
   sortOrder: number;
   parentId: string | null;
@@ -29,7 +30,7 @@ interface NavTreeNode {
 
 const navTree = computed<NavTreeNode[]>(() => {
   if (!pages.value) return [];
-  const allPages = pages.value as Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>;
+  const allPages = pages.value as Array<{ id: string; title: string; sidebarLabel?: string | null; slug: string; sortOrder: number; parentId: string | null }>;
   const byParent = new Map<string | null, typeof allPages>();
   for (const p of allPages) {
     const key = p.parentId ?? null;
@@ -162,7 +163,7 @@ useSeoMeta({
             <div class="docs-nav-item">
               <div class="docs-nav-row">
                 <NuxtLink :to="`/docs/${siteSlug}/${node.slug}`" class="docs-nav-link" @click="sidebarOpen = false">
-                  {{ node.title }}
+                  {{ node.sidebarLabel || node.title }}
                 </NuxtLink>
                 <button
                   v-if="node.children.length"
@@ -182,7 +183,7 @@ useSeoMeta({
                   class="docs-nav-link docs-nav-child"
                   @click="sidebarOpen = false"
                 >
-                  {{ child.title }}
+                  {{ child.sidebarLabel || child.title }}
                 </NuxtLink>
               </div>
             </div>

package/pages/federated-hubs/[id]/posts/[postId].vue

@@ -137,9 +137,9 @@ useHead({
         <span class="cpub-post-type-badge">{{ post.postType }}</span>
       </div>
 
-      <!-- Content is sanitized server-side via sanitizeHtml() before storage -->
+      <!-- Content is sanitized server-side on ingest AND client-side here (defense-in-depth) -->
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div class="cpub-post-content cpub-prose" v-html="post.content"></div>
+      <div class="cpub-post-content cpub-prose" v-html="sanitizeBlockHtml(post.content || '')"></div>
 
       <div class="cpub-post-meta">
         <div class="cpub-post-author">

package/pages/hubs/index.vue

@@ -4,7 +4,7 @@ useSeoMeta({
   description: 'Browse and join maker communities.',
 });
 
-const { data } = await useFetch('/api/hubs');
+const { data, pending } = await useFetch('/api/hubs');
 const { isAuthenticated } = useAuth();
 
 const hubs = computed(() => data.value?.items ?? []);
@@ -31,7 +31,8 @@ function hubLink(hub: Record<string, unknown>): string {
       </NuxtLink>
     </div>
 
-    <div v-if="hubs.length" class="cpub-hubs-grid">
+    <div v-if="pending" class="cpub-empty-state"><p><i class="fa-solid fa-circle-notch fa-spin"></i> Loading hubs...</p></div>
+    <div v-else-if="hubs.length" class="cpub-hubs-grid">
       <NuxtLink
         v-for="hub in hubs"
         :key="hub.id"

package/pages/index.vue

@@ -28,7 +28,7 @@ const contentQuery = computed(() => ({
   limit: 12,
 }));
 
-const { data: feed } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+const { data: feed, pending: feedPending } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
   query: contentQuery,
   watch: [contentQuery],
 });
@@ -38,13 +38,13 @@ const { data: featured } = await useFetch<PaginatedResponse<Serialized<ContentLi
   query: { status: 'published', featured: true, limit: 1 },
 });
 
-const { data: stats } = await useFetch('/api/stats');
+const { data: stats, pending: statsPending } = await useFetch('/api/stats');
 
-const { data: communities } = await useFetch('/api/hubs', {
+const { data: communities, pending: communitiesPending } = await useFetch('/api/hubs', {
   query: { limit: 4 },
 });
 
-const { data: contests } = await useFetch('/api/contests', {
+const { data: contests, pending: contestsPending } = await useFetch('/api/contests', {
   query: { limit: 3 },
 });
 
@@ -254,7 +254,10 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
         </NuxtLink>
 
         <!-- Content grid (2-col) -->
-        <div v-if="feed?.items?.length" class="cpub-content-grid">
+        <div v-if="feedPending" class="cpub-loading-state">
+          <i class="fa-solid fa-circle-notch fa-spin"></i> Loading content...
+        </div>
+        <div v-else-if="feed?.items?.length" class="cpub-content-grid">
           <ContentCard v-for="item in feed.items" :key="item.id" :item="item" />
         </div>
         <div v-else class="cpub-empty-state">
@@ -288,7 +291,8 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
         <!-- Platform Stats -->
         <div class="cpub-sb-card">
           <div class="cpub-sb-head">Platform Stats</div>
-          <div class="cpub-stats-grid">
+          <div v-if="statsPending" class="cpub-loading-state"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+          <div v-else class="cpub-stats-grid">
             <div class="cpub-stat-block">
               <span class="cpub-stat-num">{{ stats?.content?.byType?.project ?? 0 }}</span>
               <span class="cpub-stat-lbl">Projects</span>
@@ -324,7 +328,11 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
         </div>
 
         <!-- Trending Hubs -->
-        <div v-if="hubsEnabled && communities?.items?.length" class="cpub-sb-card">
+        <div v-if="hubsEnabled && communitiesPending" class="cpub-sb-card">
+          <div class="cpub-sb-head">Trending Hubs</div>
+          <div class="cpub-loading-state"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+        </div>
+        <div v-else-if="hubsEnabled && communities?.items?.length" class="cpub-sb-card">
           <div class="cpub-sb-head">Trending Hubs <NuxtLink to="/hubs">Browse</NuxtLink></div>
           <div v-for="hub in communities.items" :key="hub.id" class="cpub-hub-item">
             <div class="cpub-hub-icon">
@@ -1051,4 +1059,14 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
     padding: 16px;
   }
 }
+
+.cpub-loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2, 8px);
+  padding: var(--space-8, 32px);
+  color: var(--text-faint);
+  font-size: var(--font-size-sm, 14px);
+}
 </style>

package/pages/learn/index.vue

@@ -138,7 +138,7 @@ const activeDifficultyFilter = ref('');
 
           <!-- Loading -->
           <div v-if="loadingPaths" style="padding: 24px 0; text-align: center; color: var(--text-faint); font-size: 12px;">
-            Loading paths...
+            <i class="fa-solid fa-circle-notch fa-spin"></i> Loading paths...
           </div>
 
           <!-- Real data -->

package/pages/mirror/[id].vue

@@ -43,7 +43,7 @@ if (originUrl.value) {
   });
 }
 
-/** Strip HTML tags from remote actor bio (unsanitized — XSS risk with v-html) */
+/** Strip HTML tags from remote actor bio for plain-text display */
 function stripHtml(html: string): string {
   return html.replace(/<[^>]*>/g, '').trim();
 }
@@ -116,8 +116,8 @@ useSeoMeta({
             <p v-if="transformedContent.author.bio" class="cpub-mirror-bio">{{ stripHtml(transformedContent.author.bio) }}</p>
           </div>
         </div>
-        <!-- Content is sanitized on ingest (inboxHandlers.ts → sanitizeHtml). Safe for v-html. -->
-        <div v-if="typeof transformedContent.content === 'string'" class="cpub-mirror-body prose" v-html="transformedContent.content" />
+        <!-- Content is sanitized on ingest AND client-side here (defense-in-depth) -->
+        <div v-if="typeof transformedContent.content === 'string'" class="cpub-mirror-body prose" v-html="sanitizeBlockHtml(transformedContent.content)" />
         <ContentAttachments v-if="transformedContent.attachments?.length" :attachments="transformedContent.attachments" />
         <div v-if="transformedContent.tags?.length" class="cpub-mirror-tags">
           <NuxtLink v-for="tag in transformedContent.tags" :key="tag.name" :to="`/tags/${tag.slug || tag.name.toLowerCase().replace(/\s+/g, '-')}`" class="cpub-mirror-tag">{{ tag.name }}</NuxtLink>

package/pages/notifications.vue

@@ -10,7 +10,7 @@ const notifQuery = computed(() => ({
   limit: 50,
 }));
 
-const { data: notifData, refresh } = await useFetch('/api/notifications', {
+const { data: notifData, pending, refresh } = await useFetch('/api/notifications', {
   query: notifQuery,
   watch: [notifQuery],
   default: () => ({ items: [], total: 0 }),
@@ -51,6 +51,10 @@ async function deleteNotification(id: string): Promise<void> {
     </div>
 
     <div class="cpub-notif-list">
+      <div v-if="pending" class="cpub-notif-loading">
+        <i class="fa-solid fa-circle-notch fa-spin"></i> Loading notifications...
+      </div>
+      <template v-else>
       <NotificationItem
         v-for="n in filteredNotifications"
         :key="n.id"
@@ -61,6 +65,7 @@ async function deleteNotification(id: string): Promise<void> {
         <p class="cpub-empty-state-title">No notifications</p>
         <p class="cpub-empty-state-desc">You're all caught up!</p>
       </div>
+      </template>
     </div>
   </div>
 </template>
@@ -84,6 +89,15 @@ async function deleteNotification(id: string): Promise<void> {
   background: var(--surface);
 }
 
+.cpub-notif-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: var(--space-8, 32px);
+  color: var(--text-faint);
+}
+
 @media (max-width: 768px) {
   .cpub-notifications-page { padding: 16px 12px; }
   .cpub-notif-header { flex-wrap: wrap; gap: 8px; }

package/pages/products/[slug].vue

@@ -2,7 +2,7 @@
 const route = useRoute();
 const slug = route.params.slug as string;
 
-const { data: product } = useLazyFetch(`/api/products/${slug}`) as { data: Ref<Record<string, any> | null> };
+const { data: product, pending } = useLazyFetch(`/api/products/${slug}`) as { data: Ref<Record<string, any> | null>; pending: Ref<boolean> };
 const { data: projectsUsing } = useLazyFetch(`/api/products/${slug}/content`) as { data: Ref<any[] | null> };
 
 useSeoMeta({
@@ -12,7 +12,10 @@ useSeoMeta({
 </script>
 
 <template>
-  <div v-if="product" class="product-detail">
+  <div v-if="pending" style="padding: 32px; text-align: center; color: var(--text-faint);">
+    <i class="fa-solid fa-circle-notch fa-spin"></i> Loading product...
+  </div>
+  <div v-else-if="product" class="product-detail">
     <NuxtLink to="/products" class="cpub-back-link"><i class="fa-solid fa-arrow-left"></i> Products</NuxtLink>
 
     <div class="product-layout">

package/pages/settings/notifications.vue

@@ -15,7 +15,7 @@ const prefs = ref({
 // Load current preferences from profile
 import type { Serialized, UserProfile } from '@commonpub/server';
 
-const { data: profile } = await useFetch<Serialized<UserProfile> & { notificationPrefs?: Record<string, boolean> }>('/api/profile');
+const { data: profile, pending } = await useFetch<Serialized<UserProfile> & { notificationPrefs?: Record<string, boolean> }>('/api/profile');
 if (profile.value?.notificationPrefs) {
   const saved = profile.value.notificationPrefs;
   for (const key of Object.keys(prefs.value)) {
@@ -54,6 +54,11 @@ async function handleSave(): Promise<void> {
   <div>
     <h2 class="cpub-section-title-lg">Notification Preferences</h2>
 
+    <div v-if="pending" style="padding: 32px; text-align: center; color: var(--text-faint);">
+      <i class="fa-solid fa-circle-notch fa-spin"></i> Loading preferences...
+    </div>
+
+    <template v-else>
     <div v-for="(val, key) in prefs" :key="key" style="margin-bottom: 12px">
       <label class="cpub-checkbox">
         <input type="checkbox" v-model="prefs[key as keyof typeof prefs]" />
@@ -64,5 +69,6 @@ async function handleSave(): Promise<void> {
     <button class="cpub-btn cpub-btn-primary cpub-btn-sm" style="margin-top: 16px" :disabled="saving" @click="handleSave">
       {{ saving ? 'Saving...' : 'Save Preferences' }}
     </button>
+    </template>
   </div>
 </template>

package/pages/tags/[slug].vue

@@ -13,7 +13,7 @@ const PAGE_SIZE = 20;
 const loadingMore = ref(false);
 const allLoaded = ref(false);
 
-const { data: results } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+const { data: results, pending } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
   query: computed(() => ({
     tag: tagSlug.value,
     status: 'published',
@@ -61,7 +61,8 @@ async function loadMore(): Promise<void> {
       </div>
     </div>
 
-    <div v-if="items.length" class="cpub-tag-grid">
+    <div v-if="pending" class="cpub-empty-state"><p><i class="fa-solid fa-circle-notch fa-spin"></i> Loading...</p></div>
+    <div v-else-if="items.length" class="cpub-tag-grid">
       <ContentCard
         v-for="item in items"
         :key="item.id"

package/pages/tags/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 useSeoMeta({ title: `Tags — ${useSiteName()}`, description: 'Browse content by tags.' });
 
-const { data: trending } = await useFetch<any>('/api/search/trending');
+const { data: trending, pending } = await useFetch<any>('/api/search/trending');
 
 // Extract unique tags from trending content
 const tags = computed(() => {
@@ -27,7 +27,8 @@ const tags = computed(() => {
     <h1 class="tags-title">Tags</h1>
     <p class="tags-subtitle">Browse content by topic.</p>
 
-    <div v-if="tags.length" class="tags-cloud">
+    <div v-if="pending" class="tags-empty"><p><i class="fa-solid fa-circle-notch fa-spin"></i> Loading tags...</p></div>
+    <div v-else-if="tags.length" class="tags-cloud">
       <NuxtLink
         v-for="tag in tags"
         :key="tag.name"

package/pages/videos/[id].vue

@@ -68,6 +68,15 @@ const authorInitial = computed(() => {
       </div>
       <p v-if="video.description" class="cpub-video-desc">{{ video.description }}</p>
 
+      <!-- Engagement -->
+      <EngagementBar
+        target-type="video"
+        :target-id="video.id"
+        :target-title="video.title"
+        :like-count="video.likeCount ?? 0"
+        :comment-count="video.commentCount ?? 0"
+      />
+
       <!-- Author -->
       <div v-if="video.author" class="cpub-video-author">
         <div class="cpub-video-author-av">
@@ -85,6 +94,11 @@ const authorInitial = computed(() => {
         </div>
       </div>
     </div>
+
+    <!-- Comments -->
+    <div class="cpub-video-comments">
+      <CommentSection target-type="video" :target-id="video.id" />
+    </div>
   </div>
   <div v-else class="cpub-empty-state" style="padding: 64px">
     <p class="cpub-empty-state-title">Video not found</p>
@@ -201,6 +215,10 @@ const authorInitial = computed(() => {
   color: var(--accent);
 }
 
+.cpub-video-comments {
+  margin-top: 20px;
+}
+
 .cpub-link {
   color: var(--accent);
   text-decoration: none;

package/server/api/admin/content/[id].patch.ts

@@ -9,7 +9,7 @@ import { z } from 'zod';
 export default defineEventHandler(async (event) => {
   requireAdmin(event);
 
-  const contentId = getRouterParam(event, 'id')!;
+  const { id: contentId } = parseParams(event, { id: 'uuid' });
   const body = await parseBody(event, z.object({
     isFeatured: z.boolean().optional(),
   }));

package/server/api/admin/federation/mirrors/[id]/backfill.post.ts

@@ -18,7 +18,7 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 404, statusMessage: 'Not Found' });
   }
 
-  const mirrorId = getRouterParam(event, 'id')!;
+  const { id: mirrorId } = parseParams(event, { id: 'uuid' });
   const db = useDB();
 
   const mirror = await getMirror(db, mirrorId);

package/server/api/admin/federation/refederate.post.ts

@@ -1,6 +1,7 @@
 import { contentItems, hubs, hubPosts } from '@commonpub/schema';
 import { federateContent, federateHubPost, federateHubActor } from '@commonpub/server';
 import { eq, isNull } from 'drizzle-orm';
+import { z } from 'zod';
 import { extractDomain } from '../../../utils/inbox';
 
 /**
@@ -25,9 +26,12 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 404, statusMessage: 'Not Found' });
   }
 
-  const body = await readBody(event);
-  const contentId = body?.contentId as string | undefined;
-  const hubsOnly = body?.hubsOnly === true;
+  const body = await parseBody(event, z.object({
+    contentId: z.string().uuid().optional(),
+    hubsOnly: z.boolean().optional(),
+  }));
+  const contentId = body.contentId;
+  const hubsOnly = body.hubsOnly === true;
 
   const db = useDB();
   const domain = extractDomain((runtimeConfig.public?.siteUrl as string) || `https://${config.instance.domain}`);

package/server/api/admin/federation/repair-types.post.ts

@@ -1,5 +1,4 @@
-import { eq, and, isNull } from 'drizzle-orm';
-import { federatedContent } from '@commonpub/schema';
+import { repairFederatedContentTypes } from '@commonpub/server';
 
 /**
  * POST /api/admin/federation/repair-types
@@ -11,47 +10,5 @@ export default defineEventHandler(async (event) => {
   requireAdmin(event);
   const db = useDB();
 
-  const rows = await db
-    .select({
-      id: federatedContent.id,
-      objectUri: federatedContent.objectUri,
-    })
-    .from(federatedContent)
-    .where(and(
-      isNull(federatedContent.cpubType),
-      isNull(federatedContent.deletedAt),
-    ))
-    .limit(500);
-
-  let updated = 0;
-  let errors = 0;
-
-  for (const row of rows) {
-    try {
-      const controller = new AbortController();
-      const timeout = setTimeout(() => controller.abort(), 15_000);
-      const response = await fetch(row.objectUri, {
-        headers: { Accept: 'application/activity+json, application/ld+json' },
-        signal: controller.signal,
-      });
-      clearTimeout(timeout);
-
-      if (!response.ok) { errors++; continue; }
-
-      const object = await response.json() as Record<string, unknown>;
-      const cpubType = typeof object['cpub:type'] === 'string' ? object['cpub:type'] : null;
-
-      if (cpubType) {
-        await db
-          .update(federatedContent)
-          .set({ cpubType, updatedAt: new Date() })
-          .where(eq(federatedContent.id, row.id));
-        updated++;
-      }
-    } catch {
-      errors++;
-    }
-  }
-
-  return { total: rows.length, updated, errors };
+  return repairFederatedContentTypes(db);
 });