@tuturuuu/ui 0.9.0 → 0.10.0

package/src/hooks/useBoardPresence.ts

@@ -0,0 +1,364 @@
+'use client';
+
+import { getCurrentUserProfile } from '@tuturuuu/internal-api/users';
+import { createClient } from '@tuturuuu/supabase/next/client';
+import type { RealtimePresenceState } from '@tuturuuu/supabase/next/realtime';
+import type { User } from '@tuturuuu/types/primitives/User';
+import { DEV_MODE } from '@tuturuuu/utils/constants';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type {
+  PresenceLocation,
+  WorkspacePresenceState,
+} from './use-workspace-presence';
+import { getBoardRealtimeChannelName } from './useBoardRealtime.types';
+
+type BoardPresenceChannel = ReturnType<
+  ReturnType<typeof createClient>['channel']
+>;
+
+export type BoardPresenceState = WorkspacePresenceState;
+
+export interface UseBoardPresenceConfig {
+  enabled?: boolean;
+}
+
+export interface UseBoardPresenceResult {
+  presenceState: RealtimePresenceState<BoardPresenceState>;
+  currentUserId?: string;
+  updateLocation: (
+    location: PresenceLocation,
+    metadata?: Record<string, any>
+  ) => void;
+  updateMetadata: (metadata: Record<string, any>) => void;
+  getBoardViewers: (boardId: string) => BoardPresenceState[];
+  getTaskViewers: (taskId: string) => BoardPresenceState[];
+}
+
+const SESSION_STORAGE_SESSION_KEY = 'tuturuuu:board-presence:session-id';
+let fallbackBoardPresenceCounter = 0;
+
+function createPresenceSessionId(): string {
+  if (
+    typeof crypto !== 'undefined' &&
+    typeof crypto.randomUUID === 'function'
+  ) {
+    return crypto.randomUUID();
+  }
+
+  fallbackBoardPresenceCounter += 1;
+  return `fallback-${Date.now().toString(36)}-${fallbackBoardPresenceCounter}`;
+}
+
+function getOrCreatePresenceSessionId(): string {
+  if (typeof window === 'undefined' || typeof sessionStorage === 'undefined') {
+    return createPresenceSessionId();
+  }
+
+  try {
+    const existing = sessionStorage.getItem(SESSION_STORAGE_SESSION_KEY);
+    if (existing) return existing;
+
+    const next = createPresenceSessionId();
+    sessionStorage.setItem(SESSION_STORAGE_SESSION_KEY, next);
+    return next;
+  } catch {
+    return createPresenceSessionId();
+  }
+}
+
+function buildTrackSignature(
+  payload: Omit<BoardPresenceState, 'online_at'>
+): string {
+  return JSON.stringify(payload);
+}
+
+export function useBoardPresence(
+  boardId: string,
+  { enabled = true }: UseBoardPresenceConfig = {}
+): UseBoardPresenceResult {
+  const [presenceState, setPresenceState] = useState<
+    RealtimePresenceState<BoardPresenceState>
+  >({});
+  const [currentUserId, setCurrentUserId] = useState<string>();
+
+  const channelRef = useRef<BoardPresenceChannel | null>(null);
+  const isCleanedUpRef = useRef(false);
+  const setupPromiseRef = useRef<Promise<boolean> | null>(null);
+  const locationRef = useRef<PresenceLocation>({ type: 'other' });
+  const metadataRef = useRef<Record<string, any> | undefined>(undefined);
+  const awayRef = useRef(false);
+  const userDataRef = useRef<User | null>(null);
+  const presenceSessionIdRef = useRef<string>(getOrCreatePresenceSessionId());
+  const lastTrackSignatureRef = useRef<string | null>(null);
+
+  const channelName =
+    enabled && boardId ? getBoardRealtimeChannelName(boardId) : '';
+
+  const ensureChannel = useCallback(async (): Promise<boolean> => {
+    if (channelRef.current) return true;
+    if (!channelName || isCleanedUpRef.current) return false;
+    if (setupPromiseRef.current) return setupPromiseRef.current;
+
+    const promise = (async () => {
+      const supabase = createClient();
+
+      try {
+        const {
+          data: { user },
+        } = await supabase.auth.getUser();
+
+        if (!user?.id || isCleanedUpRef.current) return false;
+
+        if (!userDataRef.current) {
+          const profile = await getCurrentUserProfile().catch((error) => {
+            if (DEV_MODE) {
+              console.error('Error fetching board presence user data:', error);
+            }
+            return null;
+          });
+
+          if (!profile) return false;
+
+          setCurrentUserId(user.id);
+          userDataRef.current = {
+            id: user.id,
+            display_name: profile.display_name,
+            email: profile.email,
+            avatar_url: profile.avatar_url,
+          };
+        }
+
+        if (isCleanedUpRef.current) return false;
+
+        const channel = supabase.channel(channelName, {
+          config: {
+            presence: {
+              enabled: true,
+              key: user.id,
+            },
+            private: true,
+          },
+        });
+        channelRef.current = channel;
+
+        return new Promise<boolean>((resolve) => {
+          channel
+            .on('presence', { event: 'sync' }, () => {
+              if (isCleanedUpRef.current) return;
+              const nextState =
+                channel.presenceState() as RealtimePresenceState<BoardPresenceState>;
+              setPresenceState({ ...nextState });
+            })
+            .on('presence', { event: 'join' }, ({ key }) => {
+              if (DEV_MODE) {
+                console.log('Board presence join:', key);
+              }
+            })
+            .on('presence', { event: 'leave' }, ({ key }) => {
+              if (DEV_MODE) {
+                console.log('Board presence leave:', key);
+              }
+            })
+            .subscribe((status) => {
+              if (DEV_MODE) {
+                console.log('Board presence status:', status);
+              }
+
+              if (status === 'SUBSCRIBED') {
+                resolve(true);
+                return;
+              }
+
+              if (
+                status === 'CHANNEL_ERROR' ||
+                status === 'TIMED_OUT' ||
+                status === 'CLOSED'
+              ) {
+                const deadChannel = channelRef.current;
+                channelRef.current = null;
+                setupPromiseRef.current = null;
+                lastTrackSignatureRef.current = null;
+                if (deadChannel) {
+                  supabase.removeChannel(deadChannel).catch(() => {});
+                }
+                resolve(false);
+              }
+            });
+        });
+      } catch (error) {
+        if (DEV_MODE) {
+          console.error('Error setting up board presence:', error);
+        }
+        channelRef.current = null;
+        setupPromiseRef.current = null;
+        lastTrackSignatureRef.current = null;
+        return false;
+      }
+    })();
+
+    setupPromiseRef.current = promise;
+    return promise;
+  }, [channelName]);
+
+  useEffect(() => {
+    if (!channelName) return;
+    isCleanedUpRef.current = false;
+
+    return () => {
+      isCleanedUpRef.current = true;
+      setupPromiseRef.current = null;
+      if (channelRef.current) {
+        channelRef.current.untrack?.().catch(() => {});
+        createClient().removeChannel(channelRef.current);
+        channelRef.current = null;
+        lastTrackSignatureRef.current = null;
+      }
+    };
+  }, [channelName]);
+
+  const trackPresence = useCallback(async () => {
+    if (isCleanedUpRef.current) return;
+
+    const ready = await ensureChannel();
+    if (
+      !ready ||
+      !channelRef.current ||
+      !userDataRef.current ||
+      isCleanedUpRef.current
+    ) {
+      return;
+    }
+
+    try {
+      const payload: Omit<BoardPresenceState, 'online_at'> = {
+        user: userDataRef.current,
+        session_id: presenceSessionIdRef.current,
+        location: locationRef.current,
+        away: awayRef.current,
+        metadata: metadataRef.current,
+      };
+      const nextSignature = buildTrackSignature(payload);
+      if (nextSignature === lastTrackSignatureRef.current) return;
+
+      await channelRef.current.track({
+        ...payload,
+        online_at: new Date().toISOString(),
+      });
+      lastTrackSignatureRef.current = nextSignature;
+    } catch (error) {
+      if (DEV_MODE) {
+        console.error('Error tracking board presence:', error);
+      }
+    }
+  }, [ensureChannel]);
+
+  const updateLocation = useCallback(
+    async (location: PresenceLocation, metadata?: Record<string, any>) => {
+      locationRef.current = location;
+      if (metadata !== undefined) metadataRef.current = metadata;
+      await trackPresence();
+    },
+    [trackPresence]
+  );
+
+  const updateMetadata = useCallback(
+    async (metadata: Record<string, any>) => {
+      metadataRef.current = metadata;
+      await trackPresence();
+    },
+    [trackPresence]
+  );
+
+  useEffect(() => {
+    if (!channelName) return;
+
+    const handleVisibilityChange = () => {
+      const isAway =
+        typeof document !== 'undefined' &&
+        document.visibilityState === 'hidden';
+      if (awayRef.current === isAway) return;
+
+      awayRef.current = isAway;
+      if (channelRef.current) {
+        void trackPresence();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () =>
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+  }, [channelName, trackPresence]);
+
+  const allPresences = useMemo(() => {
+    const latestBySession = new Map<string, BoardPresenceState>();
+
+    for (const [presenceKey, presences] of Object.entries(presenceState)) {
+      for (const presence of presences) {
+        if (!presence) continue;
+
+        const userId = presence.user?.id || presenceKey;
+        if (!userId) continue;
+
+        const sessionId =
+          presence.session_id ||
+          (presence as { presence_ref?: string }).presence_ref ||
+          `${userId}:${presenceKey}`;
+        const dedupeKey = `${userId}:${sessionId}`;
+
+        const existing = latestBySession.get(dedupeKey);
+        if (!existing) {
+          latestBySession.set(dedupeKey, presence);
+          continue;
+        }
+
+        const existingTimestamp = Date.parse(existing.online_at);
+        const nextTimestamp = Date.parse(presence.online_at);
+        const shouldReplace = Number.isFinite(nextTimestamp)
+          ? !Number.isFinite(existingTimestamp) ||
+            nextTimestamp >= existingTimestamp
+          : !Number.isFinite(existingTimestamp);
+
+        if (shouldReplace) {
+          latestBySession.set(dedupeKey, presence);
+        }
+      }
+    }
+
+    return Array.from(latestBySession.values());
+  }, [presenceState]);
+
+  const getBoardViewers = useCallback(
+    (viewerBoardId: string) =>
+      allPresences.filter(
+        (presence) =>
+          presence.location?.type === 'board' &&
+          presence.location?.boardId === viewerBoardId
+      ),
+    [allPresences]
+  );
+
+  const getTaskViewers = useCallback(
+    (taskId: string) =>
+      allPresences.filter((presence) => presence.location?.taskId === taskId),
+    [allPresences]
+  );
+
+  return useMemo(
+    () => ({
+      presenceState,
+      currentUserId,
+      updateLocation,
+      updateMetadata,
+      getBoardViewers,
+      getTaskViewers,
+    }),
+    [
+      presenceState,
+      currentUserId,
+      updateLocation,
+      updateMetadata,
+      getBoardViewers,
+      getTaskViewers,
+    ]
+  );
+}

package/src/hooks/useBoardRealtimeEventHandler.ts

@@ -1,18 +1,10 @@
 import type { QueryClient } from '@tanstack/react-query';
-import { createClient } from '@tuturuuu/supabase/next/client';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { DEV_MODE } from '@tuturuuu/utils/constants';
 import { useCallback, useEffect, useRef } from 'react';
 import type { BoardRealtimePayload } from './useBoardRealtime.types';
 
-type TaskRelationRow = {
-  id: string;
-  assignees?: Array<{ user: NonNullable<Task['assignees']>[number] | null }>;
-  labels?: Array<{ label: NonNullable<Task['labels']>[number] | null }>;
-  projects?: Array<{ project: NonNullable<Task['projects']>[number] | null }>;
-};
-
 type CallbackRef<T> = {
   current: T | undefined;
 };
@@ -30,9 +22,6 @@ type UseBoardRealtimeEventHandlerOptions = {
   onTaskRelationsChangeRef?: CallbackRef<(taskIds: string[]) => void>;
 };
 
-const isDefined = <T>(value: T | null | undefined): value is T =>
-  value !== null && value !== undefined;
-
 function mergeRealtimeTask(
   old: Task[] | undefined,
   taskData: Partial<Task> & { id: string }
@@ -202,6 +191,21 @@ function invalidateTaskMembershipQueries(
   void queryClient.invalidateQueries({ queryKey: ['my-completed-tasks'] });
 }
 
+function invalidateTaskRelationQueries(
+  queryClient: QueryClient,
+  boardId: string,
+  taskIds: string[]
+) {
+  void queryClient.invalidateQueries({
+    predicate: (query) =>
+      Array.isArray(query.queryKey) &&
+      query.queryKey[0] === 'workspaceTask' &&
+      typeof query.queryKey[2] === 'string' &&
+      taskIds.includes(query.queryKey[2]),
+  });
+  invalidateTaskMembershipQueries(queryClient, boardId);
+}
+
 export function useBoardRealtimeEventHandler({
   boardId,
   queryClient,
@@ -211,90 +215,27 @@ export function useBoardRealtimeEventHandler({
   onTaskRelationsChangeRef,
 }: UseBoardRealtimeEventHandlerOptions) {
   // Collects task IDs from task:relations-changed events over 150ms
-  // and batch-fetches all relations in one query.
+  // and reconciles relation-bearing queries together. Visible board task arrays
+  // stay patched in place by the sender and by board background revalidation.
   const pendingRelationIdsRef = useRef<Set<string>>(new Set());
-  const relationFetchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null
-  );
+  const relationInvalidationTimerRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
 
-  const fetchBatchedRelations = useCallback(async () => {
-    relationFetchTimerRef.current = null;
+  const invalidateBatchedRelations = useCallback(() => {
+    relationInvalidationTimerRef.current = null;
     const taskIds = [...pendingRelationIdsRef.current];
     pendingRelationIdsRef.current.clear();
     if (taskIds.length === 0) return;
 
     if (DEV_MODE) {
       console.log(
-        `[useBoardRealtime] Batch-fetching relations for ${taskIds.length} task(s):`,
+        `[useBoardRealtime] Reconciling relations for ${taskIds.length} task(s):`,
         taskIds
       );
     }
 
-    try {
-      const supabase = createClient();
-      const { data, error } = await supabase
-        .from('tasks')
-        .select(
-          `
-            id,
-            assignees:task_assignees(
-              user:users(id, display_name, avatar_url)
-            ),
-            labels:task_labels(
-              label:workspace_task_labels(id, name, color, created_at)
-            ),
-            projects:task_project_tasks(
-              project:task_projects(id, name, status)
-            )
-          `
-        )
-        .in('id', taskIds);
-
-      if (error || !data) {
-        if (DEV_MODE) {
-          console.error(
-            '[useBoardRealtime] Failed to batch-fetch relations:',
-            error
-          );
-        }
-        return;
-      }
-
-      const relationsMap = new Map<
-        string,
-        {
-          assignees: NonNullable<Task['assignees']>;
-          labels: NonNullable<Task['labels']>;
-          projects: NonNullable<Task['projects']>;
-        }
-      >();
-      for (const d of data as TaskRelationRow[]) {
-        relationsMap.set(d.id, {
-          assignees: d.assignees?.map((a) => a.user).filter(isDefined) || [],
-          labels: d.labels?.map((l) => l.label).filter(isDefined) || [],
-          projects: d.projects?.map((p) => p.project).filter(isDefined) || [],
-        });
-      }
-
-      updateBoardTaskCaches(queryClient, boardId, (old) => {
-        if (!old) return old;
-        return old.map((task) => {
-          const relations = relationsMap.get(task.id);
-          return relations ? { ...task, ...relations } : task;
-        });
-      });
-      for (const [taskId, relations] of relationsMap.entries()) {
-        patchWorkspaceTaskCaches(queryClient, { id: taskId, ...relations });
-        patchMyTasksCaches(queryClient, { id: taskId, ...relations });
-      }
-    } catch (err) {
-      if (DEV_MODE) {
-        console.error(
-          '[useBoardRealtime] Error batch-fetching relations:',
-          err
-        );
-      }
-    }
+    invalidateTaskRelationQueries(queryClient, boardId, taskIds);
   }, [boardId, queryClient]);
 
   const handleBoardRealtimeEvent = useCallback(
@@ -464,10 +405,13 @@ export function useBoardRealtimeEventHandler({
           onTaskRelationsChangeRef?.current?.(ids);
         }
 
-        if (relationFetchTimerRef.current) {
-          clearTimeout(relationFetchTimerRef.current);
+        if (relationInvalidationTimerRef.current) {
+          clearTimeout(relationInvalidationTimerRef.current);
         }
-        relationFetchTimerRef.current = setTimeout(fetchBatchedRelations, 150);
+        relationInvalidationTimerRef.current = setTimeout(
+          invalidateBatchedRelations,
+          150
+        );
         return;
       }
 
@@ -485,7 +429,7 @@ export function useBoardRealtimeEventHandler({
     },
     [
       boardId,
-      fetchBatchedRelations,
+      invalidateBatchedRelations,
       onListChangeRef,
       onTaskRelationsChangeRef,
       onTaskChangeRef,
@@ -496,9 +440,9 @@ export function useBoardRealtimeEventHandler({
 
   useEffect(() => {
     return () => {
-      if (relationFetchTimerRef.current) {
-        clearTimeout(relationFetchTimerRef.current);
-        relationFetchTimerRef.current = null;
+      if (relationInvalidationTimerRef.current) {
+        clearTimeout(relationInvalidationTimerRef.current);
+        relationInvalidationTimerRef.current = null;
       }
       pendingRelationIdsRef.current.clear();
     };

package/src/lib/workspace-actions.ts

@@ -403,13 +403,9 @@ export async function fetchWorkspaceSummaries({
 
     guestWorkspaceById.set(workspaceId, {
       id: workspaceId,
-      name: workspace?.personal
-        ? displayLabel || workspace?.name || 'Personal'
-        : workspace?.name || 'Untitled',
+      name: workspace?.name || (workspace?.personal ? 'Personal' : 'Untitled'),
       personal: workspace?.personal ?? false,
-      avatar_url: workspace?.personal
-        ? userAvatarUrl || workspace?.avatar_url || null
-        : workspace?.avatar_url || null,
+      avatar_url: workspace?.avatar_url || null,
       logo_url: workspace?.logo_url || null,
       created_by_me: workspace?.creator_id === userId,
       tier: resolveWorkspaceTier(workspace ?? {}, productTiersById),