@commonpub/layer 0.7.1 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,16 +50,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.5.0",
     "@commonpub/config": "0.8.0",
-    "@commonpub/editor": "0.5.0",
-    "@commonpub/learning": "0.5.0",
     "@commonpub/docs": "0.6.1",
-    "@commonpub/schema": "0.9.1",
-    "@commonpub/ui": "0.8.4",
+    "@commonpub/editor": "0.5.0",
     "@commonpub/explainer": "0.7.2",
-    "@commonpub/server": "2.27.1",
-    "@commonpub/protocol": "0.9.7"
+    "@commonpub/auth": "0.5.0",
+    "@commonpub/learning": "0.5.0",
+    "@commonpub/protocol": "0.9.7",
+    "@commonpub/server": "2.27.2",
+    "@commonpub/schema": "0.9.2",
+    "@commonpub/ui": "0.8.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { FederatedHubListItem, FederatedHubPostItem } from '@commonpub/server';
+import type { FederatedHubListItem, FederatedHubPostItem, FederatedHubPostReplyItem } from '@commonpub/server';
 
 const route = useRoute();
 const id = route.params.id as string;
@@ -10,6 +10,9 @@ const toast = useToast();
 
 const { data: hub } = useLazyFetch<FederatedHubListItem>(`/api/federated-hubs/${id}`);
 const { data: post, refresh: refreshPost } = useLazyFetch<FederatedHubPostItem>(`/api/federated-hubs/${id}/posts/${postId}`);
+const { data: repliesData, refresh: refreshReplies } = useLazyFetch<{ items: FederatedHubPostReplyItem[]; total: number }>(`/api/federated-hubs/${id}/posts/${postId}/replies`, { default: () => ({ items: [], total: 0 }) });
+
+const replies = computed(() => repliesData.value?.items ?? []);
 
 function formatDate(d: string | Date | null): string {
   if (!d) return '';
@@ -68,6 +71,7 @@ async function handleLike(): Promise<void> {
 // Reply
 const replyContent = ref('');
 const replying = ref(false);
+const replyingTo = ref<string | null>(null);
 
 async function handleReply(): Promise<void> {
   if (!replyContent.value.trim()) return;
@@ -75,11 +79,12 @@ async function handleReply(): Promise<void> {
   try {
     await $fetch('/api/federation/hub-post-reply' as string, {
       method: 'POST',
-      body: { federatedHubPostId: postId, content: replyContent.value },
+      body: { federatedHubPostId: postId, content: replyContent.value, parentId: replyingTo.value || undefined },
     });
     replyContent.value = '';
-    toast.success('Reply sent via federation');
-    await refreshPost();
+    replyingTo.value = null;
+    toast.success('Reply posted');
+    await Promise.all([refreshReplies(), refreshPost()]);
   } catch {
     toast.error('Failed to send reply');
   } finally {
@@ -162,12 +167,15 @@ useHead({
 
     <!-- Reply form -->
     <div v-if="isAuthenticated" class="cpub-reply-form">
+      <div v-if="replyingTo" class="cpub-replying-to">
+        Replying to a comment <button class="cpub-cancel-reply" @click="replyingTo = null"><i class="fa-solid fa-xmark"></i></button>
+      </div>
       <div class="cpub-reply-row">
         <input
           v-model="replyContent"
           class="cpub-reply-input"
           type="text"
-          placeholder="Write a reply (sent via federation)..."
+          placeholder="Write a reply..."
           aria-label="Write a reply"
           @keydown.enter="handleReply"
         />
@@ -176,18 +184,53 @@ useHead({
         </button>
       </div>
       <p class="cpub-fed-reply-hint">
-        <i class="fa-solid fa-globe"></i> Your reply will be sent to {{ hub?.originDomain }} via ActivityPub
+        <i class="fa-solid fa-globe"></i> Your reply will also be sent to {{ hub?.originDomain }} via ActivityPub
       </p>
     </div>
 
-    <!-- Reply thread info -->
+    <!-- Replies -->
     <div class="cpub-replies-section">
-      <div class="cpub-empty-state" style="padding: 32px 16px">
-        <p class="cpub-empty-state-title"><i class="fa-solid fa-globe"></i> Federated thread</p>
+      <h3 v-if="replies.length" class="cpub-replies-title">{{ repliesData?.total ?? 0 }} Local Replies</h3>
+      <div v-for="reply in replies" :key="reply.id" class="cpub-reply">
+        <div class="cpub-reply-author">
+          <div class="cpub-reply-avatar">
+            <img v-if="reply.author?.avatarUrl" :src="reply.author.avatarUrl" :alt="reply.author?.displayName || reply.author?.username" class="cpub-reply-avatar-img" />
+            <span v-else>{{ (reply.author?.displayName || reply.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+          </div>
+          <NuxtLink v-if="reply.author" :to="`/u/${reply.author.username}`" class="cpub-reply-author-name">{{ reply.author.displayName || reply.author.username }}</NuxtLink>
+          <span class="cpub-post-sep">&middot;</span>
+          <time class="cpub-post-time">{{ formatDate(reply.createdAt) }}</time>
+        </div>
+        <div class="cpub-reply-content"><MentionText :text="reply.content" /></div>
+        <div class="cpub-reply-actions">
+          <button v-if="isAuthenticated" class="cpub-reply-btn" @click="replyingTo = reply.id; replyContent = `@${reply.author?.username ?? ''} `">
+            <i class="fa-solid fa-reply"></i> Reply
+          </button>
+        </div>
+
+        <!-- Nested replies -->
+        <div v-if="reply.replies?.length" class="cpub-nested-replies">
+          <div v-for="child in reply.replies" :key="child.id" class="cpub-reply cpub-reply-nested">
+            <div class="cpub-reply-author">
+              <div class="cpub-reply-avatar">
+                <img v-if="child.author?.avatarUrl" :src="child.author.avatarUrl" :alt="child.author?.displayName || child.author?.username" class="cpub-reply-avatar-img" />
+                <span v-else>{{ (child.author?.displayName || child.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+              </div>
+              <NuxtLink v-if="child.author" :to="`/u/${child.author.username}`" class="cpub-reply-author-name">{{ child.author.displayName || child.author.username }}</NuxtLink>
+              <span class="cpub-post-sep">&middot;</span>
+              <time class="cpub-post-time">{{ formatDate(child.createdAt) }}</time>
+            </div>
+            <div class="cpub-reply-content"><MentionText :text="child.content" /></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Federation thread info -->
+      <div class="cpub-fed-thread-info" style="padding: 16px">
         <p class="cpub-empty-state-desc">
-          Replies sent here are delivered to <strong>{{ hub?.originDomain }}</strong> via ActivityPub.
+          <i class="fa-solid fa-globe"></i>
           <a v-if="post.objectUri" :href="post.objectUri" target="_blank" rel="noopener noreferrer" class="cpub-inline-link">
-            View full thread on origin <i class="fa-solid fa-arrow-up-right-from-square"></i>
+            View full thread on {{ hub?.originDomain }} <i class="fa-solid fa-arrow-up-right-from-square"></i>
           </a>
         </p>
       </div>
@@ -278,6 +321,11 @@ useHead({
 
 /* Reply form */
 .cpub-reply-form { margin-bottom: 16px; }
+.cpub-replying-to {
+  font-size: 11px; color: var(--text-dim); margin-bottom: 6px;
+  display: flex; align-items: center; gap: 6px;
+}
+.cpub-cancel-reply { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 12px; }
 .cpub-reply-row { display: flex; gap: 8px; }
 .cpub-reply-input {
   flex: 1; padding: 8px 12px; background: var(--surface); border: var(--border-width-default) solid var(--border);
@@ -293,8 +341,38 @@ useHead({
 
 /* Replies section */
 .cpub-replies-section {}
-.cpub-empty-state { text-align: center; }
-.cpub-empty-state-title { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
+.cpub-replies-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
+
+.cpub-reply {
+  padding: 12px 16px; background: var(--surface); border: var(--border-width-default) solid var(--border);
+  margin-bottom: 8px;
+}
+.cpub-reply-nested { margin-left: 24px; border-color: var(--border2); }
+.cpub-nested-replies { margin-top: 8px; }
+
+.cpub-reply-author { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); margin-bottom: 6px; }
+
+.cpub-reply-avatar {
+  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
+  background: var(--surface2); border: 1px solid var(--border);
+  font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--text-dim);
+  overflow: hidden;
+}
+.cpub-reply-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+
+.cpub-reply-author-name { font-weight: 500; color: var(--text-dim); text-decoration: none; }
+.cpub-reply-author-name:hover { color: var(--accent); }
+
+.cpub-reply-content { font-size: 13px; line-height: 1.6; color: var(--text); }
+
+.cpub-reply-actions { margin-top: 6px; }
+.cpub-reply-btn {
+  background: none; border: none; cursor: pointer; font-size: 11px;
+  color: var(--text-faint); padding: 2px 0;
+}
+.cpub-reply-btn:hover { color: var(--accent); }
+
+.cpub-fed-thread-info { text-align: center; margin-top: 8px; }
 .cpub-empty-state-desc { font-size: 12px; color: var(--text-faint); line-height: 1.5; }
 .cpub-inline-link { color: var(--accent); text-decoration: none; white-space: nowrap; }
 .cpub-inline-link:hover { text-decoration: underline; }

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

@@ -63,7 +63,7 @@ const postsVM = computed<HubPostViewModel[]>(() => {
     author: {
       name: p.author?.displayName || p.author?.username || p.remoteActorName || 'Unknown',
       handle: p.author ? null : remoteDomain(p.remoteActorUri ?? undefined),
-      avatarUrl: p.author?.avatarUrl ?? null,
+      avatarUrl: p.author?.avatarUrl ?? p.remoteActorAvatarUrl ?? null,
     },
     createdAt: p.createdAt,
     likeCount: p.likeCount ?? 0,

package/pages/hubs/[slug]/posts/[postId].vue

@@ -127,6 +127,11 @@ function replyDisplayName(reply: { author?: { displayName?: string | null; usern
   return reply.remoteActorName || 'Someone';
 }
 
+function extractDomain(uri: string | null | undefined): string {
+  if (!uri) return '';
+  try { return new URL(uri).hostname; } catch { return ''; }
+}
+
 function formatDate(d: string | Date): string {
   return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
 }
@@ -176,11 +181,13 @@ useSeoMeta({
         <div class="cpub-post-author">
           <div class="cpub-post-avatar">
             <img v-if="post.author?.avatarUrl" :src="post.author.avatarUrl" :alt="post.author?.displayName || post.author?.username" class="cpub-post-avatar-img" />
+            <img v-else-if="post.remoteActorAvatarUrl" :src="post.remoteActorAvatarUrl" :alt="post.remoteActorName || 'Remote user'" class="cpub-post-avatar-img" />
             <span v-else>{{ (post.author?.displayName || post.author?.username || post.remoteActorName || 'U').charAt(0).toUpperCase() }}</span>
           </div>
           <NuxtLink v-if="post.author" :to="`/u/${post.author.username}`" class="cpub-post-author-name">{{ post.author.displayName || post.author.username }}</NuxtLink>
           <span v-else class="cpub-post-author-name cpub-reply-remote">
             <i class="fa-solid fa-globe" title="Federated post"></i> {{ post.remoteActorName || 'Someone' }}
+            <span v-if="extractDomain(post.remoteActorUri)" class="cpub-remote-domain">@{{ extractDomain(post.remoteActorUri) }}</span>
           </span>
           <span class="cpub-post-sep">&middot;</span>
           <time class="cpub-post-time">{{ formatDate(post.createdAt) }}</time>
@@ -237,11 +244,13 @@ useSeoMeta({
         <div class="cpub-reply-author">
           <div class="cpub-reply-avatar">
             <img v-if="reply.author?.avatarUrl" :src="reply.author.avatarUrl" :alt="reply.author?.displayName || reply.author?.username" class="cpub-reply-avatar-img" />
+            <img v-else-if="reply.remoteActorAvatarUrl" :src="reply.remoteActorAvatarUrl" :alt="reply.remoteActorName || 'Remote user'" class="cpub-reply-avatar-img" />
             <span v-else>{{ (replyDisplayName(reply)).charAt(0).toUpperCase() }}</span>
           </div>
           <NuxtLink v-if="reply.author" :to="`/u/${reply.author.username}`" class="cpub-reply-author-name">{{ reply.author.displayName || reply.author.username }}</NuxtLink>
           <span v-else class="cpub-reply-author-name cpub-reply-remote">
             <i class="fa-solid fa-globe" title="Federated reply"></i> {{ reply.remoteActorName || 'Someone' }}
+            <span v-if="extractDomain(reply.remoteActorUri)" class="cpub-remote-domain">@{{ extractDomain(reply.remoteActorUri) }}</span>
           </span>
           <span class="cpub-post-sep">&middot;</span>
           <time class="cpub-post-time">{{ formatDate(reply.createdAt) }}</time>
@@ -259,11 +268,13 @@ useSeoMeta({
             <div class="cpub-reply-author">
               <div class="cpub-reply-avatar">
                 <img v-if="child.author?.avatarUrl" :src="child.author.avatarUrl" :alt="child.author?.displayName || child.author?.username" class="cpub-reply-avatar-img" />
+                <img v-else-if="child.remoteActorAvatarUrl" :src="child.remoteActorAvatarUrl" :alt="child.remoteActorName || 'Remote user'" class="cpub-reply-avatar-img" />
                 <span v-else>{{ (replyDisplayName(child)).charAt(0).toUpperCase() }}</span>
               </div>
               <NuxtLink v-if="child.author" :to="`/u/${child.author.username}`" class="cpub-reply-author-name">{{ child.author.displayName || child.author.username }}</NuxtLink>
               <span v-else class="cpub-reply-author-name cpub-reply-remote">
                 <i class="fa-solid fa-globe" title="Federated reply"></i> {{ child.remoteActorName || 'Someone' }}
+                <span v-if="extractDomain(child.remoteActorUri)" class="cpub-remote-domain">@{{ extractDomain(child.remoteActorUri) }}</span>
               </span>
               <span class="cpub-post-sep">&middot;</span>
               <time class="cpub-post-time">{{ formatDate(child.createdAt) }}</time>
@@ -419,6 +430,7 @@ useSeoMeta({
 .cpub-reply-author-name:hover { color: var(--accent); }
 .cpub-reply-remote { display: inline-flex; align-items: center; gap: 4px; }
 .cpub-reply-remote > i { font-size: 10px; color: var(--accent); }
+.cpub-remote-domain { font-size: 10px; color: var(--text-faint); font-weight: 400; }
 
 .cpub-reply-content { font-size: 13px; line-height: 1.6; color: var(--text); }
 

package/server/api/federated-hubs/[id]/posts/[postId]/replies.get.ts

@@ -0,0 +1,13 @@
+import { listFederatedHubPostReplies } from '@commonpub/server';
+
+export default defineEventHandler(async (event) => {
+  requireFeature('federation');
+  const postId = getRouterParam(event, 'postId')!;
+  const query = getQuery(event);
+  const db = useDB();
+
+  return listFederatedHubPostReplies(db, postId, {
+    limit: query.limit ? Number(query.limit) : undefined,
+    offset: query.offset ? Number(query.offset) : undefined,
+  });
+});

package/server/api/federation/hub-post-reply.post.ts

@@ -1,17 +1,19 @@
-import { sendPostToRemoteHub, getFederatedHubPost, getFederatedHub } from '@commonpub/server';
+import { sendPostToRemoteHub, getFederatedHubPost, getFederatedHub, createFederatedHubPostReply } from '@commonpub/server';
+import type { FederatedHubPostReplyItem } from '@commonpub/server';
 import { z } from 'zod';
 
 const replySchema = z.object({
   federatedHubPostId: z.string().uuid(),
   content: z.string().min(1).max(10000),
+  parentId: z.string().uuid().optional(),
 });
 
-export default defineEventHandler(async (event): Promise<{ success: boolean }> => {
+export default defineEventHandler(async (event): Promise<FederatedHubPostReplyItem> => {
   requireFeature('federation');
   const user = requireAuth(event);
   const db = useDB();
   const config = useConfig();
-  const { federatedHubPostId, content } = await parseBody(event, replySchema);
+  const { federatedHubPostId, content, parentId } = await parseBody(event, replySchema);
 
   const post = await getFederatedHubPost(db, federatedHubPostId);
   if (!post) {
@@ -23,7 +25,15 @@ export default defineEventHandler(async (event): Promise<{ success: boolean }> =
     throw createError({ statusCode: 404, statusMessage: 'Hub not found' });
   }
 
-  const success = await sendPostToRemoteHub(
+  // Store locally
+  const reply = await createFederatedHubPostReply(db, user.id, {
+    federatedHubPostId,
+    content,
+    parentId,
+  });
+
+  // Send via AP (fire-and-forget — don't block on remote delivery)
+  sendPostToRemoteHub(
     db,
     user.id,
     user.username,
@@ -32,11 +42,7 @@ export default defineEventHandler(async (event): Promise<{ success: boolean }> =
     config.instance.domain,
     'text',
     post.objectUri,
-  );
-
-  if (!success) {
-    throw createError({ statusCode: 502, statusMessage: 'Could not reach remote hub' });
-  }
+  ).catch(() => { /* best-effort federation delivery */ });
 
-  return { success };
+  return reply;
 });