feat/refactor/fix: Multiple updates and improvements

Author: coderomm

apps/collabydraw/actions/room.ts

@@ -168,3 +168,29 @@ export async function deleteRoom(data: { roomName: string }) {
     return { success: false, error: "Failed to delete room" };
   }
 }
+
+export async function getUserRooms() {
+  try {
+    const session = await getServerSession(authOptions);
+    const user = session?.user;
+
+    if (!user || !user.id) {
+      return { success: false, error: "User not authenticated" };
+    }
+
+    const rooms = await client.room.findMany({
+      where: { adminId: user.id },
+      select: {
+        id: true,
+        slug: true,
+        createdAt: true,
+        updatedAt: true,
+      },
+    });
+
+    return { success: true, rooms };
+  } catch (error) {
+    console.error("Failed to fetch user rooms:", error);
+    return { success: false, error: "Failed to fetch user rooms" };
+  }
+}

apps/collabydraw/app/(auth-layout)/auth/signin/page.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 
 export default function SignInPage() {
     return (
-        <Card className="border-0 shadow-none lg:shadow-2xl rounded-3xl mt-10 mx-auto px-6 py-8 lg:mt-0 lg:p-16 relative z-10 dark:!bg-surface-loww max-w-[480px] bg-yellow-light">
+        <Card className="border-0 shadow-none lg:shadow-2xl rounded-3xl m-0 mx-auto px-6 py-8 lg:p-16 relative z-10 max-w-[480px] bg-yellow-light">
             <CardHeader className="p-0">
                 <CardTitle className="text-2xl font-bold text-center">Hi there!</CardTitle>
                 <CardDescription className="text-sm pb-4 text-primary text-center">Enter your email to sign in to your account</CardDescription>

apps/collabydraw/app/(auth-layout)/auth/signup/page.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 
 export default function SignUpPage() {
     return (
-        <Card className="border-0 shadow-none lg:shadow-2xl rounded-3xl mt-10 mx-auto px-6 py-8 lg:mt-0 lg:p-16 relative z-10 dark:!bg-surface-loww max-w-[480px] bg-yellow-light">
+        <Card className="border-0 shadow-none lg:shadow-2xl rounded-3xl m-0 mx-auto px-6 py-8 lg:p-16 relative z-10 max-w-[480px] bg-yellow-light">
             <CardHeader className="p-0">
                 <CardTitle className="text-2xl font-bold text-center">Create an account</CardTitle>
                 <CardDescription className="text-sm pb-4 text-primary text-center">Enter your email below to create your account</CardDescription>

apps/collabydraw/components/MainMenuStack.tsx

@@ -18,6 +18,7 @@ import {
     DownloadIcon,
     Upload,
     Linkedin,
+    Share,
 } from "lucide-react"
 import { Button, buttonVariants } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
@@ -26,9 +27,12 @@ import { ConfirmDialog } from "./confirm-dialog"
 import { cn } from "@/lib/utils"
 import { useTheme } from "next-themes"
 import { clearAllChats } from "@/actions/chat"
-import { signOut } from "next-auth/react"
-import { redirect } from "next/navigation"
+import { signOut, useSession } from "next-auth/react"
+import { redirect, usePathname } from "next/navigation"
 import Link from "next/link"
+import { CollaborationAdDialog } from "./CollaborationAdDialog"
+import { RoomSharingDialog } from "./RoomSharingDialog"
+import CollaborationStartdDialog from "./CollaborationStartdDialog"
 
 interface SidebarProps {
     isOpen: boolean
@@ -44,10 +48,13 @@ interface SidebarProps {
 }
 
 export function MainMenuStack({ isOpen, onClose, canvasColor, setCanvasColor, isMobile, roomName, isStandalone = false, onClearCanvas, onExportCanvas, onImportCanvas }: SidebarProps) {
-    const [clearDialogOpen, setClearDialogOpen] = useState(false)
-    const { theme, setTheme } = useTheme()
+    const [clearDialogOpen, setClearDialogOpen] = useState(false);
+    const { theme, setTheme } = useTheme();
+    const { data: session } = useSession();
 
-    console.log('isOpen = ', isOpen);
+    const pathname = usePathname();
+    const [isShareOpen, setIsShareOpen] = useState(false);
+    const decodedPathname = decodeURIComponent(pathname);
 
     useEffect(() => {
         const handleOutsideClick = (e: MouseEvent) => {
@@ -93,7 +100,12 @@ export function MainMenuStack({ isOpen, onClose, canvasColor, setCanvasColor, is
                                     <SidebarItem icon={TrashIcon} label="Clear canvas" onClick={() => setClearDialogOpen(true)} />
                                     <SidebarItem icon={DownloadIcon} label="Export Drawing" onClick={onExportCanvas} />
                                     <SidebarItem icon={Upload} label="Import Drawing" onClick={onImportCanvas} />
-                                    <SidebarItem icon={UserPlus} onClick={() => redirect('/auth/signup')} label="Sign up" className="text-color-promo hover:text-color-promo font-bold" />
+                                    <SidebarItem icon={Share} label="Live collaboration" onClick={() => setIsShareOpen(true)} />
+                                    {session?.user && session?.user.id ? (
+                                        <CollaborationStartdDialog open={isShareOpen} onOpenChange={setIsShareOpen} />
+                                    ) : (
+                                        <CollaborationAdDialog open={isShareOpen} onOpenChange={setIsShareOpen} />
+                                    )}
                                 </>
                             ) : (
                                 <>
@@ -106,12 +118,16 @@ export function MainMenuStack({ isOpen, onClose, canvasColor, setCanvasColor, is
                                         Room Name: <span>{roomName}</span>
                                     </Button>
                                     <SidebarItem icon={Trash} label="Reset the canvas" onClick={() => setClearDialogOpen(true)} />
-                                    <SidebarItem icon={LogOut} label="Log Out" onClick={() => signOut({ callbackUrl: '/' })} />
+                                    <RoomSharingDialog open={isShareOpen} onOpenChange={setIsShareOpen} link={`${process.env.NODE_ENV !== 'production' ? 'http://localhost:3000' : 'https://collabydraw.com'}/${decodedPathname}`} />
                                 </>
                             )}
+                            {session?.user && session?.user.id ? (
+                                <SidebarItem icon={LogOut} label="Log Out" onClick={() => signOut({ callbackUrl: '/' })} />
+                            ) : (
+                                <SidebarItem icon={UserPlus} onClick={() => redirect('/auth/signup')} label="Sign up" className="text-color-promo hover:text-color-promo font-bold" />
+                            )}
 
                             <Separator className="my-4 dark:bg-default-border-color-dark" />
-
                             <SidebarLinkItem icon={Github} label="GitHub" url="https://github.com/coderomm" />
                             <SidebarLinkItem icon={Twitter} label="Twitter / X" url="https://x.com/1omsharma" />
                             <SidebarLinkItem icon={Linkedin} label="Linkedin" url="https://www.linkedin.com/in/1omsharma/" />
@@ -165,8 +181,7 @@ function SidebarItem({ icon: Icon, label, shortcut, className, onClick }: Sideba
                 className,
             )}
             onClick={onClick}
-            target="_blank"
-            rel="noopener noreferrer"
+            title={label}
         >
             <Icon className="h-4 w-4" />
             <span>{label}</span>
@@ -196,6 +211,9 @@ function SidebarLinkItem({ icon: Icon, label, shortcut, className, url }: Sideba
                 className,
             )}
             href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={label}
         >
             <Icon className="h-4 w-4" />
             <span>{label}</span>

apps/collabydraw/components/RoomSharingDialog.tsx

@@ -93,7 +93,6 @@ export function RoomSharingDialog({ open, onOpenChange, link }: { open: boolean,
                 <DialogFooter className="flex items-center justify-center sm:justify-center">
                     <Button
                         onClick={stopSession}
-                        variant=""
                         className="py-2 px-6 min-h-12 rounded-md text-[.875rem] font-semibold shadow-none bg-red-500 hover:bg-red-600 active:bg-red-700 active:scale-[.98] text-white"
                         disabled={isPending}
                     >

apps/collabydraw/components/SvgIcons.tsx

@@ -6,4 +6,20 @@ export function PaletteFilled({ className }: { className?: string }) {
             <path fill="currentColor" d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path>
         </svg>
     )
+}
+
+export function EllipsisVertical({ className }: { className: string }) {
+    return (
+        < svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={cn("size-6", className)}>
+            <path fillRule="evenodd" d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clipRule="evenodd" />
+        </svg >
+    )
+}
+
+export function ListBullet({ className }: { className: string }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={cn("size-6", className)}>
+            <path fillRule="evenodd" d="M2.625 6.75a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875 0A.75.75 0 0 1 8.25 6h12a.75.75 0 0 1 0 1.5h-12a.75.75 0 0 1-.75-.75ZM2.625 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0ZM7.5 12a.75.75 0 0 1 .75-.75h12a.75.75 0 0 1 0 1.5h-12A.75.75 0 0 1 7.5 12Zm-4.875 5.25a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875 0a.75.75 0 0 1 .75-.75h12a.75.75 0 0 1 0 1.5h-12a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
+        </svg>
+    )
 }

apps/collabydraw/components/ToolMenuStack.tsx

@@ -57,6 +57,7 @@ export function ToolMenuStack({
                         setBgFill={setBgFill}
                         strokeFill={strokeFill}
                         setStrokeFill={setStrokeFill}
+                        activeTool={activeTool}
                     />
 
                     <div className="">

apps/collabydraw/components/UserRoomsList.tsx

@@ -0,0 +1,16 @@
+import { Info } from "lucide-react";
+import { Button } from "./ui/button";
+import { useState } from "react";
+import { UserRoomsListDialog } from "./UserRoomsListDialog";
+
+export default function UserRoomsList() {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+        <div className="User_Rooms_List fixed z-[4] bottom-4 right-4 rounded-lg hidden md:flex items-center surface-box-shadow">
+            <Button type="button" onClick={() => setIsOpen(true)}
+                className="excalidraw-button collab-button relative w-auto py-3 px-4 rounded-md text-[.875rem] font-semibold shadow-none bg-color-primary hover:bg-brand-hover active:bg-brand-active active:scale-[.98]"
+                title="See All Rooms..."><Info /></Button>
+            <UserRoomsListDialog open={isOpen} onOpenChange={setIsOpen} />
+        </div>
+    );
+};