refactor: rename UI components for improved clarity and consistency

coderomm · coderomm · commit 37e9c3c05469 · 2025-03-30T17:58:22.000+05:30
diff --git a/apps/collabydraw/components/AppMenuButton.tsx b/apps/collabydraw/components/AppMenuButton.tsx
@@ -4,11 +4,11 @@ import React, { memo } from "react";
 import { Button } from "@/components/ui/button";
 import { Menu } from "lucide-react";
 
-interface SidebarTriggerButtonProps {
+interface AppMenuButtonProps {
     onClick: () => void;
 }
 
-const SidebarTriggerButton = memo(function SidebarTriggerButton({ onClick }: SidebarTriggerButtonProps) {
+const AppMenuButton = memo(function AppMenuButton({ onClick }: AppMenuButtonProps) {
     return (
         <Button
             variant="ghost"
@@ -23,4 +23,4 @@ const SidebarTriggerButton = memo(function SidebarTriggerButton({ onClick }: Sid
     );
 });
 
-export default SidebarTriggerButton;
+export default AppMenuButton;
diff --git a/apps/collabydraw/components/AppSidebar.tsx b/apps/collabydraw/components/AppSidebar.tsx
@@ -29,10 +29,10 @@ import { useTheme } from "next-themes"
 import { signOut, useSession } from "next-auth/react"
 import { redirect, usePathname } from "next/navigation"
 import Link from "next/link"
-import { CollaborationAdDialog } from "./CollaborationAdDialog"
+import { CollabAuthPrompt } from "./CollabAuthPrompt"
 import { RoomSharingDialog } from "./RoomSharingDialog"
-import CollaborationStartdDialog from "./CollaborationStartdDialog"
 import { BASE_URL } from "@/config/constants"
+import CreateRoomDialog from "./CreateRoomDialog"
 
 interface SidebarProps {
     isOpen: boolean
@@ -47,7 +47,7 @@ interface SidebarProps {
     onImportCanvas?: () => void;
 }
 
-export function MainMenuStack({ isOpen, onClose, canvasColor, setCanvasColor, isMobile, roomName, isStandalone, onClearCanvas, onExportCanvas, onImportCanvas }: SidebarProps) {
+export function AppSidebar({ isOpen, onClose, canvasColor, setCanvasColor, isMobile, roomName, isStandalone, onClearCanvas, onExportCanvas, onImportCanvas }: SidebarProps) {
     const [clearDialogOpen, setClearDialogOpen] = useState(false);
     const { theme, setTheme } = useTheme();
     const { data: session } = useSession();
@@ -105,9 +105,9 @@ export function MainMenuStack({ isOpen, onClose, canvasColor, setCanvasColor, is
                                     <SidebarItem icon={Upload} label="Import Drawing" onClick={onImportCanvas} />
                                     <SidebarItem icon={Share2} label="Live collaboration" onClick={() => setIsShareOpen(true)} />
                                     {session?.user && session?.user.id ? (
-                                        <CollaborationStartdDialog open={isShareOpen} onOpenChange={setIsShareOpen} />
+                                        <CreateRoomDialog open={isShareOpen} onOpenChange={setIsShareOpen} />
                                     ) : (
-                                        <CollaborationAdDialog open={isShareOpen} onOpenChange={setIsShareOpen} />
+                                        <CollabAuthPrompt open={isShareOpen} onOpenChange={setIsShareOpen} />
                                     )}
                                 </>
                             ) : (
diff --git a/apps/collabydraw/components/CollabAuthPrompt.tsx b/apps/collabydraw/components/CollabAuthPrompt.tsx
@@ -5,7 +5,7 @@ import { Button } from "./ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "./ui/dialog";
 import { redirect } from "next/navigation";
 
-export function CollaborationAdDialog({ open, onOpenChange }: { open: boolean, onOpenChange: (open: boolean) => void }) {
+export function CollabAuthPrompt({ open, onOpenChange }: { open: boolean, onOpenChange: (open: boolean) => void }) {
 
     const handleSubmit = () => {
         redirect('/auth/signin');
diff --git a/apps/collabydraw/components/CollaborationButton.tsx b/apps/collabydraw/components/CollaborationButton.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { useState } from "react";
-import { CollaborationAdDialog } from "./CollaborationAdDialog";
-import CollaborationStartdDialog from "./CollaborationStartdDialog";
+import { CollabAuthPrompt } from "./CollabAuthPrompt";
+import CreateRoomDialog from "./CreateRoomDialog";
 import { useSession } from "next-auth/react";
 
 export function CollaborationButton() {
@@ -31,9 +31,9 @@ export function CollaborationButton() {
             </button>
 
             {session?.user && session?.user.id ? (
-                <CollaborationStartdDialog open={isOpen} onOpenChange={setIsOpen} />
+                <CreateRoomDialog open={isOpen} onOpenChange={setIsOpen} />
             ) : (
-                <CollaborationAdDialog open={isOpen} onOpenChange={setIsOpen} />
+                <CollabAuthPrompt open={isOpen} onOpenChange={setIsOpen} />
             )}
         </>
     );
diff --git a/apps/collabydraw/components/CollaborationToolbar.tsx b/apps/collabydraw/components/CollaborationToolbar.tsx
@@ -2,19 +2,19 @@
 
 import { Button } from "./ui/button";
 import { useState } from "react";
-import CollaborationStartdDialog from "./CollaborationStartdDialog";
+import CreateRoomDialog from "./CreateRoomDialog";
 import { useSession } from "next-auth/react";
 import { RoomSharingDialog } from "./RoomSharingDialog";
 import { usePathname } from "next/navigation";
-import { CollaborationAdDialog } from "./CollaborationAdDialog";
+import { CollabAuthPrompt } from "./CollabAuthPrompt";
 import { cn } from "@/lib/utils";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import { RoomParticipants } from "@repo/common/types";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { BASE_URL } from "@/config/constants";
 import { Share2 } from "lucide-react";
 
-export default function CollaborationStartBtn({ slug, participants }: { slug?: string, participants?: RoomParticipants[] }) {
+export default function CollaborationToolbar({ slug, participants }: { slug?: string, participants?: RoomParticipants[] }) {
     const pathname = usePathname();
     const [isOpen, setIsOpen] = useState(false);
     const { data: session } = useSession();
@@ -83,19 +83,19 @@ export default function CollaborationStartBtn({ slug, participants }: { slug?: s
             </div>
             <Button type="button" onClick={() => setIsOpen(true)}
                 className={cn("excalidraw-button collab-button relative w-auto py-2 px-3 md:py-3 md:px-4 rounded-md text-[.875rem] font-semibold shadow-none active:scale-[.98]", roomSlug ? "bg-[#0fb884] dark:bg-[#0fb884] hover:bg-[#0fb884]" : "bg-color-primary hover:bg-brand-hover active:bg-brand-active")}
-                title="Live collaboration..."><Share2 size={16} className="hidden xs670:inline" />
-  <span className="inline-block xs670:hidden">Share</span> {roomSlug && participants && participants.length > 0 && (
+                title="Live collaboration..."><Share2 size={16} className="hidden xs670:inline md:hidden" />
+                <span className="inline-block xs670:hidden md:inline-block">Share</span> {roomSlug && participants && participants.length > 0 && (
                     <div className="CollabButton-collaborators text-[.6rem] text-[#2b8a3e] bg-[#b2f2bb] font-bold font-assistant rounded-[50%] p-1 min-w-4 min-h-4 w-4 h-4 flex items-center justify-center absolute bottom-[-5px] right-[-5px]">{participants.length}</div>
                 )}</Button>
 
             {session?.user && session?.user.id ? (
                 roomSlug ? (
                     <RoomSharingDialog open={isOpen} onOpenChange={setIsOpen} link={`${BASE_URL}/${decodedPathname}`} />
                 ) : (
-                    <CollaborationStartdDialog open={isOpen} onOpenChange={setIsOpen} />
+                    <CreateRoomDialog open={isOpen} onOpenChange={setIsOpen} />
                 )
             ) : (
-                <CollaborationAdDialog open={isOpen} onOpenChange={setIsOpen} />
+                <CollabAuthPrompt open={isOpen} onOpenChange={setIsOpen} />
             )}
         </div>
     )
diff --git a/apps/collabydraw/components/CreateRoomDialog.tsx b/apps/collabydraw/components/CreateRoomDialog.tsx
@@ -13,7 +13,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 
-export default function CollaborationStartdDialog({ open, onOpenChange }: { open: boolean, onOpenChange: (open: boolean) => void }) {
+export default function CreateRoomDialog({ open, onOpenChange }: { open: boolean, onOpenChange: (open: boolean) => void }) {
     const [isPending, startTransition] = useTransition();
     const router = useRouter();
 
@@ -85,9 +85,6 @@ export default function CollaborationStartdDialog({ open, onOpenChange }: { open
                             </DialogFooter>
                         </form>
                     </Form>
-                    <DialogFooter className="flex items-center justify-center sm:justify-center">
-
-                    </DialogFooter>
                 </DialogContent>
             </Dialog >
         </>
diff --git a/apps/collabydraw/components/MobileCommandBar.tsx b/apps/collabydraw/components/MobileCommandBar.tsx
@@ -6,17 +6,17 @@ import { useState } from "react"
 import { Menu, Plus, Minus, Share2 } from "lucide-react"
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
 import { cn } from "@/lib/utils"
-import { MainMenuStack } from "./MainMenuStack"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import { Button } from "./ui/button"
 import { PaletteFilled } from "./SvgIcons"
-import { ToolMenuStack } from "./ToolMenuStack"
 import { BgFill, StrokeEdge, StrokeFill, StrokeStyle, StrokeWidth, ToolType } from "@/types/canvas"
 import { UserRoomsListDialog } from "./UserRoomsListDialog"
 import { RoomSharingDialog } from "./RoomSharingDialog"
 import { BASE_URL } from "@/config/constants"
+import { AppSidebar } from "./AppSidebar"
+import { StyleConfigurator } from "./StyleConfigurator"
 
-interface MobileNavbarProps {
+interface MobileCommandBarProps {
     canvasColor: string
     setCanvasColor: (color: string) => void
     sidebarOpen: boolean
@@ -42,7 +42,7 @@ interface MobileNavbarProps {
     onImportCanvas?: () => void;
 }
 
-export function MobileNavbar({ canvasColor,
+export function MobileCommandBar({ canvasColor,
     setCanvasColor,
     sidebarOpen,
     setSidebarOpen,
@@ -64,7 +64,7 @@ export function MobileNavbar({ canvasColor,
     onClearCanvas,
     onExportCanvas,
     onImportCanvas,
-}: MobileNavbarProps) {
+}: MobileCommandBarProps) {
     const [colorPickerOpen, setColorPickerOpen] = useState(false);
     const [roomsListOpen, setRoomsListOpen] = useState(false);
 
@@ -93,7 +93,7 @@ export function MobileNavbar({ canvasColor,
                         <SheetHeader className="mb-5">
                             <SheetTitle>Settings</SheetTitle>
                         </SheetHeader>
-                        <MainMenuStack
+                        <AppSidebar
                             isOpen={sidebarOpen}
                             onClose={() => setSidebarOpen(false)}
                             canvasColor={canvasColor}
@@ -113,7 +113,7 @@ export function MobileNavbar({ canvasColor,
                     <SheetHeader className="mb-5">
                         <SheetTitle>Canvas Settings</SheetTitle>
                     </SheetHeader>
-                    <ToolMenuStack
+                    <StyleConfigurator
                         isMobile={true}
                         activeTool={activeTool}
                         strokeFill={strokeFill}
diff --git a/apps/collabydraw/components/SideToolbar.tsx b/apps/collabydraw/components/SideToolbar.tsx
@@ -1,9 +1,9 @@
-import CollaborationStartBtn from "./CollaborationStartBtn";
+import CollaborationToolbar from "./CollaborationToolbar";
 
 export default function SideToolbar({ slug }: { slug: string }) {
     return (
         <section className="absolute top-20 right-0 flex flex-col items-center justify-center border border-sidebar-border border-r-0 rounded-l-lg overflow-hidden bg-island-bg-color">
-            <CollaborationStartBtn slug={slug!} />
+            <CollaborationToolbar slug={slug!} />
         </section>
     )
 }
diff --git a/apps/collabydraw/components/StyleConfigurator.tsx b/apps/collabydraw/components/StyleConfigurator.tsx
@@ -7,7 +7,7 @@ import ItemLabel from "./ItemLabel";
 import { Input } from "./ui/input";
 import { cn } from "@/lib/utils";
 
-interface SidebarProps {
+interface StyleConfiguratorProps {
     activeTool: ToolType;
     strokeFill: StrokeFill;
     setStrokeFill: React.Dispatch<React.SetStateAction<StrokeFill>>;
@@ -22,7 +22,7 @@ interface SidebarProps {
     isMobile?: boolean
 }
 
-export function ToolMenuStack({
+export function StyleConfigurator({
     activeTool,
     strokeFill,
     setStrokeFill,
@@ -35,7 +35,7 @@ export function ToolMenuStack({
     strokeStyle,
     setStrokeStyle,
     isMobile
-}: SidebarProps) {
+}: StyleConfiguratorProps) {
 
     const lineThicknessOptions: StrokeWidth[] = [1, 2, 4]
     const edgeRoundnessOptions: StrokeEdge[] = ["sharp", "round"]
@@ -46,7 +46,7 @@ export function ToolMenuStack({
     }
     return (
         <>
-            <section className={cn("ToolMenuStack p-3 overflow-auto custom-scrollbar transition-transform duration-300 ease-in-out z-10 mt-2",
+            <section className={cn("StyleConfigurator p-3 overflow-auto custom-scrollbar transition-transform duration-300 ease-in-out z-10 mt-2",
                 isMobile ? "" : "absolute top-full w-56 h-[calc(100vh-150px)] bg-background dark:bg-w-bg rounded-lg Island"
             )}>
                 <h2 className="sr-only">Selected shape actions</h2>
diff --git a/apps/collabydraw/components/ToolSelector.tsx b/apps/collabydraw/components/ToolSelector.tsx
@@ -3,12 +3,12 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import type { ToolType } from "@/types/canvas"
 import { tools } from "@/types/Tools"
 
-interface ToolbarProps {
+interface ToolSelectorProps {
     selectedTool: ToolType
     onToolSelect: (tool: ToolType) => void
 }
 
-export default function Toolsbar({ selectedTool, onToolSelect }: ToolbarProps) {
+export default function ToolSelector({ selectedTool, onToolSelect }: ToolSelectorProps) {
     return (
         <TooltipProvider delayDuration={0}>
             <header className="Tool_Bar flex items-center gap-1 p-1.5 rounded-lg Island">
diff --git a/apps/collabydraw/components/UserRoomsListDialog.tsx b/apps/collabydraw/components/UserRoomsListDialog.tsx
@@ -8,7 +8,7 @@ import { getUserRooms, joinRoom, deleteRoom } from "@/actions/room";
 import { useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { Skeleton } from "./ui/skeleton";
-import CollaborationStartdDialog from "./CollaborationStartdDialog";
+import CreateRoomDialog from "./CreateRoomDialog";
 
 type RoomType = {
     id: number;
@@ -194,7 +194,7 @@ export function UserRoomsListDialog({
                                 disabled={isPending}
                                 className="py-2 px-6 min-h-12 rounded-md text-[.875rem] font-semibold shadow-none bg-color-primary hover:bg-brand-hover active:bg-brand-active active:scale-[.98]"
                                 title="Create a Room">Create a Room</Button>
-                            <CollaborationStartdDialog open={isOpen} onOpenChange={setIsOpen} />
+                            <CreateRoomDialog open={isOpen} onOpenChange={setIsOpen} />
                         </div>
                     )}
                 </div>
diff --git a/apps/collabydraw/components/ZoomControl.tsx b/apps/collabydraw/components/ZoomControl.tsx
@@ -2,10 +2,10 @@ import { Minus, Plus } from "lucide-react";
 import { Button } from "./ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 
-export const Scale = ({
+export default function ZoomControl({
     scale,
     setScale
-}: { scale: number; setScale: React.Dispatch<React.SetStateAction<number>> }) => {
+}: { scale: number; setScale: React.Dispatch<React.SetStateAction<number>> }) {
 
     const zoomIn = () => {
         setScale((prevScale: number) => Math.min(prevScale * 1.1, 5));
@@ -26,7 +26,7 @@ export const Scale = ({
                     <TooltipTrigger asChild>
                         <Button variant="ghost" size="icon" onClick={zoomOut} className="w-9 h-9 rounded-l-lg rounded-r-none bg-light-btn-bg text-text-primary-color dark:bg-w-bg dark:hover:bg-d-btn-hover-bg dark:text-w-text select-none">
                             <Minus className="h-4 w-4" />
-                        </Button> 
+                        </Button>
                     </TooltipTrigger>
                     <TooltipContent className="dark:bg-w-bg dark:text-white">Zoom Out</TooltipContent>
                 </Tooltip>
diff --git a/apps/collabydraw/components/canvas/Canvas.tsx b/apps/collabydraw/components/canvas/Canvas.tsx
diff --git a/apps/collabydraw/components/canvas/CanvasSheet.tsx b/apps/collabydraw/components/canvas/CanvasSheet.tsx
diff --git a/apps/collabydraw/components/canvas/StandaloneCanvas.tsx b/apps/collabydraw/components/canvas/StandaloneCanvas.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,9 @@`
`1`		`-import CollaborationStartBtn from "./CollaborationStartBtn";`
	`1`	`+import CollaborationToolbar from "./CollaborationToolbar";`
`2`	`2`
`3`	`3`	`export default function SideToolbar({ slug }: { slug: string }) {`
`4`	`4`	`return (`
`5`	`5`	`<section className="absolute top-20 right-0 flex flex-col items-center justify-center border border-sidebar-border border-r-0 rounded-l-lg overflow-hidden bg-island-bg-color">`
`6`		`- <CollaborationStartBtn slug={slug!} />`
	`6`	`+ <CollaborationToolbar slug={slug!} />`
`7`	`7`	`</section>`
`8`	`8`	`)`
`9`	`9`	`}`