@tuturuuu/ui 0.37.1 → 0.38.0

package/src/hooks/use-workspace-presence.ts

@@ -1,8 +1,8 @@
 'use client';
 
+import type { RealtimePresenceState } from '@tuturuuu/internal-api/realtime';
+import { createRealtimeClient } from '@tuturuuu/internal-api/realtime';
 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';
@@ -149,14 +149,14 @@ export function useWorkspacePresence({
     if (setupPromiseRef.current) return setupPromiseRef.current;
 
     const promise = (async (): Promise<boolean> => {
-      const supabase = createClient();
+      const realtime = createRealtimeClient();
 
       try {
         if (isCleanedUpRef.current) return false;
 
         const {
           data: { user },
-        } = await supabase.auth.getUser();
+        } = await realtime.auth.getUser();
 
         if (!user?.id || isCleanedUpRef.current) return false;
 
@@ -184,12 +184,12 @@ export function useWorkspacePresence({
 
         // Clean up any stale channel
         if (channelRef.current) {
-          await supabase.removeChannel(channelRef.current);
+          await realtime.removeChannel(channelRef.current);
           channelRef.current = null;
           lastTrackSignatureRef.current = null;
         }
 
-        const channel = supabase.channel(channelKey, {
+        const channel = realtime.channel(channelKey, {
           config: {
             presence: {
               key: user.id,
@@ -238,7 +238,7 @@ export function useWorkspacePresence({
                   setupPromiseRef.current = null;
                   lastTrackSignatureRef.current = null;
                   if (deadCh) {
-                    supabase.removeChannel(deadCh).catch(() => {});
+                    realtime.removeChannel(deadCh).catch(() => {});
                   }
                   if (
                     retryCountRef.current < MAX_RETRIES &&
@@ -269,7 +269,7 @@ export function useWorkspacePresence({
                     setupPromiseRef.current = null;
                     lastTrackSignatureRef.current = null;
                     if (deadCh) {
-                      supabase.removeChannel(deadCh).catch(() => {});
+                      realtime.removeChannel(deadCh).catch(() => {});
                     }
                     // Attempt reconnection
                     if (retryCountRef.current < MAX_RETRIES) {
@@ -320,7 +320,7 @@ export function useWorkspacePresence({
       setupPromiseRef.current = null;
       if (channelRef.current) {
         channelRef.current.untrack?.().catch(() => {});
-        createClient().removeChannel(channelRef.current);
+        createRealtimeClient().removeChannel(channelRef.current);
         channelRef.current = null;
         lastTrackSignatureRef.current = null;
       }

package/src/hooks/use-workspace-user.ts

@@ -3,6 +3,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { getCurrentUserProfile } from '@tuturuuu/internal-api/users';
 import type { WorkspaceUser } from '@tuturuuu/types/primitives/WorkspaceUser';
+import { useWorkspaceActor } from './use-workspace-visibility';
 
 /**
  * Hook to fetch the current workspace user with their private details
@@ -10,11 +11,18 @@ import type { WorkspaceUser } from '@tuturuuu/types/primitives/WorkspaceUser';
  *
  * @returns Query object with user data, loading state, and error info
  */
-export function useWorkspaceUser() {
-  return useQuery({
-    queryKey: ['workspace-user'],
+export function useWorkspaceUser(actorId?: string) {
+  const actor = useWorkspaceActor();
+  const resolvedActorId = actorId ?? actor?.actorId;
+  const query = useQuery({
+    queryKey: ['workspace-user', resolvedActorId],
+    enabled: Boolean(actor) && actor?.actorId === resolvedActorId,
     queryFn: async (): Promise<WorkspaceUser> => {
+      actor!.assertActive();
       const data = await getCurrentUserProfile();
+      actor!.assertActive();
+      if (data.id !== resolvedActorId)
+        throw new Error('Workspace account changed');
       return {
         id: data.id,
         email: data.email,
@@ -30,4 +38,8 @@ export function useWorkspaceUser() {
     gcTime: 10 * 60 * 1000, // Keep cached data for 10 minutes
     retry: 1, // Retry once on failure
   });
+  return {
+    ...query,
+    data: actor?.actorId === resolvedActorId ? query.data : undefined,
+  };
 }

package/src/hooks/use-workspace-visibility.ts

@@ -0,0 +1,234 @@
+'use client';
+
+import {
+  type QueryClient,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { InternalApiError } from '@tuturuuu/internal-api/client';
+import {
+  getCurrentUserHiddenWorkspaces,
+  updateCurrentUserHiddenWorkspace,
+} from '@tuturuuu/internal-api/users';
+import {
+  createContext,
+  createElement,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+const controls = new WeakMap<
+  QueryClient,
+  Map<string, { revision: number; pending: Set<string> }>
+>();
+function ownerControl(client: QueryClient, actorId: string) {
+  let actors = controls.get(client);
+  if (!actors) {
+    actors = new Map();
+    controls.set(client, actors);
+  }
+  let control = actors.get(actorId);
+  if (!control) {
+    control = { revision: 0, pending: new Set() };
+    actors.set(actorId, control);
+  }
+  return control;
+}
+
+type ActorScope = {
+  actorId: string;
+  lifetime: { active: boolean };
+  assertActive: () => void;
+};
+const ActorContext = createContext<ActorScope | null>(null);
+
+/** Feed only a server-verified actor; preferences never become membership data. */
+export function WorkspaceVisibilityProvider({
+  actorId,
+  children,
+}: {
+  actorId: string;
+  children: ReactNode;
+}) {
+  const parent = useContext(ActorContext);
+  const current = useRef(actorId);
+  current.current = actorId;
+  const scope = useMemo(() => {
+    if (parent?.actorId === actorId) return parent;
+    const lifetime = { active: true };
+    return {
+      actorId,
+      lifetime,
+      assertActive() {
+        parent?.assertActive();
+        if (
+          !lifetime.active ||
+          current.current !== actorId ||
+          (parent && parent.actorId !== actorId)
+        ) {
+          throw new Error('Workspace account changed');
+        }
+      },
+    };
+  }, [actorId, parent]);
+  const client = useQueryClient();
+  useEffect(() => {
+    if (scope === parent) return;
+    scope.lifetime.active = true;
+    return () => {
+      scope.lifetime.active = false;
+      controls.get(client)?.delete(scope.actorId);
+      // A private cache is never retained across logout/account replacement.
+      client.removeQueries({ queryKey: ['workspace-hidden', scope.actorId] });
+      client.removeQueries({ queryKey: ['workspace-ui-list', scope.actorId] });
+      client.removeQueries({ queryKey: ['user-workspaces', scope.actorId] });
+      client.removeQueries({ queryKey: ['all-user-boards', scope.actorId] });
+      client.removeQueries({ queryKey: ['chat-workspaces', scope.actorId] });
+      client.removeQueries({ queryKey: ['task-source-boards', scope.actorId] });
+      client.removeQueries({ queryKey: ['workspace-user', scope.actorId] });
+      client.removeQueries({
+        queryKey: ['workspace-invitations', scope.actorId],
+      });
+      client.removeQueries({
+        predicate: (query) =>
+          query.queryKey[0] === 'global-command-launcher' &&
+          query.queryKey.includes(scope.actorId),
+      });
+      client.removeQueries({
+        queryKey: ['workspace-select-current-workspace', scope.actorId],
+      });
+    };
+  }, [scope, parent, client]);
+  return createElement(
+    ActorContext.Provider,
+    {
+      key: actorId,
+      value: parent && parent.actorId !== actorId ? null : scope,
+    },
+    children
+  );
+}
+
+export function useWorkspaceActor() {
+  return useContext(ActorContext);
+}
+
+export function useWorkspaceVisibility(enabled = true) {
+  const scope = useWorkspaceActor();
+  const actorId = scope?.actorId;
+  const client = useQueryClient();
+  const key = ['workspace-hidden', actorId] as const;
+  const control = ownerControl(client, actorId ?? 'signed-out');
+  const [pending, setPending] = useState<Set<string>>(new Set());
+  const [updateError, setUpdateError] = useState<Error | null>(null);
+  const query = useQuery({
+    queryKey: key,
+    enabled: enabled && Boolean(scope),
+    queryFn: async () => {
+      scope!.assertActive();
+      if (control.pending.size > 0) {
+        const optimistic = client.getQueryData<string[]>(key);
+        if (optimistic) return optimistic;
+      }
+      const requestRevision = control.revision;
+      const response = await getCurrentUserHiddenWorkspaces(actorId!);
+      scope!.assertActive();
+      // A refresh started before a mutation cannot overwrite its optimistic state.
+      if (requestRevision !== control.revision) {
+        return (
+          client.getQueryData<string[]>(key) ?? response.hiddenWorkspaceIds
+        );
+      }
+      return response.hiddenWorkspaceIds;
+    },
+    staleTime: 30_000,
+    retry: 1,
+  });
+  const accountDenied =
+    query.error instanceof InternalApiError &&
+    [401, 403, 409].includes(query.error.status);
+  const ids = accountDenied ? undefined : query.data;
+  async function setHidden(workspaceId: string, hidden: boolean) {
+    if (!scope || !ids || control.pending.has(workspaceId)) return;
+    scope.assertActive();
+    const ownerKey = ['workspace-hidden', scope.actorId] as const;
+    const wasHidden = ids.includes(workspaceId);
+    control.pending.add(workspaceId);
+    setPending(new Set(control.pending));
+    setUpdateError(null);
+    control.revision++;
+    await client.cancelQueries({ queryKey: ownerKey });
+    scope.assertActive();
+    client.setQueryData<string[]>(ownerKey, (current = []) =>
+      hidden
+        ? [...new Set([...current, workspaceId])]
+        : current.filter((id) => id !== workspaceId)
+    );
+    try {
+      await updateCurrentUserHiddenWorkspace(
+        workspaceId,
+        hidden,
+        scope.actorId
+      );
+      scope.assertActive();
+    } catch (error) {
+      try {
+        scope.assertActive();
+      } catch {
+        return;
+      }
+      client.setQueryData<string[]>(ownerKey, (current = []) =>
+        wasHidden
+          ? [...new Set([...current, workspaceId])]
+          : current.filter((id) => id !== workspaceId)
+      );
+      setUpdateError(
+        error instanceof Error
+          ? error
+          : new Error('Unable to update Hidden workspaces')
+      );
+      throw error;
+    } finally {
+      control.pending.delete(workspaceId);
+      try {
+        scope.assertActive();
+        setPending(new Set(control.pending));
+        if (control.pending.size === 0) {
+          void client.invalidateQueries({ queryKey: ownerKey });
+        }
+      } catch {
+        /* An old account cannot publish into the next account. */
+      }
+    }
+  }
+  return {
+    ...query,
+    refetch: async () => {
+      if (!scope) return null;
+      try {
+        scope.assertActive();
+      } catch {
+        return null;
+      }
+      const result = await query.refetch();
+      try {
+        scope.assertActive();
+      } catch {
+        return null;
+      }
+      if (!result.error) setUpdateError(null);
+      return result;
+    },
+    accountDenied,
+    actorId,
+    hiddenIds: ids ?? [],
+    known: ids !== undefined,
+    pending,
+    updateError,
+    setHidden,
+  };
+}

package/src/hooks/use-yjs-collaboration.ts

@@ -37,7 +37,7 @@ export interface YjsCollaborationResult {
 }
 
 /**
- * Hook for managing Yjs collaboration with Supabase Realtime.
+ * Hook for managing Yjs collaboration with Cloudflare realtime.
  *
  * Uses deferred cleanup so that React StrictMode's double-invoke cycle
  * (mount → cleanup → remount) reuses the existing SupabaseProvider instead
@@ -72,17 +72,27 @@ export function useYjsCollaboration(
   // Ref that event listeners check — survives StrictMode cleanup/remount
   const mountedRef = useRef(false);
 
-  // Create Yjs document and awareness (stable references)
-  const doc = useMemo(() => (enabled ? new Y.Doc() : null), [enabled]);
-
-  const awareness = useMemo(
-    () => (enabled && doc ? new Awareness(doc) : null),
-    [enabled, doc]
+  const hasUser = !!user;
+  // Create the document without starting awareness timers during render.
+  const documentScope = JSON.stringify([
+    channel,
+    tableName,
+    columnName,
+    id,
+    user?.id,
+  ]);
+  const doc = useMemo(
+    () => (enabled && hasUser ? new Y.Doc({ guid: documentScope }) : null),
+    [enabled, hasUser, documentScope]
   );
 
+  const awareness =
+    providerState && providerState.id === doc?.clientID
+      ? providerState.awareness
+      : null;
+
   // Stabilize callback and user refs — these should never cause provider
   // destruction/recreation.
-  const hasUser = !!user;
   const userRef = useRef(user);
   userRef.current = user;
   const onSyncRef = useRef(onSync);
@@ -94,19 +104,22 @@ export function useYjsCollaboration(
 
   // Provider lifecycle: create/destroy based on channel config
   useEffect(() => {
-    if (!enabled || !doc || !awareness || !hasUser) return;
+    if (!enabled || !doc || !hasUser) return;
 
     mountedRef.current = true;
 
     // ── StrictMode reuse path ───────────────────────────────────────
     // If a pending deferred destruction exists, cancel it and reuse
-    // the existing provider. This prevents the Supabase Realtime
-    // "leave then immediate re-join" race that causes a 10s timeout.
+    // the existing provider only when its document identity still matches.
     if (destroyTimerRef.current) {
       clearTimeout(destroyTimerRef.current);
       destroyTimerRef.current = null;
 
-      if (providerRef.current && !providerRef.current.destroyed) {
+      if (
+        providerRef.current &&
+        !providerRef.current.destroyed &&
+        providerRef.current.id === doc.clientID
+      ) {
         console.log('♻️ Reusing existing SupabaseProvider (StrictMode)');
         return () => {
           mountedRef.current = false;
@@ -133,6 +146,7 @@ export function useYjsCollaboration(
     }
 
     const supabase = createClient();
+    const awareness = new Awareness(doc);
 
     // Set initial awareness state
     const currentUser = userRef.current;
@@ -152,6 +166,7 @@ export function useYjsCollaboration(
       tableName: tableName,
       columnName: columnName,
       awareness,
+      ownsDocument: true,
       resyncInterval: 30000,
       saveDebounceMs: saveDebounceMs ?? 300,
       loadState: loadDocumentState,
@@ -165,25 +180,25 @@ export function useYjsCollaboration(
     // Listen to provider events — use mountedRef so listeners stay valid
     // across StrictMode cleanup/remount without re-registration.
     provider.on('status', ([{ status }]) => {
-      if (!mountedRef.current) return;
+      if (!mountedRef.current || providerRef.current !== provider) return;
       console.log('📡 Provider status:', status);
       setConnected(status === 'connected');
     });
 
     provider.on('synced', ([syncState]) => {
-      if (!mountedRef.current) return;
+      if (!mountedRef.current || providerRef.current !== provider) return;
       console.log('🔄 Provider synced:', syncState);
       setSynced(syncState);
       onSyncRef.current?.(syncState);
     });
 
     provider.on('sync', ([syncState]) => {
-      if (!mountedRef.current) return;
+      if (!mountedRef.current || providerRef.current !== provider) return;
       console.log('🔄 Provider sync event:', syncState);
     });
 
     provider.on('save', (version) => {
-      if (!mountedRef.current) return;
+      if (!mountedRef.current || providerRef.current !== provider) return;
       console.log('💾 Document saved to database, version:', version);
       onSaveRef.current?.(version);
     });
@@ -196,7 +211,7 @@ export function useYjsCollaboration(
         channel: string;
         status: string;
       }) => {
-        if (!mountedRef.current) return;
+        if (!mountedRef.current || providerRef.current !== provider) return;
         console.error('❌ Provider error:', {
           message: errorInfo.message,
           channel: errorInfo.channel,
@@ -207,19 +222,19 @@ export function useYjsCollaboration(
     );
 
     provider.on('connect', () => {
-      if (!mountedRef.current) return;
+      if (!mountedRef.current || providerRef.current !== provider) return;
       console.log('✅ Provider connected');
     });
 
     provider.on('disconnect', () => {
-      if (!mountedRef.current) return;
+      if (!mountedRef.current || providerRef.current !== provider) return;
       console.log('🔌 Provider disconnected');
       setConnected(false);
       setSynced(false);
     });
 
     provider.on('dom-error', (error: DOMException) => {
-      if (!mountedRef.current) return;
+      if (!mountedRef.current || providerRef.current !== provider) return;
       console.warn(
         '⚠️ DOM reconciliation error handled gracefully:',
         error.message
@@ -227,7 +242,7 @@ export function useYjsCollaboration(
     });
 
     provider.on('reconnect-failed', () => {
-      if (!mountedRef.current) return;
+      if (!mountedRef.current || providerRef.current !== provider) return;
       // If page is visible (user is active but network dropped), restart
       // the backoff cycle after a short delay to avoid hammering
       if (
@@ -240,8 +255,8 @@ export function useYjsCollaboration(
         setTimeout(() => {
           if (
             mountedRef.current &&
-            providerRef.current &&
-            !providerRef.current.destroyed
+            providerRef.current === provider &&
+            !provider.destroyed
           ) {
             providerRef.current.resetAndReconnect();
           }
@@ -269,7 +284,6 @@ export function useYjsCollaboration(
     columnName,
     hasUser,
     doc,
-    awareness,
     enabled,
     broadcastDebounceMs,
     saveDebounceMs,
@@ -290,8 +304,12 @@ export function useYjsCollaboration(
   return {
     doc,
     awareness,
-    provider: providerState,
-    synced,
-    connected,
+    provider:
+      providerState && providerState.id === doc?.clientID
+        ? providerState
+        : null,
+    synced: !!providerState && providerState.id === doc?.clientID && synced,
+    connected:
+      !!providerState && providerState.id === doc?.clientID && connected,
   };
 }