@commonpub/layer 0.82.0 → 0.83.0

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

@@ -4,6 +4,12 @@ import type { HubViewModel, HubPostViewModel, HubMemberViewModel, HubTabDef } fr
 
 const route = useRoute();
 const slug = computed(() => route.params.slug as string);
+// Invite-link redemption: `/hubs/<slug>?invite=<token>` lets a recipient join an
+// invite-only / approval hub. The token rides along to the join endpoint below.
+const inviteToken = computed(() => {
+  const q = route.query.invite;
+  return typeof q === 'string' ? q : '';
+});
 
 function remoteDomain(uri: string | undefined): string | null {
   if (!uri) return null;
@@ -228,14 +234,14 @@ function openImagePicker(): void {
   imageInput.value?.click();
 }
 
+const { uploadFile } = useFileUpload();
+
 async function handleImageUpload(event: Event): Promise<void> {
   const input = event.target as HTMLInputElement;
   const file = input.files?.[0];
   if (!file) return;
-  const formData = new FormData();
-  formData.append('file', file);
   try {
-    const result = await $fetch<{ url: string }>('/api/files/upload', { method: 'POST', body: formData });
+    const result = await uploadFile(file);
     newPostContent.value += (newPostContent.value ? ' ' : '') + result.url;
     toast.success('Image uploaded');
   } catch {
@@ -253,13 +259,27 @@ function handleLinkInsert(): void {
 
 async function handleJoin(): Promise<void> {
   if (!isAuthenticated.value) {
-    await navigateTo(`/auth/login?redirect=/hubs/${slug.value}`);
+    // Preserve the invite token across login so the redemption survives the round-trip.
+    const target = `/hubs/${slug.value}${inviteToken.value ? `?invite=${inviteToken.value}` : ''}`;
+    await navigateTo(`/auth/login?redirect=${encodeURIComponent(target)}`);
     return;
   }
   try {
-    await $fetch(`/api/hubs/${slug.value}/join`, { method: 'POST' });
-    toast.success('Joined hub!');
-    await refreshHub();
+    const result = await $fetch<{ joined: boolean; pending?: boolean; error?: string }>(`/api/hubs/${slug.value}/join`, {
+      method: 'POST',
+      body: inviteToken.value ? { inviteToken: inviteToken.value } : undefined,
+    });
+    if (result.joined) {
+      toast.success('Joined hub!');
+      await refreshHub();
+    } else if (result.pending) {
+      // Approval-gated hub: a pending request was created, awaiting admin review.
+      toast.success('Join request submitted');
+      await refreshHub();
+    } else {
+      // joinHub resolves 200 with { joined: false } for policy failures (e.g. invite required).
+      toast.error(result.error || 'Could not join this hub');
+    }
   } catch {
     toast.error('Failed to join hub');
   }
@@ -292,13 +312,18 @@ async function onRefreshGallery(): Promise<void> {
     <template #hero>
       <HubHero :hub="hubVM" :gallery-total="gallery?.total">
         <template #actions>
-          <button v-if="isAuthenticated && !hub?.currentUserRole" class="cpub-btn cpub-btn-primary" @click="handleJoin">
-            <i class="fa-solid fa-plus"></i> Join Hub
+          <button v-if="(isAuthenticated || inviteToken) && !hub?.currentUserRole && !hub?.joinRequestPending" class="cpub-btn cpub-btn-primary" @click="handleJoin">
+            <i class="fa-solid fa-plus"></i> {{ inviteToken ? 'Accept invite' : (hub?.joinPolicy === 'approval' ? 'Request to join' : 'Join Hub') }}
           </button>
+          <span v-else-if="hub?.joinRequestPending" class="cpub-member-badge">
+            <i class="fa-solid fa-hourglass-half"></i> Request pending
+          </span>
           <span v-else-if="hub?.currentUserRole" class="cpub-member-badge">
             <i class="fa-solid fa-check"></i> Joined
           </span>
           <button class="cpub-btn cpub-btn-sm" aria-label="Share hub" @click="handleShare"><i class="fa-solid fa-share-nodes"></i></button>
+          <NuxtLink v-if="['owner', 'admin'].includes(hub?.currentUserRole ?? '')" :to="`/hubs/${slug}/members`" class="cpub-btn cpub-btn-sm" aria-label="Manage members"><i class="fa-solid fa-users-gear"></i> Members</NuxtLink>
+          <NuxtLink v-if="['owner', 'admin'].includes(hub?.currentUserRole ?? '')" :to="`/hubs/${slug}/invites`" class="cpub-btn cpub-btn-sm" aria-label="Manage invites"><i class="fa-solid fa-user-plus"></i> Invites</NuxtLink>
           <NuxtLink v-if="hub?.currentUserRole === 'owner'" :to="`/hubs/${slug}/settings`" class="cpub-btn cpub-btn-sm" aria-label="Hub settings"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>
         </template>
         <template #badges>

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

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' });
+
+import type { Serialized, HubDetail, HubInviteItem } from '@commonpub/server';
+
+const route = useRoute();
+const slug = computed(() => route.params.slug as string);
+const toast = useToast();
+const { extract: extractError } = useApiError();
+
+const { data: hub } = useLazyFetch<Serialized<HubDetail>>(() => `/api/hubs/${slug.value}`);
+const { data: invitesData, refresh, error: invitesError } = useLazyFetch<Serialized<HubInviteItem>[]>(
+  () => `/api/hubs/${slug.value}/invites`,
+  { default: () => [] },
+);
+const invites = computed(() => invitesData.value ?? []);
+
+const currentUserRole = computed(() => hub.value?.currentUserRole ?? null);
+// admin+ only — mirrors the server's manageMembers permission (createInvite/revokeInvite).
+const canManage = computed(() =>
+  ['owner', 'admin'].includes(currentUserRole.value ?? ''),
+);
+
+useSeoMeta({ title: () => `Invites, ${hub.value?.name ?? 'Hub'}, ${useSiteName()}` });
+
+// --- Create form ---
+const expiryOptions = [
+  { label: 'Never expires', days: 0 },
+  { label: 'Expires in 1 day', days: 1 },
+  { label: 'Expires in 7 days', days: 7 },
+  { label: 'Expires in 30 days', days: 30 },
+] as const;
+
+const form = reactive({ maxUses: '', expiryDays: 0 });
+const creating = ref(false);
+
+async function createInvite(): Promise<void> {
+  creating.value = true;
+  try {
+    const body: { maxUses?: number; expiresAt?: string } = {};
+    const max = Number(form.maxUses);
+    if (form.maxUses && Number.isFinite(max) && max > 0) body.maxUses = Math.trunc(max);
+    if (form.expiryDays > 0) {
+      body.expiresAt = new Date(Date.now() + form.expiryDays * 86_400_000).toISOString();
+    }
+    await $fetch(`/api/hubs/${slug.value}/invites`, { method: 'POST', body });
+    toast.success('Invite created');
+    form.maxUses = '';
+    form.expiryDays = 0;
+    await refresh();
+  } catch (err: unknown) {
+    toast.error(extractError(err));
+  } finally {
+    creating.value = false;
+  }
+}
+
+function inviteLink(token: string): string {
+  const origin = typeof window !== 'undefined' ? window.location.origin : '';
+  return `${origin}/hubs/${slug.value}?invite=${token}`;
+}
+
+async function copyLink(token: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(inviteLink(token));
+    toast.success('Invite link copied');
+  } catch {
+    toast.error('Could not copy link');
+  }
+}
+
+async function revoke(id: string): Promise<void> {
+  if (!confirm('Revoke this invite? The link will stop working.')) return;
+  try {
+    await $fetch(`/api/hubs/${slug.value}/invites/${id}`, { method: 'DELETE' });
+    toast.success('Invite revoked');
+    await refresh();
+  } catch (err: unknown) {
+    toast.error(extractError(err));
+  }
+}
+
+function usesLabel(invite: Serialized<HubInviteItem>): string {
+  return invite.maxUses == null
+    ? `${invite.useCount} uses`
+    : `${invite.useCount} / ${invite.maxUses} uses`;
+}
+
+function isExhausted(invite: Serialized<HubInviteItem>): boolean {
+  const expired = invite.expiresAt != null && new Date(invite.expiresAt).getTime() <= Date.now();
+  const maxedOut = invite.maxUses != null && invite.useCount >= invite.maxUses;
+  return expired || maxedOut;
+}
+
+function fmtDate(d: string | null): string {
+  if (!d) return '';
+  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+</script>
+
+<template>
+  <div class="cpub-invites-page">
+    <div class="cpub-invites-header">
+      <NuxtLink :to="`/hubs/${slug}`" class="cpub-back-link">
+        <i class="fa-solid fa-arrow-left"></i> {{ hub?.name ?? 'Hub' }}
+      </NuxtLink>
+      <h1 class="cpub-invites-title">Invites</h1>
+      <p class="cpub-invites-subtitle">Share an invite link so people can join this hub.</p>
+    </div>
+
+    <div v-if="!hub" class="cpub-loading">Loading...</div>
+
+    <div v-else-if="invitesError || !canManage" class="cpub-empty-state" style="padding: 48px 24px">
+      <p class="cpub-empty-state-title">You do not have permission to manage invites.</p>
+    </div>
+
+    <template v-else>
+      <form class="cpub-invites-create" @submit.prevent="createInvite">
+        <div class="cpub-invites-create-fields">
+          <div class="cpub-field">
+            <label for="invite-max-uses" class="cpub-field-label">Max uses (optional)</label>
+            <input
+              id="invite-max-uses"
+              v-model="form.maxUses"
+              type="number"
+              min="1"
+              inputmode="numeric"
+              class="cpub-field-input"
+              placeholder="Unlimited"
+            />
+          </div>
+          <div class="cpub-field">
+            <label for="invite-expiry" class="cpub-field-label">Expiry</label>
+            <select id="invite-expiry" v-model.number="form.expiryDays" class="cpub-field-input">
+              <option v-for="opt in expiryOptions" :key="opt.days" :value="opt.days">{{ opt.label }}</option>
+            </select>
+          </div>
+        </div>
+        <button type="submit" class="cpub-btn cpub-btn-primary" :disabled="creating">
+          <i class="fa-solid fa-plus"></i> {{ creating ? 'Creating...' : 'Create invite' }}
+        </button>
+      </form>
+
+      <ul v-if="invites.length" class="cpub-invites-list">
+        <li v-for="invite in invites" :key="invite.id" class="cpub-invite-card">
+          <div class="cpub-invite-info">
+            <code class="cpub-invite-token">{{ invite.token.slice(0, 12) }}...</code>
+            <div class="cpub-invite-meta">
+              <span :class="{ 'cpub-invite-exhausted': isExhausted(invite) }">{{ usesLabel(invite) }}</span>
+              <span v-if="invite.expiresAt">Expires {{ fmtDate(invite.expiresAt) }}</span>
+              <span v-else>No expiry</span>
+              <span>Created {{ fmtDate(invite.createdAt) }}</span>
+            </div>
+          </div>
+          <div class="cpub-invite-actions">
+            <button class="cpub-btn cpub-btn-sm" type="button" @click="copyLink(invite.token)">
+              <i class="fa-solid fa-link"></i> Copy link
+            </button>
+            <button class="cpub-btn cpub-btn-sm cpub-invite-revoke" type="button" aria-label="Revoke invite" @click="revoke(invite.id)">
+              <i class="fa-solid fa-trash"></i>
+            </button>
+          </div>
+        </li>
+      </ul>
+
+      <div v-else class="cpub-empty-state" style="padding: 48px 24px">
+        <p class="cpub-empty-state-title">No invites yet.</p>
+        <p class="cpub-empty-state-text">Create one above to share a join link.</p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.cpub-invites-page {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 32px;
+}
+
+.cpub-invites-header {
+  margin-bottom: 24px;
+}
+
+/* cpub-back-link → global components.css */
+
+.cpub-invites-title {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.cpub-invites-subtitle {
+  font-size: 13px;
+  color: var(--text-dim);
+}
+
+.cpub-invites-create {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 16px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  margin-bottom: 24px;
+}
+
+.cpub-invites-create-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  flex: 1;
+  min-width: 240px;
+}
+
+.cpub-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cpub-field-label {
+  font-size: 11px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+}
+
+.cpub-field-input {
+  padding: 8px 12px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.cpub-field-input:focus {
+  border-color: var(--accent);
+}
+
+select.cpub-field-input {
+  cursor: pointer;
+}
+
+.cpub-invites-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+}
+
+.cpub-invite-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-invite-card:last-child {
+  border-bottom: none;
+}
+
+.cpub-invite-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.cpub-invite-token {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--text);
+}
+
+.cpub-invite-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 4px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+}
+
+.cpub-invite-exhausted {
+  color: var(--red);
+}
+
+.cpub-invite-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.cpub-invite-revoke:hover {
+  color: var(--red);
+  border-color: var(--red);
+}
+
+@media (max-width: 640px) {
+  .cpub-invites-page { padding: 16px; }
+  .cpub-invites-create-fields { grid-template-columns: 1fr; }
+  .cpub-invite-card { flex-wrap: wrap; }
+}
+</style>

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

@@ -11,6 +11,46 @@ const { user } = useAuth();
 const currentUserRole = computed(() => hub.value?.currentUserRole ?? null);
 const canManage = computed(() => currentUserRole.value === 'owner' || currentUserRole.value === 'admin');
 
+interface BanItem {
+  id: string;
+  reason: string | null;
+  expiresAt: string | null;
+  createdAt: string;
+  user: { id: string; username: string; displayName: string | null; avatarUrl: string | null };
+  bannedBy: { username: string; displayName: string | null };
+}
+
+// The bans endpoint is manager-only (403 otherwise), so fetch it lazily once
+// the viewer is confirmed to manage this hub.
+const { data: bansData, refresh: refreshBans } = useLazyFetch<BanItem[]>(() => `/api/hubs/${slug.value}/bans`, { immediate: false });
+const bans = computed(() => bansData.value ?? []);
+watch(canManage, (v) => { if (v) refreshBans(); }, { immediate: true });
+
+// Pending join requests (approval-gated hubs). Manager-only, fetched lazily.
+const { data: requestsData, refresh: refreshRequests } = useLazyFetch<{ items: any[]; total: number }>(() => `/api/hubs/${slug.value}/requests`, { immediate: false });
+const requests = computed(() => requestsData.value?.items ?? []);
+watch(canManage, (v) => { if (v) refreshRequests(); }, { immediate: true });
+
+async function approveRequest(userId: string): Promise<void> {
+  try {
+    await $fetch(`/api/hubs/${slug.value}/requests/${userId}/approve`, { method: 'POST' });
+    toast.success('Request approved');
+    await Promise.all([refreshRequests(), refresh()]);
+  } catch {
+    toast.error('Failed to approve request');
+  }
+}
+
+async function denyRequest(userId: string): Promise<void> {
+  try {
+    await $fetch(`/api/hubs/${slug.value}/requests/${userId}/deny`, { method: 'POST' });
+    toast.success('Request declined');
+    await refreshRequests();
+  } catch {
+    toast.error('Failed to decline request');
+  }
+}
+
 useSeoMeta({ title: () => `Members, ${hub.value?.name ?? 'Hub'}, ${useSiteName()}` });
 
 const roles = ['member', 'moderator', 'admin'] as const;
@@ -45,6 +85,34 @@ async function kickMember(userId: string, username: string): Promise<void> {
     toast.error('Failed to remove member');
   }
 }
+
+async function banMember(userId: string, username: string): Promise<void> {
+  // One native dialog doubles as the confirm: OK (even empty) bans with that
+  // optional reason; Cancel aborts.
+  const reason = prompt(`Ban @${username} from this hub? They will be removed and blocked from rejoining. Enter an optional reason, or Cancel to abort.`);
+  if (reason === null) return;
+  try {
+    await $fetch(`/api/hubs/${slug.value}/bans`, {
+      method: 'POST',
+      body: { userId, reason: reason.trim() || undefined },
+    });
+    toast.success('Member banned');
+    await Promise.all([refresh(), refreshBans()]);
+  } catch {
+    toast.error('Failed to ban member');
+  }
+}
+
+async function unbanMember(userId: string, username: string): Promise<void> {
+  if (!confirm(`Lift the ban on @${username}? They will be able to rejoin.`)) return;
+  try {
+    await $fetch(`/api/hubs/${slug.value}/bans/${userId}`, { method: 'DELETE' });
+    toast.success('Ban lifted');
+    await refreshBans();
+  } catch {
+    toast.error('Failed to lift ban');
+  }
+}
 </script>
 
 <template>
@@ -55,6 +123,28 @@ async function kickMember(userId: string, username: string): Promise<void> {
       <p class="members-count" v-if="membersData?.total">{{ membersData.total }} members</p>
     </div>
 
+    <!-- Pending join requests (managers only) -->
+    <section v-if="canManage && requests.length" class="requests-section">
+      <h2 class="requests-title">Join requests</h2>
+      <div class="members-list">
+        <div class="member-card" v-for="r in requests" :key="r.userId">
+          <NuxtLink :to="`/u/${r.user.username}`" class="member-avatar">
+            <img v-if="r.user.avatarUrl" :src="r.user.avatarUrl" :alt="r.user.displayName || r.user.username" class="member-avatar-img" />
+            <span v-else>{{ (r.user.displayName || r.user.username).charAt(0).toUpperCase() }}</span>
+          </NuxtLink>
+          <div class="member-info">
+            <NuxtLink :to="`/u/${r.user.username}`" class="member-name">{{ r.user.displayName || r.user.username }}</NuxtLink>
+            <span class="member-handle">@{{ r.user.username }}</span>
+          </div>
+          <time class="member-joined">{{ new Date(r.joinedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}</time>
+          <div class="member-actions">
+            <button class="cpub-btn cpub-btn-sm cpub-btn-primary" @click="approveRequest(r.userId)">Approve</button>
+            <button class="cpub-btn cpub-btn-sm member-deny-btn" @click="denyRequest(r.userId)">Deny</button>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <div class="members-list" v-if="members?.length">
       <div class="member-card" v-for="m in members" :key="m.userId">
         <NuxtLink :to="`/u/${m.user.username}`" class="member-avatar">
@@ -84,12 +174,37 @@ async function kickMember(userId: string, username: string): Promise<void> {
           <button class="member-kick-btn" title="Remove member" @click="kickMember(m.userId, m.user.username)">
             <i class="fa-solid fa-user-xmark"></i>
           </button>
+          <button class="member-ban-btn" title="Ban member" aria-label="Ban member" @click="banMember(m.userId, m.user.username)">
+            <i class="fa-solid fa-ban"></i>
+          </button>
         </div>
       </div>
     </div>
     <div v-else class="members-empty">
       <p>No members yet.</p>
     </div>
+
+    <!-- Banned users (managers only) -->
+    <section v-if="canManage && bans.length" class="bans-section">
+      <h2 class="bans-title">Banned</h2>
+      <div class="members-list">
+        <div class="member-card" v-for="b in bans" :key="b.id">
+          <NuxtLink :to="`/u/${b.user.username}`" class="member-avatar">
+            <img v-if="b.user.avatarUrl" :src="b.user.avatarUrl" :alt="b.user.displayName || b.user.username" class="member-avatar-img" />
+            <span v-else>{{ (b.user.displayName || b.user.username).charAt(0).toUpperCase() }}</span>
+          </NuxtLink>
+          <div class="member-info">
+            <NuxtLink :to="`/u/${b.user.username}`" class="member-name">{{ b.user.displayName || b.user.username }}</NuxtLink>
+            <span class="member-handle">@{{ b.user.username }}</span>
+            <span v-if="b.reason" class="ban-reason">{{ b.reason }}</span>
+          </div>
+          <span class="ban-meta">{{ b.expiresAt ? 'Temporary' : 'Permanent' }}</span>
+          <button class="member-unban-btn" title="Lift ban" @click="unbanMember(b.user.id, b.user.username)">
+            <i class="fa-solid fa-rotate-left"></i> Unban
+          </button>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -122,9 +237,22 @@ async function kickMember(userId: string, username: string): Promise<void> {
 .member-role-select:focus { border-color: var(--accent); outline: none; }
 .member-kick-btn { background: none; border: var(--border-width-default) solid var(--border2); color: var(--text-faint); cursor: pointer; font-size: 10px; padding: 3px 6px; }
 .member-kick-btn:hover { color: var(--red); border-color: var(--red); }
+.member-ban-btn { background: none; border: var(--border-width-default) solid var(--border2); color: var(--text-faint); cursor: pointer; font-size: 10px; padding: 3px 6px; }
+.member-ban-btn:hover { color: var(--red); border-color: var(--red); }
 
 .members-empty { text-align: center; padding: 48px 0; color: var(--text-faint); }
 
+.requests-section { margin-bottom: 28px; }
+.requests-title { font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 10px; }
+.member-deny-btn:hover { color: var(--red); border-color: var(--red); }
+
+.bans-section { margin-top: 28px; }
+.bans-title { font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 10px; }
+.ban-reason { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; }
+.ban-meta { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); flex-shrink: 0; }
+.member-unban-btn { background: none; border: var(--border-width-default) solid var(--border2); color: var(--text-dim); cursor: pointer; font-size: 10px; font-family: var(--font-mono); padding: 3px 8px; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
+.member-unban-btn:hover { color: var(--accent); border-color: var(--accent); }
+
 @media (max-width: 768px) {
   .members-page { padding: 16px; }
   .member-card { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }

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

@@ -379,11 +379,11 @@ useSeoMeta({
   display: flex; gap: 6px;
 }
 
-.cpub-btn-primary { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
+.cpub-btn-primary { background: var(--accent); color: var(--color-on-accent); border-color: var(--accent); }
 .cpub-btn-primary:hover:not(:disabled) { opacity: 0.9; }
 .cpub-btn-primary:disabled { opacity: 0.5; cursor: default; }
 .cpub-btn-danger { color: var(--red); border-color: var(--red); }
-.cpub-btn-danger:hover { background: var(--red); color: var(--accent-text, #fff); }
+.cpub-btn-danger:hover { background: var(--red); color: var(--color-on-accent); }
 
 /* Reply form */
 .cpub-reply-form { margin-bottom: 16px; }

package/pages/hubs/index.vue

@@ -4,7 +4,7 @@ useSeoMeta({
   description: 'Browse and join maker communities.',
 });
 
-const { data, pending } = await useFetch('/api/hubs');
+const { data, pending, error, refresh } = await useFetch('/api/hubs');
 const { isAuthenticated } = useAuth();
 
 const hubs = computed(() => data.value?.items ?? []);
@@ -32,6 +32,11 @@ function hubLink(hub: Record<string, unknown>): string {
     </div>
 
     <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="error" class="cpub-fetch-error">
+      <div class="cpub-fetch-error-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
+      <div class="cpub-fetch-error-msg">Failed to load hubs.</div>
+      <button class="cpub-btn cpub-btn-sm" @click="refresh()">Retry</button>
+    </div>
     <div v-else-if="hubs.length" class="cpub-hubs-grid">
       <NuxtLink
         v-for="hub in hubs"

package/pages/learn/[slug]/[lessonSlug]/index.vue

@@ -34,13 +34,22 @@ useSeoMeta({
 const { isAuthenticated, user } = useAuth();
 const toast = useToast();
 const completing = ref(false);
-const completed = ref(false);
+
+// Completion is seeded from the server (the path fetch carries per-lesson
+// isCompleted for the viewer) and flipped locally once the viewer marks it,
+// so a reload no longer shows "Mark as Complete" on an already-done lesson.
+const serverCompleted = computed(() => {
+  const lessons = path.value?.modules?.flatMap((m) => m.lessons ?? []) ?? [];
+  return lessons.find((l) => l.slug === lessonSlug.value)?.isCompleted ?? false;
+});
+const justCompleted = ref(false);
+const completed = computed(() => justCompleted.value || serverCompleted.value);
 
 async function markComplete(): Promise<void> {
   completing.value = true;
   try {
     await $fetch(`/api/learn/${slug.value}/${lessonSlug.value}/complete`, { method: 'POST' });
-    completed.value = true;
+    justCompleted.value = true;
     toast.success('Lesson completed!');
   } catch {
     toast.error('Failed to mark as complete');
@@ -164,7 +173,7 @@ async function submitQuiz(): Promise<void> {
     if (res.quiz) {
       quizGrade.value = res.quiz;
       if (res.quiz.passed) {
-        completed.value = true;
+        justCompleted.value = true;
         toast.success(`Passed, ${res.quiz.score}%`);
       } else {
         toast.error(`Scored ${res.quiz.score}%, below passing. Try again.`);

package/pages/learn/index.vue

@@ -3,7 +3,7 @@ useSeoMeta({ title: `Learn, ${useSiteName()}` });
 
 const { isAuthenticated, user } = useAuth();
 
-const { data: pathsData, pending: loadingPaths } = useFetch('/api/learn');
+const { data: pathsData, pending: loadingPaths, error: pathsError, refresh: refreshPaths } = useFetch('/api/learn');
 
 // Fetch author's own paths (including drafts) when authenticated
 const myPathsQuery = computed(() => user.value?.id ? { authorId: user.value.id } : {});
@@ -141,6 +141,13 @@ const activeDifficultyFilter = ref('');
             <i class="fa-solid fa-circle-notch fa-spin"></i> Loading paths...
           </div>
 
+          <!-- Fetch error -->
+          <div v-else-if="pathsError" class="cpub-fetch-error">
+            <div class="cpub-fetch-error-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
+            <div class="cpub-fetch-error-msg">Failed to load learning paths.</div>
+            <button class="cpub-btn cpub-btn-sm" @click="refreshPaths()">Retry</button>
+          </div>
+
           <!-- Real data -->
           <template v-else-if="paths.length">
             <NuxtLink v-for="p in paths" :key="p.id" :to="`/learn/${p.slug}`" class="cpub-path-card" style="text-decoration: none; color: inherit;">

package/pages/messages/index.vue

@@ -128,7 +128,7 @@ async function startConversation(): Promise<void> {
           <div class="cpub-new-msg-field">
             <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">
+              <span v-for="(r, idx) in newRecipients" :key="r" class="cpub-new-msg-chip">
                 {{ r }}
                 <button class="cpub-new-msg-chip-remove" @click="removeRecipient(idx)" :aria-label="`Remove ${r}`">&times;</button>
               </span>