start disable modal ui + logic

frontend/components/dashboard/index.tsx

@@ -1,7 +1,7 @@
-"use client"
+"use client";
 
-import CustomButton from "@/components/ui/customButton"
-import { Button } from "@/components/ui/button"
+import CustomButton from "@/components/ui/customButton";
+import { Button } from "@/components/ui/button";
 import {
   Code2,
   FolderDot,
@@ -9,44 +9,44 @@ import {
   Plus,
   Settings,
   Users,
-} from "lucide-react"
-import { useState } from "react"
-import { Sandbox } from "@/lib/types"
-import DashboardProjects from "./projects"
-import DashboardSharedWithMe from "./shared"
-import NewProjectModal from "./newProject"
-import Link from "next/link"
-import { useSearchParams } from "next/navigation"
-import AboutModal from "./about"
-import { toast } from "sonner"
+} from "lucide-react";
+import { useState } from "react";
+import { Sandbox } from "@/lib/types";
+import DashboardProjects from "./projects";
+import DashboardSharedWithMe from "./shared";
+import NewProjectModal from "./newProject";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import AboutModal from "./about";
+import { toast } from "sonner";
 
-type TScreen = "projects" | "shared" | "settings" | "search"
+type TScreen = "projects" | "shared" | "settings" | "search";
 
 export default function Dashboard({
   sandboxes,
   shared,
 }: {
-  sandboxes: Sandbox[]
+  sandboxes: Sandbox[];
   shared: {
-    id: string
-    name: string
-    type: "react" | "node"
-    author: string
-    sharedOn: Date
-  }[]
+    id: string;
+    name: string;
+    type: "react" | "node";
+    author: string;
+    sharedOn: Date;
+  }[];
 }) {
-  const [screen, setScreen] = useState<TScreen>("projects")
+  const [screen, setScreen] = useState<TScreen>("projects");
 
-  const [newProjectModalOpen, setNewProjectModalOpen] = useState(false)
-  const [aboutModalOpen, setAboutModalOpen] = useState(false)
+  const [newProjectModalOpen, setNewProjectModalOpen] = useState(false);
+  const [aboutModalOpen, setAboutModalOpen] = useState(false);
 
   const activeScreen = (s: TScreen) => {
-    if (screen === s) return "justify-start"
-    else return "justify-start font-normal text-muted-foreground"
-  }
+    if (screen === s) return "justify-start";
+    else return "justify-start font-normal text-muted-foreground";
+  };
 
-  const searchParams = useSearchParams()
-  const q = searchParams.get("q")
+  const searchParams = useSearchParams();
+  const q = searchParams.get("q");
 
   return (
     <>
@@ -61,10 +61,10 @@ export default function Dashboard({
             <CustomButton
               onClick={() => {
                 if (sandboxes.length >= 8) {
-                  toast.error("You reached the maximum # of sandboxes.")
-                  return
+                  toast.error("You reached the maximum # of sandboxes.");
+                  return;
                 }
-                setNewProjectModalOpen(true)
+                setNewProjectModalOpen(true);
               }}
               className="mb-4"
             >
@@ -97,7 +97,7 @@ export default function Dashboard({
             </Button> */}
           </div>
           <div className="flex flex-col">
-            <Link href="https://github.com/ishaan1013/sandbox">
+            <a target="_blank" href="https://github.com/ishaan1013/sandbox">
               <Button
                 variant="ghost"
                 className="justify-start font-normal text-muted-foreground"
@@ -105,7 +105,7 @@ export default function Dashboard({
                 <Code2 className="w-4 h-4 mr-2" />
                 GitHub Repository
               </Button>
-            </Link>
+            </a>
             <Button
               onClick={() => setAboutModalOpen(true)}
               variant="ghost"
@@ -123,5 +123,5 @@ export default function Dashboard({
         ) : screen === "settings" ? null : null}
       </div>
     </>
-  )
+  );
 }

frontend/components/dashboard/projects.tsx

@@ -1,35 +1,36 @@
-"use client"
+"use client";
 
-import { Sandbox } from "@/lib/types"
-import ProjectCard from "./projectCard"
-import Image from "next/image"
-import ProjectCardDropdown from "./projectCard/dropdown"
-import { Clock, Globe, Lock } from "lucide-react"
-import Link from "next/link"
-import { Card } from "../ui/card"
-import { deleteSandbox, updateSandbox } from "@/lib/actions"
-import { toast } from "sonner"
+import { Sandbox } from "@/lib/types";
+import ProjectCard from "./projectCard";
+import Image from "next/image";
+import ProjectCardDropdown from "./projectCard/dropdown";
+import { Clock, Globe, Lock } from "lucide-react";
+import Link from "next/link";
+import { Card } from "../ui/card";
+import { deleteSandbox, updateSandbox } from "@/lib/actions";
+import { toast } from "sonner";
 
 export default function DashboardProjects({
   sandboxes,
   q,
 }: {
-  sandboxes: Sandbox[]
-  q: string | null
+  sandboxes: Sandbox[];
+  q: string | null;
 }) {
   const onDelete = async (sandbox: Sandbox) => {
-    toast(`Project ${sandbox.name} deleted.`)
-    await deleteSandbox(sandbox.id)
-  }
+    toast(`Project ${sandbox.name} deleted.`);
+    await deleteSandbox(sandbox.id);
+  };
 
   const onVisibilityChange = async (sandbox: Sandbox) => {
-    const newVisibility = sandbox.visibility === "public" ? "private" : "public"
-    toast(`Project ${sandbox.name} is now ${newVisibility}.`)
+    const newVisibility =
+      sandbox.visibility === "public" ? "private" : "public";
+    toast(`Project ${sandbox.name} is now ${newVisibility}.`);
     await updateSandbox({
       id: sandbox.id,
       visibility: newVisibility,
-    })
-  }
+    });
+  };
 
   return (
     <div className="grow p-4 flex flex-col">
@@ -37,64 +38,70 @@ export default function DashboardProjects({
         {q && q.length > 0 ? `Showing search results for: ${q}` : "My Projects"}
       </div>
       <div className="grow w-full ">
-        <div className="w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
-          {sandboxes.map((sandbox) => {
-            if (q && q.length > 0) {
-              if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) {
-                return null
+        {sandboxes.length > 0 ? (
+          <div className="w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
+            {sandboxes.map((sandbox) => {
+              if (q && q.length > 0) {
+                if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) {
+                  return null;
+                }
               }
-            }
-            return (
-              <Link
-                key={sandbox.id}
-                href={`/code/${sandbox.id}`}
-                className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
-              >
-                <Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
-                  {/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
-                  <div className="space-x-2 flex items-center justify-start w-full">
-                    <Image
-                      alt=""
-                      src={
-                        sandbox.type === "react"
-                          ? "/project-icons/react.svg"
-                          : "/project-icons/node.svg"
-                      }
-                      width={20}
-                      height={20}
-                    />
-                    <div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
-                      {sandbox.name}
+              return (
+                <Link
+                  key={sandbox.id}
+                  href={`/code/${sandbox.id}`}
+                  className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
+                >
+                  <Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
+                    {/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
+                    <div className="space-x-2 flex items-center justify-start w-full">
+                      <Image
+                        alt=""
+                        src={
+                          sandbox.type === "react"
+                            ? "/project-icons/react.svg"
+                            : "/project-icons/node.svg"
+                        }
+                        width={20}
+                        height={20}
+                      />
+                      <div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
+                        {sandbox.name}
+                      </div>
+                      <ProjectCardDropdown
+                        sandbox={sandbox}
+                        onVisibilityChange={onVisibilityChange}
+                        onDelete={onDelete}
+                      />
                     </div>
-                    <ProjectCardDropdown
-                      sandbox={sandbox}
-                      onVisibilityChange={onVisibilityChange}
-                      onDelete={onDelete}
-                    />
-                  </div>
-                  <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
-                    <div className="flex items-center">
-                      {sandbox.visibility === "private" ? (
-                        <>
-                          <Lock className="w-3 h-3 mr-2" /> Private
-                        </>
-                      ) : (
-                        <>
-                          <Globe className="w-3 h-3 mr-2" /> Public
-                        </>
-                      )}
+                    <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
+                      <div className="flex items-center">
+                        {sandbox.visibility === "private" ? (
+                          <>
+                            <Lock className="w-3 h-3 mr-2" /> Private
+                          </>
+                        ) : (
+                          <>
+                            <Globe className="w-3 h-3 mr-2" /> Public
+                          </>
+                        )}
+                      </div>
+                      <div className="flex items-center">
+                        <Clock className="w-3 h-3 mr-2" /> 3d ago
+                      </div>
                     </div>
-                    <div className="flex items-center">
-                      <Clock className="w-3 h-3 mr-2" /> 3d ago
-                    </div>
-                  </div>
-                  {/* </ProjectCard> */}
-                </Card>
-              </Link>
-            )
-          })}
-        </div>
+                    {/* </ProjectCard> */}
+                  </Card>
+                </Link>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-muted-foreground text-sm">
+            You don't have any projects yet. Create one to get started!
+          </div>
+        )}
       </div>
     </div>
-  )
+  );
 }

frontend/components/dashboard/shared.tsx

@@ -1,4 +1,4 @@
-import { Sandbox } from "@/lib/types"
+import { Sandbox } from "@/lib/types";
 import {
   Table,
   TableBody,
@@ -7,77 +7,84 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
-import Image from "next/image"
-import Button from "../ui/customButton"
-import { ChevronRight } from "lucide-react"
-import Avatar from "../ui/avatar"
-import Link from "next/link"
+} from "@/components/ui/table";
+import Image from "next/image";
+import Button from "../ui/customButton";
+import { ChevronRight } from "lucide-react";
+import Avatar from "../ui/avatar";
+import Link from "next/link";
 
 export default function DashboardSharedWithMe({
   shared,
 }: {
   shared: {
-    id: string
-    name: string
-    type: "react" | "node"
-    author: string
-    sharedOn: Date
-  }[]
+    id: string;
+    name: string;
+    type: "react" | "node";
+    author: string;
+    sharedOn: Date;
+  }[];
 }) {
   return (
     <div className="grow p-4 flex flex-col">
       <div className="text-xl font-medium mb-8">Shared With Me</div>
-      <div className="grow w-full">
-        <Table>
-          <TableHeader>
-            <TableRow className="hover:bg-background">
-              <TableHead>Sandbox Name</TableHead>
-              <TableHead>Shared By</TableHead>
-              <TableHead>Sent On</TableHead>
-              <TableHead className="text-right"></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {shared.map((sandbox) => (
-              <TableRow>
-                <TableCell>
-                  <div className="font-medium flex items-center">
-                    <Image
-                      alt=""
-                      src={
-                        sandbox.type === "react"
-                          ? "/project-icons/react.svg"
-                          : "/project-icons/node.svg"
-                      }
-                      width={20}
-                      height={20}
-                      className="mr-2"
-                    />
-                    {sandbox.name}
-                  </div>
-                </TableCell>
-                <TableCell>
-                  <div className="flex items-center">
-                    <Avatar name={sandbox.author} className="mr-2" />
-                    {sandbox.author}
-                  </div>
-                </TableCell>
-                <TableCell>
-                  {new Date(sandbox.sharedOn).toLocaleDateString()}
-                </TableCell>
-                <TableCell className="text-right">
-                  <Link href={`/code/${sandbox.id}`}>
-                    <Button>
-                      Open <ChevronRight className="w-4 h-4 ml-2" />
-                    </Button>
-                  </Link>
-                </TableCell>
+      {shared.length > 0 ? (
+        <div className="grow w-full">
+          <Table>
+            <TableHeader>
+              <TableRow className="hover:bg-background">
+                <TableHead>Sandbox Name</TableHead>
+                <TableHead>Shared By</TableHead>
+                <TableHead>Sent On</TableHead>
+                <TableHead className="text-right"></TableHead>
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+            </TableHeader>
+            <TableBody>
+              {shared.map((sandbox) => (
+                <TableRow>
+                  <TableCell>
+                    <div className="font-medium flex items-center">
+                      <Image
+                        alt=""
+                        src={
+                          sandbox.type === "react"
+                            ? "/project-icons/react.svg"
+                            : "/project-icons/node.svg"
+                        }
+                        width={20}
+                        height={20}
+                        className="mr-2"
+                      />
+                      {sandbox.name}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center">
+                      <Avatar name={sandbox.author} className="mr-2" />
+                      {sandbox.author}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {new Date(sandbox.sharedOn).toLocaleDateString()}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Link href={`/code/${sandbox.id}`}>
+                      <Button>
+                        Open <ChevronRight className="w-4 h-4 ml-2" />
+                      </Button>
+                    </Link>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <div className="text-muted-foreground text-sm">
+          No sandboxes here. Get a friend to share one with you, and try out
+          live collaboration!
+        </div>
+      )}
     </div>
-  )
+  );
 }