File tree to act more like VS Code's file tree (#4392)

* File tree acts as VS Code's file tree

* Adjust test for new expectations

* Remove screenshot

* Actually remove this screenshot

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -5,14 +5,12 @@ import {
   useCallback,
   useEffect,
   useMemo,
-  ReactNode,
   useContext,
 } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { SidebarAction, SidebarType, sidebarPanes } from './ModelingPanes'
 import Tooltip from 'components/Tooltip'
 import { ActionIcon } from 'components/ActionIcon'
-import styles from './ModelingSidebar.module.css'
 import { ModelingPane } from './ModelingPane'
 import { isDesktop } from 'lib/isDesktop'
 import { useModelingContext } from 'hooks/useModelingContext'
@@ -62,6 +60,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
     {
       id: 'export',
       title: 'Export part',
+      sidebarName: 'Export part',
       icon: 'floppyDiskArrow',
       keybinding: 'Ctrl + Shift + E',
       action: () =>
@@ -73,6 +72,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
     {
       id: 'make',
       title: 'Make part',
+      sidebarName: 'Make part',
       icon: 'printer3d',
       keybinding: 'Ctrl + Shift + M',
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
@@ -182,7 +182,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
         bottomRight: 'hidden',
       }}
     >
-      <div id="app-sidebar" className={styles.grid + ' flex-1'}>
+      <div id="app-sidebar" className="flex flex-row h-full">
         <ul
           className={
             (context.store?.openPanes.length === 0 ? 'rounded-r ' : '') +
@@ -220,7 +220,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
                     key={action.id}
                     paneConfig={{
                       id: action.id,
-                      title: action.title,
+                      sidebarName: action.sidebarName,
                       icon: action.icon,
                       keybinding: action.keybinding,
                       iconClassName: action.iconClassName,
@@ -237,10 +237,8 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
         <ul
           id="pane-section"
           className={
-            'ml-[-1px] col-start-2 col-span-1 flex flex-col gap-2 ' +
-            (context.store?.openPanes.length >= 1
-              ? `row-start-1 row-end-3`
-              : `hidden`)
+            'ml-[-1px] col-start-2 col-span-1 flex flex-col items-stretch gap-2 ' +
+            (context.store?.openPanes.length >= 1 ? `w-full` : `hidden`)
           }
         >
           {filteredPanes
@@ -249,13 +247,15 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
               <ModelingPane
                 key={pane.id}
                 icon={pane.icon}
+                title={pane.sidebarName}
+                onClose={() => {}}
                 id={`${pane.id}-pane`}
-                title={pane.title}
-                Menu={pane.Menu}
-                onClose={() => togglePane(pane.id)}
               >
                 {pane.Content instanceof Function ? (
-                  <pane.Content />
+                  <pane.Content
+                    id={pane.id}
+                    onClose={() => togglePane(pane.id)}
+                  />
                 ) : (
                   pane.Content
                 )}
@@ -271,8 +271,7 @@ interface ModelingPaneButtonProps
   extends React.HTMLAttributes<HTMLButtonElement> {
   paneConfig: {
     id: string
-    title: ReactNode
-    sidebarName?: string
+    sidebarName: string
     icon: CustomIconName | IconDefinition
     keybinding: string
     iconClassName?: string
@@ -301,10 +300,7 @@ function ModelingPaneButton({
       <button
         className="group pointer-events-auto flex items-center justify-center border-transparent dark:border-transparent disabled:!border-transparent p-0 m-0 rounded-sm !outline-0 focus-visible:border-primary"
         onClick={onClick}
-        name={
-          paneConfig.sidebarName ??
-          (typeof paneConfig.title === 'string' ? paneConfig.title : '')
-        }
+        name={paneConfig.sidebarName}
         data-testid={paneConfig.id + '-pane-button'}
         disabled={disabledText !== undefined}
         aria-disabled={disabledText !== undefined}
@@ -320,7 +316,7 @@ function ModelingPaneButton({
           }
         />
         <span className="sr-only">
-          {paneConfig.sidebarName ?? paneConfig.title}
+          {paneConfig.sidebarName}
           {paneIsOpen !== undefined ? ` pane` : ''}
         </span>
         <Tooltip
@@ -329,7 +325,7 @@ function ModelingPaneButton({
           hoverOnly
         >
           <span className="flex-1">
-            {paneConfig.sidebarName ?? paneConfig.title}
+            {paneConfig.sidebarName}
             {disabledText !== undefined ? ` (${disabledText})` : ''}
             {paneIsOpen !== undefined ? ` pane` : ''}
           </span>