@commonpub/layer 0.3.8 → 0.3.9

package/composables/useMessages.ts

@@ -0,0 +1,58 @@
+/** Composable for real-time unread message count via SSE */
+export function useMessages() {
+  const count = useState<number>('message-count', () => 0);
+  const connected = useState<boolean>('message-connected', () => false);
+
+  let eventSource: EventSource | null = null;
+  let retryDelay = 5000;
+  let retryTimer: ReturnType<typeof setTimeout> | null = null;
+  const MAX_RETRY_DELAY = 60_000;
+
+  function connect(): void {
+    if (import.meta.server || eventSource) return;
+
+    eventSource = new EventSource('/api/messages/stream');
+    connected.value = true;
+
+    eventSource.onopen = () => {
+      retryDelay = 5000;
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as { type: string; count?: number };
+        if (data.type === 'count' && typeof data.count === 'number') {
+          count.value = data.count;
+        }
+      } catch { /* ignore */ }
+    };
+
+    eventSource.onerror = () => {
+      connected.value = false;
+      const wasClosed = eventSource?.readyState === 2;
+      eventSource?.close();
+      eventSource = null;
+      if (wasClosed) return;
+      retryTimer = setTimeout(connect, retryDelay);
+      retryDelay = Math.min(retryDelay * 2, MAX_RETRY_DELAY);
+    };
+  }
+
+  function disconnect(): void {
+    if (retryTimer) {
+      clearTimeout(retryTimer);
+      retryTimer = null;
+    }
+    eventSource?.close();
+    eventSource = null;
+    connected.value = false;
+    retryDelay = 5000;
+  }
+
+  return {
+    count: readonly(count),
+    connected: readonly(connected),
+    connect,
+    disconnect,
+  };
+}

package/composables/useMirrorContent.ts

@@ -78,6 +78,8 @@ export function useMirrorContent(fedContent: Ref<Record<string, unknown> | null>
         displayName: (actor.value?.displayName as string) || (actor.value?.preferredUsername as string) || 'Unknown',
         avatarUrl: (actor.value?.avatarUrl as string) || null,
         profileUrl: (actor.value?.actorUri as string) || null,
+        bio: (actor.value?.summary as string) || null,
+        followerCount: (actor.value?.followerCount as number) ?? undefined,
       },
       buildCount: 0,
       bookmarkCount: 0,

package/layouts/default.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { user, isAuthenticated, isAdmin, signOut, refreshSession } = useAuth();
 const { count: unreadCount, connect: connectNotifications, disconnect: disconnectNotifications } = useNotifications();
+const { count: unreadMessages, connect: connectMessages, disconnect: disconnectMessages } = useMessages();
 const { hubs, learning, video, docs, contests, admin, federation } = useFeatures();
 const { enabledTypeMeta } = useContentTypes();
 const runtimeConfig = useRuntimeConfig();
@@ -34,6 +35,7 @@ onMounted(async () => {
   await refreshSession();
   if (isAuthenticated.value) {
     connectNotifications();
+    connectMessages();
   }
   document.addEventListener('keydown', handleGlobalKeydown);
   document.addEventListener('click', handleClickOutside);
@@ -41,6 +43,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
   disconnectNotifications();
+  disconnectMessages();
   document.removeEventListener('keydown', handleGlobalKeydown);
   document.removeEventListener('click', handleClickOutside);
 });
@@ -89,6 +92,7 @@ const userUsername = computed(() => user.value?.username ?? '');
         <template v-if="isAuthenticated">
           <NuxtLink to="/messages" class="cpub-icon-btn" title="Messages" aria-label="Messages">
             <i class="fa-solid fa-envelope"></i>
+            <span v-if="unreadMessages > 0" class="cpub-notif-dot" />
           </NuxtLink>
           <NuxtLink to="/notifications" class="cpub-icon-btn" title="Notifications" aria-label="Notifications">
             <i class="fa-solid fa-bell"></i>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -44,15 +44,15 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.5.0",
     "@commonpub/config": "0.7.0",
-    "@commonpub/editor": "0.5.0",
+    "@commonpub/auth": "0.5.0",
     "@commonpub/docs": "0.5.2",
-    "@commonpub/learning": "0.5.0",
+    "@commonpub/editor": "0.5.0",
+    "@commonpub/server": "2.9.0",
+    "@commonpub/schema": "0.8.10",
     "@commonpub/protocol": "0.9.4",
-    "@commonpub/server": "2.8.0",
-    "@commonpub/schema": "0.8.9",
-    "@commonpub/ui": "0.7.1"
+    "@commonpub/ui": "0.7.1",
+    "@commonpub/learning": "0.5.0"
   },
   "scripts": {}
 }

package/pages/mirror/[id].vue

@@ -43,6 +43,11 @@ if (originUrl.value) {
   });
 }
 
+// Track view
+onMounted(() => {
+  $fetch(`/api/federation/content/${id}/view`, { method: 'POST' }).catch(() => {});
+});
+
 useSeoMeta({
   title: transformedContent.value?.title ?? 'Mirrored Content',
   description: transformedContent.value?.description ?? '',
@@ -99,8 +104,13 @@ useSeoMeta({
         <h1 class="cpub-mirror-title">{{ transformedContent.title }}</h1>
         <p v-if="transformedContent.description" class="cpub-mirror-desc">{{ transformedContent.description }}</p>
         <div class="cpub-mirror-author">
-          <strong>{{ transformedContent.author.displayName }}</strong>
-          <span v-if="authorHandle" class="cpub-mirror-handle">{{ authorHandle }}</span>
+          <img v-if="transformedContent.author.avatarUrl" :src="transformedContent.author.avatarUrl" :alt="transformedContent.author.displayName || ''" class="cpub-mirror-author-avatar" />
+          <div>
+            <strong>{{ transformedContent.author.displayName }}</strong>
+            <span v-if="authorHandle" class="cpub-mirror-handle">{{ authorHandle }}</span>
+            <span v-if="transformedContent.author.followerCount" class="cpub-mirror-handle">&middot; {{ transformedContent.author.followerCount }} followers</span>
+            <p v-if="transformedContent.author.bio" class="cpub-mirror-bio" v-html="transformedContent.author.bio" />
+          </div>
         </div>
         <div v-if="typeof transformedContent.content === 'string'" class="cpub-mirror-body prose" v-html="transformedContent.content" />
         <div v-if="transformedContent.tags?.length" class="cpub-mirror-tags">
@@ -144,7 +154,10 @@ useSeoMeta({
 .cpub-mirror-cover { width: 100%; max-height: 400px; object-fit: cover; margin-bottom: 20px; }
 .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); }
+.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-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; }
 .cpub-mirror-body { font-size: 1rem; line-height: 1.75; margin-bottom: 32px; }
 .cpub-mirror-body :deep(img) { max-width: 100%; }

package/server/api/federation/content/[id]/view.post.ts

@@ -0,0 +1,31 @@
+import { incrementFederatedViewCount } from '@commonpub/server';
+
+const recentViews = new Map<string, number>();
+const VIEW_COOLDOWN_MS = 5 * 60 * 1000;
+
+setInterval(() => {
+  const now = Date.now();
+  for (const [key, ts] of recentViews) {
+    if (now - ts > VIEW_COOLDOWN_MS) recentViews.delete(key);
+  }
+}, 120_000);
+
+export default defineEventHandler(async (event): Promise<{ success: boolean }> => {
+  requireFeature('federation');
+  const db = useDB();
+  const { id } = parseParams(event, { id: 'uuid' });
+
+  const ip = getRequestHeader(event, 'x-forwarded-for')?.split(',')[0]?.trim()
+    || getRequestHeader(event, 'x-real-ip')
+    || 'unknown';
+  const dedupKey = `fed:${ip}:${id}`;
+  const lastView = recentViews.get(dedupKey);
+
+  if (lastView && Date.now() - lastView < VIEW_COOLDOWN_MS) {
+    return { success: true };
+  }
+
+  recentViews.set(dedupKey, Date.now());
+  await incrementFederatedViewCount(db, id);
+  return { success: true };
+});

package/server/api/messages/stream.get.ts

@@ -0,0 +1,55 @@
+import { getUnreadMessageCount } from '@commonpub/server';
+
+export default defineEventHandler(async (event) => {
+  const user = requireAuth(event);
+  const userId = user.id;
+  const db = useDB();
+
+  setResponseHeader(event, 'Content-Type', 'text/event-stream');
+  setResponseHeader(event, 'Cache-Control', 'no-cache');
+  setResponseHeader(event, 'Connection', 'keep-alive');
+
+  const encoder = new TextEncoder();
+  const stream = new ReadableStream({
+    async start(controller) {
+      let closed = false;
+      function cleanup(): void {
+        if (closed) return;
+        closed = true;
+        clearInterval(interval);
+        clearInterval(keepalive);
+        try { controller.close(); } catch { /* already closed */ }
+      }
+
+      const count = await getUnreadMessageCount(db, userId);
+      controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'count', count })}\n\n`));
+
+      const interval = setInterval(async () => {
+        try {
+          const currentCount = await getUnreadMessageCount(db, userId);
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'count', count: currentCount })}\n\n`));
+        } catch {
+          cleanup();
+        }
+      }, 10000);
+
+      const keepalive = setInterval(() => {
+        try {
+          controller.enqueue(encoder.encode(': keepalive\n\n'));
+        } catch {
+          cleanup();
+        }
+      }, 30000);
+
+      event.node.req.on('close', cleanup);
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+    },
+  });
+});