@prenta/admin 0.92.0

package/src/components/NotificationBell.tsx

@@ -0,0 +1,334 @@
+'use client'
+
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import {
+  type Notification,
+  type NotificationOutcome,
+  type NotificationStreamHandle,
+  type NotificationStreamOptions,
+  listNotifications as defaultListNotifications,
+  markAllNotificationsRead as defaultMarkAllRead,
+  markNotificationRead as defaultMarkRead,
+  notificationSummary,
+  subscribeNotificationStream as defaultSubscribeStream,
+  unreadCount as defaultUnreadCount,
+} from '../lib/notifications-client.js'
+
+/**
+ * Top-bar notification bell + dropdown panel. Slice 6 of Phase 3
+ * surfaces every collaboration event that affects the current user —
+ * comment replies, resolves, and mentions — without forcing the
+ * editor to round-trip through the comments side panel.
+ *
+ * Design choices:
+ *
+ * - **SSE push, with poll fallback (Phase 7).** A persistent
+ *   `EventSource` subscribes to `/api/cms/notifications/stream` for
+ *   instant delivery; new notifications bump the badge immediately
+ *   instead of after the next 30 s poll tick. The poll loop is kept
+ *   alive at a back-pressure-friendly cadence (default 60 s — twice
+ *   the legacy 30 s value because SSE handles the common case) and
+ *   acts as a backstop for:
+ *     1. multi-node deployments where the in-process bus only
+ *        publishes to subscribers on the same node, and
+ *     2. proxies / browsers that silently drop the EventSource
+ *        without firing `onerror`.
+ * - **Optimistic read state.** When the user clicks a notification we
+ *   mark it read locally before the server confirms — so the bell
+ *   counter feels instant. Server failures roll the state back via
+ *   the `onError` toast.
+ * - **API injection.** The dependency-injection seam matches the rest
+ *   of the admin (`CommentSidePanel.api`) so unit tests can substitute
+ *   in-memory fakes — including the EventSource subscriber, which
+ *   isn't available in JSDOM by default.
+ */
+export interface NotificationsApi {
+  list: (opts: { includeRead?: boolean }) => Promise<NotificationOutcome<Notification[]>>
+  unread: () => Promise<NotificationOutcome<number>>
+  markRead: (id: string) => Promise<NotificationOutcome<Notification>>
+  markAllRead: () => Promise<NotificationOutcome<number>>
+  /**
+   * Open a per-user SSE subscription. Implementations MUST always
+   * return a handle — even in environments without `EventSource`
+   * (SSR, JSDOM without a polyfill), where a no-op `{ close() {} }`
+   * is the right answer. The bell's effect calls `handle.close()`
+   * unconditionally on unmount; a `null` return would crash.
+   * Omitting the member entirely is the supported way to opt out of
+   * SSE (the bell then runs poll-only).
+   */
+  subscribe?: (opts: NotificationStreamOptions) => NotificationStreamHandle
+}
+
+const defaultApi: NotificationsApi = {
+  list: (opts) => defaultListNotifications(opts),
+  unread: () => defaultUnreadCount(),
+  markRead: (id) => defaultMarkRead(id),
+  markAllRead: () => defaultMarkAllRead(),
+  subscribe: (opts) => defaultSubscribeStream(opts),
+}
+
+export interface NotificationBellProps {
+  /**
+   * Polling cadence in milliseconds for the fallback loop. Default
+   * 60,000 (twice the pre-SSE value — push handles the common case).
+   * Pass 0 to disable polling entirely (relies on SSE only — only
+   * safe on single-node deployments).
+   */
+  pollIntervalMs?: number
+  /** Optional click hook — called with the notification when a row is clicked. */
+  onSelect?: (notification: Notification) => void
+  /** Error sink — bubble server failures to a toast / banner. */
+  onError?: (message: string) => void
+  /** Override the API client (tests). */
+  api?: NotificationsApi
+  className?: string
+}
+
+export function NotificationBell({
+  pollIntervalMs = 60_000,
+  onSelect,
+  onError,
+  api = defaultApi,
+  className,
+}: NotificationBellProps): React.JSX.Element {
+  const [open, setOpen] = useState(false)
+  const [unread, setUnread] = useState(0)
+  const [items, setItems] = useState<Notification[]>([])
+  const [loading, setLoading] = useState(false)
+  const mountedRef = useRef(true)
+  // Set of notification IDs we've already rendered. The SSE handler
+  // consults this synchronously so duplicate deliveries (REST refresh
+  // + SSE push, or two SSE retries) don't double-bump the badge.
+  //
+  // The ref is updated **synchronously** at every call site that
+  // changes the set of items (REST refresh, SSE push, dropdown clear).
+  // A prior implementation reconciled it via `useEffect([items])`,
+  // but that effect runs *after* React commits — so an SSE push that
+  // arrives between the REST list resolving (`items` mutated) and the
+  // effect running would read a stale ref, fall through the
+  // de-dup gate, and append a duplicate row. The reproducible
+  // regression was caught by the test
+  // `does not double-count a notification that arrives via both
+  // SSE and REST`.
+  const seenIdsRef = useRef<Set<string>>(new Set())
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  const refreshUnread = useCallback(async () => {
+    const out = await api.unread()
+    if (!mountedRef.current) return
+    if (!out.ok) {
+      onError?.(out.error)
+      return
+    }
+    setUnread(out.result)
+  }, [api, onError])
+
+  const refreshList = useCallback(
+    async (includeRead = false) => {
+      setLoading(true)
+      const out = await api.list({ includeRead })
+      if (!mountedRef.current) return
+      if (!out.ok) {
+        onError?.(out.error)
+        setItems([])
+        seenIdsRef.current = new Set()
+      } else {
+        setItems(out.result)
+        seenIdsRef.current = new Set(out.result.map((n) => n.id))
+      }
+      setLoading(false)
+    },
+    [api, onError],
+  )
+
+  useEffect(() => {
+    void refreshUnread()
+    if (!pollIntervalMs) return
+    const id = setInterval(() => void refreshUnread(), pollIntervalMs)
+    return () => clearInterval(id)
+  }, [refreshUnread, pollIntervalMs])
+
+  // SSE push subscription. Bumps the badge + prepends the new row to
+  // the open dropdown the instant the server publishes. Falls back
+  // silently when the api/runtime doesn't support EventSource — the
+  // poll loop above keeps the bell correct in that case.
+  useEffect(() => {
+    if (!api.subscribe) return
+    const handle = api.subscribe({
+      onNotification: (n) => {
+        if (!mountedRef.current) return
+        // SSE events can race with REST refreshes (or with their own
+        // retries). Two gates close the door on duplicates:
+        //   1. **Synchronous ref check** — fast-path that also
+        //      gates the unread badge bump, so a second delivery of
+        //      the same row never drifts the counter. The ref is
+        //      maintained synchronously by `refreshList` so the
+        //      check sees a consistent snapshot.
+        //   2. **Inner setItems check** — final safety net. The
+        //      updater sees the latest `arr` snapshot React has
+        //      queued, which may differ from the ref if a
+        //      `refreshList` resolved between this handler's ref
+        //      read and the updater running. Without it, an
+        //      interleaved REST refresh could leave `items` with a
+        //      duplicate row.
+        if (seenIdsRef.current.has(n.id)) return
+        seenIdsRef.current.add(n.id)
+        setItems((arr) => {
+          if (arr.some((existing) => existing.id === n.id)) return arr
+          return [n, ...arr]
+        })
+        if (!n.readAt) setUnread((v) => v + 1)
+      },
+      onError: () => {
+        // Don't surface every transient SSE disconnect as a UI error —
+        // the browser auto-reconnects, and the poll loop keeps state
+        // converging. We deliberately stay quiet here.
+      },
+    })
+    return () => handle.close()
+  }, [api])
+
+  useEffect(() => {
+    if (!open) return
+    void refreshList(false)
+  }, [open, refreshList])
+
+  const handleClickRow = useCallback(
+    async (n: Notification) => {
+      // Optimistic update: drop the unread count + tag the row read.
+      if (!n.readAt) {
+        setUnread((v) => Math.max(0, v - 1))
+        setItems((arr) =>
+          arr.map((row) => (row.id === n.id ? { ...row, readAt: new Date().toISOString() } : row)),
+        )
+        const out = await api.markRead(n.id)
+        if (!out.ok) {
+          onError?.(out.error)
+          // Roll back on failure.
+          setUnread((v) => v + 1)
+          setItems((arr) => arr.map((row) => (row.id === n.id ? { ...row, readAt: null } : row)))
+        }
+      }
+      onSelect?.(n)
+    },
+    [api, onError, onSelect],
+  )
+
+  const handleMarkAll = useCallback(async () => {
+    // Snapshot ONLY the previously-unread IDs (and their original
+    // readAt values, which are null by definition). On rollback we
+    // restore those specific rows and leave anything that arrived
+    // via SSE while the request was in flight alone — otherwise a
+    // failed mark-all-read would drop fresh notifications.
+    const previouslyUnreadIds = items.filter((n) => n.readAt === null).map((n) => n.id)
+    if (previouslyUnreadIds.length === 0) return
+    const ids = new Set(previouslyUnreadIds)
+    const now = new Date().toISOString()
+    setItems((arr) => arr.map((n) => (ids.has(n.id) ? { ...n, readAt: n.readAt ?? now } : n)))
+    setUnread(0)
+    const out = await api.markAllRead()
+    if (!out.ok) {
+      onError?.(out.error)
+      // Functional rollback: only revert the rows we optimistically
+      // marked. Anything mid-flight (SSE arrivals, locally-added) is
+      // untouched.
+      setItems((arr) => arr.map((n) => (ids.has(n.id) ? { ...n, readAt: null } : n)))
+      await refreshUnread()
+    }
+  }, [api, items, onError, refreshUnread])
+
+  return (
+    <div className={`relative ${className ?? ''}`} data-testid="notification-bell">
+      <button
+        type="button"
+        className="text-muted-foreground hover:bg-accent hover:text-foreground relative rounded p-1.5"
+        aria-label="Notifications"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+        data-testid="bell-button"
+      >
+        <BellIcon />
+        {unread > 0 && (
+          <span
+            className="bg-destructive absolute -top-0.5 -right-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium text-white"
+            data-testid="bell-badge"
+          >
+            {unread > 99 ? '99+' : unread}
+          </span>
+        )}
+      </button>
+      {open && (
+        <div
+          role="menu"
+          className="border-border bg-card absolute right-0 z-50 mt-1 w-80 rounded border shadow-lg"
+          data-testid="bell-dropdown"
+        >
+          <header className="flex items-center justify-between border-b border-gray-100 px-3 py-2">
+            <span className="text-foreground text-sm font-medium">Notifications</span>
+            <button
+              type="button"
+              className="text-muted-foreground hover:text-foreground text-xs disabled:opacity-50"
+              onClick={handleMarkAll}
+              disabled={unread === 0}
+              data-testid="bell-mark-all"
+            >
+              Mark all read
+            </button>
+          </header>
+          <div className="max-h-80 overflow-y-auto" aria-busy={loading} data-testid="bell-list">
+            {loading ? (
+              <p className="text-muted-foreground px-3 py-2 text-xs">Loading…</p>
+            ) : items.length === 0 ? (
+              <p className="text-muted-foreground px-3 py-2 text-xs">All caught up.</p>
+            ) : (
+              <ul>
+                {items.map((n) => (
+                  <li key={n.id}>
+                    <button
+                      type="button"
+                      role="menuitem"
+                      className={`hover:bg-accent block w-full px-3 py-2 text-left text-xs ${
+                        n.readAt ? 'text-muted-foreground' : 'text-foreground font-medium'
+                      }`}
+                      onClick={() => handleClickRow(n)}
+                      data-testid={`bell-row-${n.id}`}
+                      data-read={n.readAt ? 'true' : 'false'}
+                    >
+                      <div>{notificationSummary(n)}</div>
+                      <div className="text-muted-foreground mt-0.5 text-[10px]">{n.createdAt}</div>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function BellIcon(): React.JSX.Element {
+  return (
+    <svg
+      aria-hidden="true"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+    </svg>
+  )
+}

package/src/components/OfflineStatus.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import React from 'react'
+
+import type {
+  CollaborationStatus,
+  OfflinePersistenceStatus,
+} from '../lib/collaboration-provider.js'
+
+/**
+ * Compact connection + offline-draft indicator. Rendered alongside the
+ * presence chips above the editor toolbar so editors get a single,
+ * always-visible signal:
+ *
+ * - **Saved & synced** — IndexedDB store is ready and the gateway
+ *   socket is connected.
+ * - **Saved locally** — IndexedDB ready but the socket is disconnected
+ *   (offline drafts in flight; will sync on reconnect).
+ * - **Syncing local copy…** — IndexedDB is replaying the last snapshot
+ *   into the doc. The editor is still usable but undo / cursor sync
+ *   may flicker briefly.
+ * - **Local drafts unsupported** — `indexedDB` is unavailable; the
+ *   editor will rely on the gateway only. Refresh loses uncommitted
+ *   edits.
+ * - **Local drafts failed** — IndexedDB threw on init (quota, private
+ *   browsing). Same risk as "unsupported", but with a different cause.
+ *
+ * Keeping the component dumb and prop-driven keeps the unit tests
+ * trivial — the parent owns the status transitions.
+ */
+export interface OfflineStatusProps {
+  connection: CollaborationStatus
+  offline: OfflinePersistenceStatus
+}
+
+export function OfflineStatus({ connection, offline }: OfflineStatusProps): React.JSX.Element {
+  const { label, tone } = describeOfflineStatus(connection, offline)
+  const baseClass = 'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium'
+  const toneClass = TONE_CLASSES[tone]
+  return (
+    <span className={`${baseClass} ${toneClass}`} data-testid="offline-status" data-tone={tone}>
+      <span
+        aria-hidden="true"
+        className={`inline-block h-1.5 w-1.5 rounded-full ${DOT_CLASSES[tone]}`}
+      />
+      {label}
+    </span>
+  )
+}
+
+export type OfflineTone = 'good' | 'warn' | 'info' | 'bad'
+
+const TONE_CLASSES: Record<OfflineTone, string> = {
+  good: 'bg-success/10 text-emerald-700',
+  warn: 'bg-warning/10 text-warning',
+  info: 'bg-info/10 text-info',
+  bad: 'bg-destructive/10 text-destructive',
+}
+
+const DOT_CLASSES: Record<OfflineTone, string> = {
+  good: 'bg-success',
+  warn: 'bg-warning',
+  info: 'bg-info',
+  bad: 'bg-destructive',
+}
+
+/**
+ * Pure helper that maps the (connection, offline) status pair to a
+ * single user-facing label + colour tone. Exported so the unit tests
+ * can exercise every combination without rendering React.
+ */
+export function describeOfflineStatus(
+  connection: CollaborationStatus,
+  offline: OfflinePersistenceStatus,
+): { label: string; tone: OfflineTone } {
+  if (offline === 'error') return { label: 'Local drafts failed', tone: 'bad' }
+  if (offline === 'unsupported') {
+    // No local persistence; the WebSocket is the only safety net.
+    if (connection === 'connected') return { label: 'Synced', tone: 'good' }
+    if (connection === 'connecting') return { label: 'Connecting…', tone: 'info' }
+    return { label: 'Offline — drafts not persisted', tone: 'warn' }
+  }
+  if (offline === 'loading' || offline === 'pending') {
+    return { label: 'Restoring local copy…', tone: 'info' }
+  }
+  // offline === 'ready' from here on.
+  if (connection === 'connected') return { label: 'Saved & synced', tone: 'good' }
+  if (connection === 'connecting') return { label: 'Saved locally — reconnecting…', tone: 'warn' }
+  return { label: 'Saved locally — offline', tone: 'warn' }
+}

package/src/components/PlanUpgradeCallout.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { ArrowUpRight } from 'lucide-react'
+import type { PlanFeature } from '../lib/plan.js'
+import { planFeatureLabel } from '../lib/plan.js'
+
+export function PlanUpgradeCallout({
+  feature,
+  requiredTier = 'pro',
+  upgradeUrl,
+}: {
+  feature: PlanFeature
+  requiredTier?: string
+  upgradeUrl?: string | null
+}) {
+  return (
+    <div
+      className="border-border bg-muted/40 space-y-2 rounded-md border p-4"
+      role="status"
+      aria-live="polite"
+    >
+      <p className="text-foreground text-sm font-medium">
+        Upgrade to unlock {planFeatureLabel(feature)}
+      </p>
+      <p className="text-muted-foreground text-sm">
+        This feature requires the {requiredTier} plan. Audits, issue tracking, and export remain
+        available on your current plan.
+      </p>
+      {upgradeUrl ? (
+        <a
+          href={upgradeUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary inline-flex items-center gap-1 text-sm font-medium hover:underline"
+        >
+          View plans
+          <ArrowUpRight className="h-4 w-4" aria-hidden />
+        </a>
+      ) : null}
+    </div>
+  )
+}

package/src/components/PresenceChips.tsx

@@ -0,0 +1,154 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { Awareness } from 'y-protocols/awareness'
+
+import {
+  summarisePresence,
+  type CollaborationStatus,
+  type PresenceSnapshot,
+} from '../lib/collaboration-provider.js'
+
+export interface PresenceChipsProps {
+  /** Awareness instance returned from `createCollaborationProvider`. */
+  awareness: Awareness
+  /**
+   * Optional connection status. When provided the strip renders a small
+   * status pill (Connected / Connecting / Disconnected) on the left side.
+   */
+  status?: CollaborationStatus
+  /**
+   * Hide the local user from the strip. Defaults to `true` — the local user
+   * already knows they're editing.
+   */
+  hideSelf?: boolean
+  /** Max chips to show before collapsing to "+N". Defaults to 5. */
+  maxVisible?: number
+  className?: string
+}
+
+/**
+ * Small avatar / initials strip showing who else is currently editing the
+ * document. Subscribes to the supplied `Awareness` instance for live
+ * updates.
+ *
+ * The component is intentionally stateless about transport — it only reads
+ * from Awareness and `status`. Wiring is the caller's job.
+ */
+export function PresenceChips({
+  awareness,
+  status,
+  hideSelf = true,
+  maxVisible = 5,
+  className,
+}: PresenceChipsProps) {
+  const [snapshot, setSnapshot] = useState<PresenceSnapshot>(() => summarisePresence(awareness))
+
+  useEffect(() => {
+    const update = () => {
+      setSnapshot(summarisePresence(awareness))
+    }
+    update()
+    awareness.on('update', update)
+    awareness.on('change', update)
+    return () => {
+      awareness.off('update', update)
+      awareness.off('change', update)
+    }
+  }, [awareness])
+
+  const visible = hideSelf
+    ? snapshot.users.filter((u) => u.clientId !== snapshot.selfClientId)
+    : snapshot.users
+  const overflow = Math.max(0, visible.length - maxVisible)
+  const shown = visible.slice(0, maxVisible)
+
+  return (
+    <div
+      className={`inline-flex items-center gap-1.5 text-xs ${className ?? ''}`}
+      data-testid="presence-chips"
+    >
+      {status && <StatusPill status={status} />}
+      {shown.length === 0 && status !== 'connecting' && (
+        <span className="text-muted-foreground" data-testid="presence-empty">
+          You're the only one here
+        </span>
+      )}
+      {shown.map(({ clientId, user }) => (
+        <Chip key={clientId} name={user.name} color={user.color} avatarUrl={user.avatarUrl} />
+      ))}
+      {overflow > 0 && (
+        <span
+          className="bg-muted text-foreground rounded-full px-2 py-0.5"
+          data-testid="presence-overflow"
+        >
+          +{overflow}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function StatusPill({ status }: { status: CollaborationStatus }) {
+  const palette: Record<CollaborationStatus, { dot: string; label: string; text: string }> = {
+    connected: { dot: 'bg-success', label: 'Live', text: 'text-emerald-700' },
+    connecting: { dot: 'bg-amber-400 animate-pulse', label: 'Connecting', text: 'text-warning' },
+    disconnected: {
+      dot: 'bg-muted-foreground/30',
+      label: 'Offline',
+      text: 'text-muted-foreground',
+    },
+  }
+  const cfg = palette[status]
+  return (
+    <span
+      className={`bg-muted inline-flex items-center gap-1 rounded-full px-2 py-0.5 ${cfg.text}`}
+      data-testid={`presence-status-${status}`}
+    >
+      <span className={`h-1.5 w-1.5 rounded-full ${cfg.dot}`} />
+      {cfg.label}
+    </span>
+  )
+}
+
+function Chip({ name, color, avatarUrl }: { name: string; color: string; avatarUrl?: string }) {
+  const initials = nameToInitials(name)
+  return (
+    <span
+      className="bg-card inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 ring-1 ring-gray-200"
+      title={name}
+      data-testid="presence-chip"
+    >
+      {avatarUrl ? (
+        <img
+          src={avatarUrl}
+          alt=""
+          className="h-4 w-4 rounded-full object-cover"
+          style={{ boxShadow: `0 0 0 1.5px ${color}` }}
+        />
+      ) : (
+        <span
+          aria-hidden="true"
+          className="flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-medium text-white"
+          style={{ backgroundColor: color }}
+        >
+          {initials}
+        </span>
+      )}
+      <span className="text-foreground max-w-[80px] truncate">{name}</span>
+    </span>
+  )
+}
+
+/** Convert "Alice Cooper" → "AC", single names → "A", empty → "?". */
+export function nameToInitials(name: string): string {
+  const cleaned = name.trim()
+  if (!cleaned) return '?'
+  const parts = cleaned.split(/\s+/).slice(0, 2)
+  return (
+    parts
+      .map((p) => (p[0] ?? '').toUpperCase())
+      .filter(Boolean)
+      .join('') || '?'
+  )
+}

package/src/components/PresenceIndicator.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+
+interface PresenceUser {
+  userId: string
+  name: string
+  connectedAt: string
+}
+
+interface PresenceIndicatorProps {
+  documentId: string
+  currentUserId?: string
+}
+
+const COLORS = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899']
+
+export function PresenceIndicator({ documentId, currentUserId }: PresenceIndicatorProps) {
+  const [users, setUsers] = useState<PresenceUser[]>([])
+  const eventSourceRef = useRef<EventSource | null>(null)
+  const heartbeatRef = useRef<ReturnType<typeof setInterval>>(undefined)
+
+  useEffect(() => {
+    if (!documentId) return
+
+    const es = new EventSource(`/api/cms/presence/${documentId}`)
+    eventSourceRef.current = es
+
+    es.addEventListener('presence', (event) => {
+      try {
+        const data = JSON.parse(event.data) as PresenceUser[]
+        setUsers(data.filter((u) => u.userId !== currentUserId))
+      } catch {}
+    })
+
+    es.onerror = () => {
+      es.close()
+    }
+
+    heartbeatRef.current = setInterval(() => {
+      fetch(`/api/cms/presence/${documentId}/heartbeat`, {
+        method: 'POST',
+        credentials: 'include',
+      }).catch(() => {})
+    }, 30_000)
+
+    return () => {
+      es.close()
+      if (heartbeatRef.current) clearInterval(heartbeatRef.current)
+    }
+  }, [documentId, currentUserId])
+
+  if (users.length === 0) return null
+
+  return (
+    <div className="flex items-center gap-1" title={`${users.length} other editor(s) active`}>
+      {users.slice(0, 5).map((user, i) => (
+        <div
+          key={user.userId}
+          className="flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium text-white ring-2 ring-white"
+          style={{ backgroundColor: COLORS[i % COLORS.length] }}
+          title={user.name}
+        >
+          {user.name.charAt(0).toUpperCase()}
+        </div>
+      ))}
+      {users.length > 5 && (
+        <div className="bg-muted text-muted-foreground flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium ring-2 ring-white">
+          +{users.length - 5}
+        </div>
+      )}
+    </div>
+  )
+}