@commonpub/layer 0.6.1 → 0.7.0

package/components/CommentSection.vue

@@ -10,7 +10,9 @@ interface Comment {
   id: string;
   content: string;
   createdAt: string;
+  parentId: string | null;
   author: CommentAuthor | null;
+  replies?: Comment[];
 }
 
 const props = defineProps<{
@@ -64,8 +66,23 @@ async function loadMoreComments(): Promise<void> {
   }
 }
 
+// Reply state
 const newComment = ref('');
 const submitting = ref(false);
+const replyingTo = ref<{ id: string; username: string } | null>(null);
+
+function startReply(comment: Comment): void {
+  replyingTo.value = {
+    id: comment.id,
+    username: comment.author?.username ?? 'someone',
+  };
+  newComment.value = `@${comment.author?.username ?? 'someone'} `;
+}
+
+function cancelReply(): void {
+  replyingTo.value = null;
+  newComment.value = '';
+}
 
 async function submitComment(): Promise<void> {
   if (!newComment.value.trim()) return;
@@ -87,10 +104,12 @@ async function submitComment(): Promise<void> {
           targetType: props.targetType,
           targetId: props.targetId,
           content: newComment.value,
+          parentId: replyingTo.value?.id || undefined,
         },
       });
     }
     newComment.value = '';
+    replyingTo.value = null;
     if (props.federatedContentId) {
       replySent.value = true;
       setTimeout(() => { replySent.value = false; }, 5000);
@@ -121,10 +140,14 @@ async function deleteComment(id: string): Promise<void> {
 
     <!-- New comment form -->
     <div v-if="user" class="cpub-comment-form">
+      <div v-if="replyingTo" class="cpub-replying-to">
+        Replying to @{{ replyingTo.username }}
+        <button class="cpub-cancel-reply" @click="cancelReply"><i class="fa-solid fa-xmark"></i></button>
+      </div>
       <textarea
         v-model="newComment"
         class="cpub-textarea"
-        :placeholder="isFederated ? 'Write a reply (will be sent to the original instance)...' : 'Write a comment...'"
+        :placeholder="replyingTo ? `Reply to @${replyingTo.username}...` : isFederated ? 'Write a reply (will be sent to the original instance)...' : 'Write a comment...'"
         rows="3"
         aria-label="Write a comment"
       ></textarea>
@@ -133,7 +156,7 @@ async function deleteComment(id: string): Promise<void> {
         :disabled="!newComment.trim() || submitting"
         @click="submitComment"
       >
-        {{ submitting ? 'Posting...' : isFederated ? 'Send Reply' : 'Post Comment' }}
+        {{ submitting ? 'Posting...' : replyingTo ? 'Reply' : isFederated ? 'Send Reply' : 'Post Comment' }}
       </button>
     </div>
     <p v-else class="cpub-comment-login">
@@ -145,33 +168,72 @@ async function deleteComment(id: string): Promise<void> {
       <i class="fa-solid fa-check-circle"></i> Reply sent to the original instance.
     </div>
 
-    <!-- Comments list -->
+    <!-- Comments list (threaded) -->
     <div class="cpub-comment-list">
-      <div v-for="comment in (comments || [])" :key="comment.id" class="cpub-comment">
-        <div class="cpub-comment-avatar">
-          <img v-if="comment.author?.avatarUrl" :src="comment.author.avatarUrl" :alt="comment.author?.displayName || comment.author?.username" class="cpub-comment-avatar-img" />
-          <span v-else>{{ (comment.author?.displayName || comment.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+      <template v-for="comment in (comments || [])" :key="comment.id">
+        <!-- Root comment -->
+        <div class="cpub-comment">
+          <div class="cpub-comment-avatar">
+            <img v-if="comment.author?.avatarUrl" :src="comment.author.avatarUrl" :alt="comment.author?.displayName || comment.author?.username" class="cpub-comment-avatar-img" />
+            <span v-else>{{ (comment.author?.displayName || comment.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+          </div>
+          <div class="cpub-comment-body">
+            <div class="cpub-comment-header">
+              <NuxtLink :to="`/u/${comment.author?.username}`" class="cpub-comment-author">
+                {{ comment.author?.displayName || comment.author?.username }}
+              </NuxtLink>
+              <time class="cpub-comment-time">
+                {{ new Date(comment.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
+              </time>
+            </div>
+            <p class="cpub-comment-text"><MentionText :text="comment.content" /></p>
+            <div class="cpub-comment-actions">
+              <button v-if="user && !isFederated" class="cpub-comment-action-btn" @click="startReply(comment)">
+                <i class="fa-solid fa-reply"></i> Reply
+              </button>
+              <button
+                v-if="user?.id === comment.author?.id"
+                class="cpub-comment-delete"
+                @click="deleteComment(comment.id)"
+                aria-label="Delete comment"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
         </div>
-        <div class="cpub-comment-body">
-          <div class="cpub-comment-header">
-            <NuxtLink :to="`/u/${comment.author?.username}`" class="cpub-comment-author">
-              {{ comment.author?.displayName || comment.author?.username }}
-            </NuxtLink>
-            <time class="cpub-comment-time">
-              {{ new Date(comment.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
-            </time>
+
+        <!-- Child replies (threaded) -->
+        <div v-if="comment.replies?.length" class="cpub-comment-thread">
+          <div v-for="child in comment.replies" :key="child.id" class="cpub-comment cpub-comment-nested">
+            <div class="cpub-comment-avatar">
+              <img v-if="child.author?.avatarUrl" :src="child.author.avatarUrl" :alt="child.author?.displayName || child.author?.username" class="cpub-comment-avatar-img" />
+              <span v-else>{{ (child.author?.displayName || child.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+            </div>
+            <div class="cpub-comment-body">
+              <div class="cpub-comment-header">
+                <NuxtLink :to="`/u/${child.author?.username}`" class="cpub-comment-author">
+                  {{ child.author?.displayName || child.author?.username }}
+                </NuxtLink>
+                <time class="cpub-comment-time">
+                  {{ new Date(child.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
+                </time>
+              </div>
+              <p class="cpub-comment-text"><MentionText :text="child.content" /></p>
+              <div class="cpub-comment-actions">
+                <button
+                  v-if="user?.id === child.author?.id"
+                  class="cpub-comment-delete"
+                  @click="deleteComment(child.id)"
+                  aria-label="Delete comment"
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
           </div>
-          <p class="cpub-comment-text"><MentionText :text="comment.content" /></p>
-          <button
-            v-if="user?.id === comment.author?.id"
-            class="cpub-comment-delete"
-            @click="deleteComment(comment.id)"
-            aria-label="Delete comment"
-          >
-            Delete
-          </button>
         </div>
-      </div>
+      </template>
       <p v-if="!comments?.length" class="cpub-comments-empty">{{ isFederated ? 'No replies received yet.' : 'No comments yet. Be the first!' }}</p>
       <div v-if="hasMore" class="cpub-comments-more">
         <button class="cpub-btn cpub-btn-sm" :disabled="loadingMore" @click="loadMoreComments">
@@ -219,6 +281,29 @@ async function deleteComment(id: string): Promise<void> {
   width: 100%;
 }
 
+.cpub-replying-to {
+  width: 100%;
+  font-size: 12px;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+}
+
+.cpub-cancel-reply {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  padding: 0 4px;
+  font-size: 12px;
+}
+.cpub-cancel-reply:hover { color: var(--text); }
+
 .cpub-comment-fed-notice {
   font-size: 12px;
   color: var(--text-dim);
@@ -250,6 +335,19 @@ async function deleteComment(id: string): Promise<void> {
   gap: 10px;
 }
 
+.cpub-comment-thread {
+  padding-left: 38px;
+  border-left: 2px solid var(--border);
+  margin-left: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.cpub-comment-nested {
+  padding-left: 0;
+}
+
 .cpub-comment-avatar {
   width: 28px;
   height: 28px;
@@ -309,13 +407,32 @@ async function deleteComment(id: string): Promise<void> {
   line-height: 1.6;
 }
 
+.cpub-comment-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.cpub-comment-action-btn {
+  font-size: 10px;
+  color: var(--text-faint);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.cpub-comment-action-btn:hover { color: var(--accent); }
+
 .cpub-comment-delete {
   font-size: 10px;
   color: var(--text-faint);
   background: none;
   border: none;
   cursor: pointer;
-  margin-top: 4px;
   padding: 0;
 }
 

package/components/hub/HubMembers.vue

@@ -1,25 +1,52 @@
 <script setup lang="ts">
 import type { HubMemberViewModel } from '../../types/hub';
 
+export interface RemoteMemberVM {
+  actorUri: string;
+  name: string;
+  instanceDomain: string;
+  avatarUrl: string | null;
+}
+
 defineProps<{
-  members: HubMemberViewModel[]
+  members: HubMemberViewModel[];
+  remoteMembers?: RemoteMemberVM[];
 }>();
 </script>
 
 <template>
-  <div v-if="members?.length" class="cpub-members-grid">
-    <MemberCard
-      v-for="member in members"
-      :key="member.username"
-      :username="member.username"
-      :display-name="member.name"
-      :role="(member.role as 'owner' | 'moderator' | 'member') || 'member'"
-      :joined-at="new Date(member.joinedAt)"
-    />
-  </div>
-  <div v-else class="cpub-empty-state">
-    <div class="cpub-empty-state-icon"><i class="fa-solid fa-users"></i></div>
-    <p class="cpub-empty-state-title">No members yet</p>
+  <div>
+    <div v-if="members?.length" class="cpub-members-grid">
+      <MemberCard
+        v-for="member in members"
+        :key="member.username"
+        :username="member.username"
+        :display-name="member.name"
+        :role="(member.role as 'owner' | 'moderator' | 'member') || 'member'"
+        :joined-at="new Date(member.joinedAt)"
+      />
+    </div>
+
+    <div v-if="remoteMembers?.length" class="cpub-remote-members-section">
+      <h4 class="cpub-remote-members-title"><i class="fa-solid fa-globe"></i> Federated Members</h4>
+      <div class="cpub-members-grid">
+        <div v-for="rm in remoteMembers" :key="rm.actorUri" class="cpub-remote-member-card">
+          <div class="cpub-remote-member-avatar">
+            <img v-if="rm.avatarUrl" :src="rm.avatarUrl" :alt="rm.name" class="cpub-remote-member-avatar-img" />
+            <span v-else>{{ rm.name.charAt(0).toUpperCase() }}</span>
+          </div>
+          <div class="cpub-remote-member-info">
+            <span class="cpub-remote-member-name">{{ rm.name }}</span>
+            <span class="cpub-remote-member-domain">{{ rm.instanceDomain }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!members?.length && !remoteMembers?.length" class="cpub-empty-state">
+      <div class="cpub-empty-state-icon"><i class="fa-solid fa-users"></i></div>
+      <p class="cpub-empty-state-title">No members yet</p>
+    </div>
   </div>
 </template>
 
@@ -30,6 +57,29 @@ defineProps<{
   gap: 12px;
 }
 
+.cpub-remote-members-section { margin-top: 24px; }
+.cpub-remote-members-title {
+  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 12px;
+  display: flex; align-items: center; gap: 6px;
+}
+.cpub-remote-members-title > i { color: var(--accent); }
+
+.cpub-remote-member-card {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 12px; background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+}
+.cpub-remote-member-avatar {
+  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
+  background: var(--accent-bg); display: flex; align-items: center; justify-content: center;
+  font-size: 13px; font-weight: 600; color: var(--accent); flex-shrink: 0;
+}
+.cpub-remote-member-avatar-img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-remote-member-info { display: flex; flex-direction: column; min-width: 0; }
+.cpub-remote-member-name { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cpub-remote-member-domain { font-size: 11px; color: var(--text-dim); }
+
 @media (max-width: 1024px) {
   .cpub-members-grid { grid-template-columns: repeat(2, 1fr); }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,15 +50,15 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
+    "@commonpub/auth": "0.5.0",
+    "@commonpub/config": "0.8.0",
     "@commonpub/docs": "0.6.0",
+    "@commonpub/explainer": "0.7.1",
     "@commonpub/editor": "0.5.0",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/auth": "0.5.0",
-    "@commonpub/schema": "0.8.18",
     "@commonpub/protocol": "0.9.7",
-    "@commonpub/config": "0.8.0",
-    "@commonpub/server": "2.26.0",
-    "@commonpub/explainer": "0.7.1",
+    "@commonpub/schema": "0.9.0",
+    "@commonpub/server": "2.27.0",
     "@commonpub/ui": "0.8.4"
   },
   "devDependencies": {

package/pages/federated-hubs/[id]/index.vue

@@ -202,9 +202,16 @@ async function handleDiscPost(): Promise<void> {
   }
 }
 
-// --- Instance mirror status (not user-level follow) ---
+// --- Instance mirror status ---
 const mirrorStatus = computed(() => hub.value?.followStatus ?? 'pending');
 
+// --- Per-user join state ---
+const { data: userFollowState, refresh: refreshFollowState } = useLazyFetch<{ joined: boolean; status: string | null }>(
+  () => `/api/federation/hub-follow-status?federatedHubId=${id}`,
+  { default: () => ({ joined: false, status: null }) },
+);
+const userJoined = computed(() => userFollowState.value?.joined ?? false);
+
 const remoteFollowRef = ref<{ show: () => void } | null>(null);
 const hubFollowing = ref(false);
 const hubFollowStatus = computed(() => hub.value?.followStatus ?? '');
@@ -219,8 +226,8 @@ async function handleJoinHub(): Promise<void> {
         method: 'POST',
         body: { federatedHubId: hub.value.id },
       });
-      toast.success(result.status === 'accepted' ? 'Now following this hub' : 'Follow request sent — it may take a moment to be accepted');
-      await refreshHub();
+      toast.success(result.status === 'joined' ? 'Now following this hub' : 'Follow request sent — it may take a moment to be accepted');
+      await Promise.all([refreshHub(), refreshFollowState()]);
     } catch (err: unknown) {
       const msg = err instanceof Error ? err.message : 'Failed to follow hub';
       toast.error(msg);
@@ -298,12 +305,12 @@ async function handlePostVote(postId: string): Promise<void> {
           <span v-if="mirrorStatus === 'accepted'" class="cpub-member-badge cpub-member-badge-mirrored">
             <i class="fa-solid fa-globe"></i> Mirrored
           </span>
-          <button v-if="hub?.actorUri && mirrorStatus !== 'accepted'" class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="hubFollowing || hubFollowStatus === 'pending'" @click="handleJoinHub">
-            <i class="fa-solid fa-user-plus"></i> {{ hubFollowing ? 'Following...' : hubFollowStatus === 'pending' ? 'Follow pending...' : 'Join from your instance' }}
-          </button>
-          <span v-else-if="hub?.actorUri && mirrorStatus === 'accepted'" class="cpub-member-badge cpub-member-badge-joined">
+          <span v-if="userJoined" class="cpub-member-badge cpub-member-badge-joined">
             <i class="fa-solid fa-check"></i> Joined
           </span>
+          <button v-else-if="hub?.actorUri" class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="hubFollowing || userFollowState?.status === 'pending'" @click="handleJoinHub">
+            <i class="fa-solid fa-user-plus"></i> {{ hubFollowing ? 'Following...' : userFollowState?.status === 'pending' ? 'Follow pending...' : 'Join Hub' }}
+          </button>
           <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm">
             <i class="fa-solid fa-arrow-up-right-from-square"></i> Visit original
           </a>

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

@@ -5,10 +5,16 @@ import type { HubViewModel, HubPostViewModel, HubMemberViewModel, HubTabDef } fr
 const route = useRoute();
 const slug = computed(() => route.params.slug as string);
 
+function remoteDomain(uri: string | undefined): string | null {
+  if (!uri) return null;
+  try { return new URL(uri).hostname; } catch { return 'fediverse'; }
+}
+
+
 // --- Data fetching (unchanged) ---
 const { data: hub, pending: hubPending, error: hubError, refresh: refreshHub } = useLazyFetch<Serialized<HubDetail>>(() => `/api/hubs/${slug.value}`);
 const { data: posts, refresh: refreshPosts } = useLazyFetch<Serialized<PaginatedResponse<HubPostItem>>>(() => `/api/hubs/${slug.value}/posts`, { default: () => ({ items: [], total: 0 }) });
-const { data: membersData } = useLazyFetch<{ items: Serialized<HubMemberItem>[]; total: number }>(() => `/api/hubs/${slug.value}/members`);
+const { data: membersData } = useLazyFetch<{ items: Serialized<HubMemberItem>[]; total: number; remoteMembers?: Array<{ followerActorUri: string; displayName: string | null; preferredUsername: string | null; avatarUrl: string | null; instanceDomain: string; joinedAt: string }> }>(() => `/api/hubs/${slug.value}/members`);
 const { data: gallery, refresh: refreshGallery } = useLazyFetch<PaginatedResponse<Serialized<ContentListItem>>>(() => `/api/hubs/${slug.value}/gallery`, { default: () => ({ items: [], total: 0 }) });
 
 const hubType = computed(() => hub.value?.hubType ?? 'community');
@@ -55,8 +61,8 @@ const postsVM = computed<HubPostViewModel[]>(() => {
     type: p.type,
     content: p.content || '',
     author: {
-      name: p.author?.displayName || p.author?.username || 'Unknown',
-      handle: null,
+      name: p.author?.displayName || p.author?.username || p.remoteActorName || 'Unknown',
+      handle: p.author ? null : remoteDomain(p.remoteActorUri ?? undefined),
       avatarUrl: p.author?.avatarUrl ?? null,
     },
     createdAt: p.createdAt,
@@ -89,6 +95,17 @@ const membersVM = computed<HubMemberViewModel[]>(() => {
   }));
 });
 
+const remoteMembersVM = computed(() => {
+  const raw = membersData.value?.remoteMembers;
+  if (!raw?.length) return [];
+  return raw.map(rm => ({
+    actorUri: rm.followerActorUri,
+    name: rm.displayName || rm.preferredUsername || 'Unknown',
+    instanceDomain: rm.instanceDomain,
+    avatarUrl: rm.avatarUrl,
+  }));
+});
+
 const moderators = computed(() => {
   return membersVM.value.filter((m) => m.role === 'owner' || m.role === 'moderator');
 });
@@ -333,7 +350,7 @@ async function onRefreshGallery(): Promise<void> {
     </HubDiscussions>
 
     <!-- Members tab -->
-    <HubMembers v-else-if="activeTab === 'members'" :members="membersVM" />
+    <HubMembers v-else-if="activeTab === 'members'" :members="membersVM" :remote-members="remoteMembersVM" />
 
     <!-- Overview tab -->
     <template v-else-if="activeTab === 'overview'">

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

@@ -122,6 +122,11 @@ async function saveEdit(): Promise<void> {
   }
 }
 
+function replyDisplayName(reply: { author?: { displayName?: string | null; username?: string } | null; remoteActorName?: string | null }): string {
+  if (reply.author) return reply.author.displayName || reply.author.username || 'U';
+  return reply.remoteActorName || 'Someone';
+}
+
 function formatDate(d: string | Date): string {
   return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
 }
@@ -171,9 +176,12 @@ 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" />
-            <span v-else>{{ (post.author?.displayName || post.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+            <span v-else>{{ (post.author?.displayName || post.author?.username || post.remoteActorName || 'U').charAt(0).toUpperCase() }}</span>
           </div>
-          <NuxtLink :to="`/u/${post.author?.username}`" class="cpub-post-author-name">{{ post.author?.displayName || post.author?.username }}</NuxtLink>
+          <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>
           <span class="cpub-post-sep">&middot;</span>
           <time class="cpub-post-time">{{ formatDate(post.createdAt) }}</time>
         </div>
@@ -229,15 +237,18 @@ 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" />
-            <span v-else>{{ (reply.author?.displayName || reply.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+            <span v-else>{{ (replyDisplayName(reply)).charAt(0).toUpperCase() }}</span>
           </div>
-          <NuxtLink :to="`/u/${reply.author?.username}`" class="cpub-reply-author-name">{{ reply.author?.displayName || reply.author?.username }}</NuxtLink>
+          <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>
           <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 && hub?.currentUserRole && !post.isLocked" class="cpub-reply-btn" @click="replyingTo = reply.id; replyContent = `@${reply.author?.username} `">
+          <button v-if="isAuthenticated && hub?.currentUserRole && !post.isLocked" class="cpub-reply-btn" @click="replyingTo = reply.id; replyContent = `@${reply.author?.username ?? reply.remoteActorName ?? ''} `">
             <i class="fa-solid fa-reply"></i> Reply
           </button>
         </div>
@@ -248,9 +259,12 @@ 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" />
-                <span v-else>{{ (child.author?.displayName || child.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+                <span v-else>{{ (replyDisplayName(child)).charAt(0).toUpperCase() }}</span>
               </div>
-              <NuxtLink :to="`/u/${child.author?.username}`" class="cpub-reply-author-name">{{ child.author?.displayName || child.author?.username }}</NuxtLink>
+              <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>
               <span class="cpub-post-sep">&middot;</span>
               <time class="cpub-post-time">{{ formatDate(child.createdAt) }}</time>
             </div>
@@ -403,6 +417,8 @@ useSeoMeta({
 
 .cpub-reply-author-name { font-weight: 500; color: var(--text-dim); text-decoration: none; }
 .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-reply-content { font-size: 13px; line-height: 1.6; color: var(--text); }
 

package/server/api/federation/hub-follow-status.get.ts

@@ -0,0 +1,37 @@
+import { userFederatedHubFollows } from '@commonpub/schema';
+import { eq, and } from 'drizzle-orm';
+import { z } from 'zod';
+
+const querySchema = z.object({
+  federatedHubId: z.string().uuid(),
+});
+
+export default defineEventHandler(async (event): Promise<{ joined: boolean; status: string | null }> => {
+  requireFeature('federation');
+  requireFeature('federateHubs');
+
+  const user = getOptionalUser(event);
+  if (!user) {
+    return { joined: false, status: null };
+  }
+
+  const db = useDB();
+  const { federatedHubId } = parseQueryParams(event, querySchema);
+
+  const [record] = await db
+    .select({ status: userFederatedHubFollows.status })
+    .from(userFederatedHubFollows)
+    .where(
+      and(
+        eq(userFederatedHubFollows.userId, user.id),
+        eq(userFederatedHubFollows.federatedHubId, federatedHubId),
+      ),
+    )
+    .limit(1);
+
+  if (!record) {
+    return { joined: false, status: null };
+  }
+
+  return { joined: record.status === 'joined', status: record.status };
+});

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

@@ -1,4 +1,6 @@
 import { sendHubFollow, getFederatedHub } from '@commonpub/server';
+import { userFederatedHubFollows } from '@commonpub/schema';
+import { eq, and } from 'drizzle-orm';
 import { z } from 'zod';
 
 const schema = z.object({
@@ -8,7 +10,7 @@ const schema = z.object({
 export default defineEventHandler(async (event): Promise<{ success: boolean; status: string }> => {
   requireFeature('federation');
   requireFeature('federateHubs');
-  requireAuth(event);
+  const user = requireAuth(event);
   const db = useDB();
   const config = useConfig();
   const { federatedHubId } = await parseBody(event, schema);
@@ -18,10 +20,24 @@ export default defineEventHandler(async (event): Promise<{ success: boolean; sta
     throw createError({ statusCode: 404, statusMessage: 'Federated hub not found' });
   }
 
-  if (hub.followStatus === 'accepted') {
-    return { success: true, status: 'accepted' };
+  // Create per-user follow record (upsert)
+  const userStatus = hub.followStatus === 'accepted' ? 'joined' : 'pending';
+  await db
+    .insert(userFederatedHubFollows)
+    .values({
+      userId: user.id,
+      federatedHubId,
+      status: userStatus,
+    })
+    .onConflictDoUpdate({
+      target: [userFederatedHubFollows.userId, userFederatedHubFollows.federatedHubId],
+      set: { status: userStatus, joinedAt: new Date() },
+    });
+
+  // Send instance-level Follow if not already accepted
+  if (hub.followStatus !== 'accepted') {
+    await sendHubFollow(db, hub.actorUri, config.instance.domain);
   }
 
-  await sendHubFollow(db, hub.actorUri, config.instance.domain);
-  return { success: true, status: 'pending' };
+  return { success: true, status: userStatus };
 });

package/server/api/hubs/[slug]/members.get.ts

@@ -1,5 +1,5 @@
-import { listMembers, getHubBySlug } from '@commonpub/server';
-import type { HubMemberItem } from '@commonpub/server';
+import { listMembers, listRemoteMembers, getHubBySlug } from '@commonpub/server';
+import type { HubMemberItem, RemoteHubMember } from '@commonpub/server';
 import { z } from 'zod';
 
 const membersQuerySchema = z.object({
@@ -7,8 +7,9 @@ const membersQuerySchema = z.object({
   offset: z.coerce.number().int().min(0).optional(),
 });
 
-export default defineEventHandler(async (event): Promise<{ items: HubMemberItem[]; total: number }> => {
+export default defineEventHandler(async (event): Promise<{ items: HubMemberItem[]; total: number; remoteMembers?: RemoteHubMember[] }> => {
   const db = useDB();
+  const config = useConfig();
   const { slug } = parseParams(event, { slug: 'string' });
   const query = parseQueryParams(event, membersQuerySchema);
   const community = await getHubBySlug(db, slug);
@@ -16,5 +17,13 @@ export default defineEventHandler(async (event): Promise<{ items: HubMemberItem[
     throw createError({ statusCode: 404, statusMessage: 'Community not found' });
   }
 
-  return listMembers(db, community.id, query);
+  const result = await listMembers(db, community.id, query);
+
+  // Include remote followers if hub federation is enabled
+  if (config.features.federation && config.features.federateHubs) {
+    const remoteMembers = await listRemoteMembers(db, community.id);
+    return { ...result, remoteMembers };
+  }
+
+  return result;
 });

package/server/middleware/content-redirect.ts

@@ -15,7 +15,7 @@ export default defineEventHandler(async (event) => {
   const path = getRequestURL(event).pathname;
 
   // Match /{type}/{slug} or /{type}/{slug}/edit — only for known content types
-  const match = path.match(/^\/([a-z]+)\/([a-z0-9][a-z0-9-]*)(\/(edit))?$/);
+  const match = path.match(/^\/([a-z]+)\/([a-z0-9][a-z0-9_-]*)(\/(edit))?$/);
   if (!match) return;
 
   const type = match[1]!;

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

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-/**
- * Legacy edit route — redirects to /u/{username}/{type}/{slug}/edit.
- * For "new" content, redirects using the current user's username.
- */
-definePageMeta({ layout: false, middleware: 'auth' });
-
-const route = useRoute();
-const contentType = computed(() => route.params.type as string);
-const slug = computed(() => route.params.slug as string);
-const { user } = useAuth();
-
-if (slug.value === 'new') {
-  // Creating new content — redirect to new URL using current user
-  if (user.value?.username) {
-    await navigateTo(
-      `/u/${user.value.username}/${contentType.value}/new/edit${route.query.hub ? `?hub=${route.query.hub}` : ''}`,
-      { redirectCode: 301, replace: true },
-    );
-  }
-} else {
-  // Editing existing content — look up author
-  const reqHeaders = import.meta.server ? useRequestHeaders(['cookie']) : {};
-  const { data } = await useFetch(() => `/api/content/${slug.value}`, { headers: reqHeaders });
-  if (data.value) {
-    const d = data.value as { author?: { username: string }; type: string; slug: string };
-    if (d.author?.username) {
-      await navigateTo(`/u/${d.author.username}/${d.type}/${d.slug}/edit`, { redirectCode: 301, replace: true });
-    }
-  }
-}
-</script>
-
-<template>
-  <div class="cpub-loading" aria-live="polite">Redirecting...</div>
-</template>

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

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-/**
- * Legacy content route — redirects to /u/{username}/{type}/{slug}.
- * Kept for backwards compatibility with existing links and bookmarks.
- */
-import type { Serialized, ContentDetail } from '@commonpub/server';
-
-const route = useRoute();
-const contentType = computed(() => route.params.type as string);
-const slug = computed(() => route.params.slug as string);
-
-const reqHeaders = import.meta.server ? useRequestHeaders(['cookie']) : {};
-const { data: content } = await useFetch<Serialized<ContentDetail>>(() => `/api/content/${slug.value}`, { headers: reqHeaders });
-
-// Redirect to new user-scoped URL if we can resolve the author
-if (content.value?.author?.username) {
-  await navigateTo(`/u/${content.value.author.username}/${content.value.type}/${content.value.slug}`, { redirectCode: 301, replace: true });
-}
-</script>
-
-<template>
-  <div v-if="!content" class="cpub-not-found">
-    <h1>Content not found</h1>
-    <p>The requested content could not be found.</p>
-  </div>
-</template>
-
-<style scoped>
-.cpub-not-found {
-  text-align: center;
-  padding: var(--space-16) 0;
-  color: var(--text-dim);
-}
-</style>