feat(layout): allow to minimize chat (#35)

packages/bolt/app/components/workbench/Workbench.client.tsx

@@ -11,6 +11,7 @@ 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';
 import { cubicEasingFn } from '~/utils/easings';
 import { renderLogger } from '~/utils/logger';
 import { EditorPanel } from './EditorPanel';
@@ -43,7 +44,7 @@ const workbenchVariants = {
     },
   },
   open: {
-    width: '100%',
+    width: 'var(--workbench-width)',
     transition: {
       duration: 0.2,
       ease: cubicEasingFn,
@@ -100,53 +101,71 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
 
   return (
     chatStarted && (
-      <motion.div initial="closed" animate={showWorkbench ? 'open' : 'closed'} variants={workbenchVariants}>
-        <div className="fixed top-[calc(var(--header-height)+1.5rem)] bottom-[calc(1.5rem-1px)] w-[50vw] mr-4 z-0">
-          <div className="flex flex-col bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor shadow-sm rounded-lg overflow-hidden absolute inset-0 right-8">
-            <div className="flex items-center px-3 py-2 border-b border-bolt-elements-borderColor">
-              <Slider selected={selectedView} options={sliderOptions} setSelected={setSelectedView} />
-              <PanelHeaderButton
-                className="ml-auto 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"
-                size="xl"
-                onClick={() => {
-                  workbenchStore.showWorkbench.set(false);
-                }}
-              />
-            </div>
-            <div className="relative flex-1 overflow-hidden">
-              <View
-                initial={{ x: selectedView === 'code' ? 0 : '-100%' }}
-                animate={{ x: selectedView === 'code' ? 0 : '-100%' }}
-              >
-                <EditorPanel
-                  editorDocument={currentDocument}
-                  isStreaming={isStreaming}
-                  selectedFile={selectedFile}
-                  files={files}
-                  unsavedFiles={unsavedFiles}
-                  onFileSelect={onFileSelect}
-                  onEditorScroll={onEditorScroll}
-                  onEditorChange={onEditorChange}
-                  onFileSave={onFileSave}
-                  onFileReset={onFileReset}
+      <motion.div
+        initial="closed"
+        animate={showWorkbench ? 'open' : 'closed'}
+        variants={workbenchVariants}
+        className="z-workbench"
+      >
+        <div
+          className={classNames(
+            'fixed top-[calc(var(--header-height)+1.5rem)] bottom-6 w-[var(--workbench-inner-width)] mr-4 z-0 transition-[left,width] duration-200 bolt-ease-cubic-bezier',
+            {
+              'left-[var(--workbench-left)]': showWorkbench,
+              'left-[100%]': !showWorkbench,
+            },
+          )}
+        >
+          <div className="absolute inset-0 px-6">
+            <div className="h-full flex flex-col bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor shadow-sm rounded-lg overflow-hidden">
+              <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"
+                  size="xl"
+                  onClick={() => {
+                    workbenchStore.showWorkbench.set(false);
+                  }}
                 />
-              </View>
-              <View
-                initial={{ x: selectedView === 'preview' ? 0 : '100%' }}
-                animate={{ x: selectedView === 'preview' ? 0 : '100%' }}
-              >
-                <Preview />
-              </View>
+              </div>
+              <div className="relative flex-1 overflow-hidden">
+                <View
+                  initial={{ x: selectedView === 'code' ? 0 : '-100%' }}
+                  animate={{ x: selectedView === 'code' ? 0 : '-100%' }}
+                >
+                  <EditorPanel
+                    editorDocument={currentDocument}
+                    isStreaming={isStreaming}
+                    selectedFile={selectedFile}
+                    files={files}
+                    unsavedFiles={unsavedFiles}
+                    onFileSelect={onFileSelect}
+                    onEditorScroll={onEditorScroll}
+                    onEditorChange={onEditorChange}
+                    onFileSave={onFileSave}
+                    onFileReset={onFileReset}
+                  />
+                </View>
+                <View
+                  initial={{ x: selectedView === 'preview' ? 0 : '100%' }}
+                  animate={{ x: selectedView === 'preview' ? 0 : '100%' }}
+                >
+                  <Preview />
+                </View>
+              </div>
             </div>
           </div>
         </div>