ui improvements

frontend/components/dashboard/about.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import Image from "next/image"
+import { useState } from "react"
+
+import { Button } from "../ui/button"
+import { ChevronRight } from "lucide-react"
+
+export default function AboutModal({
+  open,
+  setOpen,
+}: {
+  open: boolean
+  setOpen: (open: boolean) => void
+}) {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>About this project</DialogTitle>
+        </DialogHeader>
+        <div className="text-sm text-muted-foreground">
+          Sandbox is an open-source cloud-based code editing environment with
+          custom AI code autocompletion and real-time collaboration. The
+          infrastructure runs on Docker and Kubernetes to scale automatically
+          based on resource usage.
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

frontend/components/dashboard/index.tsx

@@ -17,6 +17,7 @@ import DashboardSharedWithMe from "./shared"
 import NewProjectModal from "./newProject"
 import Link from "next/link"
 import { useSearchParams } from "next/navigation"
+import AboutModal from "./about"
 
 type TScreen = "projects" | "shared" | "settings" | "search"
 
@@ -36,6 +37,7 @@ export default function Dashboard({
   const [screen, setScreen] = useState<TScreen>("projects")
 
   const [newProjectModalOpen, setNewProjectModalOpen] = useState(false)
+  const [aboutModalOpen, setAboutModalOpen] = useState(false)
 
   const activeScreen = (s: TScreen) => {
     if (screen === s) return "justify-start"
@@ -51,6 +53,7 @@ export default function Dashboard({
         open={newProjectModalOpen}
         setOpen={setNewProjectModalOpen}
       />
+      <AboutModal open={aboutModalOpen} setOpen={setAboutModalOpen} />
       <div className="flex grow w-full">
         <div className="w-56 shrink-0 border-r border-border p-4 justify-between flex flex-col">
           <div className="flex flex-col">
@@ -97,6 +100,7 @@ export default function Dashboard({
               </Button>
             </Link>
             <Button
+              onClick={() => setAboutModalOpen(true)}
               variant="ghost"
               className="justify-start font-normal text-muted-foreground"
             >

frontend/components/dashboard/shared.tsx

@@ -12,6 +12,7 @@ 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,
@@ -66,9 +67,11 @@ export default function DashboardSharedWithMe({
                   {new Date(sandbox.sharedOn).toLocaleDateString()}
                 </TableCell>
                 <TableCell className="text-right">
-                  <Button>
-                    Open <ChevronRight className="w-4 h-4 ml-2" />
-                  </Button>
+                  <Link href={`/code/${sandbox.id}`}>
+                    <Button>
+                      Open <ChevronRight className="w-4 h-4 ml-2" />
+                    </Button>
+                  </Link>
                 </TableCell>
               </TableRow>
             ))}