stackblitz · codewithtyler · Nov 23, 2024 · Nov 24, 2024
diff --git a/app/components/ui/PanelHeader.tsx b/app/components/ui/PanelHeader.tsx
@@ -1,20 +1,19 @@
-import { memo } from 'react';
 import { classNames } from '~/utils/classNames';
 
 interface PanelHeaderProps {
   className?: string;
   children: React.ReactNode;
 }
 
-export const PanelHeader = memo(({ className, children }: PanelHeaderProps) => {
+export const PanelHeader = ({ children, className }: PanelHeaderProps) => {
   return (
     <div
       className={classNames(
-        'flex items-center gap-2 bg-bolt-elements-background-depth-2 text-bolt-elements-textSecondary border-b border-bolt-elements-borderColor px-4 py-1 min-h-[34px] text-sm',
+        'flex items-center bg-bolt-elements-background-depth-2 border-y border-bolt-elements-borderColor gap-1.5 h-[var(--panel-header-height)] p-2',
         className,
       )}
     >
       {children}
     </div>
   );
-});
+};
diff --git a/app/components/workbench/EditorPanel.tsx b/app/components/workbench/EditorPanel.tsx
@@ -39,7 +39,7 @@ interface EditorPanelProps {
 
 const MAX_TERMINALS = 3;
 const DEFAULT_TERMINAL_SIZE = 25;
-const DEFAULT_EDITOR_SIZE = 100 - DEFAULT_TERMINAL_SIZE;
+const COLLAPSED_TERMINAL_SIZE = 35;
 
 const editorSettings: EditorSettings = { tabSize: 2 };
 
@@ -59,7 +59,7 @@ export const EditorPanel = memo(
     renderLogger.trace('EditorPanel');
 
     const theme = useStore(themeStore);
-    const showTerminal = useStore(workbenchStore.showTerminal);
+    const { showTerminal } = useStore(workbenchStore.store);
 
     const terminalRefs = useRef<Array<TerminalRef | null>>([]);
     const terminalPanelRef = useRef<ImperativePanelHandle>(null);
@@ -104,14 +104,7 @@ export const EditorPanel = memo(
         return;
       }
 
-      const isCollapsed = terminal.isCollapsed();
-
-      if (!showTerminal && !isCollapsed) {
-        terminal.collapse();
-      } else if (showTerminal && isCollapsed) {
-        terminal.resize(DEFAULT_TERMINAL_SIZE);
-      }
-
+      terminal.resize(showTerminal ? DEFAULT_TERMINAL_SIZE : COLLAPSED_TERMINAL_SIZE);
       terminalToggledByShortcut.current = false;
     }, [showTerminal]);
 
@@ -123,14 +116,19 @@ export const EditorPanel = memo(
     };
 
     return (
-      <PanelGroup direction="vertical">
-        <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>
+      <div
+        className={classNames('flex flex-col h-full overflow-hidden', {
+          'h-[calc(100%-35px)]': !showTerminal,
+          'h-[75%]': showTerminal,
+        })}
+      >
+        <div style={{ height: 'calc(100% - var(--panel-header-height))' }} className="flex-1 overflow-hidden">
           <PanelGroup direction="horizontal">
             <Panel defaultSize={20} minSize={10} collapsible>
               <div className="flex flex-col border-r border-bolt-elements-borderColor h-full">
                 <PanelHeader>
-                  <div className="i-ph:tree-structure-duotone shrink-0" />
-                  Files
+                  <div className="i-ph:tree-structure-duotone shrink-0 text-bolt-elements-textSecondary" />
+                  <span className="text-bolt-elements-textSecondary">Files</span>
                 </PanelHeader>
                 <FileTree
                   className="h-full"
@@ -178,35 +176,35 @@ export const EditorPanel = memo(
               </div>
             </Panel>
           </PanelGroup>
-        </Panel>
-        <PanelResizeHandle />
-        <Panel
-          ref={terminalPanelRef}
-          defaultSize={showTerminal ? DEFAULT_TERMINAL_SIZE : 0}
-          minSize={10}
-          collapsible
-          onExpand={() => {
-            if (!terminalToggledByShortcut.current) {
-              workbenchStore.toggleTerminal(true);
-            }
-          }}
-          onCollapse={() => {
-            if (!terminalToggledByShortcut.current) {
-              workbenchStore.toggleTerminal(false);
-            }
-          }}
+        </div>
+
+        <div
+          className={classNames(
+            'absolute bottom-0 left-0 right-0 bg-bolt-elements-terminals-background border-t border-[#2D2D2D]',
+            {
+              'h-[50px]': !showTerminal,
+              'h-[25%]': showTerminal,
+            },
+          )}
         >
-          <div className="h-full">
+          <div className="h-full overflow-hidden">
             <div className="bg-bolt-elements-terminals-background h-full flex flex-col">
-              <div className="flex items-center bg-bolt-elements-background-depth-2 border-y border-bolt-elements-borderColor gap-1.5 min-h-[34px] p-2">
+              <div
+                className="flex items-center bg-bolt-elements-background-depth-2 border-b border-bolt-elements-borderColor gap-1.5 px-2"
+                style={{
+                  height: 'var(--panel-header-height)',
+                  minHeight: 'var(--panel-header-height)',
+                  maxHeight: 'var(--panel-header-height)',
+                }}
+              >
                 {Array.from({ length: terminalCount }, (_, index) => {
                   const isActive = activeTerminal === index;
 
                   return (
                     <button
                       key={index}
                       className={classNames(
-                        'flex items-center text-sm cursor-pointer gap-1.5 px-3 py-2 h-full whitespace-nowrap rounded-full',
+                        'flex items-center text-sm cursor-pointer gap-1.5 px-3 py-2 whitespace-nowrap rounded-full',
                         {
                           'bg-bolt-elements-terminals-buttonBackground text-bolt-elements-textPrimary': isActive,
                           'bg-bolt-elements-background-depth-2 text-bolt-elements-textSecondary hover:bg-bolt-elements-terminals-buttonBackground':
@@ -223,10 +221,10 @@ export const EditorPanel = memo(
                 {terminalCount < MAX_TERMINALS && <IconButton icon="i-ph:plus" size="md" onClick={addTerminal} />}
                 <IconButton
                   className="ml-auto"
-                  icon="i-ph:caret-down"
-                  title="Close"
+                  icon={showTerminal ? 'i-ph:caret-down' : 'i-ph:caret-up'}
+                  title={showTerminal ? 'Collapse Terminal' : 'Expand Terminal'}
                   size="md"
-                  onClick={() => workbenchStore.toggleTerminal(false)}
+                  onClick={() => workbenchStore.toggleTerminal(!showTerminal)}
                 />
               </div>
               {Array.from({ length: terminalCount }, (_, index) => {
@@ -249,8 +247,8 @@ export const EditorPanel = memo(
               })}
             </div>
           </div>
-        </Panel>
-      </PanelGroup>
+        </div>
+      </div>
     );
   },
 );
diff --git a/app/components/workbench/Workbench.client.tsx b/app/components/workbench/Workbench.client.tsx
@@ -8,7 +8,6 @@ import {
   type OnScrollCallback as OnEditorScroll,
 } from '~/components/editor/codemirror/CodeMirrorEditor';
 import { IconButton } from '~/components/ui/IconButton';
-import { PanelHeaderButton } from '~/components/ui/PanelHeaderButton';
 import { Slider, type SliderOptions } from '~/components/ui/Slider';
 import { workbenchStore, type WorkbenchViewType } from '~/lib/stores/workbench';
 import { classNames } from '~/utils/classNames';
@@ -121,17 +120,6 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
               <div className="flex items-center px-3 py-2 border-b border-bolt-elements-borderColor">
                 <Slider selected={selectedView} options={sliderOptions} setSelected={setSelectedView} />
                 <div className="ml-auto" />
-                {selectedView === 'code' && (
-                  <PanelHeaderButton
-                    className="mr-1 text-sm"
-                    onClick={() => {
-                      workbenchStore.toggleTerminal(!workbenchStore.showTerminal.get());
-                    }}
-                  >
-                    <div className="i-ph:terminal" />
-                    Toggle Terminal
-                  </PanelHeaderButton>
-                )}
                 <IconButton
                   icon="i-ph:x-circle"
                   className="-mr-1"

diff --git a/app/lib/stores/terminal.ts b/app/lib/stores/terminal.ts
@@ -8,7 +8,7 @@ export class TerminalStore {
   #webcontainer: Promise<WebContainer>;
   #terminals: Array<{ terminal: ITerminal; process: WebContainerProcess }> = [];
 
-  showTerminal: WritableAtom<boolean> = import.meta.hot?.data.showTerminal ?? atom(false);
+  showTerminal: WritableAtom<boolean> = import.meta.hot?.data.showTerminal ?? atom(true);
 
   constructor(webcontainerPromise: Promise<WebContainer>) {
     this.#webcontainer = webcontainerPromise;

diff --git a/app/lib/stores/workbench.ts b/app/lib/stores/workbench.ts
@@ -23,21 +23,27 @@ type Artifacts = MapStore<Record<string, ArtifactState>>;
 
 export type WorkbenchViewType = 'code' | 'preview';
 
+interface WorkbenchState {
+  showTerminal: boolean;
+}
+
 export class WorkbenchStore {
+  #store = atom<WorkbenchState>({ showTerminal: true });
   #previewsStore = new PreviewsStore(webcontainer);
   #filesStore = new FilesStore(webcontainer);
   #editorStore = new EditorStore(this.#filesStore);
   #terminalStore = new TerminalStore(webcontainer);
 
   artifacts: Artifacts = import.meta.hot?.data.artifacts ?? map({});
-
   showWorkbench: WritableAtom<boolean> = import.meta.hot?.data.showWorkbench ?? atom(false);
   currentView: WritableAtom<WorkbenchViewType> = import.meta.hot?.data.currentView ?? atom('code');
   unsavedFiles: WritableAtom<Set<string>> = import.meta.hot?.data.unsavedFiles ?? atom(new Set<string>());
   modifiedFiles = new Set<string>();
   artifactIdList: string[] = [];
 
   constructor() {
+    this.#terminalStore.showTerminal.set(true);
+
     if (import.meta.hot) {
       import.meta.hot.data.artifacts = this.artifacts;
       import.meta.hot.data.unsavedFiles = this.unsavedFiles;
@@ -46,6 +52,10 @@ export class WorkbenchStore {
     }
   }
 
+  get store() {
+    return this.#store;
+  }
+
   get previews() {
     return this.#previewsStore.previews;
   }
@@ -75,7 +85,9 @@ export class WorkbenchStore {
   }
 
   toggleTerminal(value?: boolean) {
-    this.#terminalStore.toggleTerminal(value);
+    const newValue = value !== undefined ? value : !this.#store.get().showTerminal;
+    this.#store.set({ showTerminal: newValue });
+    this.#terminalStore.toggleTerminal(newValue);
   }
 
   attachTerminal(terminal: ITerminal) {

diff --git a/app/styles/variables.scss b/app/styles/variables.scss
@@ -217,6 +217,7 @@
  */
 :root {
   --header-height: 54px;
+  --panel-header-height: 50px;
   --chat-max-width: 37rem;
   --chat-min-width: 640px;
   --workbench-width: min(calc(100% - var(--chat-min-width)), 1536px);

diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "remark-gfm": "^4.0.0",
     "remix-island": "^0.2.0",
     "remix-utils": "^7.6.0",
+    "sass-embedded": "^1.81.0",
     "shiki": "^1.9.1",
     "unist-util-visit": "^5.0.0"
   },