fix: resolve Toolbar import issue

Author: coderomm

.github/workflows/cd_frontend.yml

@@ -22,6 +22,7 @@ jobs:
           file: ./docker/Dockerfile.frontend
           build-args: |
             DATABASE_URL=${{ secrets.DATABASE_URL }}
+            JWT_SECRET=${{ secrets.JWT_SECRET }}
           push: true
           tags: coderomm/collabydraw:${{ github.sha }}
       ## Step to deploy this to a VM

apps/collabydraw/components/toolbar.tsx apps/collabydraw/components/Toolsbar.tsxapps/collabydraw/components/toolbar.tsx renamed to apps/collabydraw/components/Toolsbar.tsx

@@ -8,7 +8,7 @@ interface ToolbarProps {
     onToolSelect: (tool: ToolType) => void
 }
 
-export default function Toolbar({ selectedTool, onToolSelect }: ToolbarProps) {
+export default function Toolsbar({ selectedTool, onToolSelect }: ToolbarProps) {
     return (
         <TooltipProvider delayDuration={0}>
             <header className="Tool_Bar flex items-center gap-1 p-1.5 rounded-lg Island">

apps/collabydraw/components/canvas/CanvasSheet.tsx

@@ -10,13 +10,13 @@ import { MainMenuStack } from "../MainMenuStack";
 import { ToolMenuStack } from "../ToolMenuStack";
 import SidebarTriggerButton from "../SidebarTriggerButton";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
-import Toolbar from "../Toolbar";
 import ScreenLoading from "../ScreenLoading";
 import CollaborationStart from "../CollaborationStartBtn";
 import { useWebSocket } from "@/hooks/useWebSocket";
 import { WsDataType } from "@repo/common/types";
 import { useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
+import Toolsbar from "../Toolsbar";
 
 export default function CanvasSheet({ roomName, roomId, userId, userName, token }: {
     roomName: string; roomId: string; userId: string; userName: string; token: string;
@@ -259,7 +259,7 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
 
                     </div>
                 )}
-                <Toolbar
+                <Toolsbar
                     selectedTool={canvasState.activeTool}
                     onToolSelect={(newTool: SetStateAction<ToolType>) =>
                         setCanvasState(prev => ({ ...prev, activeTool: typeof newTool === 'function' ? newTool(prev.activeTool) : newTool }))

apps/collabydraw/components/canvas/StandaloneCanvas.tsx

@@ -4,7 +4,6 @@ import { Game } from "@/draw/Game";
 import { BgFill, canvasBgLight, LOCALSTORAGE_CANVAS_KEY, Shape, StrokeEdge, StrokeFill, StrokeStyle, StrokeWidth, ToolType } from "@/types/canvas";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Scale } from "../Scale";
-import Toolbar from "../Toolbar";
 import { MobileNavbar } from "../mobile-navbar";
 import { useTheme } from "next-themes";
 import { MainMenuStack } from "../MainMenuStack";
@@ -17,6 +16,7 @@ import CollaborationStart from "../CollaborationStartBtn";
 import { cn } from "@/lib/utils";
 import UserRoomsList from "../UserRoomsList";
 import { useSession } from "next-auth/react";
+import Toolsbar from "../Toolsbar";
 
 export function StandaloneCanvas() {
     const { theme } = useTheme()
@@ -343,7 +343,7 @@ export function StandaloneCanvas() {
                         </div>
                     )}
 
-                    <Toolbar
+                    <Toolsbar
                         selectedTool={activeTool}
                         onToolSelect={handleToolSelect}
                     />

docker/Dockerfile.frontend

@@ -7,6 +7,7 @@ WORKDIR /usr/src/app
 
 # Add ARG for DATABASE_URL
 ARG DATABASE_URL
+ARG JWT_SECRET
 # ENV DATABASE_URL=${DATABASE_URL}
 
 # Copy necessary files for dependency installation
@@ -34,7 +35,9 @@ RUN prisma generate
 WORKDIR /usr/src/app
 
 # Build the application with database URL
-RUN DATABASE_URL=${DATABASE_URL} pnpm run build
+ENV DATABASE_URL=${DATABASE_URL}
+ENV JWT_SECRET=${JWT_SECRET}
+RUN pnpm run build
 
 # Expose the port
 EXPOSE 3000