feat: add terminal and simple shortcut system (#16)

packages/bolt/app/components/workbench/EditorPanel.tsx

@@ -1,6 +1,6 @@
 import { useStore } from '@nanostores/react';
-import { memo, useMemo } from 'react';
-import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle, type ImperativePanelHandle } from 'react-resizable-panels';
 import {
   CodeMirrorEditor,
   type EditorDocument,
@@ -9,12 +9,16 @@ import {
   type OnSaveCallback as OnEditorSave,
   type OnScrollCallback as OnEditorScroll,
 } from '~/components/editor/codemirror/CodeMirrorEditor';
+import { PanelHeader } from '~/components/ui/PanelHeader';
 import { PanelHeaderButton } from '~/components/ui/PanelHeaderButton';
+import { shortcutEventEmitter } from '~/lib/hooks';
 import type { FileMap } from '~/lib/stores/files';
 import { themeStore } from '~/lib/stores/theme';
+import { workbenchStore } from '~/lib/stores/workbench';
 import { renderLogger } from '~/utils/logger';
 import { isMobile } from '~/utils/mobile';
 import { FileTreePanel } from './FileTreePanel';
+import { Terminal, type TerminalRef } from './terminal/Terminal';
 
 interface EditorPanelProps {
   files?: FileMap;
@@ -29,6 +33,9 @@ interface EditorPanelProps {
   onFileReset?: () => void;
 }
 
+const DEFAULT_TERMINAL_SIZE = 25;
+const DEFAULT_EDITOR_SIZE = 100 - DEFAULT_TERMINAL_SIZE;
+
 const editorSettings: EditorSettings = { tabSize: 2 };
 
 export const EditorPanel = memo(
@@ -47,6 +54,13 @@ export const EditorPanel = memo(
     renderLogger.trace('EditorPanel');
 
     const theme = useStore(themeStore);
+    const showTerminal = useStore(workbenchStore.showTerminal);
+
+    const terminalRefs = useRef<Array<TerminalRef | null>>([]);
+    const terminalPanelRef = useRef<ImperativePanelHandle>(null);
+    const terminalToggledByShortcut = useRef(false);
+
+    const [terminalCount] = useState(1);
 
     const activeFile = useMemo(() => {
       if (!editorDocument) {
@@ -60,54 +74,133 @@ export const EditorPanel = memo(
       return editorDocument !== undefined && unsavedFiles?.has(editorDocument.filePath);
     }, [editorDocument, unsavedFiles]);
 
+    useEffect(() => {
+      const unsubscribeFromEventEmitter = shortcutEventEmitter.on('toggleTerminal', () => {
+        terminalToggledByShortcut.current = true;
+      });
+
+      const unsubscribeFromThemeStore = themeStore.subscribe(() => {
+        for (const ref of Object.values(terminalRefs.current)) {
+          ref?.reloadStyles();
+        }
+      });
+
+      return () => {
+        unsubscribeFromEventEmitter();
+        unsubscribeFromThemeStore();
+      };
+    }, []);
+
+    useEffect(() => {
+      const { current: terminal } = terminalPanelRef;
+
+      if (!terminal) {
+        return;
+      }
+
+      const isCollapsed = terminal.isCollapsed();
+
+      if (!showTerminal && !isCollapsed) {
+        terminal.collapse();
+      } else if (showTerminal && isCollapsed) {
+        terminal.resize(DEFAULT_TERMINAL_SIZE);
+      }
+
+      terminalToggledByShortcut.current = false;
+    }, [showTerminal]);
+
     return (
-      <PanelGroup direction="horizontal">
-        <Panel defaultSize={25} minSize={10} collapsible>
-          <div className="flex flex-col border-r h-full">
-            <div className="flex items-center gap-2 bg-gray-50 border-b px-4 py-1 min-h-[34px]">
-              <div className="i-ph:tree-structure-duotone shrink-0" />
-              Files
-            </div>
-            <FileTreePanel
-              files={files}
-              unsavedFiles={unsavedFiles}
-              selectedFile={selectedFile}
-              onFileSelect={onFileSelect}
-            />
-          </div>
-        </Panel>
-        <PanelResizeHandle />
-        <Panel className="flex flex-col" defaultSize={75} minSize={20}>
-          <div className="flex items-center gap-2 bg-gray-50 border-b px-4 py-1 min-h-[34px] text-sm">
-            {activeFile && (
-              <div className="flex items-center flex-1">
-                {activeFile} {isStreaming && <span className="text-xs ml-1 font-semibold">(read-only)</span>}
-                {activeFileUnsaved && (
-                  <div className="flex gap-1 ml-auto -mr-1.5">
-                    <PanelHeaderButton onClick={onFileSave}>
-                      <div className="i-ph:floppy-disk-duotone" />
-                      Save
-                    </PanelHeaderButton>
-                    <PanelHeaderButton onClick={onFileReset}>
-                      <div className="i-ph:clock-counter-clockwise-duotone" />
-                      Reset
-                    </PanelHeaderButton>
+      <PanelGroup direction="vertical">
+        <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>
+          <PanelGroup direction="horizontal">
+            <Panel defaultSize={25} minSize={10} collapsible>
+              <div className="flex flex-col border-r h-full">
+                <PanelHeader>
+                  <div className="i-ph:tree-structure-duotone shrink-0" />
+                  Files
+                </PanelHeader>
+                <FileTreePanel
+                  files={files}
+                  unsavedFiles={unsavedFiles}
+                  selectedFile={selectedFile}
+                  onFileSelect={onFileSelect}
+                />
+              </div>
+            </Panel>
+            <PanelResizeHandle />
+            <Panel className="flex flex-col" defaultSize={75} minSize={20}>
+              <PanelHeader>
+                {activeFile && (
+                  <div className="flex items-center flex-1 text-sm">
+                    {activeFile} {isStreaming && <span className="text-xs ml-1 font-semibold">(read-only)</span>}
+                    {activeFileUnsaved && (
+                      <div className="flex gap-1 ml-auto -mr-1.5">
+                        <PanelHeaderButton onClick={onFileSave}>
+                          <div className="i-ph:floppy-disk-duotone" />
+                          Save
+                        </PanelHeaderButton>
+                        <PanelHeaderButton onClick={onFileReset}>
+                          <div className="i-ph:clock-counter-clockwise-duotone" />
+                          Reset
+                        </PanelHeaderButton>
+                      </div>
+                    )}
                   </div>
                 )}
+              </PanelHeader>
+              <div className="h-full flex-1 overflow-hidden">
+                <CodeMirrorEditor
+                  theme={theme}
+                  editable={!isStreaming && editorDocument !== undefined}
+                  settings={editorSettings}
+                  doc={editorDocument}
+                  autoFocusOnDocumentChange={!isMobile()}
+                  onScroll={onEditorScroll}
+                  onChange={onEditorChange}
+                  onSave={onFileSave}
+                />
               </div>
-            )}
-          </div>
-          <div className="h-full flex-1 overflow-hidden">
-            <CodeMirrorEditor
-              theme={theme}
-              editable={!isStreaming && editorDocument !== undefined}
-              settings={editorSettings}
-              doc={editorDocument}
-              autoFocusOnDocumentChange={!isMobile()}
-              onScroll={onEditorScroll}
-              onChange={onEditorChange}
-              onSave={onFileSave}
-            />
+            </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 className="border-t h-full">
+            <PanelHeader>
+              <span className="i-ph:terminal-window-duotone shrink-0" /> Terminal
+            </PanelHeader>
+            <div className="p-3.5">
+              {Array.from({ length: terminalCount }, (_, index) => {
+                return (
+                  <div key={index} className="h-full">
+                    <Terminal
+                      ref={(ref) => {
+                        terminalRefs.current.push(ref);
+                      }}
+                      onTerminalReady={(terminal) => workbenchStore.attachTerminal(terminal)}
+                      onTerminalResize={(cols, rows) => workbenchStore.onTerminalResize(cols, rows)}
+                      className="h-full"
+                      theme={theme}
+                    />
+                  </div>
+                );
+              })}
+            </div>
           </div>
         </Panel>
       </PanelGroup>