feat: [US-046] - Presence indicators for active collaborators

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/editor/Toolbar.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import type { ConnectionState } from '@/lib/collaboration/realtime'
+import type { ConnectionState, PresenceUser } from '@/lib/collaboration/realtime'
+import PresenceAvatars from './PresenceAvatars'
 
 type ToolbarProps = {
   onAddDialogue: () => void
@@ -12,6 +13,7 @@ type ToolbarProps = {
   onProjectSettings: () => void
   onShare: () => void
   connectionState?: ConnectionState
+  presenceUsers?: PresenceUser[]
 }
 
 const connectionLabel: Record<ConnectionState, string> = {
@@ -38,6 +40,7 @@ export default function Toolbar({
   onProjectSettings,
   onShare,
   connectionState,
+  presenceUsers,
 }: ToolbarProps) {
   return (
     <div className="flex items-center justify-between border-b border-zinc-200 bg-zinc-50 px-4 py-2 dark:border-zinc-700 dark:bg-zinc-800">
@@ -66,6 +69,11 @@ export default function Toolbar({
       </div>
 
       <div className="flex items-center gap-2">
+        {presenceUsers && presenceUsers.length > 0 && (
+          <div className="mr-2">
+            <PresenceAvatars users={presenceUsers} />
+          </div>
+        )}
         {connectionState && (
           <div className="flex items-center gap-1.5 mr-2" title={connectionLabel[connectionState]}>
             <span className={`inline-block h-2.5 w-2.5 rounded-full ${connectionColor[connectionState]}${connectionState === 'reconnecting' ? ' animate-pulse' : ''}`} />