@commonpub/layer 0.3.17 → 0.3.19

package/pages/explore.vue

@@ -13,11 +13,14 @@ const activeTab = ref<'content' | 'hubs' | 'learn' | 'people'>('content');
 const contentType = ref('');
 const sort = ref('recent');
 
+const CONTENT_PAGE_SIZE = 20;
+const TAB_PAGE_SIZE = 12;
+
 const contentQuery = computed(() => ({
   status: 'published',
   type: contentType.value || undefined,
   sort: sort.value,
-  limit: 20,
+  limit: CONTENT_PAGE_SIZE,
 }));
 
 const { data: content, pending: contentPending, error: contentError, refresh: refreshContent } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
@@ -25,26 +28,123 @@ const { data: content, pending: contentPending, error: contentError, refresh: re
   watch: [contentQuery],
 });
 
-const { data: hubsData } = await useFetch('/api/hubs', {
-  query: { limit: 12 },
+// Reset content pagination when filters change
+const contentAllLoaded = ref(false);
+const contentLoadingMore = ref(false);
+watch([contentType, sort], () => { contentAllLoaded.value = false; });
+
+async function loadMoreContent(): Promise<void> {
+  if (!content.value?.items) return;
+  contentLoadingMore.value = true;
+  try {
+    const more = await $fetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+      query: { ...contentQuery.value, offset: content.value.items.length },
+    });
+    if (more?.items?.length) {
+      content.value.items.push(...more.items);
+    }
+    if (!more?.items?.length || more.items.length < CONTENT_PAGE_SIZE) {
+      contentAllLoaded.value = true;
+    }
+  } catch {
+    contentAllLoaded.value = true;
+  } finally {
+    contentLoadingMore.value = false;
+  }
+}
+
+interface HubItem { id: string; slug: string; name: string; description: string | null; hubType: string; memberCount: number }
+const { data: hubsData } = await useFetch<{ items: HubItem[]; total: number }>('/api/hubs', {
+  query: { limit: TAB_PAGE_SIZE },
   lazy: true,
 });
 
-const { data: pathsData } = await useFetch('/api/learn', {
-  query: { status: 'published', limit: 12 },
+const hubsAllLoaded = ref(false);
+const hubsLoadingMore = ref(false);
+
+async function loadMoreHubs(): Promise<void> {
+  if (!hubsData.value?.items) return;
+  hubsLoadingMore.value = true;
+  try {
+    const more = await $fetch<{ items: HubItem[]; total: number }>('/api/hubs', {
+      query: { limit: TAB_PAGE_SIZE, offset: hubsData.value.items.length },
+    });
+    if (more?.items?.length) {
+      hubsData.value.items.push(...more.items);
+    }
+    if (!more?.items?.length || more.items.length < TAB_PAGE_SIZE) {
+      hubsAllLoaded.value = true;
+    }
+  } catch {
+    hubsAllLoaded.value = true;
+  } finally {
+    hubsLoadingMore.value = false;
+  }
+}
+
+interface PathItem { id: string; slug: string; title: string; description: string | null; moduleCount: number; enrollmentCount: number }
+const { data: pathsData } = await useFetch<{ items: PathItem[]; total: number }>('/api/learn', {
+  query: { status: 'published', limit: TAB_PAGE_SIZE },
   lazy: true,
 });
 
+const pathsAllLoaded = ref(false);
+const pathsLoadingMore = ref(false);
+
+async function loadMorePaths(): Promise<void> {
+  if (!pathsData.value?.items) return;
+  pathsLoadingMore.value = true;
+  try {
+    const more = await $fetch<{ items: PathItem[]; total: number }>('/api/learn', {
+      query: { status: 'published', limit: TAB_PAGE_SIZE, offset: pathsData.value.items.length },
+    });
+    if (more?.items?.length) {
+      pathsData.value.items.push(...more.items);
+    }
+    if (!more?.items?.length || more.items.length < TAB_PAGE_SIZE) {
+      pathsAllLoaded.value = true;
+    }
+  } catch {
+    pathsAllLoaded.value = true;
+  } finally {
+    pathsLoadingMore.value = false;
+  }
+}
+
 const { data: statsData } = await useFetch('/api/stats', {
   lazy: true,
 });
 
-const { data: peopleData } = await useFetch('/api/users', {
-  query: { limit: 20 },
+interface PersonItem { id: string; username: string; displayName: string | null; headline: string | null; avatarUrl: string | null; followerCount: number }
+const { data: peopleData } = await useFetch<{ items: PersonItem[]; total: number }>('/api/users', {
+  query: { limit: TAB_PAGE_SIZE },
   lazy: true,
-  default: () => ({ items: [] }),
+  default: () => ({ items: [], total: 0 }),
 });
 
+const peopleAllLoaded = ref(false);
+const peopleLoadingMore = ref(false);
+
+async function loadMorePeople(): Promise<void> {
+  if (!peopleData.value?.items) return;
+  peopleLoadingMore.value = true;
+  try {
+    const more = await $fetch<{ items: PersonItem[]; total: number }>('/api/users', {
+      query: { limit: TAB_PAGE_SIZE, offset: peopleData.value.items.length },
+    });
+    if (more?.items?.length) {
+      peopleData.value.items.push(...more.items);
+    }
+    if (!more?.items?.length || more.items.length < TAB_PAGE_SIZE) {
+      peopleAllLoaded.value = true;
+    }
+  } catch {
+    peopleAllLoaded.value = true;
+  } finally {
+    peopleLoadingMore.value = false;
+  }
+}
+
 const contentTypes = computed(() => [
   { value: '', label: 'All' },
   ...enabledTypeMeta.value.map(m => ({ value: m.type, label: m.plural })),
@@ -125,6 +225,11 @@ const sortOptions = [
       <div v-else class="cpub-empty-state">
         <p class="cpub-empty-state-title">No content found</p>
       </div>
+      <div v-if="!contentAllLoaded && (content?.items?.length ?? 0) >= CONTENT_PAGE_SIZE" class="cpub-explore-more">
+        <button class="cpub-btn" @click="loadMoreContent" :disabled="contentLoadingMore">
+          {{ contentLoadingMore ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
     </div>
 
     <!-- Hubs tab -->
@@ -152,6 +257,11 @@ const sortOptions = [
       <div v-else class="cpub-empty-state">
         <p class="cpub-empty-state-title">No hubs yet</p>
       </div>
+      <div v-if="!hubsAllLoaded && (hubsData?.items?.length ?? 0) >= TAB_PAGE_SIZE" class="cpub-explore-more">
+        <button class="cpub-btn" @click="loadMoreHubs" :disabled="hubsLoadingMore">
+          {{ hubsLoadingMore ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
     </div>
 
     <!-- Learn tab -->
@@ -177,6 +287,11 @@ const sortOptions = [
       <div v-else class="cpub-empty-state">
         <p class="cpub-empty-state-title">No learning paths yet</p>
       </div>
+      <div v-if="!pathsAllLoaded && (pathsData?.items?.length ?? 0) >= TAB_PAGE_SIZE" class="cpub-explore-more">
+        <button class="cpub-btn" @click="loadMorePaths" :disabled="pathsLoadingMore">
+          {{ pathsLoadingMore ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
     </div>
 
     <!-- People tab -->
@@ -188,7 +303,7 @@ const sortOptions = [
           :to="`/u/${person.username}`"
           class="cpub-explore-hub-card"
         >
-          <div class="cpub-explore-hub-icon" style="border-radius: 50%">
+          <div class="cpub-explore-hub-icon">
             <img v-if="person.avatarUrl" :src="person.avatarUrl" :alt="person.displayName || person.username" class="cpub-explore-person-avatar-img" />
             <span v-else style="font-weight: 700; font-family: var(--font-mono);">{{ (person.displayName || person.username).charAt(0).toUpperCase() }}</span>
           </div>
@@ -204,6 +319,11 @@ const sortOptions = [
       <div v-else class="cpub-empty-state">
         <p class="cpub-empty-state-title">No makers yet</p>
       </div>
+      <div v-if="!peopleAllLoaded && (peopleData?.items?.length ?? 0) >= TAB_PAGE_SIZE" class="cpub-explore-more">
+        <button class="cpub-btn" @click="loadMorePeople" :disabled="peopleLoadingMore">
+          {{ peopleLoadingMore ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -414,6 +534,11 @@ const sortOptions = [
 /* cpub-tag → global components.css */
 .cpub-tag-xs { font-size: 9px; }
 
+.cpub-explore-more {
+  text-align: center;
+  padding: 24px 0;
+}
+
 @media (max-width: 768px) {
   .cpub-explore-grid { grid-template-columns: 1fr; }
   .cpub-explore-hub-grid { grid-template-columns: 1fr; }

package/pages/messages/[conversationId].vue

@@ -20,6 +20,7 @@ interface MessageItem {
   senderAvatarUrl?: string | null;
   body: string;
   createdAt: string;
+  readAt?: string | null;
 }
 
 const { data: convInfo } = useLazyFetch<{ id: string; participants: ConvParticipant[] }>(`/api/messages/${conversationId}/info`, {
@@ -128,8 +129,6 @@ async function handleSend(text: string): Promise<void> {
 }
 
 @media (max-width: 768px) {
-  .msg-page { padding: 12px; }
-  .msg-scroll { height: calc(100vh - 160px); }
-  .msg-compose { padding: 8px; }
+  .cpub-message-view { height: calc(100vh - 100px); }
 }
 </style>

package/pages/messages/index.vue

@@ -14,26 +14,48 @@ interface ConversationItem {
   lastMessage: string | null;
   lastMessageAt: string;
   createdAt: string;
-  unread?: boolean;
+  unreadCount?: number;
 }
 
+const { user } = useAuth();
 const { data: conversations, refresh } = await useFetch<ConversationItem[]>('/api/messages', {
   default: () => [] as ConversationItem[],
 });
 
+/** Filter out the current user from participants for display */
+function otherParticipants(conv: ConversationItem): ParticipantRef[] {
+  const others = conv.participants.filter(p => p.username !== user.value?.username);
+  return others.length > 0 ? others : conv.participants;
+}
+
 const showNewDialog = ref(false);
-const newRecipient = ref('');
+const newRecipientInput = ref('');
+const newRecipients = ref<string[]>([]);
 const newMessage = ref('');
 
 const msgError = ref('');
 
+function addRecipient(): void {
+  const val = newRecipientInput.value.trim();
+  if (!val) return;
+  if (newRecipients.value.includes(val)) return;
+  newRecipients.value.push(val);
+  newRecipientInput.value = '';
+}
+
+function removeRecipient(idx: number): void {
+  newRecipients.value.splice(idx, 1);
+}
+
 async function startConversation(): Promise<void> {
-  if (!newRecipient.value.trim()) return;
+  // Add any pending input as a recipient
+  if (newRecipientInput.value.trim()) addRecipient();
+  if (!newRecipients.value.length) return;
   msgError.value = '';
   try {
     const conv = await $fetch<{ id: string }>('/api/messages', {
       method: 'POST',
-      body: { participants: [newRecipient.value.trim()] },
+      body: { participants: newRecipients.value },
     });
     if (newMessage.value.trim()) {
       await $fetch(`/api/messages/${conv.id}` as string, {
@@ -42,7 +64,8 @@ async function startConversation(): Promise<void> {
       });
     }
     showNewDialog.value = false;
-    newRecipient.value = '';
+    newRecipients.value = [];
+    newRecipientInput.value = '';
     newMessage.value = '';
     await navigateTo(`/messages/${conv.id}`);
   } catch (err: unknown) {
@@ -62,7 +85,7 @@ async function startConversation(): Promise<void> {
     </div>
 
     <!-- New conversation dialog -->
-    <div v-if="showNewDialog" class="cpub-new-msg-overlay" @click.self="showNewDialog = false">
+    <div v-if="showNewDialog" class="cpub-new-msg-overlay" @click.self="showNewDialog = false" @keydown.escape="showNewDialog = false">
       <div class="cpub-new-msg-dialog" role="dialog" aria-label="New message">
         <div class="cpub-new-msg-header">
           <h2 class="cpub-new-msg-title">New Conversation</h2>
@@ -71,9 +94,24 @@ async function startConversation(): Promise<void> {
           </button>
         </div>
         <div class="cpub-new-msg-body">
+          <div v-if="msgError" class="cpub-new-msg-error" role="alert">{{ msgError }}</div>
           <div class="cpub-new-msg-field">
-            <label class="cpub-new-msg-label">Recipient username</label>
-            <input v-model="newRecipient" type="text" class="cpub-new-msg-input" placeholder="username or @user@remote-instance.com" />
+            <label class="cpub-new-msg-label">Recipients</label>
+            <div v-if="newRecipients.length" class="cpub-new-msg-chips">
+              <span v-for="(r, idx) in newRecipients" :key="idx" class="cpub-new-msg-chip">
+                {{ r }}
+                <button class="cpub-new-msg-chip-remove" @click="removeRecipient(idx)" :aria-label="`Remove ${r}`">&times;</button>
+              </span>
+            </div>
+            <input
+              v-model="newRecipientInput"
+              type="text"
+              class="cpub-new-msg-input"
+              placeholder="username or @user@remote-instance.com"
+              @keydown.enter.prevent="addRecipient"
+              @keydown.,.prevent="addRecipient"
+            />
+            <p class="cpub-new-msg-hint">Press Enter to add multiple recipients</p>
           </div>
           <div class="cpub-new-msg-field">
             <label class="cpub-new-msg-label">Message (optional)</label>
@@ -84,7 +122,7 @@ async function startConversation(): Promise<void> {
           <button class="cpub-btn cpub-btn-sm" @click="showNewDialog = false">Cancel</button>
           <button
             class="cpub-btn cpub-btn-sm cpub-btn-primary"
-            :disabled="!newRecipient.trim()"
+            :disabled="!newRecipients.length && !newRecipientInput.trim()"
             @click="startConversation"
           >
             Start Conversation
@@ -99,19 +137,32 @@ async function startConversation(): Promise<void> {
         :key="conv.id"
         :to="`/messages/${conv.id}`"
         class="cpub-conversation-item"
-        :class="{ unread: conv.unread }"
+        :class="{ 'cpub-conv-unread': (conv.unreadCount ?? 0) > 0 }"
+        :aria-label="`Conversation with ${otherParticipants(conv).map(p => p.displayName || p.username).join(', ')}${(conv.unreadCount ?? 0) > 0 ? `, ${conv.unreadCount} unread` : ''}`"
       >
-        <div class="cpub-conv-avatar">
-          <img v-if="conv.participants?.[0]?.avatarUrl" :src="conv.participants[0].avatarUrl" :alt="conv.participants[0].displayName || conv.participants[0].username" class="cpub-conv-avatar-img" />
-          <span v-else>{{ (conv.participants?.[0]?.displayName || conv.participants?.[0]?.username || '?').charAt(0).toUpperCase() }}</span>
+        <div v-if="otherParticipants(conv).length <= 1" class="cpub-conv-avatar">
+          <img v-if="otherParticipants(conv)[0]?.avatarUrl" :src="otherParticipants(conv)[0].avatarUrl!" :alt="otherParticipants(conv)[0].displayName ?? otherParticipants(conv)[0].username ?? ''" class="cpub-conv-avatar-img" />
+          <span v-else>{{ (otherParticipants(conv)[0]?.displayName || otherParticipants(conv)[0]?.username || '?').charAt(0).toUpperCase() }}</span>
+        </div>
+        <div v-else class="cpub-conv-avatar-group">
+          <div v-for="(p, idx) in otherParticipants(conv).slice(0, 4)" :key="idx" class="cpub-conv-avatar-mini">
+            <img v-if="p.avatarUrl" :src="p.avatarUrl" :alt="p.displayName || p.username" class="cpub-conv-avatar-img" />
+            <span v-else>{{ (p.displayName || p.username || '?').charAt(0).toUpperCase() }}</span>
+          </div>
         </div>
         <div class="cpub-conv-info">
-          <div class="cpub-conv-name">{{ conv.participants?.map(p => p.displayName || p.username).join(', ') ?? 'Unknown' }}</div>
+          <div class="cpub-conv-name">
+            {{ otherParticipants(conv).map(p => p.displayName || p.username).join(', ') }}
+            <span v-if="otherParticipants(conv).length > 2" class="cpub-conv-group-count">({{ otherParticipants(conv).length }})</span>
+          </div>
           <div class="cpub-conv-preview">{{ conv.lastMessage ?? 'No messages yet' }}</div>
         </div>
-        <time class="cpub-conv-time">
-          {{ new Date(conv.lastMessageAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
-        </time>
+        <div class="cpub-conv-meta">
+          <time class="cpub-conv-time">
+            {{ new Date(conv.lastMessageAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
+          </time>
+          <span v-if="(conv.unreadCount ?? 0) > 0" class="cpub-conv-badge" :aria-label="`${conv.unreadCount} unread messages`">{{ conv.unreadCount }}</span>
+        </div>
       </NuxtLink>
 
       <div v-if="!conversations.length" class="cpub-empty-state">
@@ -156,14 +207,13 @@ async function startConversation(): Promise<void> {
   background: var(--surface2);
 }
 
-.cpub-conversation-item.unread {
+.cpub-conversation-item.cpub-conv-unread {
   background: var(--accent-bg);
 }
 
 .cpub-conv-avatar {
   width: 36px;
   height: 36px;
-  border-radius: 50%;
   background: var(--surface3);
   border: var(--border-width-default) solid var(--border);
   display: flex;
@@ -177,7 +227,41 @@ async function startConversation(): Promise<void> {
   overflow: hidden;
 }
 
-.cpub-conv-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.cpub-conv-avatar-img { width: 100%; height: 100%; object-fit: cover; }
+
+/* Group avatar stack */
+.cpub-conv-avatar-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  width: 36px;
+  height: 36px;
+  gap: 1px;
+  flex-shrink: 0;
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+}
+
+.cpub-conv-avatar-mini {
+  background: var(--surface3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 8px;
+  font-weight: 600;
+  color: var(--text-dim);
+  overflow: hidden;
+}
+
+.cpub-conv-avatar-mini .cpub-conv-avatar-img { width: 100%; height: 100%; object-fit: cover; }
+
+.cpub-conv-group-count {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  font-weight: 400;
+}
 
 .cpub-conv-info {
   flex: 1;
@@ -199,11 +283,33 @@ async function startConversation(): Promise<void> {
   white-space: nowrap;
 }
 
+.cpub-conv-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
 .cpub-conv-time {
   font-size: 10px;
   color: var(--text-faint);
   font-family: var(--font-mono);
-  flex-shrink: 0;
+}
+
+.cpub-conv-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  background: var(--accent);
+  color: var(--color-text-inverse);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: var(--radius);
 }
 
 /* New message dialog */
@@ -288,6 +394,55 @@ async function startConversation(): Promise<void> {
   border-color: var(--accent);
 }
 
+.cpub-new-msg-error {
+  padding: 8px 10px;
+  background: var(--red-bg);
+  color: var(--red);
+  border: var(--border-width-default) solid var(--red);
+  font-size: 12px;
+  border-radius: var(--radius);
+}
+
+.cpub-new-msg-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.cpub-new-msg-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background: var(--accent-bg);
+  border: var(--border-width-default) solid var(--accent-border, var(--border));
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.cpub-new-msg-chip-remove {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 2px;
+  line-height: 1;
+}
+
+.cpub-new-msg-chip-remove:hover {
+  color: var(--red);
+}
+
+.cpub-new-msg-hint {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  margin-top: 2px;
+}
+
 .cpub-new-msg-footer {
   display: flex;
   justify-content: flex-end;

package/pages/mirror/[id].vue

@@ -162,7 +162,7 @@ useSeoMeta({
 .cpub-mirror-title { font-size: 2rem; font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
 .cpub-mirror-desc { font-size: 1.0625rem; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }
 .cpub-mirror-author { font-size: 0.875rem; color: var(--text-dim); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; }
-.cpub-mirror-author-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: var(--border-width-default) solid var(--border); flex-shrink: 0; }
+.cpub-mirror-author-avatar { width: 40px; height: 40px; object-fit: cover; border: var(--border-width-default) solid var(--border); flex-shrink: 0; }
 .cpub-mirror-bio { font-size: 0.8125rem; color: var(--text-faint); line-height: 1.5; margin-top: 4px; }
 .cpub-mirror-bio :deep(a) { color: var(--accent); }
 .cpub-mirror-handle { color: var(--text-faint); margin-left: 6px; }

package/pages/tags/[slug].vue

@@ -9,23 +9,45 @@ useSeoMeta({
   description: () => `Content tagged with "${tagSlug.value}" on CommonPub`,
 });
 
-const page = ref(0);
-const { data: results, refresh } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+const PAGE_SIZE = 20;
+const loadingMore = ref(false);
+const allLoaded = ref(false);
+
+const { data: results } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
   query: computed(() => ({
     tag: tagSlug.value,
     status: 'published',
-    limit: 20,
-    offset: page.value * 20,
+    limit: PAGE_SIZE,
   })),
+  watch: [tagSlug],
 });
 
 const items = computed(() => results.value?.items ?? []);
 const total = computed(() => results.value?.total ?? 0);
-const hasMore = computed(() => items.value.length < total.value);
+const hasMore = computed(() => !allLoaded.value && items.value.length < total.value);
+
+// Reset when tag changes
+watch(tagSlug, () => { allLoaded.value = false; });
 
 async function loadMore(): Promise<void> {
-  page.value++;
-  await refresh();
+  if (!results.value?.items) return;
+  loadingMore.value = true;
+  try {
+    const nextOffset = results.value.items.length;
+    const more = await $fetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+      query: { tag: tagSlug.value, status: 'published', limit: PAGE_SIZE, offset: nextOffset },
+    });
+    if (more?.items?.length) {
+      results.value.items.push(...more.items);
+    }
+    if (!more?.items?.length || more.items.length < PAGE_SIZE) {
+      allLoaded.value = true;
+    }
+  } catch {
+    allLoaded.value = true;
+  } finally {
+    loadingMore.value = false;
+  }
 }
 </script>
 
@@ -53,7 +75,9 @@ async function loadMore(): Promise<void> {
     </div>
 
     <div v-if="hasMore" class="cpub-tag-more">
-      <button class="cpub-btn" @click="loadMore">Load more</button>
+      <button class="cpub-btn" @click="loadMore" :disabled="loadingMore">
+        {{ loadingMore ? 'Loading...' : 'Load more' }}
+      </button>
     </div>
   </div>
 </template>

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

@@ -15,7 +15,7 @@ export default defineEventHandler(async (event) => {
       console.error('[hub-backfill] Failed:', err);
       return { processed: 0, errors: 1 };
     }),
-    fetchRemoteHubFollowers(db, id).catch((err) => {
+    fetchRemoteHubFollowers(db, id, config.instance.domain).catch((err) => {
       console.error('[hub-followers] Failed:', err);
       return { fetched: 0, errors: 1 };
     }),