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

ui + shared user improvements

Browse Source
This commit is contained in:
Ishaan Dey 2024-05-05 14:33:09 -07:00
parent dd400b1d2a
commit 09ead6073b
17 changed files with 363 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
backend/server/dist/index.js vendored
View File

@ -22,6 +22,7 @@ const socket_io_1 = require("socket.io");
const zod_1 = require("zod");
const utils_1 = require("./utils");
const node_pty_1 = require("node-pty");
const ratelimit_1 = require("./ratelimit");
dotenv_1.default.config();
const app = (0, express_1.default)();
const port = process.env.PORT || 4000;
@ -89,6 +90,12 @@ io.on("connection", (socket) => __awaiter(void 0, void 0, void 0, function* () {
});
// todo: send diffs + debounce for efficiency
socket.on("saveFile", (fileId, body) => __awaiter(void 0, void 0, void 0, function* () {
try {
yield ratelimit_1.saveFileRL.consume(data.userId, 1);
if (Buffer.byteLength(body, "utf-8") > ratelimit_1.MAX_BODY_SIZE) {
socket.emit("rateLimit", "Rate limited: file size too large. Please reduce the file size.");
return;
}
const file = sandboxFiles.fileData.find((f) => f.id === fileId);
if (!file)
return;
@ -98,8 +105,14 @@ io.on("connection", (socket) => __awaiter(void 0, void 0, void 0, function* () {
throw err;
});
yield (0, utils_1.saveFile)(fileId, body);
}
catch (e) {
socket.emit("rateLimit", "Rate limited: file saving. Please slow down.");
}
}));
socket.on("createFile", (name) => __awaiter(void 0, void 0, void 0, function* () {
try {
yield ratelimit_1.createFileRL.consume(data.userId, 1);
const id = `projects/${data.id}/${name}`;
fs_1.default.writeFile(path_1.default.join(dirName, id), "", function (err) {
if (err)
@ -115,8 +128,14 @@ io.on("connection", (socket) => __awaiter(void 0, void 0, void 0, function* () {
data: "",
});
yield (0, utils_1.createFile)(id);
}
catch (e) {
socket.emit("rateLimit", "Rate limited: file creation. Please slow down.");
}
}));
socket.on("renameFile", (fileId, newName) => __awaiter(void 0, void 0, void 0, function* () {
try {
yield ratelimit_1.renameFileRL.consume(data.userId, 1);
const file = sandboxFiles.fileData.find((f) => f.id === fileId);
if (!file)
return;
@ -128,8 +147,15 @@ io.on("connection", (socket) => __awaiter(void 0, void 0, void 0, function* () {
throw err;
});
yield (0, utils_1.renameFile)(fileId, newFileId, file.data);
}
catch (e) {
socket.emit("rateLimit", "Rate limited: file renaming. Please slow down.");
return;
}
}));
socket.on("deleteFile", (fileId, callback) => __awaiter(void 0, void 0, void 0, function* () {
try {
yield ratelimit_1.deleteFileRL.consume(data.userId, 1);
const file = sandboxFiles.fileData.find((f) => f.id === fileId);
if (!file)
return;
@ -141,8 +167,20 @@ io.on("connection", (socket) => __awaiter(void 0, void 0, void 0, function* () {
yield (0, utils_1.deleteFile)(fileId);
const newFiles = yield (0, utils_1.getSandboxFiles)(data.id);
callback(newFiles.files);
}
catch (e) {
socket.emit("rateLimit", "Rate limited: file deletion. Please slow down.");
}
}));
socket.on("createTerminal", ({ id }) => {
if (terminals[id]) {
console.log("Terminal already exists.");
return;
}
if (Object.keys(terminals).length >= 4) {
console.log("Too many terminals.");
return;
}
const pty = (0, node_pty_1.spawn)(os_1.default.platform() === "win32" ? "cmd.exe" : "bash", [], {
name: "xterm",
cols: 100,

8
frontend/app/api/lb-auth/route.ts
View File

@ -1,3 +1,4 @@
import { colors } from "@/lib/colors"
import { User } from "@/lib/types"
import { currentUser } from "@clerk/nextjs"
import { Liveblocks } from "@liveblocks/node"
@ -19,12 +20,19 @@ export async function POST(request: NextRequest) {
const res = await fetch(`http://localhost:8787/api/user?id=${clerkUser.id}`)
const user = (await res.json()) as User
const colorNames = Object.keys(colors)
const randomColor = colorNames[
Math.floor(Math.random() * colorNames.length)
] as keyof typeof colors
const code = colors[randomColor]
// Create a session for the current user
// userInfo is made available in Liveblocks presence hooks, e.g. useOthers
const session = liveblocks.prepareSession(user.id, {
userInfo: {
name: user.name,
email: user.email,
color: randomColor,
},
})

16
frontend/app/globals.css
View File

@ -99,13 +99,23 @@
background: radial-gradient(circle at bottom right, #312e81 -75%, hsl(0 0% 3.9%) 60%); /* violet 900 -> bg */
}
.inline-decoration::before {
content: 'Generate';
color: #525252;
/* border: 1px solid #525252; */
/* padding: 2px 4px; */
/* border-radius: 4px; */
margin-left: 36px;
}
.inline-decoration::after {
content: 'Generate ⌘G';
content: '⌘G';
color: #525252;
border: 1px solid #525252;
padding: 2px 4px;
border-bottom-width: 2px;
padding: 0 4px;
border-radius: 4px;
margin-left: 56px;
margin-left: 6px;
line-height: 0;
}
.yRemoteSelection {

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

@ -11,12 +11,7 @@ import * as Y from "yjs"
import LiveblocksProvider from "@liveblocks/yjs"
import { MonacoBinding } from "y-monaco"
import { Awareness } from "y-protocols/awareness"
import {
TypedLiveblocksProvider,
useRoom,
AwarenessList,
useSelf,
} from "@/liveblocks.config"
import { TypedLiveblocksProvider, useRoom } from "@/liveblocks.config"
import {
ResizableHandle,
@ -27,6 +22,7 @@ import {
ChevronLeft,
ChevronRight,
FileJson,
Loader2,
Plus,
RotateCw,
Shell,
@ -355,15 +351,20 @@ export default function CodeEditor({
setFiles(files)
}
socket.on("connect", onConnect)
const onRateLimit = (message: string) => {
toast.error(message)
}
socket.on("connect", onConnect)
socket.on("disconnect", onDisconnect)
socket.on("loaded", onLoadedEvent)
socket.on("rateLimit", onRateLimit)
return () => {
socket.off("connect", onConnect)
socket.off("disconnect", onDisconnect)
socket.off("loaded", onLoadedEvent)
socket.off("rateLimit", onRateLimit)
}
}, [])
@ -547,7 +548,7 @@ export default function CodeEditor({
>
{!activeId ? (
<>
<div className="w-full h-full flex items-center justify-center text-xl font-medium text-secondary select-none">
<div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
<FileJson className="w-6 h-6 mr-3" />
No file selected.
</div>
@ -591,7 +592,12 @@ export default function CodeEditor({
value={activeFile ?? ""}
/>
</>
) : null}
) : (
<div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
<Loader2 className="animate-spin w-6 h-6 mr-3" />
Waiting for Clerk to load...
</div>
)}
</div>
</ResizablePanel>
<ResizableHandle />
@ -629,6 +635,8 @@ export default function CodeEditor({
minSize={20}
className="p-2 flex flex-col"
>
{isOwner ? (
<>
<div className="h-10 w-full flex gap-2 shrink-0">
<Tab selected>
<SquareTerminal className="w-4 h-4 mr-2" />
@ -650,6 +658,13 @@ export default function CodeEditor({
<div className="w-full relative grow h-full overflow-hidden rounded-md bg-secondary">
{socket ? <EditorTerminal socket={socket} /> : null}
</div>
</>
) : (
<div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">
<TerminalSquare className="w-4 h-4 mr-2" />
No terminal access.
</div>
)}
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>

30
frontend/components/editor/live/avatars.tsx
View File

@ -1,26 +1,30 @@
"use client"
import { colorClasses, colors } from "@/lib/colors"
import { useOthers } from "@/liveblocks.config"
import { useState } from "react"
const classNames = {
red: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-red-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-red-950 to-red-600 flex items-center justify-center text-xs font-medium",
orange:
"w-8 h-8 leading-none font-mono rounded-full ring-1 ring-orange-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-orange-950 to-orange-600 flex items-center justify-center text-xs font-medium",
yellow:
"w-8 h-8 leading-none font-mono rounded-full ring-1 ring-yellow-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-yellow-950 to-yellow-600 flex items-center justify-center text-xs font-medium",
green:
"w-8 h-8 leading-none font-mono rounded-full ring-1 ring-green-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-green-950 to-green-600 flex items-center justify-center text-xs font-medium",
blue: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-blue-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-blue-950 to-blue-600 flex items-center justify-center text-xs font-medium",
purple:
"w-8 h-8 leading-none font-mono rounded-full ring-1 ring-purple-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-purple-950 to-purple-600 flex items-center justify-center text-xs font-medium",
pink: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-pink-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-pink-950 to-pink-600 flex items-center justify-center text-xs font-medium",
}
export function Avatars() {
const users = useOthers()
const colorNames = Object.keys(colors)
const [activeColors, setActiveColors] = useState([])
return (
<>
<div className="flex space-x-2">
{users.map(({ connectionId, info }) => {
const c = colorNames[
connectionId % colorNames.length
] as keyof typeof colors
return (
<div
className={`w-8 h-8 font-mono rounded-full ring-1 ${colorClasses[c].ring} ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr ${colorClasses[c].bg} flex items-center justify-center text-xs font-medium`}
>
<div className={classNames[info.color]}>
{info.name
.split(" ")
.slice(0, 2)
@ -29,5 +33,7 @@ export function Avatars() {
)
})}
</div>
<div className="h-full w-[1px] bg-border mx-2" />
</>
)
}

5
frontend/components/editor/live/cursors.tsx
View File

@ -5,11 +5,14 @@ import {
UserAwareness,
useSelf,
} from "@/liveblocks.config"
import { colors } from "@/lib/colors"
export function Cursors({ yProvider }: { yProvider: TypedLiveblocksProvider }) {
// Get user info from Liveblocks authentication endpoint
const userInfo = useSelf((me) => me.info)
if (!userInfo) return null
const [awarenessUsers, setAwarenessUsers] = useState<AwarenessList>([])
useEffect(() => {
@ -40,7 +43,7 @@ export function Cursors({ yProvider }: { yProvider: TypedLiveblocksProvider }) {
cursorStyles += `
.yRemoteSelection-${clientId},
.yRemoteSelectionHead-${clientId} {
--user-color: ${"#FF0000"};
--user-color: ${colors[client.user.color]};
}
.yRemoteSelectionHead-${clientId}::after {

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

@ -2,6 +2,7 @@
import { RoomProvider } from "@/liveblocks.config"
import { ClientSideSuspense } from "@liveblocks/react"
import Loading from "../loading"
export function Room({
id,
@ -17,9 +18,9 @@ export function Room({
cursor: null,
}}
>
<ClientSideSuspense fallback={<div>Loading!!!!</div>}>
{() => children}
</ClientSideSuspense>
{/* <ClientSideSuspense fallback={<Loading />}> */}
{children}
{/* </ClientSideSuspense> */}
</RoomProvider>
)
}

41
frontend/components/editor/loading.tsx Normal file
View File

@ -0,0 +1,41 @@
import Image from "next/image"
import Logo from "@/assets/logo.svg"
import { Skeleton } from "../ui/skeleton"
import { Loader, Loader2 } from "lucide-react"
export default function Loading() {
return (
<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="flex items-center space-x-4">
<Image src={Logo} alt="Logo" width={36} height={36} />
<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 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 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>{" "}
</div>
</div>
)
}

2
frontend/components/editor/navbar/index.tsx
View File

@ -62,7 +62,7 @@ export default function Navbar({
) : null}
</div>
</div>
<div className="flex items-center space-x-4">
<div className="flex items-center h-full space-x-4">
<Avatars />
{isOwner ? (

22
frontend/components/editor/sidebar/index.tsx
View File

@ -8,7 +8,7 @@ import { useState } from "react"
import New from "./new"
import { Socket } from "socket.io-client"
import Button from "@/components/ui/customButton"
import Toggle from "@/components/ui/customToggle"
import { Switch } from "@/components/ui/switch"
export default function Sidebar({
files,
@ -104,12 +104,20 @@ export default function Sidebar({
)}
</div>
</div>
{/* <div className="flex items-center"> */}
<Toggle value={ai} setValue={setAi} className="w-full">
<Sparkles className="h-3 w-3 mr-2" />
AI Copilot
</Toggle>
{/* </div> */}
<div className="flex items-center justify-between w-full">
<div className="flex items-center">
<Sparkles
className={`h-4 w-4 mr-2 ${
ai ? "text-indigo-500" : "text-muted-foreground"
}`}
/>
Copilot{" "}
<span className="font-mono text-muted-foreground inline-block ml-1.5 text-xs leading-none border border-b-2 border-muted-foreground py-1 px-1.5 rounded-md">
⌘G
</span>
</div>
<Switch checked={ai} onCheckedChange={setAi} />
</div>
</div>
)
}

43
frontend/components/ui/customToggle.tsx
View File

@ -1,43 +0,0 @@
import * as React from "react"
import { Plus } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "./button"
const Toggle = ({
children,
className,
value,
setValue,
}: {
children: React.ReactNode
className?: string
value: boolean
setValue: React.Dispatch<React.SetStateAction<boolean>>
}) => {
if (value)
return (
<button
onClick={() => setValue(false)}
className={cn(
className,
`gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-2 h-9 focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`
)}
>
<div className="rounded-[6px] w-full gradient-button flex items-center justify-center whitespace-nowrap px-4 py-2 h-full">
{children}
</div>
</button>
)
else
return (
<Button
className="w-full"
variant="outline"
onClick={() => setValue(true)}
>
{children}
</Button>
)
}
export default Toggle

15
frontend/components/ui/skeleton.tsx Normal file
View File

@ -0,0 +1,15 @@
import { cn } from "@/lib/utils"
function Skeleton({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn("animate-pulse rounded-md bg-primary/10", className)}
{...props}
/>
)
}
export { Skeleton }

29
frontend/components/ui/switch.tsx Normal file
View File

@ -0,0 +1,29 @@
"use client"
import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"
import { cn } from "@/lib/utils"
const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
)}
/>
</SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName
export { Switch }

31
frontend/lib/colors.ts
View File

@ -7,34 +7,3 @@ export const colors = {
purple: "#7c3aed",
pink: "#db2777",
}
export const colorClasses = {
red: {
ring: "ring-red-700",
bg: "from-red-950 to-red-600",
},
orange: {
ring: "ring-orange-700",
bg: "from-orange-950 to-orange-600",
},
yellow: {
ring: "ring-yellow-700",
bg: "from-yellow-950 to-yellow-600",
},
green: {
ring: "ring-green-700",
bg: "from-green-950 to-green-600",
},
blue: {
ring: "ring-blue-700",
bg: "from-blue-950 to-blue-600",
},
purple: {
ring: "ring-purple-700",
bg: "from-purple-950 to-purple-600",
},
pink: {
ring: "ring-pink-700",
bg: "from-pink-950 to-pink-600",
},
}

6
frontend/liveblocks.config.ts
View File

@ -1,6 +1,7 @@
import { createClient } from "@liveblocks/client"
import { createRoomContext, createLiveblocksContext } from "@liveblocks/react"
import YLiveblocksProvider from "@liveblocks/yjs"
import { colors } from "./lib/colors"
const client = createClient({
// publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY!,
@ -73,6 +74,7 @@ type UserMeta = {
info: {
name: string
email: string
color: keyof typeof colors
}
}
@ -99,7 +101,6 @@ export type AwarenessList = [number, UserAwareness][]
// Room-level hooks, use inside `RoomProvider`
export const {
suspense: {
RoomProvider,
useRoom,
useMyPresence,
@ -139,20 +140,17 @@ export const {
// These hooks can be exported from either context
useUser,
useRoomInfo,
},
} = createRoomContext<Presence, Storage, UserMeta, RoomEvent, ThreadMetadata>(
client
)
// Project-level hooks, use inside `LiveblocksProvider`
export const {
suspense: {
LiveblocksProvider,
useMarkInboxNotificationAsRead,
useMarkAllInboxNotificationsAsRead,
useInboxNotifications,
useUnreadInboxNotificationsCount,
},
} = createLiveblocksContext<UserMeta, ThreadMetadata>(client)
export type TypedLiveblocksProvider = YLiveblocksProvider<

30
frontend/package-lock.json generated
View File

@ -24,6 +24,7 @@
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@xterm/addon-fit": "^0.10.0",
"@xterm/xterm": "^5.5.0",
"class-variance-authority": "^0.7.0",
@ -1228,6 +1229,35 @@
}
}
},
"node_modules/@radix-ui/react-switch": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz",
"integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-controllable-state": "1.0.1",
"@radix-ui/react-use-previous": "1.0.1",
"@radix-ui/react-use-size": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-callback-ref": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",

1
frontend/package.json
View File

@ -25,6 +25,7 @@
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@xterm/addon-fit": "^0.10.0",
"@xterm/xterm": "^5.5.0",
"class-variance-authority": "^0.7.0",