refactor: remove unused components and fix canvas clearing issue on mobile

Author: coderomm

apps/collabydraw/components/AppSidebar.tsx

@@ -19,6 +19,7 @@ import {
     Upload,
     Linkedin,
     Share2,
+    Star,
 } from "lucide-react"
 import { Button, buttonVariants } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
@@ -132,9 +133,20 @@ export function AppSidebar({ isOpen, onClose, canvasColor, setCanvasColor, isMob
                             )}
 
                             <Separator className="my-4 dark:bg-default-border-color-dark" />
-                            <SidebarLinkItem icon={Github} label="GitHub" url="https://github.com/coderomm" />
+                            <Link
+                                className={cn(
+                                    buttonVariants({ variant: "ghost" }),
+                                    "flex flex-row items-center justify-start gap-2 h-10 w-auto rounded-md px-3 text-sm font-medium transition-colors text-color-on-surface hover:text-color-on-surface bg-transparent hover:bg-button-hover-bg focus-visible:shadow-brand-color-shadow focus-visible:outline-none focus-visible:ring-0 active:bg-button-hover-bg active:border active:border-brand-active dark:hover:bg-w-button-hover-bg border border-[#705400] bg-[#FFE599]"
+                                )}
+                                href="https://github.com/coderomm/CollabyDraw"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                title="GitHub"
+                            >
+                                <Github className="h-4 w-4" />GitHub - <span className="flex items-center justify-start gap-1">7<Star className="h-4 w-4" /></span>
+                            </Link>
                             <SidebarLinkItem icon={Twitter} label="Twitter / X" url="https://x.com/1omsharma" />
-                            <SidebarLinkItem icon={Linkedin} label="Linkedin" url="https://www.linkedin.com/in/1omsharma/" />
+                            <SidebarLinkItem icon={Linkedin} label="Linkedin" url="https://www.linkedin.com/in/1omsharma" />
                         </nav>
                     </div>
 

apps/collabydraw/components/MobileCommandBar.tsx

@@ -3,16 +3,13 @@
 import type React from "react"
 
 import { useState } from "react"
-import { Menu, Plus, Minus, Share2 } from "lucide-react"
+import { Menu, Plus, Minus } from "lucide-react"
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
 import { cn } from "@/lib/utils"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import { Button } from "./ui/button"
 import { PaletteFilled } from "./SvgIcons"
 import { BgFill, FillStyle, FontFamily, FontSize, RoughStyle, StrokeEdge, StrokeFill, StrokeStyle, StrokeWidth, TextAlign, 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"
 
@@ -86,7 +83,6 @@ export function MobileCommandBar({ canvasColor,
     onImportCanvas,
 }: MobileCommandBarProps) {
     const [colorPickerOpen, setColorPickerOpen] = useState(false);
-    const [roomsListOpen, setRoomsListOpen] = useState(false);
 
     const handleMenuButton = () => {
         setSidebarOpen(!sidebarOpen);
@@ -101,17 +97,16 @@ export function MobileCommandBar({ canvasColor,
                         {activeTool !== 'grab' && activeTool !== 'eraser' && (
                             <NavbarButton icon={PaletteFilled} label="Colors" onClick={() => setColorPickerOpen(true)} active={colorPickerOpen} />
                         )}
-                        <NavbarButton icon={Share2} label="Rooms" onClick={() => setRoomsListOpen(true)} active={roomsListOpen} />
                         <ScaleWidget scale={scale} setScale={setScale} />
                     </div>
                 </div>
             </footer>
 
             {sidebarOpen && (
                 <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
-                    <SheetContent side="bottom" className="h-auto max-h-[80vh] rounded-t-[20px] px-4 py-4 overflow-auto custom-scrollbar Island">
+                    <SheetContent side="bottom" className="h-auto max-h-[80vh] w-full rounded-t-[20px] px-4 py-4 overflow-auto overflow-x-hiddenustom-scrollbar Island">
                         <SheetHeader className="mb-5">
-                            <SheetTitle>Settings</SheetTitle>
+                            <SheetTitle>App Menu</SheetTitle>
                         </SheetHeader>
                         <AppSidebar
                             isOpen={sidebarOpen}
@@ -129,9 +124,9 @@ export function MobileCommandBar({ canvasColor,
                 </Sheet>
             )}
             <Sheet open={colorPickerOpen} onOpenChange={setColorPickerOpen}>
-                <SheetContent side="bottom" className="h-auto max-h-[80vh] rounded-t-[20px] px-4 py-4 overflow-auto custom-scrollbar Island">
+                <SheetContent side="bottom" className="h-auto max-h-[80vh] w-full rounded-t-[20px] px-4 py-4 overflow-auto overflow-x-hidden custom-scrollbar Island">
                     <SheetHeader className="mb-5">
-                        <SheetTitle>Canvas Settings</SheetTitle>
+                        <SheetTitle>Canvas Styles</SheetTitle>
                     </SheetHeader>
                     <StyleConfigurator
                         isMobile={true}
@@ -164,23 +159,6 @@ export function MobileCommandBar({ canvasColor,
                     />
                 </SheetContent>
             </Sheet>
-
-            {roomName ? (
-                <RoomSharingDialog open={roomsListOpen} onOpenChange={setRoomsListOpen} link={`${BASE_URL}/${roomName}`} />
-            ) : (
-                <Sheet open={roomsListOpen} onOpenChange={setRoomsListOpen}>
-                    <SheetContent side="bottom" className="h-auto max-h-[80vh] min-h-[50vh] rounded-t-[20px] px-6 py-6 Island">
-                        <SheetHeader className="mb-5">
-                            <SheetTitle>All Your Rooms</SheetTitle>
-                        </SheetHeader>
-                        <UserRoomsListDialog
-                            open={roomsListOpen}
-                            onOpenChange={setRoomsListOpen}
-                            isMobile={true}
-                        />
-                    </SheetContent>
-                </Sheet>
-            )}
         </>
     )
 }

apps/collabydraw/components/canvas/CanvasBoard.tsx

@@ -440,6 +440,7 @@ export default function CanvasBoard() {
                         setCanvasEngineState(prev => ({ ...prev, textAlign: typeof newTextAlign === 'function' ? newTextAlign(prev.textAlign) : newTextAlign }))
                     }
                     isStandalone={mode === 'room' ? false : true}
+                    onClearCanvas={clearCanvas}
                 />
 
             )}

apps/collabydraw/components/welcome-screen.tsx

@@ -40,7 +40,7 @@ export function HomeWelcome() {
                 </div>
                 <div className="welcome-screen-center__heading welcome-screen-decor font-excalifont">All your data is saved locally in your browser.</div>
                 <div className="welcome-screen-menu">
-                    <button type="button" className="welcome-screen-menu-item ">
+                    <button type="button" className="welcome-screen-menu-item !hidden">
                         <div className="welcome-screen-menu-item__icon">
                             <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" className="" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
                                 <path d="m9.257 6.351.183.183H15.819c.34 0 .727.182 1.051.506.323.323.505.708.505 1.05v5.819c0 .316-.183.7-.52 1.035-.337.338-.723.522-1.037.522H4.182c-.352 0-.74-.181-1.058-.5-.318-.318-.499-.705-.499-1.057V5.182c0-.351.181-.736.5-1.054.32-.321.71-.503 1.057-.503H6.53l2.726 2.726Z" strokeWidth="1.25"></path>