Board local changes merge preview

.env.example

@@ -1,13 +1,17 @@
 MONGODB_URI=mongodb://user:user1234@localhost:27017/collaboard?authSource=admin
 NEXT_PUBLIC_WEBSOCKET_URL="ws://localhost:3000/api/socket"
-
+MONGODB_DB_NAME=collaboard
+DOCS_COLLECTION_NAME=docs
 # `openssl rand -base64 32`
 AUTH_SECRET=
 AUTH_URL=
-
-#mariadb
+HOSTNAME=localhost
+PORT=3000
 DATABASE_URL="mysql://root:root1234@localhost:3306/collaboard"
 TWILIO_API_KEY=
-TWILIO_EMAIL=
+[email protected]
+TWILIO_HOST=smtp.sendgrid.net
+TWILIO_USERNAME=apikey
+TWILIO_PORT=587
 DOMAIN=127.0.0.1:3000
 

components/board/board-provider.tsx

@@ -1,54 +1,62 @@
 "use client";
 import { useEffect, useState, useRef } from "react";
 import { RepoContext } from "@automerge/automerge-repo-react-hooks";
-import { Repo } from "@automerge/automerge-repo";
 import Board from "@/components/board/board";
 import { ClientSyncService } from "@/lib/services/client-doc/client-doc-service";
 import { ClientSyncContext } from "./context/client-doc-context";
 import { BoardContextProvider } from "./context/board-context";
 import { NetworkStatusProvider } from "@/components/providers/network-status-provider";
+import { Team as PrismaTeam, Board as PrismaBoard } from "@prisma/client";
 
 interface BoardState {
   clientSyncService: ClientSyncService | null;
+  synced: boolean;
 }
 
 export function BoardProvider({
-  boardId,
-  docUrl,
+  board,
+  team,
 }: {
-  boardId: string;
-  docUrl: string;
+  board: PrismaBoard;
+  team: PrismaTeam;
 }) {
   const [state, setState] = useState<BoardState>({
     clientSyncService: null,
+    synced: false,
   });
   const isInitialized = useRef(false);
 
   useEffect(() => {
     const initializeClientSyncService = async () => {
+      let synced = false;
       if (isInitialized.current || state.clientSyncService) {
         return;
       }
       isInitialized.current = true;
-      const clientSyncService = new ClientSyncService({ docUrl });
+      const clientSyncService = new ClientSyncService({
+        docUrl: board.docUrl as string,
+      });
       await clientSyncService.initializeRepo();
-      if (clientSyncService.canConnect()) {
-        console.log("connecting on entry");
+      if (await clientSyncService.canConnect()) {
+        console.log("connecting");
         await clientSyncService.connect();
+        synced = true;
+      } else {
+        console.log("Staying disconnected");
       }
       setState({
         clientSyncService,
+        synced,
       });
     };
     initializeClientSyncService();
 
     return () => {
-      console.log("disconnecting on exit");
       if (state.clientSyncService) {
         state.clientSyncService.disconnect();
       }
     };
-  }, [docUrl]);
+  }, [board.docUrl]);
 
   if (!state.clientSyncService) {
     return <div>Loading board...</div>;
@@ -60,8 +68,8 @@ export function BoardProvider({
         <ClientSyncContext.Provider
           value={{ clientSyncService: state.clientSyncService }}
         >
-          <BoardContextProvider>
-            <Board />
+          <BoardContextProvider syncedInitial={state.synced}>
+            <Board team={team} board={board} />
           </BoardContextProvider>
         </ClientSyncContext.Provider>
       </RepoContext.Provider>

components/board/board.tsx

@@ -19,13 +19,24 @@ import { ActiveUsersList } from "@/components/board/components/active-users-list
 import { SyncStatusControl } from "@/components/board/components/sync-status-control";
 import { ResetPositionButton } from "@/components/board/components/reset-position-button";
 import { ShapeColorPalette } from "@/components/board/components/shape-color-palette";
+import { LocalChangesHeader } from "@/components/board/components/local-changes-header";
 import { KonvaEventObject } from "konva/lib/Node";
 import { Text } from "konva/lib/shapes/Text";
+import { useWindowDimensions } from "@/components/board/hooks/use-window-dimensions";
+import { Team as PrismaTeam, Board as PrismaBoard } from "@prisma/client";
+import { BoardHeader } from "./components/board-header";
 
-export default function Board() {
+export default function Board({
+  team,
+  board,
+}: {
+  team: PrismaTeam;
+  board: PrismaBoard;
+}) {
   const clientSyncService = useClientSync();
   const docUrl = clientSyncService.getDocUrl() as AnyDocumentId;
   const [localDoc] = useDocument<LayerSchema>(docUrl);
+  const { width, height } = useWindowDimensions();
 
   const {
     brushColor,
@@ -100,66 +111,74 @@ export default function Board() {
 
   return (
     <div className="relative w-full h-full">
-      <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
-        <div className="z-10 flex-shrink">
-          <SideToolbar />
-        </div>
-        {isOnline && activeUsers && activeUsers.length > 0 && (
-          <ActiveUsersList users={activeUsers} />
-        )}
-        <div>
-          <Stage
-            width={window.innerWidth}
-            height={window.innerHeight}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
-            onClick={handleStageClick}
-            x={stagePosition.x}
-            y={stagePosition.y}
-          >
-            <Layer>
-              {isOnline &&
-                localDoc &&
-                objectEditors &&
-                Object.entries(objectEditors).map(([objectId, editors]) => (
-                  <ObjectEditIndicator
-                    key={`edit-indicator-${objectId}`}
-                    objectId={objectId}
-                    editors={editors}
-                    shape={localDoc[objectId]}
-                  />
-                ))}
-              {localDoc &&
-                (Object.entries(localDoc) as [string, KonvaNodeSchema][]).map(
-                  ([id, shape]) => (
-                    <ShapeRenderer
-                      key={id}
-                      id={id}
-                      shape={shape}
-                      mode={mode as BoardMode}
-                      onMouseDown={handleShapeMouseDown}
-                      onDragStart={handleDragStart}
-                      onDragEnd={handleDragEnd}
-                      onTransformEnd={handleTransformEnd}
-                      onTextDblClick={handleTextDblClick}
+      <div className="flex flex-col h-screen">
+        <BoardHeader
+          boardName={board.name}
+          teamName={team.name}
+          teamId={team.id}
+        />
+        <LocalChangesHeader />
+        <div className="flex flex-1 md:overflow-hidden">
+          <div className="z-10 flex-shrink">
+            <SideToolbar teamId={team.id} />
+          </div>
+          {isOnline && activeUsers && activeUsers.length > 0 && (
+            <ActiveUsersList users={activeUsers} />
+          )}
+          <div>
+            <Stage
+              width={width}
+              height={height}
+              onMouseDown={handleMouseDown}
+              onMouseMove={handleMouseMove}
+              onMouseUp={handleMouseUp}
+              onClick={handleStageClick}
+              x={stagePosition.x}
+              y={stagePosition.y}
+            >
+              <Layer>
+                {isOnline &&
+                  localDoc &&
+                  objectEditors &&
+                  Object.entries(objectEditors).map(([objectId, editors]) => (
+                    <ObjectEditIndicator
+                      key={`edit-indicator-${objectId}`}
+                      objectId={objectId}
+                      editors={editors}
+                      shape={localDoc[objectId]}
                     />
-                  )
+                  ))}
+                {localDoc &&
+                  (Object.entries(localDoc) as [string, KonvaNodeSchema][]).map(
+                    ([id, shape]) => (
+                      <ShapeRenderer
+                        key={id}
+                        id={id}
+                        shape={shape}
+                        mode={mode as BoardMode}
+                        onMouseDown={handleShapeMouseDown}
+                        onDragStart={handleDragStart}
+                        onDragEnd={handleDragEnd}
+                        onTransformEnd={handleTransformEnd}
+                        onTextDblClick={handleTextDblClick}
+                      />
+                    )
+                  )}
+                {localPoints && localPoints.length > 0 && (
+                  <Line
+                    key={currentLineId}
+                    points={localPoints}
+                    stroke={brushColor}
+                    strokeWidth={brushSize}
+                    lineCap="round"
+                    lineJoin="round"
+                    tension={0.5}
+                  />
                 )}
-              {localPoints && localPoints.length > 0 && (
-                <Line
-                  key={currentLineId}
-                  points={localPoints}
-                  stroke={brushColor}
-                  strokeWidth={brushSize}
-                  lineCap="round"
-                  lineJoin="round"
-                  tension={0.5}
-                />
-              )}
-              <Transformer ref={transformerRef} />
-            </Layer>
-          </Stage>
+                <Transformer ref={transformerRef} />
+              </Layer>
+            </Stage>
+          </div>
         </div>
       </div>
       {editingText !== null && textPosition && (

components/board/components/active-users-list.tsx

@@ -37,7 +37,7 @@ export const ActiveUsersList = ({ users }: ActiveUsersListProps) => {
   };
 
   return (
-    <div className="absolute top-4 right-4 z-20 bg-white/90 rounded-lg shadow-md p-2 border border-gray-200">
+    <div className="absolute top-24 right-4 z-20 bg-white/90 rounded-lg shadow-md p-2 border border-gray-200">
       <div className="flex items-center justify-between mb-2">
         <h3 className="text-sm font-medium text-gray-700 flex items-center">
           <span className="mr-1">👥</span>

components/board/components/board-header.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+
+interface BoardHeaderProps {
+  boardName: string;
+  teamName: string;
+  teamId: string;
+}
+
+export const BoardHeader = ({
+  boardName,
+  teamName,
+  teamId,
+}: BoardHeaderProps) => {
+  return (
+    <div className="bg-white border-b px-4 py-2">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <span>
+          <Link href={`/teams/${teamId}/boards`}>{teamName}</Link>
+        </span>
+        <span>/</span>
+        <span className="font-medium text-foreground">{boardName}</span>
+      </div>
+    </div>
+  );
+};

components/board/components/local-changes-header.tsx

@@ -0,0 +1,50 @@
+import { useContext } from "react";
+import { BoardContext } from "../context/board-context";
+import { AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useNetworkStatusContext } from "@/components/providers/network-status-provider";
+import { useRouter } from "next/router";
+
+export const LocalChangesHeader = () => {
+  const { networkStatus } = useNetworkStatusContext();
+  const { synced, isOnline } = useContext(BoardContext);
+  const router = useRouter();
+  const handleSyncChanges = async () => {
+    if (networkStatus !== "ONLINE") {
+      console.log("Cannot sync changes when offline");
+      return;
+    }
+    const boardId = router.query.id as string;
+    router.push(`/boards/${boardId}/preview`);
+  };
+
+  if (synced || networkStatus === "OFFLINE" || isOnline) {
+    return null;
+  }
+
+  return (
+    <div className="w-full bg-yellow-50 border-b border-yellow-400">
+      <div className="max-w-7xl mx-auto px-4 py-2">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <AlertCircle
+              className="h-4 w-4 text-yellow-400"
+              aria-hidden="true"
+            />
+            <p className="text-sm text-yellow-700">
+              You have local changes that need to be synced
+            </p>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleSyncChanges}
+            className="bg-white hover:bg-yellow-50"
+          >
+            Go to Preview
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};