From 02656ce9397c000962cdf4a6a19f2d1aaaa50e04 Mon Sep 17 00:00:00 2001 From: Tyler Hughes Date: Sat, 23 Nov 2024 17:46:05 -0600 Subject: [PATCH 1/2] made terminal collapsible --- app/components/workbench/EditorPanel.tsx | 65 ++--- app/components/workbench/Workbench.client.tsx | 12 - app/lib/stores/terminal.ts | 2 +- app/lib/stores/workbench.ts | 16 +- package.json | 1 + pnpm-lock.yaml | 274 ++++++++++++++++++ 6 files changed, 318 insertions(+), 52 deletions(-) diff --git a/app/components/workbench/EditorPanel.tsx b/app/components/workbench/EditorPanel.tsx index d1a265a6..2327ec0c 100644 --- 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>([]); const terminalPanelRef = useRef(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,8 +116,13 @@ export const EditorPanel = memo( }; return ( - - +
+
@@ -178,27 +176,20 @@ export const EditorPanel = memo(
- - - { - if (!terminalToggledByShortcut.current) { - workbenchStore.toggleTerminal(true); - } - }} - onCollapse={() => { - if (!terminalToggledByShortcut.current) { - workbenchStore.toggleTerminal(false); - } - }} +
+ +
-
+
-
+
{Array.from({ length: terminalCount }, (_, index) => { const isActive = activeTerminal === index; @@ -206,7 +197,7 @@ export const EditorPanel = memo(
{Array.from({ length: terminalCount }, (_, index) => { @@ -249,8 +240,8 @@ export const EditorPanel = memo( })}
- - +
+
); }, ); diff --git a/app/components/workbench/Workbench.client.tsx b/app/components/workbench/Workbench.client.tsx index b8142a66..6ed62541 100644 --- 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) =>
- {selectedView === 'code' && ( - { - workbenchStore.toggleTerminal(!workbenchStore.showTerminal.get()); - }} - > -
- Toggle Terminal - - )} ; #terminals: Array<{ terminal: ITerminal; process: WebContainerProcess }> = []; - showTerminal: WritableAtom = import.meta.hot?.data.showTerminal ?? atom(false); + showTerminal: WritableAtom = import.meta.hot?.data.showTerminal ?? atom(true); constructor(webcontainerPromise: Promise) { this.#webcontainer = webcontainerPromise; diff --git a/app/lib/stores/workbench.ts b/app/lib/stores/workbench.ts index 4040de11..31ae420f 100644 --- a/app/lib/stores/workbench.ts +++ b/app/lib/stores/workbench.ts @@ -23,14 +23,18 @@ type Artifacts = MapStore>; export type WorkbenchViewType = 'code' | 'preview'; +interface WorkbenchState { + showTerminal: boolean; +} + export class WorkbenchStore { + #store = atom({ 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 = import.meta.hot?.data.showWorkbench ?? atom(false); currentView: WritableAtom = import.meta.hot?.data.currentView ?? atom('code'); unsavedFiles: WritableAtom> = import.meta.hot?.data.unsavedFiles ?? atom(new Set()); @@ -38,6 +42,8 @@ export class WorkbenchStore { 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/package.json b/package.json index 55834556..a22f1697 100644 --- 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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0896b714..0be3331a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -161,6 +161,9 @@ importers: remix-utils: specifier: ^7.6.0 version: 7.6.0(@remix-run/cloudflare@2.10.2(@cloudflare/workers-types@4.20240620.0)(typescript@5.5.2))(@remix-run/node@2.10.2(typescript@5.5.2))(@remix-run/react@2.10.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.2))(@remix-run/router@1.17.1)(react@18.3.1)(zod@3.23.8) + sass-embedded: + specifier: ^1.81.0 + version: 1.81.0 shiki: specifier: ^1.9.1 version: 1.9.1 @@ -471,6 +474,9 @@ packages: resolution: {integrity: sha512-mGEAFWCI5AQ4nrePhjp2WzvRen+UWR+SF4MvH70icIBClR08Gm3dT9MRa2jszOpfY00NyIYfm7/1CFZ37GvW4g==} engines: {node: ^18.0.0 || ^20.0.0} + '@bufbuild/protobuf@2.2.2': + resolution: {integrity: sha512-UNtPCbrwrenpmrXuRwn9jYpPoweNXj8X5sMvYgsqYyaH8jQ6LfUJSk3dJLnBK+6sfYPrF4iAIo5sd5HQ+tg75A==} + '@cloudflare/kv-asset-handler@0.1.3': resolution: {integrity: sha512-FNcunDuTmEfQTLRLtA6zz+buIXUHj1soPvSWzzQFBC+n2lsy+CGf/NIrR3SEPCmsVNQj70/Jx2lViCpq+09YpQ==} @@ -2180,6 +2186,9 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true + buffer-builder@0.2.0: + resolution: {integrity: sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==} + buffer-from@1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} @@ -2317,6 +2326,9 @@ packages: colorette@2.0.20: resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==} + colorjs.io@0.5.2: + resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==} + comma-separated-tokens@2.0.3: resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} @@ -3087,6 +3099,9 @@ packages: immutable@4.3.6: resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==} + immutable@5.0.3: + resolution: {integrity: sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==} + import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -4426,6 +4441,9 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} + rxjs@7.8.1: + resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==} + sade@1.8.1: resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==} engines: {node: '>=6'} @@ -4439,6 +4457,131 @@ packages: safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} + sass-embedded-android-arm64@1.81.0: + resolution: {integrity: sha512-I36P77/PKAHx6sqOmexO2iEY5kpsmQ1VxcgITZSOxPMQhdB6m4t3bTabfDuWQQmCrqqiNFtLQHeytB65bUqwiw==} + engines: {node: '>=14.0.0'} + cpu: [arm64] + os: [android] + + sass-embedded-android-arm@1.81.0: + resolution: {integrity: sha512-NWEmIuaIEsGFNsIRa+5JpIpPJyZ32H15E85CNZqEIhhwWlk9UNw7vlOCmTH8MtabtnACwC/2NG8VyNa3nxKzUQ==} + engines: {node: '>=14.0.0'} + cpu: [arm] + os: [android] + + sass-embedded-android-ia32@1.81.0: + resolution: {integrity: sha512-k8V1usXw30w1GVxvrteG1RzgYJzYQ9PfL2aeOqGdroBN7zYTD9VGJXTGcxA4IeeRxmRd7szVW2mKXXS472fh8g==} + engines: {node: '>=14.0.0'} + cpu: [ia32] + os: [android] + + sass-embedded-android-riscv64@1.81.0: + resolution: {integrity: sha512-RXlanyLXEpN/DEehXgLuKPsqT//GYlsGFxKXgRiCc8hIPAueFLQXKJmLWlL3BEtHgmFdbsStIu4aZCcb1hOFlQ==} + engines: {node: '>=14.0.0'} + cpu: [riscv64] + os: [android] + + sass-embedded-android-x64@1.81.0: + resolution: {integrity: sha512-RQG0FxGQ1DERNyUDED8+BDVaLIjI+BNg8lVcyqlLZUrWY6NhzjwYEeiN/DNZmMmHtqDucAPNDcsdVUNQqsBy2A==} + engines: {node: '>=14.0.0'} + cpu: [x64] + os: [android] + + sass-embedded-darwin-arm64@1.81.0: + resolution: {integrity: sha512-gLKbsfII9Ppua76N41ODFnKGutla9qv0OGAas8gxe0jYBeAQFi/1iKQYdNtQtKi4mA9n5TQTqz+HHCKszZCoyA==} + engines: {node: '>=14.0.0'} + cpu: [arm64] + os: [darwin] + + sass-embedded-darwin-x64@1.81.0: + resolution: {integrity: sha512-7uMOlT9hD2KUJCbTN2XcfghDxt/rc50ujjfSjSHjX1SYj7mGplkINUXvVbbvvaV2wt6t9vkGkCo5qNbeBhfwBg==} + engines: {node: '>=14.0.0'} + cpu: [x64] + os: [darwin] + + sass-embedded-linux-arm64@1.81.0: + resolution: {integrity: sha512-jy4bvhdUmqbyw1jv1f3Uxl+MF8EU/Y/GDx4w6XPJm4Ds+mwH/TwnyAwsxxoBhWfnBnW8q2ADy039DlS5p+9csQ==} + engines: {node: '>=14.0.0'} + cpu: [arm64] + os: [linux] + + sass-embedded-linux-arm@1.81.0: + resolution: {integrity: sha512-REqR9qM4RchCE3cKqzRy9Q4zigIV82SbSpCi/O4O3oK3pg2I1z7vkb3TiJsivusG/li7aqKZGmYOtAXjruGQDA==} + engines: {node: '>=14.0.0'} + cpu: [arm] + os: [linux] + + sass-embedded-linux-ia32@1.81.0: + resolution: {integrity: sha512-ga/Jk4q5Bn1aC+iHJteDZuLSKnmBUiS3dEg1fnl/Z7GaHIChceKDJOw0zNaILRXI0qT2E1at9MwzoRaRA5Nn/g==} + engines: {node: '>=14.0.0'} + cpu: [ia32] + os: [linux] + + sass-embedded-linux-musl-arm64@1.81.0: + resolution: {integrity: sha512-hpntWf5kjkoxncA1Vh8vhsUOquZ8AROZKx0rQh7ZjSRs4JrYZASz1cfevPKaEM3wIim/nYa6TJqm0VqWsrERlA==} + engines: {node: '>=14.0.0'} + cpu: [arm64] + os: [linux] + + sass-embedded-linux-musl-arm@1.81.0: + resolution: {integrity: sha512-oWVUvQ4d5Kx1Md75YXZl5z1WBjc+uOhfRRqzkJ3nWc8tjszxJN+y/5EOJavhsNI3/2yoTt6eMXRTqDD9b0tWSQ==} + engines: {node: '>=14.0.0'} + cpu: [arm] + os: [linux] + + sass-embedded-linux-musl-ia32@1.81.0: + resolution: {integrity: sha512-UEXUYkBuqTSwg5JNWiNlfMZ1Jx6SJkaEdx+fsL3Tk099L8cKSoJWH2EPz4ZJjNbyIMymrSdVfymheTeZ8u24xA==} + engines: {node: '>=14.0.0'} + cpu: [ia32] + os: [linux] + + sass-embedded-linux-musl-riscv64@1.81.0: + resolution: {integrity: sha512-1D7OznytbIhx2XDHWi1nuQ8d/uCVR7FGGzELgaU//T8A9DapVTUgPKvB70AF1k4GzChR9IXU/WvFZs2hDTbaJg==} + engines: {node: '>=14.0.0'} + cpu: [riscv64] + os: [linux] + + sass-embedded-linux-musl-x64@1.81.0: + resolution: {integrity: sha512-ia6VCTeVDQtBSMktXRFza1AZCt8/6aUoujot6Ugf4KmdytQqPJIHxkHaGftm5xwi9WdrMGYS7zgolToPijR11A==} + engines: {node: '>=14.0.0'} + cpu: [x64] + os: [linux] + + sass-embedded-linux-riscv64@1.81.0: + resolution: {integrity: sha512-KbxSsqu4tT1XbhZfJV/5NfW0VtJIGlD58RjqJqJBi8Rnjrx29/upBsuwoDWtsPV/LhoGwwU1XkSa9Q1ifCz4fQ==} + engines: {node: '>=14.0.0'} + cpu: [riscv64] + os: [linux] + + sass-embedded-linux-x64@1.81.0: + resolution: {integrity: sha512-AMDeVY2T9WAnSFkuQcsOn5c29GRs/TuqnCiblKeXfxCSKym5uKdBl/N7GnTV6OjzoxiJBbkYKdVIaS5By7Gj4g==} + engines: {node: '>=14.0.0'} + cpu: [x64] + os: [linux] + + sass-embedded-win32-arm64@1.81.0: + resolution: {integrity: sha512-YOmBRYnygwWUmCoH14QbMRHjcvCJufeJBAp0m61tOJXIQh64ziwV4mjdqjS/Rx3zhTT4T+nulDUw4d3kLiMncA==} + engines: {node: '>=14.0.0'} + cpu: [arm64] + os: [win32] + + sass-embedded-win32-ia32@1.81.0: + resolution: {integrity: sha512-HFfr/C+uLJGGTENdnssuNTmXI/xnIasUuEHEKqI+2J0FHCWT5cpz3PGAOHymPyJcZVYGUG/7gIxIx/d7t0LFYw==} + engines: {node: '>=14.0.0'} + cpu: [ia32] + os: [win32] + + sass-embedded-win32-x64@1.81.0: + resolution: {integrity: sha512-wxj52jDcIAwWcXb7ShZ7vQYKcVUkJ+04YM9l46jDY+qwHzliGuorAUyujLyKTE9heGD3gShJ3wPPC1lXzq6v9A==} + engines: {node: '>=14.0.0'} + cpu: [x64] + os: [win32] + + sass-embedded@1.81.0: + resolution: {integrity: sha512-uZQ2Faxb1oWBHpeSSzjxnhClbMb3QadN0ql0ZFNuqWOLUxwaVhrMlMhPq6TDPbbfDUjihuwrMCuy695Bgna5RA==} + engines: {node: '>=16.0.0'} + hasBin: true + sass@1.77.6: resolution: {integrity: sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==} engines: {node: '>=14.0.0'} @@ -4654,6 +4797,10 @@ packages: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} + supports-color@8.1.1: + resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==} + engines: {node: '>=10'} + supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} @@ -4675,6 +4822,14 @@ packages: peerDependencies: vue: '>=3.2.26 < 4' + sync-child-process@1.0.2: + resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==} + engines: {node: '>=16.0.0'} + + sync-message-port@1.1.3: + resolution: {integrity: sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==} + engines: {node: '>=16.0.0'} + synckit@0.6.2: resolution: {integrity: sha512-Vhf+bUa//YSTYKseDiiEuQmhGCoIF3CVBhunm3r/DQnYiGT4JssmnKQc44BIyOZRK2pKjXXAgbhfmbeoC9CJpA==} engines: {node: '>=12.20'} @@ -4954,6 +5109,9 @@ packages: resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + varint@6.0.0: + resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==} + vary@1.1.2: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} @@ -5520,6 +5678,8 @@ snapshots: - supports-color - typescript + '@bufbuild/protobuf@2.2.2': {} + '@cloudflare/kv-asset-handler@0.1.3': dependencies: mime: 2.6.0 @@ -7396,6 +7556,8 @@ snapshots: node-releases: 2.0.14 update-browserslist-db: 1.0.16(browserslist@4.23.1) + buffer-builder@0.2.0: {} + buffer-from@1.1.2: {} buffer-xor@1.0.3: {} @@ -7540,6 +7702,8 @@ snapshots: colorette@2.0.20: {} + colorjs.io@0.5.2: {} + comma-separated-tokens@2.0.3: {} common-tags@1.8.2: {} @@ -8475,6 +8639,8 @@ snapshots: immutable@4.3.6: optional: true + immutable@5.0.3: {} + import-fresh@3.3.0: dependencies: parent-module: 1.0.1 @@ -10228,6 +10394,10 @@ snapshots: dependencies: queue-microtask: 1.2.3 + rxjs@7.8.1: + dependencies: + tslib: 2.6.3 + sade@1.8.1: dependencies: mri: 1.2.0 @@ -10238,6 +10408,98 @@ snapshots: safer-buffer@2.1.2: {} + sass-embedded-android-arm64@1.81.0: + optional: true + + sass-embedded-android-arm@1.81.0: + optional: true + + sass-embedded-android-ia32@1.81.0: + optional: true + + sass-embedded-android-riscv64@1.81.0: + optional: true + + sass-embedded-android-x64@1.81.0: + optional: true + + sass-embedded-darwin-arm64@1.81.0: + optional: true + + sass-embedded-darwin-x64@1.81.0: + optional: true + + sass-embedded-linux-arm64@1.81.0: + optional: true + + sass-embedded-linux-arm@1.81.0: + optional: true + + sass-embedded-linux-ia32@1.81.0: + optional: true + + sass-embedded-linux-musl-arm64@1.81.0: + optional: true + + sass-embedded-linux-musl-arm@1.81.0: + optional: true + + sass-embedded-linux-musl-ia32@1.81.0: + optional: true + + sass-embedded-linux-musl-riscv64@1.81.0: + optional: true + + sass-embedded-linux-musl-x64@1.81.0: + optional: true + + sass-embedded-linux-riscv64@1.81.0: + optional: true + + sass-embedded-linux-x64@1.81.0: + optional: true + + sass-embedded-win32-arm64@1.81.0: + optional: true + + sass-embedded-win32-ia32@1.81.0: + optional: true + + sass-embedded-win32-x64@1.81.0: + optional: true + + sass-embedded@1.81.0: + dependencies: + '@bufbuild/protobuf': 2.2.2 + buffer-builder: 0.2.0 + colorjs.io: 0.5.2 + immutable: 5.0.3 + rxjs: 7.8.1 + supports-color: 8.1.1 + sync-child-process: 1.0.2 + varint: 6.0.0 + optionalDependencies: + sass-embedded-android-arm: 1.81.0 + sass-embedded-android-arm64: 1.81.0 + sass-embedded-android-ia32: 1.81.0 + sass-embedded-android-riscv64: 1.81.0 + sass-embedded-android-x64: 1.81.0 + sass-embedded-darwin-arm64: 1.81.0 + sass-embedded-darwin-x64: 1.81.0 + sass-embedded-linux-arm: 1.81.0 + sass-embedded-linux-arm64: 1.81.0 + sass-embedded-linux-ia32: 1.81.0 + sass-embedded-linux-musl-arm: 1.81.0 + sass-embedded-linux-musl-arm64: 1.81.0 + sass-embedded-linux-musl-ia32: 1.81.0 + sass-embedded-linux-musl-riscv64: 1.81.0 + sass-embedded-linux-musl-x64: 1.81.0 + sass-embedded-linux-riscv64: 1.81.0 + sass-embedded-linux-x64: 1.81.0 + sass-embedded-win32-arm64: 1.81.0 + sass-embedded-win32-ia32: 1.81.0 + sass-embedded-win32-x64: 1.81.0 + sass@1.77.6: dependencies: chokidar: 3.6.0 @@ -10466,6 +10728,10 @@ snapshots: dependencies: has-flag: 4.0.0 + supports-color@8.1.1: + dependencies: + has-flag: 4.0.0 + supports-preserve-symlinks-flag@1.0.0: {} svelte@4.2.18: @@ -10497,6 +10763,12 @@ snapshots: dependencies: vue: 3.4.30(typescript@5.5.2) + sync-child-process@1.0.2: + dependencies: + sync-message-port: 1.1.3 + + sync-message-port@1.1.3: {} + synckit@0.6.2: dependencies: tslib: 2.6.3 @@ -10819,6 +11091,8 @@ snapshots: validate-npm-package-name@5.0.1: {} + varint@6.0.0: {} + vary@1.1.2: {} version-range@4.14.0: {} From 80575ebc7d292ee8cd54c089b9b529c8bda72f25 Mon Sep 17 00:00:00 2001 From: Tyler Hughes Date: Sat, 23 Nov 2024 18:16:02 -0600 Subject: [PATCH 2/2] Polished up the terminal header to look more professional --- app/components/ui/PanelHeader.tsx | 7 +++--- app/components/workbench/EditorPanel.tsx | 29 +++++++++++++++--------- app/styles/variables.scss | 1 + 3 files changed, 22 insertions(+), 15 deletions(-) diff --git a/app/components/ui/PanelHeader.tsx b/app/components/ui/PanelHeader.tsx index 78ab3082..fa25d49d 100644 --- a/app/components/ui/PanelHeader.tsx +++ b/app/components/ui/PanelHeader.tsx @@ -1,4 +1,3 @@ -import { memo } from 'react'; import { classNames } from '~/utils/classNames'; interface PanelHeaderProps { @@ -6,15 +5,15 @@ interface PanelHeaderProps { children: React.ReactNode; } -export const PanelHeader = memo(({ className, children }: PanelHeaderProps) => { +export const PanelHeader = ({ children, className }: PanelHeaderProps) => { return (
{children}
); -}); +}; diff --git a/app/components/workbench/EditorPanel.tsx b/app/components/workbench/EditorPanel.tsx index 2327ec0c..f5ab45d2 100644 --- a/app/components/workbench/EditorPanel.tsx +++ b/app/components/workbench/EditorPanel.tsx @@ -116,19 +116,19 @@ export const EditorPanel = memo( }; return ( -
-
+
+
-
- Files +
+ Files
-
+
{Array.from({ length: terminalCount }, (_, index) => { const isActive = activeTerminal === index; diff --git a/app/styles/variables.scss b/app/styles/variables.scss index 38967b11..9f482b56 100644 --- 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);