Add draggable and collapsible panels to the UI layout

All-Hands-AI · Dec 30, 2024 · 55d4684 · 55d4684
1 parent 5d92da0
commit 55d4684
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 36 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -35,6 +35,7 @@
     "react-icons": "^5.4.0",
     "react-markdown": "^9.0.1",
     "react-redux": "^9.2.0",
+    "react-resizable-panels": "^2.1.7",
     "react-router": "^7.1.1",
     "react-syntax-highlighter": "^15.6.1",
     "react-textarea-autosize": "^8.5.4",

diff --git a/frontend/src/routes/_oh.app/panels.module.css b/frontend/src/routes/_oh.app/panels.module.css
@@ -0,0 +1,23 @@
+.resizeHandle {
+  width: 8px;
+  background-color: var(--nextui-default-100);
+  transition: background-color 0.2s;
+  margin: 0 -2px;
+  cursor: col-resize;
+}
+
+.resizeHandle:hover {
+  background-color: var(--nextui-default-200);
+}
+
+.resizeHandle[data-resize-handle-active] {
+  background-color: var(--nextui-default-300);
+}
+
+.resizeHandleBar {
+  height: 100%;
+  width: 2px;
+  margin: 0 auto;
+  background-color: var(--nextui-default-300);
+  border-radius: 2px;
+}
diff --git a/frontend/src/routes/_oh.app/route.tsx b/frontend/src/routes/_oh.app/route.tsx
@@ -2,6 +2,7 @@ import { useDisclosure } from "@nextui-org/react";
 import React from "react";
 import { Outlet } from "react-router";
 import { useDispatch, useSelector } from "react-redux";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import {
   ConversationProvider,
   useConversation,
@@ -27,6 +28,7 @@ import { Container } from "#/components/layout/container";
 import Security from "#/components/shared/modals/security/security";
 import { CountBadge } from "#/components/layout/count-badge";
 import { TerminalStatusLabel } from "#/components/features/terminal/terminal-status-label";
+import styles from "./panels.module.css";
 
 function AppContent() {
   const { gitHubToken } = useAuth();
@@ -62,43 +64,53 @@ function AppContent() {
     <WsClientProvider ghToken={gitHubToken} conversationId={conversationId}>
       <EventHandler>
         <div className="flex flex-col h-full gap-3">
-          <div className="flex h-full overflow-auto gap-3">
-            <Container className="w-full md:w-[390px] max-h-full relative">
-              <ChatInterface />
-            </Container>
+          <div className="flex h-full overflow-auto">
+            <PanelGroup direction="horizontal" className="w-full">
+              <Panel defaultSize={25} minSize={15} maxSize={50} collapsible>
+                <Container className="h-full relative">
+                  <ChatInterface />
+                </Container>
+              </Panel>
 
-            <div className="hidden md:flex flex-col grow gap-3">
-              <Container
-                className="h-full"
-                labels={[
-                  {
-                    label: <TerminalStatusLabel />,
-                    to: "",
-                    icon: <CodeIcon />,
-                  },
-                  { label: "Workspace", to: "workspace", icon: <CodeIcon /> },
-                  { label: "Jupyter", to: "jupyter", icon: <ListIcon /> },
-                  {
-                    label: (
-                      <div className="flex items-center gap-1">
-                        Browser
-                        {updateCount > 0 && <CountBadge count={updateCount} />}
-                      </div>
-                    ),
-                    to: "browser",
-                    icon: <GlobeIcon />,
-                  },
-                ]}
-              >
-                <FilesProvider>
-                  {/* Terminal uses some API that is not compatible in a server-environment. For this reason, we lazy load it to ensure
-                   * that it loads only in the client-side. */}
-                  <React.Suspense fallback={<div className="h-full" />}>
-                    <Outlet />
-                  </React.Suspense>
-                </FilesProvider>
-              </Container>
-            </div>
+              <PanelResizeHandle className={styles.resizeHandle}>
+                <div className={styles.resizeHandleBar} />
+              </PanelResizeHandle>
+
+              <Panel className="hidden md:block">
+                <Container
+                  className="h-full"
+                  labels={[
+                    {
+                      label: <TerminalStatusLabel />,
+                      to: "",
+                      icon: <CodeIcon />,
+                    },
+                    { label: "Workspace", to: "workspace", icon: <CodeIcon /> },
+                    { label: "Jupyter", to: "jupyter", icon: <ListIcon /> },
+                    {
+                      label: (
+                        <div className="flex items-center gap-1">
+                          Browser
+                          {updateCount > 0 && (
+                            <CountBadge count={updateCount} />
+                          )}
+                        </div>
+                      ),
+                      to: "browser",
+                      icon: <GlobeIcon />,
+                    },
+                  ]}
+                >
+                  <FilesProvider>
+                    {/* Terminal uses some API that is not compatible in a server-environment. For this reason, we lazy load it to ensure
+                     * that it loads only in the client-side. */}
+                    <React.Suspense fallback={<div className="h-full" />}>
+                      <Outlet />
+                    </React.Suspense>
+                  </FilesProvider>
+                </Container>
+              </Panel>
+            </PanelGroup>
           </div>
 
           <div className="h-[60px]">