@commonpub/layer 0.5.5 → 0.5.6

package/nuxt.config.ts

@@ -47,7 +47,11 @@ export default defineNuxtConfig({
     uiTheme('layouts.css'),
     uiTheme('forms.css'),
     uiTheme('editor-panels.css'),
-    '@commonpub/explainer/vue/theme/explainer-themes.css',
+    // Explainer theme presets only (NOT base.css — it overrides site design system vars)
+    '@commonpub/explainer/vue/theme/dark-industrial.css',
+    '@commonpub/explainer/vue/theme/punk-zine.css',
+    '@commonpub/explainer/vue/theme/paper-teal.css',
+    '@commonpub/explainer/vue/theme/clean-light.css',
   ],
   runtimeConfig: {
     databaseUrl: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "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/config": "0.8.0",
-    "@commonpub/editor": "0.5.0",
     "@commonpub/explainer": "0.7.0",
     "@commonpub/docs": "0.6.0",
+    "@commonpub/config": "0.8.0",
     "@commonpub/auth": "0.5.0",
-    "@commonpub/learning": "0.5.0",
+    "@commonpub/editor": "0.5.0",
     "@commonpub/protocol": "0.9.6",
-    "@commonpub/server": "2.25.0",
+    "@commonpub/schema": "0.8.17",
+    "@commonpub/learning": "0.5.0",
     "@commonpub/ui": "0.8.4",
-    "@commonpub/schema": "0.8.17"
+    "@commonpub/server": "2.25.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -778,7 +778,7 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
   inset: 0;
   z-index: 9999;
   background: var(--bg);
-  overflow: hidden;
+  overflow-y: auto;
 }
 
 .cpub-preview-close-btn {

package/pages/authorize_interaction.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+/**
+ * /authorize_interaction — Standard ActivityPub remote interaction endpoint.
+ * When a user on another instance wants to follow/interact with content on this instance,
+ * their instance redirects them here with ?uri=<actor-or-object-uri>.
+ *
+ * If logged in: show the resource and offer to follow/interact.
+ * If not logged in: redirect to login first, then back here.
+ */
+const route = useRoute();
+const uri = computed(() => (route.query.uri as string) || '');
+
+const { isAuthenticated } = useAuth();
+const toast = useToast();
+
+const loading = ref(false);
+const resolved = ref<{ type: string; name: string; url: string } | null>(null);
+const error = ref('');
+const actionDone = ref(false);
+
+onMounted(async () => {
+  if (!uri.value) {
+    error.value = 'No URI provided.';
+    return;
+  }
+
+  if (!isAuthenticated.value) {
+    // Redirect to login, then back here
+    navigateTo(`/auth/login?redirect=${encodeURIComponent(route.fullPath)}`);
+    return;
+  }
+
+  // Try to resolve what the URI points to
+  loading.value = true;
+  try {
+    // Check if it's a hub actor URI
+    const result = await $fetch<{ type: string; name: string; url: string }>('/api/federation/resolve-uri', {
+      method: 'POST',
+      body: { uri: uri.value },
+    }).catch(() => null);
+
+    if (result) {
+      resolved.value = result;
+    } else {
+      // Fallback: just show the URI and offer to open it
+      resolved.value = { type: 'unknown', name: uri.value, url: uri.value };
+    }
+  } catch {
+    error.value = 'Could not resolve the remote resource.';
+  } finally {
+    loading.value = false;
+  }
+});
+
+async function handleFollow(): Promise<void> {
+  if (!uri.value) return;
+  loading.value = true;
+  try {
+    // Try to follow as a remote actor (user or hub)
+    await $fetch('/api/federation/remote-follow', {
+      method: 'POST',
+      body: { uri: uri.value },
+    });
+    actionDone.value = true;
+    toast.success('Follow request sent');
+  } catch {
+    toast.error('Failed to send follow request');
+  } finally {
+    loading.value = false;
+  }
+}
+
+useSeoMeta({
+  title: 'Authorize Interaction',
+  robots: 'noindex',
+});
+</script>
+
+<template>
+  <div class="cpub-authorize-page">
+    <div class="cpub-authorize-card">
+      <h1 class="cpub-authorize-title">Authorize Interaction</h1>
+
+      <div v-if="loading" class="cpub-authorize-loading">
+        <i class="fa-solid fa-spinner fa-spin"></i> Resolving...
+      </div>
+
+      <div v-else-if="error" class="cpub-authorize-error">
+        <i class="fa-solid fa-triangle-exclamation"></i> {{ error }}
+      </div>
+
+      <div v-else-if="resolved" class="cpub-authorize-content">
+        <p class="cpub-authorize-desc">
+          You are about to interact with a remote resource:
+        </p>
+        <div class="cpub-authorize-resource">
+          <strong>{{ resolved.name }}</strong>
+          <span v-if="resolved.type !== 'unknown'" class="cpub-authorize-type">{{ resolved.type }}</span>
+        </div>
+        <code class="cpub-authorize-uri">{{ uri }}</code>
+
+        <div v-if="actionDone" class="cpub-authorize-success">
+          <i class="fa-solid fa-check"></i> Follow request sent successfully.
+        </div>
+        <div v-else class="cpub-authorize-actions">
+          <button class="cpub-btn cpub-btn-primary" :disabled="loading" @click="handleFollow">
+            <i class="fa-solid fa-user-plus"></i> Follow
+          </button>
+          <a :href="uri" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm">
+            <i class="fa-solid fa-arrow-up-right-from-square"></i> View Original
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-authorize-page {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 60px 16px;
+  min-height: 60vh;
+}
+.cpub-authorize-card {
+  max-width: 520px;
+  width: 100%;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: 32px;
+}
+.cpub-authorize-title {
+  font-size: 18px;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+.cpub-authorize-loading {
+  color: var(--text-dim);
+  font-size: 14px;
+}
+.cpub-authorize-error {
+  color: var(--red, #ef4444);
+  font-size: 14px;
+}
+.cpub-authorize-desc {
+  font-size: 13px;
+  color: var(--text-dim);
+  margin-bottom: 16px;
+}
+.cpub-authorize-resource {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.cpub-authorize-resource strong {
+  font-size: 15px;
+}
+.cpub-authorize-type {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+  background: var(--accent-bg);
+  padding: 2px 6px;
+}
+.cpub-authorize-uri {
+  display: block;
+  font-size: 11px;
+  color: var(--text-faint);
+  word-break: break-all;
+  margin-bottom: 20px;
+  padding: 8px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+}
+.cpub-authorize-success {
+  color: var(--green, #22c55e);
+  font-size: 14px;
+  font-weight: 600;
+}
+.cpub-authorize-actions {
+  display: flex;
+  gap: 8px;
+}
+</style>

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

@@ -206,6 +206,33 @@ async function handleDiscPost(): Promise<void> {
 const mirrorStatus = computed(() => hub.value?.followStatus ?? 'pending');
 
 const remoteFollowRef = ref<{ show: () => void } | null>(null);
+const hubFollowing = ref(false);
+const hubFollowStatus = ref('');
+
+/** Follow the hub — if logged in, call API directly; otherwise show the remote follow modal */
+async function handleJoinHub(): Promise<void> {
+  if (isAuthenticated.value && hub.value) {
+    // Logged-in user: call the hub-follow API directly
+    hubFollowing.value = true;
+    try {
+      const result = await $fetch<{ success: boolean; status: string }>('/api/federation/hub-follow', {
+        method: 'POST',
+        body: { federatedHubId: hub.value.id },
+      });
+      hubFollowStatus.value = result.status;
+      toast.success(result.status === 'accepted' ? 'Now following this hub' : 'Follow request sent');
+      await refreshHub();
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : 'Failed to follow hub';
+      toast.error(msg);
+    } finally {
+      hubFollowing.value = false;
+    }
+  } else {
+    // Not logged in: show the remote follow modal
+    remoteFollowRef.value?.show();
+  }
+}
 
 // --- Like state tracking ---
 const likedPostIds = ref<Set<string>>(new Set());
@@ -272,8 +299,8 @@ 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" class="cpub-btn cpub-btn-primary cpub-btn-sm" @click="remoteFollowRef?.show()">
-            <i class="fa-solid fa-user-plus"></i> Join from your instance
+          <button v-if="hub?.actorUri" class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="hubFollowing" @click="handleJoinHub">
+            <i class="fa-solid fa-user-plus"></i> {{ hubFollowing ? 'Following...' : 'Join from your instance' }}
           </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

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

@@ -0,0 +1,27 @@
+import { sendFollow, resolveRemoteActor } from '@commonpub/server';
+import { z } from 'zod';
+
+const schema = z.object({
+  uri: z.string().url(),
+});
+
+/**
+ * Follow a remote actor by URI. Used by /authorize_interaction.
+ * Resolves the actor, then sends an AP Follow activity.
+ */
+export default defineEventHandler(async (event): Promise<{ success: boolean }> => {
+  requireFeature('federation');
+  const user = requireAuth(event);
+  const db = useDB();
+  const config = useConfig();
+  const { uri } = await parseBody(event, schema);
+
+  // Resolve actor to ensure it's cached
+  const actor = await resolveRemoteActor(db, uri);
+  if (!actor) {
+    throw createError({ statusCode: 404, statusMessage: 'Could not resolve remote actor' });
+  }
+
+  await sendFollow(db, user.id, uri, config.instance.domain);
+  return { success: true };
+});

package/server/api/federation/resolve-uri.post.ts

@@ -0,0 +1,32 @@
+import { resolveRemoteActor } from '@commonpub/server';
+import { z } from 'zod';
+
+const schema = z.object({
+  uri: z.string().url(),
+});
+
+/**
+ * Resolve a remote AP URI to a displayable resource.
+ * Used by /authorize_interaction to show what the user is about to follow.
+ */
+export default defineEventHandler(async (event): Promise<{ type: string; name: string; url: string }> => {
+  requireFeature('federation');
+  requireAuth(event);
+  const db = useDB();
+  const { uri } = await parseBody(event, schema);
+
+  const actor = await resolveRemoteActor(db, uri);
+  if (actor) {
+    const actorType = (actor as Record<string, unknown>).type as string || 'Person';
+    const name = (actor as Record<string, unknown>).name as string
+      || (actor as Record<string, unknown>).preferredUsername as string
+      || uri;
+    return {
+      type: actorType === 'Group' ? 'Hub' : actorType,
+      name,
+      url: uri,
+    };
+  }
+
+  return { type: 'unknown', name: uri, url: uri };
+});