TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

start disable modal ui + logic

Browse Source
This commit is contained in:
Ishaan Dey 2024-05-07 21:19:32 -07:00
parent beab0f7845
commit 9d288f580d
8 changed files with 283 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/app/(app)/code/[id]/page.tsx
View File

@ -62,22 +62,18 @@ export default async function CodePage({ params }: { params: { id: string } }) {
return ( return (
<div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background"> <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
<Suspense fallback={<Loading />}> {/* <Suspense fallback={<Loading />}> */}
<Room id={sandboxId}> <Room id={sandboxId}>
<Navbar <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
<div className="w-screen flex grow">
<CodeEditor
userData={userData} userData={userData}
sandboxData={sandboxData} sandboxData={sandboxData}
shared={shared} isSharedUser={isSharedUser}
/> />
<div className="w-screen flex grow"> </div>
<CodeEditor </Room>
userData={userData} {/* </Suspense> */}
sandboxData={sandboxData}
isSharedUser={isSharedUser}
/>
</div>
</Room>
</Suspense>
</div> </div>
); );
} }

70
frontend/components/dashboard/index.tsx
View File

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

155
frontend/components/dashboard/projects.tsx
View File

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

133
frontend/components/dashboard/shared.tsx
View File

@ -1,4 +1,4 @@
import { Sandbox } from "@/lib/types" import { Sandbox } from "@/lib/types";
import { import {
Table, Table,
TableBody, TableBody,
@ -7,77 +7,84 @@ import {
TableHead, TableHead,
TableHeader, TableHeader,
TableRow, TableRow,
} from "@/components/ui/table" } from "@/components/ui/table";
import Image from "next/image" import Image from "next/image";
import Button from "../ui/customButton" import Button from "../ui/customButton";
import { ChevronRight } from "lucide-react" import { ChevronRight } from "lucide-react";
import Avatar from "../ui/avatar" import Avatar from "../ui/avatar";
import Link from "next/link" import Link from "next/link";
export default function DashboardSharedWithMe({ export default function DashboardSharedWithMe({
shared, shared,
}: { }: {
shared: { shared: {
id: string id: string;
name: string name: string;
type: "react" | "node" type: "react" | "node";
author: string author: string;
sharedOn: Date sharedOn: Date;
}[] }[];
}) { }) {
return ( return (
<div className="grow p-4 flex flex-col"> <div className="grow p-4 flex flex-col">
<div className="text-xl font-medium mb-8">Shared With Me</div> <div className="text-xl font-medium mb-8">Shared With Me</div>
<div className="grow w-full"> {shared.length > 0 ? (
<Table> <div className="grow w-full">
<TableHeader> <Table>
<TableRow className="hover:bg-background"> <TableHeader>
<TableHead>Sandbox Name</TableHead> <TableRow className="hover:bg-background">
<TableHead>Shared By</TableHead> <TableHead>Sandbox Name</TableHead>
<TableHead>Sent On</TableHead> <TableHead>Shared By</TableHead>
<TableHead className="text-right"></TableHead> <TableHead>Sent On</TableHead>
</TableRow> <TableHead className="text-right"></TableHead>
</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> </TableRow>
))} </TableHeader>
</TableBody> <TableBody>
</Table> {shared.map((sandbox) => (
</div> <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> </div>
) );
} }

19
frontend/components/editor/index.tsx
View File

@ -39,6 +39,8 @@ import { Sandbox, User, TFile, TFileData, TFolder, TTab } from "@/lib/types";
import { processFileType, validateName } from "@/lib/utils"; import { processFileType, validateName } from "@/lib/utils";
import { Cursors } from "./live/cursors"; import { Cursors } from "./live/cursors";
import { Terminal } from "@xterm/xterm"; import { Terminal } from "@xterm/xterm";
import DisableAccessModal from "./live/disableModal";
import Loading from "./loading";
export default function CodeEditor({ export default function CodeEditor({
userData, userData,
@ -77,6 +79,10 @@ export default function CodeEditor({
const [creatingTerminal, setCreatingTerminal] = useState(false); const [creatingTerminal, setCreatingTerminal] = useState(false);
const [provider, setProvider] = useState<TypedLiveblocksProvider>(); const [provider, setProvider] = useState<TypedLiveblocksProvider>();
const [ai, setAi] = useState(false); const [ai, setAi] = useState(false);
const [disableAccess, setDisableAccess] = useState({
isDisabled: false,
message: "",
});
const isOwner = sandboxData.userId === userData.id; const isOwner = sandboxData.userId === userData.id;
const clerk = useClerk(); const clerk = useClerk();
@ -519,6 +525,19 @@ export default function CodeEditor({
// }) // })
}; };
if (disableAccess.isDisabled) {
return (
<>
<DisableAccessModal
message={disableAccess.message}
open={disableAccess.isDisabled}
setOpen={() => {}}
/>
<Loading />
</>
);
}
return ( return (
<> <>
<div ref={generateRef} /> <div ref={generateRef} />

33
frontend/components/editor/live/disableModal.tsx Normal file
View File

@ -0,0 +1,33 @@
"use client";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { ChevronRight, FileStack, Globe, TextCursor } from "lucide-react";
export default function DisableAccessModal({
open,
setOpen,
message,
}: {
open: boolean;
setOpen: (open: boolean) => void;
message: string;
}) {
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Live Collaboration Disabled</DialogTitle>
</DialogHeader>
<div className="text-sm text-muted-foreground">{message}</div>
</DialogContent>
</Dialog>
);
}

13
frontend/components/editor/live/room.tsx
View File

@ -1,15 +1,14 @@
"use client" "use client";
import { RoomProvider } from "@/liveblocks.config" import { RoomProvider } from "@/liveblocks.config";
import { ClientSideSuspense } from "@liveblocks/react" import { ClientSideSuspense } from "@liveblocks/react";
import Loading from "../loading"
export function Room({ export function Room({
id, id,
children, children,
}: { }: {
id: string id: string;
children: React.ReactNode children: React.ReactNode;
}) { }) {
return ( return (
<RoomProvider <RoomProvider
@ -22,5 +21,5 @@ export function Room({
{children} {children}
{/* </ClientSideSuspense> */} {/* </ClientSideSuspense> */}
</RoomProvider> </RoomProvider>
) );
} }

60
frontend/components/editor/loading.tsx
View File

@ -5,41 +5,41 @@ import { Loader, Loader2 } from "lucide-react";
export default function Loading() { export default function Loading() {
return ( return (
<div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background"> // <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
<div className="h-14 px-2 w-full flex items-center justify-between border-b border-border"> // <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
<div className="flex items-center space-x-4"> // <div className="flex items-center space-x-4">
<Image src={Logo} alt="Logo" width={36} height={36} /> // <Image src={Logo} alt="Logo" width={36} height={36} />
<Skeleton className="w-[100px] h-[24px] rounded-md" /> // <Skeleton className="w-[100px] h-[24px] rounded-md" />
// </div>
// <div className="flex items-center space-x-4">
// <Skeleton className="w-[64px] h-[36px] rounded-md" />
// <Skeleton className="w-[36px] h-[36px] rounded-full" />
// </div>
// </div>
<div className="grow flex w-screen">
<div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
<div className="flex w-full items-center justify-between h-8 mb-1 ">
<div className="text-muted-foreground">Explorer</div>
<div className="flex space-x-1">
<Skeleton className="w-6 h-6 rounded-md" />
<Skeleton className="w-6 h-6 rounded-md" />
</div>
</div> </div>
<div className="flex items-center space-x-4"> <div className="w-full mt-1 flex flex-col">
<Skeleton className="w-[64px] h-[36px] rounded-md" /> <div className="w-full flex justify-center">
<Skeleton className="w-[36px] h-[36px] rounded-full" /> <Loader2 className="w-4 h-4 animate-spin" />
</div>
</div> </div>
</div> </div>
<div className="grow flex w-screen"> <div className="w-full h-full grid grid-cols-5 grid-rows-2 gap-4 p-2">
<div className="h-full w-56 select-none flex flex-col text-sm items-start p-2"> <div className="w-full h-full col-span-3 row-span-2 flex items-center justify-center text-xl font-medium text-secondary select-none">
<div className="flex w-full items-center justify-between h-8 mb-1 "> <Loader2 className="w-6 h-6 mr-3 animate-spin" />
<div className="text-muted-foreground">Explorer</div> Loading...
<div className="flex space-x-1">
<Skeleton className="w-6 h-6 rounded-md" />
<Skeleton className="w-6 h-6 rounded-md" />
</div>
</div>
<div className="w-full mt-1 flex flex-col">
<div className="w-full flex justify-center">
<Loader2 className="w-4 h-4 animate-spin" />
</div>
</div>
</div>
<div className="w-full h-full grid grid-cols-5 grid-rows-2 gap-4 p-2">
<div className="w-full h-full col-span-3 row-span-2 flex items-center justify-center text-xl font-medium text-secondary select-none">
<Loader2 className="w-6 h-6 mr-3 animate-spin" />
Loading...
</div>
<Skeleton className="w-full h-full col-span-2 rounded-md" />
<Skeleton className="w-full h-full col-span-2 rounded-md" />
</div> </div>
<Skeleton className="w-full h-full col-span-2 rounded-md" />
<Skeleton className="w-full h-full col-span-2 rounded-md" />
</div> </div>
</div> </div>
// </div>
); );
} }