feat: use useRemoteUsers

Author: doc-han

assets/js/collaborative-editor/components/ActiveCollaborators.tsx

@@ -1,5 +1,5 @@
 import { cn } from '../../utils/cn';
-import { useAwareness } from '../hooks/useAwareness';
+import { useRemoteUsers } from '../hooks/useAwareness';
 import { getAvatarInitials } from '../utils/avatar';
 
 import { Tooltip } from './Tooltip';
@@ -9,7 +9,7 @@ interface ActiveCollaboratorsProps {
 }
 
 export function ActiveCollaborators({ className }: ActiveCollaboratorsProps) {
-  const remoteUsers = useAwareness({ cached: true });
+  const remoteUsers = useRemoteUsers();
 
   if (remoteUsers.length === 0) {
     return null;

assets/js/collaborative-editor/components/CollaborationWidget.tsx

@@ -5,15 +5,15 @@
 
 import { useSocket } from '../../react/contexts/SocketProvider';
 import { cn } from '../../utils/cn';
-import { useAwareness } from '../hooks/useAwareness';
+import { useRemoteUsers } from '../hooks/useAwareness';
 import { useSession } from '../hooks/useSession';
 
 export function CollaborationWidget() {
   const { isConnected: socketConnected, connectionError } = useSocket();
   const { isConnected: yjsConnected, isSynced } = useSession();
 
   // Get remote users only (local user is always excluded)
-  const remoteUsers = useAwareness({ cached: true });
+  const remoteUsers = useRemoteUsers();
 
   const getStatusColor = () => {
     if (socketConnected && yjsConnected && isSynced) return 'bg-green-500';

assets/test/collaborative-editor/components/ActiveCollaborators.test.tsx

@@ -433,32 +433,6 @@ describe('ActiveCollaborators - Cache Behavior', () => {
     expect(screen.getByText('JD')).toBeInTheDocument();
   });
 
-  test('cached users appear with their last known state', () => {
-    const now = Date.now();
-    const fiveSecondsAgo = now - 5 * 1000;
-
-    // User active 5 seconds ago
-    mockRemoteUsers = [
-      createMockAwarenessUser({
-        user: {
-          id: 'user-1',
-          name: 'Jane Smith',
-          email: 'jane@example.com',
-          color: '#00ff00',
-        },
-        lastSeen: fiveSecondsAgo,
-      }),
-    ];
-
-    render(<ActiveCollaborators />);
-
-    // Should still show as active (green border) because < 12 seconds
-    expect(screen.getByText('JS')).toBeInTheDocument();
-    expect(screen.getByText('JS').closest('div')?.parentElement).toHaveClass(
-      'border-green-500'
-    );
-  });
-
   test('cached users eventually expire after threshold', () => {
     const now = Date.now();
     const thirtySecondsAgo = now - 30 * 1000; // Well over 12 seconds