From 41dbd4a1dac493948a1b3e0e024158da8a55361b Mon Sep 17 00:00:00 2001 From: Akhileshrangani4 Date: Sat, 12 Oct 2024 14:54:21 -0400 Subject: [PATCH 01/14] feature: enable file renaming Users can now rename a file by double-clicking on it. --- frontend/components/editor/sidebar/file.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/components/editor/sidebar/file.tsx b/frontend/components/editor/sidebar/file.tsx index 14bc0da..b3f2e54 100644 --- a/frontend/components/editor/sidebar/file.tsx +++ b/frontend/components/editor/sidebar/file.tsx @@ -90,9 +90,9 @@ export default function SidebarFile({ if (!editing && !pendingDelete && !isMoving) selectFile({ ...data, saved: true }); }} - // onDoubleClick={() => { - // setEditing(true) - // }} + onDoubleClick={() => { + setEditing(true) + }} className={`${ dragging ? "opacity-50 hover:!bg-background" : "" } data-[state=open]:bg-secondary/50 w-full flex items-center h-7 px-1 hover:bg-secondary rounded-sm cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring`} From 6ea86afc708fa14e4e21746120992bd27d8639dc Mon Sep 17 00:00:00 2001 From: Akhileshrangani4 Date: Sat, 12 Oct 2024 14:54:43 -0400 Subject: [PATCH 02/14] chore: fix file paths --- backend/server/src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/backend/server/src/index.ts b/backend/server/src/index.ts index 0b00b8c..fb8bec1 100644 --- a/backend/server/src/index.ts +++ b/backend/server/src/index.ts @@ -192,7 +192,7 @@ io.on("connection", async (socket) => { }); const sandboxFiles = await getSandboxFiles(data.sandboxId); - const projectDirectory = path.join(dirName, "projects", data.sandboxId); + const projectDirectory = path.posix.join(dirName, "projects", data.sandboxId); const containerFiles = containers[data.sandboxId].files; const fileWatchers: WatchHandle[] = []; @@ -226,7 +226,7 @@ io.on("connection", async (socket) => { // Copy all files from the project to the container const promises = sandboxFiles.fileData.map(async (file) => { try { - const filePath = path.join(dirName, file.id); + const filePath = path.posix.join(dirName, file.id); const parentDirectory = path.dirname(filePath); if (!containerFiles.exists(parentDirectory)) { await containerFiles.makeDir(parentDirectory); @@ -254,7 +254,7 @@ io.on("connection", async (socket) => { } // This is the absolute file path in the container - const containerFilePath = path.join(directory, event.name); + const containerFilePath = path.posix.join(directory, event.name); // This is the file path relative to the home directory const sandboxFilePath = removeDirName(containerFilePath, dirName + "/"); // This is the directory being watched relative to the home directory From f863f2f76367b5ad951df4403c2ec8e3e9676dff Mon Sep 17 00:00:00 2001 From: Akhileshrangani4 Date: Sat, 12 Oct 2024 17:55:49 -0400 Subject: [PATCH 03/14] feat: add preview panel button --- frontend/components/editor/index.tsx | 21 +++++++++++++------- frontend/components/editor/preview/index.tsx | 9 ++++----- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx index 415b552..39af65a 100644 --- a/frontend/components/editor/index.tsx +++ b/frontend/components/editor/index.tsx @@ -145,7 +145,7 @@ export default function CodeEditor({ const generateRef = useRef(null) const suggestionRef = useRef(null) const generateWidgetRef = useRef(null) - const previewPanelRef = useRef(null) + const { previewPanelRef } = usePreview(); const editorPanelRef = useRef(null) const previewWindowRef = useRef<{ refreshIframe: () => void }>(null) @@ -827,6 +827,16 @@ export default function CodeEditor({ }) } + const togglePreviewPanel = () => { + if (isPreviewCollapsed) { + previewPanelRef.current?.expand(); + setIsPreviewCollapsed(false); + } else { + previewPanelRef.current?.collapse(); + setIsPreviewCollapsed(true); + } + }; + // On disabled access for shared users, show un-interactable loading placeholder + info modal if (disableAccess.isDisabled) return ( @@ -1061,7 +1071,7 @@ export default function CodeEditor({ setIsPreviewCollapsed(false)} > { - usePreview().previewPanelRef.current?.expand() - setIsPreviewCollapsed(false) - }} + open={togglePreviewPanel} collapsed={isPreviewCollapsed} src={previewURL} ref={previewWindowRef} @@ -1116,4 +1123,4 @@ const defaultCompilerOptions: monaco.languages.typescript.CompilerOptions = { module: monaco.languages.typescript.ModuleKind.ESNext, moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs, target: monaco.languages.typescript.ScriptTarget.ESNext, -} +} \ No newline at end of file diff --git a/frontend/components/editor/preview/index.tsx b/frontend/components/editor/preview/index.tsx index 1c32c6a..089e26f 100644 --- a/frontend/components/editor/preview/index.tsx +++ b/frontend/components/editor/preview/index.tsx @@ -4,6 +4,7 @@ import { Link, RotateCw, TerminalSquare, + UnfoldVertical, } from "lucide-react" import { useEffect, useRef, useState, useImperativeHandle, forwardRef } from "react" import { toast } from "sonner" @@ -40,16 +41,14 @@ ref: React.Ref<{
Preview
{collapsed ? ( - { }}> - + + ) : ( <> - {/* Removed the unfoldvertical button since we have the same thing via the run button. - - */} + { From b6569550fcf620ff14d11203c4790f69aed321b2 Mon Sep 17 00:00:00 2001 From: Akhileshrangani4 Date: Sat, 12 Oct 2024 19:46:32 -0400 Subject: [PATCH 04/14] feature: add terminal/preview layout button --- frontend/components/editor/index.tsx | 58 +++++++++++++------- frontend/components/editor/preview/index.tsx | 16 ------ 2 files changed, 39 insertions(+), 35 deletions(-) diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx index 39af65a..6b6b644 100644 --- a/frontend/components/editor/index.tsx +++ b/frontend/components/editor/index.tsx @@ -18,7 +18,7 @@ import { ResizablePanel, ResizablePanelGroup, } from "@/components/ui/resizable" -import { FileJson, Loader2, Sparkles, TerminalSquare } from "lucide-react" +import { FileJson, Loader2, Sparkles, TerminalSquare, ArrowDownToLine, ArrowRightToLine } from "lucide-react" import Tab from "../ui/tab" import Sidebar from "./sidebar" import GenerateInput from "./generate" @@ -145,7 +145,7 @@ export default function CodeEditor({ const generateRef = useRef(null) const suggestionRef = useRef(null) const generateWidgetRef = useRef(null) - const { previewPanelRef } = usePreview(); + const { previewPanelRef } = usePreview(); const editorPanelRef = useRef(null) const previewWindowRef = useRef<{ refreshIframe: () => void }>(null) @@ -416,7 +416,7 @@ export default function CodeEditor({ }) } }, [generate.show]) - + // Suggestion widget effect useEffect(() => { if (!suggestionRef.current || !editorRef) return @@ -686,9 +686,9 @@ export default function CodeEditor({ const selectFile = (tab: TTab) => { if (tab.id === activeFileId) return; - + setGenerate((prev) => ({ ...prev, show: false })); - + // Check if the tab already exists in the list of open tabs const exists = tabs.find((t) => t.id === tab.id); setTabs((prev) => { @@ -700,7 +700,7 @@ export default function CodeEditor({ // If the tab doesn't exist, add it to the list of tabs and make it active return [...prev, tab]; }); - + // If the file's content is already cached, set it as the active content if (fileContents[tab.id]) { setActiveFileContent(fileContents[tab.id]); @@ -711,7 +711,7 @@ export default function CodeEditor({ setActiveFileContent(response); }); } - + // Set the editor language based on the file type setEditorLanguage(processFileType(tab.name)); // Set the active file ID to the new tab @@ -837,6 +837,12 @@ export default function CodeEditor({ } }; + const [isHorizontalLayout, setIsHorizontalLayout] = useState(false); + + const toggleLayout = () => { + setIsHorizontalLayout(prev => !prev); + }; + // On disabled access for shared users, show un-interactable loading placeholder + info modal if (disableAccess.isDisabled) return ( @@ -972,12 +978,12 @@ export default function CodeEditor({ /> {/* Shadcn resizeable panels: https://ui.shadcn.com/docs/components/resizable */} - +
@@ -1022,7 +1028,7 @@ export default function CodeEditor({ onChange={(value) => { // If the new content is different from the cached content, update it if (value !== fileContents[activeFileId]) { - setActiveFileContent(value ?? ""); // Update the active file content + setActiveFileContent(value ?? ""); // Update the active file content // Mark the file as unsaved by setting 'saved' to false setTabs((prev) => prev.map((tab) => @@ -1068,24 +1074,38 @@ export default function CodeEditor({
- - + + setIsPreviewCollapsed(true)} onExpand={() => setIsPreviewCollapsed(false)} > - +
+ + +
+ {!isPreviewCollapsed && ( +
+