hide closed panels via css instead of unmounting them from dome (test)

src/App.tsx

@@ -29,6 +29,7 @@ import {
   codeManager,
   kclManager,
   settingsActor,
+  editorManager,
 } from '@src/lib/singletons'
 import { maybeWriteToDisk } from '@src/lib/telemetry'
 import type { IndexLoaderData } from '@src/lib/types'
@@ -94,6 +95,16 @@ export function App() {
   useHotkeys('backspace', (e) => {
     e.preventDefault()
   })
+  // Since these already exist in the editor, we don't need to define them
+  // with the wrapper.
+  useHotkeys('mod+z', (e) => {
+    e.preventDefault()
+    editorManager.undo()
+  })
+  useHotkeys('mod+shift+z', (e) => {
+    e.preventDefault()
+    editorManager.redo()
+  })
   useHotkeyWrapper(
     [isDesktop() ? 'mod + ,' : 'shift + mod + ,'],
     () => navigate(filePath + PATHS.SETTINGS),

src/components/ModelingSidebar/ModelingPane.tsx

@@ -17,6 +17,7 @@ export interface ModelingPaneProps {
   Menu?: React.ReactNode | React.FC
   detailsTestId?: string
   onClose: () => void
+  style?: React.CSSProperties
 }
 
 export const ModelingPaneHeader = ({
@@ -64,11 +65,13 @@ export const ModelingPane = ({
   detailsTestId,
   onClose,
   title,
+  style,
   ...props
 }: ModelingPaneProps) => {
   return (
     <section
       {...props}
+      style={style}
       aria-label={title && typeof title === 'string' ? title : ''}
       data-testid={detailsTestId}
       id={id}

src/components/ModelingSidebar/ModelingPanes/KclEditorPane.tsx

@@ -75,17 +75,6 @@ export const KclEditorPane = () => {
       : context.app.theme.current
   const { copilotLSP, kclLSP } = useLspContext()
 
-  // Since these already exist in the editor, we don't need to define them
-  // with the wrapper.
-  useHotkeys('mod+z', (e) => {
-    e.preventDefault()
-    editorManager.undo()
-  })
-  useHotkeys('mod+shift+z', (e) => {
-    e.preventDefault()
-    editorManager.redo()
-  })
-
   // When this component unmounts, we need to tell the machine that the editor
   useEffect(() => {
     return () => {

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -298,26 +298,29 @@ export function ModelingSidebar() {
             (context.store?.openPanes.length >= 1 ? `w-full` : `hidden`)
           }
         >
-          {filteredPanes
+          {filteredPanes.map((pane) => (
-            .filter((pane) => context?.store.openPanes.includes(pane.id))
+            <ModelingPane
-            .map((pane) => (
+              key={pane.id}
-              <ModelingPane
+              icon={pane.icon}
-                key={pane.id}
+              title={pane.sidebarName}
-                icon={pane.icon}
+              onClose={() => {}}
-                title={pane.sidebarName}
+              id={`${pane.id}-pane`}
-                onClose={() => {}}
+              style={
-                id={`${pane.id}-pane`}
+                context?.store.openPanes.includes(pane.id)
-              >
+                  ? {}
-                {pane.Content instanceof Function ? (
+                  : { display: 'none' }
-                  <pane.Content
+              }
-                    id={pane.id}
+            >
-                    onClose={() => togglePane(pane.id)}
+              {pane.Content instanceof Function ? (
-                  />
+                <pane.Content
-                ) : (
+                  id={pane.id}
-                  pane.Content
+                  onClose={() => togglePane(pane.id)}
-                )}
+                />
-              </ModelingPane>
+              ) : (
-            ))}
+                pane.Content
+              )}
+            </ModelingPane>
+          ))}
         </ul>
       </div>
     </Resizable>