Feat/setup y.js undo manager

app/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useEffect, Suspense } from 'react';
+import { useEffect, Suspense, useCallback, useMemo } from 'react';
 import dynamic from 'next/dynamic';
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { BoardProvider } from '@/features/board/hooks/use-board-state';
 import { BoardSwitcher, useBoardStore } from '@/features/storage';
 import { LoadingLogo } from '@thinkix/ui';
@@ -12,8 +12,9 @@ import {
   CollaborationStatusBar,
   CollaborativeAppMenu,
   CollaborateButton,
+  CollaborationStartDialog,
 } from '@/features/collaboration';
-import { useCollaborationState } from '@thinkix/collaboration';
+import { useCollaborationState, useCollaborationSession } from '@thinkix/collaboration';
 import { BoardLayoutSlots } from '@/features/board';
 
 const BoardCanvas = dynamic(
@@ -50,6 +51,8 @@ const AppMenu = dynamic(
 
 function BoardAppContent() {
   const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
   const roomFromUrl = searchParams.get('room');
 
   const { 
@@ -65,15 +68,75 @@ function BoardAppContent() {
 
   const activeRoomId = roomFromUrl || currentBoard?.id || null;
   const { isEnabled, enableCollaboration, disableCollaboration } = useCollaborationState(activeRoomId ?? undefined);
+
+  const session = useCollaborationSession(roomFromUrl);
 
   useEffect(() => {
     initialize();
   }, [initialize]);
 
+  useEffect(() => {
+    if (roomFromUrl && !isEnabled && !session.wasDisabled) {
+      enableCollaboration(roomFromUrl);
+    }
+  }, [roomFromUrl, isEnabled, enableCollaboration, session.wasDisabled]);
+
   const handleCreateBoard = async (name: string) => {
     await createBoard(name);
   };
 
+  const handleDialogClose = useCallback((open: boolean) => {
+    if (!open && roomFromUrl) {
+      session.markDialogSeen();
+      session.clearInitiator();
+    }
+  }, [roomFromUrl, session]);
+
+  const roomUrl = useMemo(() => {
+    if (typeof window === 'undefined' || !roomFromUrl) return '';
+    const url = new URL(window.location.href);
+    url.searchParams.set('room', roomFromUrl);
+    return url.toString();
+  }, [roomFromUrl]);
+
+  const showStartDialog = useMemo(() => {
+    return isEnabled && !!roomFromUrl && session.isInitiator && !session.wasDialogSeen;
+  }, [isEnabled, roomFromUrl, session.isInitiator, session.wasDialogSeen]);
+
+  const handleEnableCollaboration = useCallback(() => {
+    const roomId = crypto.randomUUID();
+
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('room', roomId);
+    router.push(`${pathname}?${params.toString()}`);
+
+    enableCollaboration(roomId);
+  }, [pathname, searchParams, router, enableCollaboration]);
+
+  useEffect(() => {
+    if (roomFromUrl && session.isInitiator === false) {
+      session.markAsInitiator();
+      session.clearDisabled();
+    }
+  }, [roomFromUrl, session]);
+
+  const handleDisableCollaboration = useCallback(() => {
+    disableCollaboration();
+
+    if (roomFromUrl) {
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete('room');
+      const newSearch = params.toString();
+      router.push(newSearch ? `${pathname}?${newSearch}` : pathname);
+    }
+  }, [disableCollaboration, roomFromUrl, pathname, searchParams, router]);
+
+  useEffect(() => {
+    if (!roomFromUrl && session.wasDisabled === false) {
+      session.markAsDisabled();
+    }
+  }, [roomFromUrl, session]);
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center w-screen h-screen bg-background text-foreground">
@@ -94,7 +157,7 @@ function BoardAppContent() {
       />
       <AppMenu 
         boardName={currentBoard?.name} 
-        onEnableCollaboration={activeRoomId && !isEnabled ? () => enableCollaboration(activeRoomId) : undefined}
+        onEnableCollaboration={!isEnabled ? handleEnableCollaboration : undefined}
       />
     </>
   );
@@ -111,7 +174,7 @@ function BoardAppContent() {
       />
       <CollaborativeAppMenu 
         boardName={currentBoard?.name} 
-        onDisableCollaboration={disableCollaboration}
+        onDisableCollaboration={handleDisableCollaboration}
         roomId={activeRoomId!}
       />
     </>
@@ -124,47 +187,63 @@ function BoardAppContent() {
     </>
   );
 
-  const topRightSlot = activeRoomId && !isEnabled ? (
-    <CollaborateButton onClick={() => enableCollaboration(activeRoomId)} />
+  const topRightSlot = !isEnabled ? (
+    <CollaborateButton onClick={handleEnableCollaboration} />
   ) : undefined;
 
   const collaborativeTopRightSlot = (
     <CollaborationStatusBar 
       roomId={activeRoomId!} 
-      onDisableCollaboration={disableCollaboration} 
+      onDisableCollaboration={handleDisableCollaboration} 
     />
   );
 
   if (isEnabled && activeRoomId) {
     return (
-      <Room roomId={activeRoomId} initialElements={currentBoard?.elements}>
-        <CollaborativeBoard>
-          <main className="w-screen h-screen overflow-hidden bg-background">
-            <BoardCanvas boardData={currentBoard}>
-              <BoardToolbar />
-              <BoardLayoutSlots
-                topLeft={collaborativeTopLeftSlot}
-                bottomLeft={bottomLeftSlot}
-                topRight={collaborativeTopRightSlot}
-              />
-            </BoardCanvas>
-          </main>
-        </CollaborativeBoard>
-      </Room>
+      <>
+        <Room roomId={activeRoomId} initialElements={currentBoard?.elements}>
+          <CollaborativeBoard>
+            <main className="w-screen h-screen overflow-hidden bg-background">
+              <BoardCanvas boardData={currentBoard}>
+                <BoardToolbar />
+                <BoardLayoutSlots
+                  topLeft={collaborativeTopLeftSlot}
+                  bottomLeft={bottomLeftSlot}
+                  topRight={collaborativeTopRightSlot}
+                />
+              </BoardCanvas>
+            </main>
+          </CollaborativeBoard>
+        </Room>
+
+        <CollaborationStartDialog
+          open={showStartDialog}
+          onOpenChange={handleDialogClose}
+          roomUrl={roomUrl}
+        />
+      </>
     );
   }
 
   return (
-    <main className="w-screen h-screen overflow-hidden bg-background">
-      <BoardCanvas boardData={currentBoard}>
-        <BoardToolbar />
-        <BoardLayoutSlots
-          topLeft={topLeftSlot}
-          bottomLeft={bottomLeftSlot}
-          topRight={topRightSlot}
-        />
-      </BoardCanvas>
-    </main>
+    <>
+      <main className="w-screen h-screen overflow-hidden bg-background">
+        <BoardCanvas boardData={currentBoard}>
+          <BoardToolbar />
+          <BoardLayoutSlots
+            topLeft={topLeftSlot}
+            bottomLeft={bottomLeftSlot}
+            topRight={topRightSlot}
+          />
+        </BoardCanvas>
+      </main>
+
+      <CollaborationStartDialog
+        open={showStartDialog}
+        onOpenChange={handleDialogClose}
+        roomUrl={roomUrl}
+      />
+    </>
   );
 }