Merge branch 'main' into feat/profile-page

frontend/components/dashboard/about.tsx

@@ -18,11 +18,38 @@ export default function AboutModal({
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>About this project</DialogTitle>
+          <DialogTitle>Help & Support</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.
+        <div className="space-y-4">
+          {/* <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.
+          </div> */}
+          <div className="text-sm text-muted-foreground">
+            Get help and support through our Discord community or by creating issues on GitHub:
+          </div>
+          <div className="space-y-2">
+            <div className="text-sm">
+              <a 
+                href="https://discord.gitwit.dev/" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                Join our Discord community →
+              </a>
+            </div>
+            <div className="text-sm">
+              <a 
+                href="https://github.com/jamesmurdza/sandbox/issues" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                Report issues on GitHub →
+              </a>
+            </div>
+          </div>
         </div>
       </DialogContent>
     </Dialog>

frontend/components/dashboard/index.tsx

@@ -25,6 +25,7 @@ export default function Dashboard({
     type: "react" | "node"
     author: string
     sharedOn: Date
+    authorAvatarUrl?: string
   }[]
 }) {
   const [screen, setScreen] = useState<TScreen>("projects")
@@ -77,14 +78,14 @@ export default function Dashboard({
               <FolderDot className="w-4 h-4 mr-2" />
               My Projects
             </Button>
-            <Button
+            {/* <Button
               variant="ghost"
               onClick={() => setScreen("shared")}
               className={activeScreen("shared")}
             >
               <Users className="w-4 h-4 mr-2" />
               Shared With Me
-            </Button>
+            </Button> */}
             {/* <Button
               variant="ghost"
               onClick={() => setScreen("settings")}
@@ -110,7 +111,7 @@ export default function Dashboard({
               className="justify-start font-normal text-muted-foreground"
             >
               <HelpCircle className="w-4 h-4 mr-2" />
-              About
+              Help
             </Button>
           </div>
         </div>
@@ -121,7 +122,12 @@ export default function Dashboard({
             ) : null}
           </>
         ) : screen === "shared" ? (
-          <DashboardSharedWithMe shared={shared} />
+          <DashboardSharedWithMe
+            shared={shared.map((item) => ({
+              ...item,
+              authorAvatarUrl: item.authorAvatarUrl || "",
+            }))}
+          />
         ) : screen === "settings" ? null : null}
       </div>
     </>

frontend/components/dashboard/shared.tsx

@@ -6,6 +6,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
+import { projectTemplates } from "@/lib/data"
 import { ChevronRight } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
@@ -18,7 +19,7 @@ export default function DashboardSharedWithMe({
   shared: {
     id: string
     name: string
-    type: "react" | "node"
+    type: string
     author: string
     authorAvatarUrl: string
     sharedOn: Date
@@ -46,9 +47,8 @@ export default function DashboardSharedWithMe({
                       <Image
                         alt=""
                         src={
-                          sandbox.type === "react"
-                            ? "/project-icons/react.svg"
-                            : "/project-icons/node.svg"
+                          projectTemplates.find((p) => p.id === sandbox.type)
+                            ?.icon ?? "/project-icons/node.svg"
                         }
                         width={20}
                         height={20}
@@ -59,7 +59,7 @@ export default function DashboardSharedWithMe({
                   </TableCell>
                   <TableCell>
                     <div className="flex items-center">
-                      <Avatar 
+                      <Avatar
                         name={sandbox.author}
                         avatarUrl={sandbox.authorAvatarUrl}
                         className="mr-2"