add resizing logic

2024-05-09 22:16:56 -07:00
parent 1500e84724
commit e86e86dbe2
8 changed files with 150 additions and 50 deletions
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@ -30,6 +30,7 @@ import DisableAccessModal from "./live/disableModal";
 import Loading from "./loading";
 import PreviewWindow from "./preview";
 import Terminals from "./terminals";
+import { ImperativePanelHandle } from "react-resizable-panels";

 export default function CodeEditor({
  userData,
@ -44,12 +45,28 @@ export default function CodeEditor({
    `http://localhost:4000?userId=${userData.id}&sandboxId=${sandboxData.id}`
  );

+  const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(
+    sandboxData.type !== "react"
+  );
+  const [disableAccess, setDisableAccess] = useState({
+    isDisabled: false,
+    message: "",
+  });
+
+  // File state
  const [files, setFiles] = useState<(TFolder | TFile)[]>([]);
  const [tabs, setTabs] = useState<TTab[]>([]);
-  const [editorLanguage, setEditorLanguage] = useState("plaintext");
  const [activeFileId, setActiveFileId] = useState<string>("");
  const [activeFileContent, setActiveFileContent] = useState("");
+
+  // Editor state
+  const [editorLanguage, setEditorLanguage] = useState("plaintext");
  const [cursorLine, setCursorLine] = useState(0);
+  const [editorRef, setEditorRef] =
+    useState<monaco.editor.IStandaloneCodeEditor>();
+
+  // AI Copilot state
+  const [ai, setAi] = useState(false);
  const [generate, setGenerate] = useState<{
    show: boolean;
    id: string;
@ -62,6 +79,8 @@ export default function CodeEditor({
    options: monaco.editor.IModelDeltaDecoration[];
    instance: monaco.editor.IEditorDecorationsCollection | undefined;
  }>({ options: [], instance: undefined });
+
+  // Terminal state
  const [terminals, setTerminals] = useState<
    {
      id: string;
@ -71,24 +90,21 @@ export default function CodeEditor({
  const [activeTerminalId, setActiveTerminalId] = useState("");
  const [creatingTerminal, setCreatingTerminal] = useState(false);
  const [closingTerminal, setClosingTerminal] = useState("");
-  const [provider, setProvider] = useState<TypedLiveblocksProvider>();
-  const [ai, setAi] = useState(false);
-  const [disableAccess, setDisableAccess] = useState({
-    isDisabled: false,
-    message: "",
-  });
+  const activeTerminal = terminals.find((t) => t.id === activeTerminalId);

  const isOwner = sandboxData.userId === userData.id;
  const clerk = useClerk();
-  const room = useRoom();
-  const activeTerminal = terminals.find((t) => t.id === activeTerminalId);

-  const [editorRef, setEditorRef] =
-    useState<monaco.editor.IStandaloneCodeEditor>();
+  // Liveblocks hooks
+  const room = useRoom();
+  const [provider, setProvider] = useState<TypedLiveblocksProvider>();
+
+  // Refs for libraries / features
  const editorContainerRef = useRef<HTMLDivElement>(null);
  const monacoRef = useRef<typeof monaco | null>(null);
  const generateRef = useRef<HTMLDivElement>(null);
  const generateWidgetRef = useRef<HTMLDivElement>(null);
+  const previewPanelRef = useRef<ImperativePanelHandle>(null);

  // Resize observer tracks editor width for generate widget
  const resizeObserver = new ResizeObserver((entries) => {
@ -371,10 +387,11 @@ export default function CodeEditor({
    };

    const onDisableAccess = (message: string) => {
-      setDisableAccess({
-        isDisabled: true,
-        message,
-      });
+      if (!isOwner)
+        setDisableAccess({
+          isDisabled: true,
+          message,
+        });
    };

    socket.on("connect", onConnect);
@ -571,7 +588,7 @@ export default function CodeEditor({
      <ResizablePanelGroup direction="horizontal">
        <ResizablePanel
          className="p-2 flex flex-col"
-          maxSize={75}
+          maxSize={80}
          minSize={30}
          defaultSize={60}
        >
@ -659,11 +676,22 @@ export default function CodeEditor({
        <ResizablePanel defaultSize={40}>
          <ResizablePanelGroup direction="vertical">
            <ResizablePanel
+              ref={previewPanelRef}
              defaultSize={50}
-              minSize={20}
+              collapsedSize={4}
+              minSize={25}
+              collapsible
              className="p-2 flex flex-col"
+              onCollapse={() => setIsPreviewCollapsed(true)}
+              onExpand={() => setIsPreviewCollapsed(false)}
            >
-              <PreviewWindow />
+              <PreviewWindow
+                collapsed={isPreviewCollapsed}
+                open={() => {
+                  previewPanelRef.current?.expand();
+                  setIsPreviewCollapsed(false);
+                }}
+              />
            </ResizablePanel>
            <ResizableHandle />
            <ResizablePanel
--- a/frontend/components/editor/preview/index.tsx
+++ b/frontend/components/editor/preview/index.tsx
@ -5,31 +5,69 @@ import {
  ChevronRight,
  RotateCw,
  TerminalSquare,
+  UnfoldVertical,
 } from "lucide-react";

-export default function PreviewWindow() {
+export default function PreviewWindow({
+  collapsed,
+  open,
+}: {
+  collapsed: boolean;
+  open: () => void;
+}) {
  return (
    <>
-      <div className="h-10 select-none w-full flex gap-2">
+      <div
+        className={`${
+          collapsed ? "h-full" : "h-10"
+        } select-none w-full flex gap-2`}
+      >
        <div className="h-8 rounded-md px-3 text-xs bg-secondary flex items-center w-full justify-between">
          Preview
          <div className="flex space-x-1 translate-x-1">
-            <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
-              <TerminalSquare className="w-4 h-4" />
-            </div>
-            <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
-              <ChevronLeft className="w-4 h-4" />
-            </div>
-            <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
-              <ChevronRight className="w-4 h-4" />
-            </div>
-            <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
-              <RotateCw className="w-3 h-3" />
-            </div>
+            {collapsed ? (
+              <PreviewButton onClick={open}>
+                <UnfoldVertical className="w-4 h-4" />
+              </PreviewButton>
+            ) : (
+              <>
+                <PreviewButton onClick={() => console.log("Terminal")}>
+                  <TerminalSquare className="w-4 h-4" />
+                </PreviewButton>
+                <PreviewButton onClick={() => console.log("Back")}>
+                  <ChevronLeft className="w-4 h-4" />
+                </PreviewButton>
+                <PreviewButton onClick={() => console.log("Forward")}>
+                  <ChevronRight className="w-4 h-4" />
+                </PreviewButton>
+                <PreviewButton onClick={() => console.log("Reload")}>
+                  <RotateCw className="w-3 h-3" />
+                </PreviewButton>
+              </>
+            )}
          </div>
        </div>
      </div>
-      <div className="w-full grow rounded-md bg-foreground"></div>
+      {collapsed ? null : (
+        <div className="w-full grow rounded-md bg-foreground"></div>
+      )}
    </>
  );
 }
+
+function PreviewButton({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+}) {
+  return (
+    <div
+      className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm"
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+}
--- a/frontend/components/editor/terminals/index.tsx
+++ b/frontend/components/editor/terminals/index.tsx
@ -50,6 +50,7 @@ export default function Terminals({
        {terminals.map((term) => (
          <Tab
            key={term.id}
+            creating={creatingTerminal}
            onClick={() => setActiveTerminalId(term.id)}
            onClose={() =>
              closeTerminal({
@ -85,7 +86,7 @@ export default function Terminals({
          }}
          size="smIcon"
          variant={"secondary"}
-          className={`font-normal shrink-0 select-none text-muted-foreground`}
+          className={`font-normal shrink-0 select-none text-muted-foreground disabled:opacity-50`}
        >
          {creatingTerminal ? (
            <Loader2 className="animate-spin w-4 h-4" />
--- a/frontend/components/editor/terminals/terminal.tsx
+++ b/frontend/components/editor/terminals/terminal.tsx
@ -48,19 +48,29 @@ export default function EditorTerminal({
  useEffect(() => {
    if (!term) return;

-    if (terminalRef.current) {
-      const fitAddon = new FitAddon();
-      term.loadAddon(fitAddon);
-      term.open(terminalRef.current);
-      fitAddon.fit();
-    }
-    const disposable = term.onData((data) => {
+    if (!terminalRef.current) return;
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(terminalRef.current);
+    fitAddon.fit();
+
+    const disposableOnData = term.onData((data) => {
      console.log("terminalData", id, data);
      socket.emit("terminalData", id, data);
    });

+    const disposableOnResize = term.onResize((dimensions) => {
+      // const terminal_size = {
+      //   width: dimensions.cols,
+      //   height: dimensions.rows,
+      // };
+      fitAddon.fit();
+      socket.emit("terminalResize", dimensions);
+    });
+
    return () => {
-      disposable.dispose();
+      disposableOnData.dispose();
+      disposableOnResize.dispose();
    };
  }, [term, terminalRef.current]);