@commonpub/layer 0.3.21 → 0.3.22

package/components/MentionText.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const props = defineProps<{
+  text: string;
+}>();
+
+interface TextSegment {
+  type: 'text' | 'mention';
+  value: string;
+}
+
+const MENTION_RE = /(?:^|(?<=[\s(]))@([a-zA-Z0-9_-]{1,39})(?=[\s,.!?;:)\]|]|$)/g;
+
+const segments = computed((): TextSegment[] => {
+  const result: TextSegment[] = [];
+  let lastIndex = 0;
+
+  for (const match of props.text.matchAll(MENTION_RE)) {
+    const start = match.index!;
+    if (start > lastIndex) {
+      result.push({ type: 'text', value: props.text.slice(lastIndex, start) });
+    }
+    result.push({ type: 'mention', value: match[1]! });
+    lastIndex = start + match[0].length;
+  }
+
+  if (lastIndex < props.text.length) {
+    result.push({ type: 'text', value: props.text.slice(lastIndex) });
+  }
+
+  return result.length > 0 ? result : [{ type: 'text', value: props.text }];
+});
+</script>
+
+<template>
+  <span class="cpub-mention-text">
+    <template v-for="(seg, idx) in segments" :key="idx">
+      <NuxtLink v-if="seg.type === 'mention'" :to="`/u/${seg.value}`" class="cpub-mention">@{{ seg.value }}</NuxtLink>
+      <template v-else>{{ seg.value }}</template>
+    </template>
+  </span>
+</template>
+
+<style scoped>
+.cpub-mention {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.cpub-mention:hover {
+  text-decoration: underline;
+}
+</style>

package/composables/useMessages.ts

@@ -1,57 +1,10 @@
-/** Composable for real-time unread message count via SSE */
+/** Composable for real-time unread message count. Delegates to unified SSE stream. */
 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;
-  }
+  const { messageCount, connected, connect, disconnect } = useRealtimeCounts();
 
   return {
-    count: readonly(count),
-    connected: readonly(connected),
+    count: messageCount,
+    connected,
     connect,
     disconnect,
   };

package/composables/useNotifications.ts

@@ -1,73 +1,13 @@
-/** Composable for real-time notification count via SSE */
+/** Composable for real-time notification count. Delegates to unified SSE stream. */
 export function useNotifications() {
-  const count = useState<number>('notification-count', () => 0);
-  const connected = useState<boolean>('notification-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/notifications/stream');
-    connected.value = true;
-
-    eventSource.onopen = () => {
-      retryDelay = 5000; // Reset backoff on successful connection
-    };
-
-    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 malformed messages
-      }
-    };
-
-    eventSource.onerror = () => {
-      connected.value = false;
-      // EventSource readyState 2 = CLOSED (server rejected, e.g. 401)
-      const wasClosed = eventSource?.readyState === 2;
-      eventSource?.close();
-      eventSource = null;
-      // If the connection was fully closed (auth error, 401, etc.), don't retry
-      if (wasClosed) return;
-      // Exponential backoff: 5s → 10s → 20s → 40s → 60s cap
-      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;
-  }
-
-  function decrement(): void {
-    if (count.value > 0) count.value--;
-  }
-
-  function reset(): void {
-    count.value = 0;
-  }
+  const { notificationCount, connected, connect, disconnect, decrementNotifications, resetNotifications } = useRealtimeCounts();
 
   return {
-    count: readonly(count),
-    connected: readonly(connected),
+    count: notificationCount,
+    connected,
     connect,
     disconnect,
-    decrement,
-    reset,
+    decrement: decrementNotifications,
+    reset: resetNotifications,
   };
 }

package/composables/useRealtimeCounts.ts

@@ -0,0 +1,74 @@
+/**
+ * Unified composable for real-time notification and message counts via a single SSE stream.
+ * Replaces the separate useNotifications() and useMessages() EventSource connections.
+ */
+export function useRealtimeCounts() {
+  const notificationCount = useState<number>('notification-count', () => 0);
+  const messageCount = useState<number>('message-count', () => 0);
+  const connected = useState<boolean>('realtime-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/realtime/stream');
+    connected.value = true;
+
+    eventSource.onopen = () => {
+      retryDelay = 5000;
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as { type: string; notifications?: number; messages?: number };
+        if (data.type === 'counts') {
+          if (typeof data.notifications === 'number') notificationCount.value = data.notifications;
+          if (typeof data.messages === 'number') messageCount.value = data.messages;
+        }
+      } 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;
+  }
+
+  function decrementNotifications(): void {
+    if (notificationCount.value > 0) notificationCount.value--;
+  }
+
+  function resetNotifications(): void {
+    notificationCount.value = 0;
+  }
+
+  return {
+    notificationCount: readonly(notificationCount),
+    messageCount: readonly(messageCount),
+    connected: readonly(connected),
+    connect,
+    disconnect,
+    decrementNotifications,
+    resetNotifications,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,8 +50,8 @@
     "@commonpub/editor": "0.5.0",
     "@commonpub/learning": "0.5.0",
     "@commonpub/protocol": "0.9.4",
-    "@commonpub/server": "2.13.1",
     "@commonpub/schema": "0.8.12",
+    "@commonpub/server": "2.14.0",
     "@commonpub/ui": "0.7.1"
   },
   "scripts": {}

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

@@ -1,6 +1,8 @@
 import { getUnreadMessageCount } from '@commonpub/server';
 
+/** @deprecated Use /api/realtime/stream instead */
 export default defineEventHandler(async (event) => {
+  console.warn('[deprecated] /api/messages/stream — use /api/realtime/stream instead');
   const user = requireAuth(event);
   const userId = user.id;
   const db = useDB();

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

@@ -1,6 +1,8 @@
 import { getUnreadCount } from '@commonpub/server';
 
+/** @deprecated Use /api/realtime/stream instead */
 export default defineEventHandler(async (event) => {
+  console.warn('[deprecated] /api/notifications/stream — use /api/realtime/stream instead');
   const user = requireAuth(event);
   const userId = user.id;
   const db = useDB();

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

@@ -0,0 +1,65 @@
+import { getUnreadCount, getUnreadMessageCount } from '@commonpub/server';
+
+/**
+ * Unified SSE stream for notification and message counts.
+ * Replaces the separate /api/notifications/stream and /api/messages/stream endpoints.
+ * Sends both counts in a single event, halving DB polls and open connections.
+ */
+export default defineEventHandler(async (event) => {
+  const user = requireAuth(event);
+  const userId = user.id;
+  const db = useDB();
+
+  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 */ }
+      }
+
+      async function sendCounts(): Promise<void> {
+        const [notifications, messages] = await Promise.all([
+          getUnreadCount(db, userId),
+          getUnreadMessageCount(db, userId),
+        ]);
+        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'counts', notifications, messages })}\n\n`));
+      }
+
+      // Send initial counts
+      await sendCounts();
+
+      // Poll every 10 seconds
+      const interval = setInterval(async () => {
+        try {
+          await sendCounts();
+        } catch {
+          cleanup();
+        }
+      }, 10000);
+
+      // Keepalive every 30 seconds
+      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',
+    },
+  });
+});