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>

e2e/playwright/file-tree.spec.ts

@@ -26,10 +26,6 @@ test.describe('integrations tests', () => {
     'Creating a new file or switching file while in sketchMode should exit sketchMode',
     { tag: '@electron' },
     async ({ tronApp, homePage, scene, editor, toolbar }) => {
-      test.skip(
-        process.platform === 'win32',
-        'windows times out will waiting for the execution indicator?'
-      )
       await tronApp.initialise({
         fixtures: { homePage, scene, editor, toolbar },
         folderSetupFn: async (dir) => {
@@ -55,7 +51,6 @@ test.describe('integrations tests', () => {
           sortBy: 'last-modified-desc',
         })
         await homePage.openProject('test-sample')
-        // windows times out here, hence the skip above
         await scene.waitForExecutionDone()
       })
       await test.step('enter sketch mode', async () => {
@@ -71,10 +66,13 @@ test.describe('integrations tests', () => {
         await toolbar.editSketch()
         await expect(toolbar.exitSketchBtn).toBeVisible()
       })
+
+      const fileName = 'Untitled.kcl'
       await test.step('check sketch mode is exited when creating new file', async () => {
         await toolbar.fileTreeBtn.click()
         await toolbar.expectFileTreeState(['main.kcl'])
-        await toolbar.createFile({ wait: true })
+
+        await toolbar.createFile({ fileName, waitForToastToDisappear: true })
 
         // check we're out of sketch mode
         await expect(toolbar.exitSketchBtn).not.toBeVisible()
@@ -93,10 +91,10 @@ test.describe('integrations tests', () => {
         })
         await toolbar.editSketch()
         await expect(toolbar.exitSketchBtn).toBeVisible()
-        await toolbar.expectFileTreeState(['main.kcl', 'Untitled.kcl'])
+        await toolbar.expectFileTreeState(['main.kcl', fileName])
       })
       await test.step('check sketch mode is exited when opening a different file', async () => {
-        await toolbar.openFile('untitled.kcl', { wait: false })
+        await toolbar.openFile(fileName, { wait: false })
 
         // check we're out of sketch mode
         await expect(toolbar.exitSketchBtn).not.toBeVisible()

e2e/playwright/fixtures/sceneFixture.ts

@@ -195,7 +195,7 @@ export class SceneFixture {
   }
 
   waitForExecutionDone = async () => {
-    await expect(this.exeIndicator).toBeVisible()
+    await expect(this.exeIndicator).toBeVisible({ timeout: 30000 })
   }
 
   expectPixelColor = async (

e2e/playwright/fixtures/toolbarFixture.ts

@@ -16,6 +16,7 @@ export class ToolbarFixture {
   fileCreateToast!: Locator
   filePane!: Locator
   exeIndicator!: Locator
+  treeInputField!: Locator
 
   constructor(page: Page) {
     this.page = page
@@ -31,6 +32,7 @@ export class ToolbarFixture {
     this.editSketchBtn = page.getByText('Edit Sketch')
     this.fileTreeBtn = page.locator('[id="files-button-holder"]')
     this.createFileBtn = page.getByTestId('create-file-button')
+    this.treeInputField = page.getByTestId('tree-input-field')
 
     this.filePane = page.locator('#files-pane')
     this.fileCreateToast = page.getByText('Successfully created')
@@ -59,10 +61,15 @@ export class ToolbarFixture {
   expectFileTreeState = async (expected: string[]) => {
     await expect.poll(this._serialiseFileTree).toEqual(expected)
   }
-  createFile = async ({ wait }: { wait: boolean } = { wait: false }) => {
+  createFile = async (args: {
+    fileName: string
+    waitForToastToDisappear: boolean
+  }) => {
     await this.createFileBtn.click()
+    await this.treeInputField.fill(args.fileName)
+    await this.treeInputField.press('Enter')
     await expect(this.fileCreateToast).toBeVisible()
-    if (wait) {
+    if (args.waitForToastToDisappear) {
       await this.fileCreateToast.waitFor({ state: 'detached' })
     }
   }

src/components/FileTree.tsx

@@ -6,10 +6,10 @@ import { Dispatch, useCallback, useRef, useState } from 'react'
 import { useNavigate, useRouteLoaderData } from 'react-router-dom'
 import { Disclosure } from '@headlessui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faPencil } from '@fortawesome/free-solid-svg-icons'
 import { useFileContext } from 'hooks/useFileContext'
 import styles from './FileTree.module.css'
-import { sortProject } from 'lib/desktopFS'
+import { sortFilesAndDirectories } from 'lib/desktopFS'
 import { FILE_EXT } from 'lib/constants'
 import { CustomIcon } from './CustomIcon'
 import { codeManager, kclManager } from 'lib/singletons'
@@ -27,6 +27,36 @@ function getIndentationCSS(level: number) {
   return `calc(1rem * ${level + 1})`
 }
 
+function TreeEntryInput(props: {
+  level: number
+  onSubmit: (value: string) => void
+}) {
+  const [value, setValue] = useState('')
+  const onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') return
+    props.onSubmit(value)
+  }
+
+  return (
+    <label>
+      <span className="sr-only">Entry input</span>
+      <input
+        data-testid="tree-input-field"
+        type="text"
+        autoFocus
+        autoCapitalize="off"
+        autoCorrect="off"
+        className="w-full py-1 bg-transparent text-chalkboard-100 placeholder:text-chalkboard-70 dark:text-chalkboard-10 dark:placeholder:text-chalkboard-50 focus:outline-none focus:ring-0"
+        onBlur={() => props.onSubmit(value)}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyPress={onKeyPress}
+        style={{ paddingInlineStart: getIndentationCSS(props.level) }}
+        value={value}
+      />
+    </label>
+  )
+}
+
 function RenameForm({
   fileOrDir,
   onSubmit,
@@ -113,16 +143,32 @@ function DeleteFileTreeItemDialog({
 }
 
 const FileTreeItem = ({
+  parentDir,
   project,
   currentFile,
+  lastDirectoryClicked,
   fileOrDir,
   onNavigateToFile,
+  onClickDirectory,
+  onCreateFile,
+  onCreateFolder,
+  newTreeEntry,
   level = 0,
 }: {
+  parentDir: FileEntry | undefined
   project?: IndexLoaderData['project']
   currentFile?: IndexLoaderData['file']
+  lastDirectoryClicked?: FileEntry
   fileOrDir: FileEntry
   onNavigateToFile?: () => void
+  onClickDirectory: (
+    open: boolean,
+    path: FileEntry,
+    parentDir: FileEntry | undefined
+  ) => void
+  onCreateFile: (name: string) => void
+  onCreateFolder: (name: string) => void
+  newTreeEntry: TreeEntry
   level?: number
 }) => {
   const { send: fileSend, context: fileContext } = useFileContext()
@@ -156,6 +202,10 @@ const FileTreeItem = ({
     [fileOrDir.path]
   )
 
+  const showNewTreeEntry =
+    newTreeEntry !== undefined &&
+    fileOrDir.path === fileContext.selectedDirectory.path
+
   const isRenaming = fileContext.itemsBeingRenamed.includes(fileOrDir.path)
   const removeCurrentItemFromRenaming = useCallback(
     () =>
@@ -179,13 +229,6 @@ const FileTreeItem = ({
     })
   }, [fileContext.itemsBeingRenamed, fileOrDir.path, fileSend])
 
-  const clickDirectory = () => {
-    fileSend({
-      type: 'Set selected directory',
-      directory: fileOrDir,
-    })
-  }
-
   function handleKeyUp(e: React.KeyboardEvent<HTMLButtonElement>) {
     if (e.metaKey && e.key === 'Backspace') {
       // Open confirmation dialog
@@ -223,6 +266,8 @@ const FileTreeItem = ({
     onNavigateToFile?.()
   }
 
+  // The below handles both the "root" of all directories and all subs. It's
+  // why some code is duplicated.
   return (
     <div className="contents" data-testid="file-tree-item" ref={itemRef}>
       {fileOrDir.children === null ? (
@@ -266,14 +311,15 @@ const FileTreeItem = ({
                 <Disclosure.Button
                   className={
                     ' group border-none text-sm rounded-none p-0 m-0 flex items-center justify-start w-full py-0.5 hover:text-primary hover:bg-primary/5 dark:hover:text-inherit dark:hover:bg-primary/10' +
-                    (fileContext.selectedDirectory.path.includes(fileOrDir.path)
+                    (lastDirectoryClicked?.path === fileOrDir.path
                       ? ' ui-open:bg-primary/10'
                       : '')
                   }
                   style={{ paddingInlineStart: getIndentationCSS(level) }}
-                  onClick={(e) => e.currentTarget.focus()}
-                  onClickCapture={clickDirectory}
-                  onFocusCapture={clickDirectory}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onClickDirectory(open, fileOrDir, parentDir)
+                  }}
                   onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
                   onKeyUp={handleKeyUp}
                 >
@@ -315,35 +361,67 @@ const FileTreeItem = ({
               >
                 <ul
                   className="m-0 p-0"
-                  onClickCapture={(e) => {
-                    fileSend({
-                      type: 'Set selected directory',
-                      directory: fileOrDir,
-                    })
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onClickDirectory(open, fileOrDir, parentDir)
                   }}
-                  onFocusCapture={(e) =>
-                    fileSend({
-                      type: 'Set selected directory',
-                      directory: fileOrDir,
-                    })
-                  }
                 >
-                  {fileOrDir.children?.map((child) => (
+                  {showNewTreeEntry && (
+                    <div
+                      className="flex items-center"
+                      style={{
+                        paddingInlineStart: getIndentationCSS(level + 1),
+                      }}
+                    >
+                      <FontAwesomeIcon
+                        icon={faPencil}
+                        className="inline-block mr-2 m-0 p-0 w-2 h-2"
+                      />
+                      <TreeEntryInput
+                        level={-1}
+                        onSubmit={(value: string) =>
+                          newTreeEntry === 'file'
+                            ? onCreateFile(value)
+                            : onCreateFolder(value)
+                        }
+                      />
+                    </div>
+                  )}
+                  {sortFilesAndDirectories(fileOrDir.children || []).map(
+                    (child) => (
                       <FileTreeItem
+                        parentDir={fileOrDir}
                         fileOrDir={child}
                         project={project}
                         currentFile={currentFile}
+                        onCreateFile={onCreateFile}
+                        onCreateFolder={onCreateFolder}
+                        newTreeEntry={newTreeEntry}
+                        lastDirectoryClicked={lastDirectoryClicked}
+                        onClickDirectory={onClickDirectory}
                         onNavigateToFile={onNavigateToFile}
                         level={level + 1}
                         key={level + '-' + child.path}
                       />
-                  ))}
+                    )
+                  )}
+                  {!showNewTreeEntry && fileOrDir.children?.length === 0 && (
+                    <div
+                      className="flex items-center text-chalkboard-50"
+                      style={{
+                        paddingInlineStart: getIndentationCSS(level + 1),
+                      }}
+                    >
+                      <div>No files</div>
+                    </div>
+                  )}
                 </ul>
               </Disclosure.Panel>
             </div>
           )}
         </Disclosure>
       )}
+
       {isConfirmingDelete && (
         <DeleteFileTreeItemDialog
           fileOrDir={fileOrDir}
@@ -407,27 +485,15 @@ interface FileTreeProps {
   ) => void
 }
 
-export const FileTreeMenu = () => {
-  const { send } = useFileContext()
-  const { send: modelingSend } = useModelingContext()
-
-  function createFile() {
-    send({
-      type: 'Create file',
-      data: { name: '', makeDir: false, shouldSetToRename: true },
-    })
-    modelingSend({ type: 'Cancel' })
-  }
-
-  function createFolder() {
-    send({
-      type: 'Create file',
-      data: { name: '', makeDir: true, shouldSetToRename: true },
-    })
-  }
-
-  useHotkeyWrapper(['mod + n'], createFile)
-  useHotkeyWrapper(['mod + shift + n'], createFolder)
+export const FileTreeMenu = ({
+  onCreateFile,
+  onCreateFolder,
+}: {
+  onCreateFile: () => void
+  onCreateFolder: () => void
+}) => {
+  useHotkeyWrapper(['mod + n'], onCreateFile)
+  useHotkeyWrapper(['mod + shift + n'], onCreateFolder)
 
   return (
     <>
@@ -440,7 +506,7 @@ export const FileTreeMenu = () => {
           bgClassName: 'bg-transparent',
         }}
         className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
-        onClick={createFile}
+        onClick={onCreateFile}
       >
         <Tooltip position="bottom-right" delay={750}>
           Create file
@@ -456,7 +522,7 @@ export const FileTreeMenu = () => {
           bgClassName: 'bg-transparent',
         }}
         className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
-        onClick={createFolder}
+        onClick={onCreateFolder}
       >
         <Tooltip position="bottom-right" delay={750}>
           Create folder
@@ -466,30 +532,106 @@ export const FileTreeMenu = () => {
   )
 }
 
+type TreeEntry = 'file' | 'folder' | undefined
+
+export const useFileTreeOperations = () => {
+  const { send } = useFileContext()
+  const { send: modelingSend } = useModelingContext()
+
+  // As long as this is undefined, a new "file tree entry prompt" is not shown.
+  const [newTreeEntry, setNewTreeEntry] = useState<TreeEntry>(undefined)
+
+  function createFile(args: { dryRun: boolean; name?: string }) {
+    if (args.dryRun) {
+      setNewTreeEntry('file')
+      return
+    }
+
+    // Clear so that the entry prompt goes away.
+    setNewTreeEntry(undefined)
+
+    if (!args.name) return
+
+    send({
+      type: 'Create file',
+      data: { name: args.name, makeDir: false, shouldSetToRename: false },
+    })
+    modelingSend({ type: 'Cancel' })
+  }
+
+  function createFolder(args: { dryRun: boolean; name?: string }) {
+    if (args.dryRun) {
+      setNewTreeEntry('folder')
+      return
+    }
+
+    setNewTreeEntry(undefined)
+
+    if (!args.name) return
+
+    send({
+      type: 'Create file',
+      data: { name: args.name, makeDir: true, shouldSetToRename: false },
+    })
+  }
+
+  return {
+    createFile,
+    createFolder,
+    newTreeEntry,
+  }
+}
+
 export const FileTree = ({
   className = '',
   onNavigateToFile: closePanel,
 }: FileTreeProps) => {
+  const { createFile, createFolder, newTreeEntry } = useFileTreeOperations()
+
   return (
     <div className={className}>
       <div className="flex items-center gap-1 px-4 py-1 bg-chalkboard-20/40 dark:bg-chalkboard-80/50 border-b border-b-chalkboard-30 dark:border-b-chalkboard-80">
         <h2 className="flex-1 m-0 p-0 text-sm mono">Files</h2>
-        <FileTreeMenu />
+        <FileTreeMenu
+          onCreateFile={() => createFile({ dryRun: true })}
+          onCreateFolder={() => createFolder({ dryRun: true })}
+        />
       </div>
-      <FileTreeInner onNavigateToFile={closePanel} />
+      <FileTreeInner
+        onNavigateToFile={closePanel}
+        newTreeEntry={newTreeEntry}
+        onCreateFile={(name: string) => createFile({ dryRun: false, name })}
+        onCreateFolder={(name: string) => createFolder({ dryRun: false, name })}
+      />
     </div>
   )
 }
 
 export const FileTreeInner = ({
   onNavigateToFile,
+  onCreateFile,
+  onCreateFolder,
+  newTreeEntry,
 }: {
+  onCreateFile: (name: string) => void
+  onCreateFolder: (name: string) => void
+  newTreeEntry: TreeEntry
   onNavigateToFile?: () => void
 }) => {
   const loaderData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
   const { send: fileSend, context: fileContext } = useFileContext()
   const { send: modelingSend } = useModelingContext()
 
+  const [lastDirectoryClicked, setLastDirectoryClicked] = useState<
+    FileEntry | undefined
+  >(undefined)
+
+  const onNavigateToFile_ = () => {
+    // Reset modeling state when navigating to a new file
+    onNavigateToFile?.()
+    modelingSend({ type: 'Cancel' })
+  }
+
   // Refresh the file tree when there are changes.
   useFileSystemWatcher(
     async (eventType, path) => {
@@ -513,34 +655,79 @@ export const FileTreeInner = ({
     )
   )
 
-  const clickDirectory = () => {
+  const onTreeEntryInputSubmit = (value: string) => {
+    if (newTreeEntry === 'file') {
+      onCreateFile(value)
+      onNavigateToFile_()
+    } else {
+      onCreateFolder(value)
+    }
+  }
+
+  const onClickDirectory = (
+    open_: boolean,
+    fileOrDir: FileEntry,
+    parentDir: FileEntry | undefined
+  ) => {
+    // open true is closed... it's broken. Save me. I've inverted it here for
+    // sanity.
+    const open = !open_
+
+    const target = open ? fileOrDir : parentDir
+
+    // We're at the root, can't select anything further
+    if (!target) return
+
+    setLastDirectoryClicked(target)
     fileSend({
       type: 'Set selected directory',
-      directory: fileContext.project,
+      directory: target,
     })
   }
 
+  const showNewTreeEntry =
+    newTreeEntry !== undefined &&
+    fileContext.selectedDirectory.path === loaderData.project?.path
+
   return (
+    <div className="relative">
       <div
         className="overflow-auto pb-12 absolute inset-0"
         data-testid="file-pane-scroll-container"
       >
-      <ul className="m-0 p-0 text-sm" onClickCapture={clickDirectory}>
-        {sortProject(fileContext.project?.children || []).map((fileOrDir) => (
+        <ul className="m-0 p-0 text-sm">
+          {showNewTreeEntry && (
+            <div
+              className="flex items-center"
+              style={{ paddingInlineStart: getIndentationCSS(0) }}
+            >
+              <FontAwesomeIcon
+                icon={faPencil}
+                className="inline-block mr-2 m-0 p-0 w-2 h-2"
+              />
+              <TreeEntryInput level={-1} onSubmit={onTreeEntryInputSubmit} />
+            </div>
+          )}
+          {sortFilesAndDirectories(fileContext.project?.children || []).map(
+            (fileOrDir) => (
               <FileTreeItem
+                parentDir={fileContext.project}
                 project={fileContext.project}
                 currentFile={loaderData?.file}
+                lastDirectoryClicked={lastDirectoryClicked}
                 fileOrDir={fileOrDir}
-            onNavigateToFile={() => {
-              // Reset modeling state when navigating to a new file
-              modelingSend({ type: 'Cancel' })
-              onNavigateToFile?.()
-            }}
+                onCreateFile={onCreateFile}
+                onCreateFolder={onCreateFolder}
+                newTreeEntry={newTreeEntry}
+                onClickDirectory={onClickDirectory}
+                onNavigateToFile={onNavigateToFile_}
                 key={fileOrDir.path}
               />
-        ))}
+            )
+          )}
         </ul>
       </div>
+    </div>
   )
 }
 

src/components/ModelingMachineProvider.tsx

@@ -158,8 +158,12 @@ export const ModelingMachineProvider = ({
         'enable copilot': () => {
           editorManager.setCopilotEnabled(true)
         },
-        'sketch exit execute': ({ context: { store } }) => {
-          ;(async () => {
+        // tsc reports this typing as perfectly fine, but eslint is complaining.
+        // It's actually nonsensical, so I'm quieting.
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        'sketch exit execute': async ({
+          context: { store },
+        }): Promise<void> => {
           // When cancelling the sketch mode we should disable sketch mode within the engine.
           await engineCommandManager.sendSceneCommand({
             type: 'modeling_cmd_req',
@@ -177,7 +181,7 @@ export const ModelingMachineProvider = ({
 
           store.videoElement?.pause()
 
-            kclManager
+          return kclManager
             .executeCode()
             .then(() => {
               if (engineCommandManager.engineConnection?.idleMode) return
@@ -187,7 +191,6 @@ export const ModelingMachineProvider = ({
               })
             })
             .catch(reportRejection)
-          })().catch(reportRejection)
         },
         'Set mouse state': assign(({ context, event }) => {
           if (event.type !== 'Set mouse state') return {}

src/components/ModelingSidebar/ModelingPane.tsx

@@ -48,7 +48,7 @@ export const ModelingPaneHeader = ({
           bgClassName: 'bg-transparent dark:bg-transparent',
         }}
         className="!p-0 !bg-transparent hover:text-primary border-transparent dark:!border-transparent hover:!border-primary dark:hover:!border-chalkboard-70 !outline-none"
-        onClick={onClose}
+        onClick={() => onClose()}
       >
         <Tooltip position="bottom-right" delay={750}>
           Close
@@ -59,14 +59,12 @@ export const ModelingPaneHeader = ({
 }
 
 export const ModelingPane = ({
-  title,
-  icon,
   id,
   children,
   className,
-  Menu,
   detailsTestId,
   onClose,
+  title,
   ...props
 }: ModelingPaneProps) => {
   const { settings } = useSettingsAuthContext()
@@ -78,6 +76,7 @@ export const ModelingPane = ({
   return (
     <section
       {...props}
+      title={title && typeof title === 'string' ? title : ''}
       data-testid={detailsTestId}
       id={id}
       className={
@@ -88,14 +87,7 @@ export const ModelingPane = ({
         (className || '')
       }
     >
-      <ModelingPaneHeader
-        id={id}
-        icon={icon}
-        title={title}
-        Menu={Menu}
-        onClose={onClose}
-      />
-      <div className="relative w-full">{children}</div>
+      {children}
     </section>
   )
 }

src/components/ModelingSidebar/ModelingPanes/DebugPane.tsx

@@ -5,6 +5,7 @@ import { CamDebugSettings } from 'clientSideScene/ClientSideSceneComp'
 
 export const DebugPane = () => {
   return (
+    <div className="relative">
       <section
         data-testid="debug-panel"
         className="absolute inset-0 p-2 box-border overflow-auto"
@@ -16,5 +17,6 @@ export const DebugPane = () => {
           <DebugFeatureTree />
         </div>
       </section>
+    </div>
   )
 }

src/components/ModelingSidebar/ModelingPanes/KclEditorPane.tsx

@@ -174,9 +174,12 @@ export const KclEditorPane = () => {
   const initialCode = useRef(codeManager.code)
 
   return (
+    <div className="relative">
       <div
         id="code-mirror-override"
-      className={'absolute inset-0 ' + (cursorBlinking.current ? 'blink' : '')}
+        className={
+          'absolute inset-0 ' + (cursorBlinking.current ? 'blink' : '')
+        }
       >
         <CodeEditor
           initialDocValue={initialCode.current}
@@ -196,5 +199,6 @@ export const KclEditorPane = () => {
           }}
         />
       </div>
+    </div>
   )
 }

src/components/ModelingSidebar/ModelingPanes/index.tsx

@@ -2,11 +2,17 @@ import { IconDefinition, faBugSlash } from '@fortawesome/free-solid-svg-icons'
 import { KclEditorMenu } from 'components/ModelingSidebar/ModelingPanes/KclEditorMenu'
 import { CustomIconName } from 'components/CustomIcon'
 import { KclEditorPane } from 'components/ModelingSidebar/ModelingPanes/KclEditorPane'
+import { ModelingPaneHeader } from 'components/ModelingSidebar/ModelingPane'
 import { MouseEventHandler, ReactNode } from 'react'
 import { MemoryPane, MemoryPaneMenu } from './MemoryPane'
 import { LogsPane } from './LoggingPanes'
 import { DebugPane } from './DebugPane'
-import { FileTreeInner, FileTreeMenu, FileTreeRoot } from 'components/FileTree'
+import {
+  FileTreeInner,
+  FileTreeMenu,
+  FileTreeRoot,
+  useFileTreeOperations,
+} from 'components/FileTree'
 import { useKclContext } from 'lang/KclProvider'
 import { editorManager } from 'lib/singletons'
 import { ContextFrom } from 'xstate'
@@ -38,20 +44,19 @@ interface PaneCallbackProps {
 
 export type SidebarPane = {
   id: SidebarType
-  title: ReactNode
-  sidebarName?: string
+  sidebarName: string
   icon: CustomIconName | IconDefinition
   keybinding: string
-  Content: ReactNode | React.FC
-  Menu?: ReactNode | React.FC
+  Content: React.FC<{ id: SidebarType; onClose: () => void }>
   hide?: boolean | ((props: PaneCallbackProps) => boolean)
   showBadge?: BadgeInfo
 }
 
 export type SidebarAction = {
   id: string
-  title: ReactNode
+  sidebarName: string
   icon: CustomIconName
+  title: ReactNode
   iconClassName?: string // Just until we get rid of FontAwesome icons
   keybinding: string
   action: () => void
@@ -59,14 +64,30 @@ export type SidebarAction = {
   disable?: () => string | undefined
 }
 
+// For now a lot of icons are the same but the reality is they could totally
+// be different, like an icon based on some data for the pane, or the icon
+// changes to be a spinning loader on loading.
+
 export const sidebarPanes: SidebarPane[] = [
   {
     id: 'code',
-    title: 'KCL Code',
     icon: 'code',
-    Content: KclEditorPane,
+    sidebarName: 'KCL Code',
+    Content: (props: { id: SidebarType; onClose: () => void }) => {
+      return (
+        <>
+          <ModelingPaneHeader
+            id={props.id}
+            icon="code"
+            title="KCL Code"
+            Menu={<KclEditorMenu />}
+            onClose={props.onClose}
+          />
+          <KclEditorPane />
+        </>
+      )
+    },
     keybinding: 'Shift + C',
-    Menu: KclEditorMenu,
     showBadge: {
       value: ({ kclContext }) => {
         return kclContext.errors.length
@@ -79,34 +100,96 @@ export const sidebarPanes: SidebarPane[] = [
   },
   {
     id: 'files',
-    title: <FileTreeRoot />,
-    sidebarName: 'Project Files',
     icon: 'folder',
-    Content: FileTreeInner,
+    sidebarName: 'Project Files',
+    Content: (props: { id: SidebarType; onClose: () => void }) => {
+      const { createFile, createFolder, newTreeEntry } = useFileTreeOperations()
+
+      return (
+        <>
+          <ModelingPaneHeader
+            id={props.id}
+            icon="folder"
+            title={<FileTreeRoot />}
+            Menu={
+              <FileTreeMenu
+                onCreateFile={() => createFile({ dryRun: true })}
+                onCreateFolder={() => createFolder({ dryRun: true })}
+              />
+            }
+            onClose={props.onClose}
+          />
+          <FileTreeInner
+            onCreateFile={(name: string) => createFile({ dryRun: false, name })}
+            onCreateFolder={(name: string) =>
+              createFolder({ dryRun: false, name })
+            }
+            newTreeEntry={newTreeEntry}
+          />
+        </>
+      )
+    },
     keybinding: 'Shift + F',
-    Menu: FileTreeMenu,
     hide: ({ platform }) => platform === 'web',
   },
   {
     id: 'variables',
-    title: 'Variables',
     icon: 'make-variable',
-    Content: MemoryPane,
-    Menu: MemoryPaneMenu,
+    sidebarName: 'Variables',
+    Content: (props: { id: SidebarType; onClose: () => void }) => {
+      return (
+        <>
+          <ModelingPaneHeader
+            id={props.id}
+            icon="make-variable"
+            title="Variables"
+            Menu={<MemoryPaneMenu />}
+            onClose={props.onClose}
+          />
+          <MemoryPane />
+        </>
+      )
+    },
     keybinding: 'Shift + V',
   },
   {
     id: 'logs',
-    title: 'Logs',
     icon: 'logs',
-    Content: LogsPane,
+    sidebarName: 'Logs',
+    Content: (props: { id: SidebarType; onClose: () => void }) => {
+      return (
+        <>
+          <ModelingPaneHeader
+            id={props.id}
+            icon="logs"
+            title="Logs"
+            Menu={null}
+            onClose={props.onClose}
+          />
+          <LogsPane />
+        </>
+      )
+    },
     keybinding: 'Shift + L',
   },
   {
     id: 'debug',
-    title: 'Debug',
     icon: faBugSlash,
-    Content: DebugPane,
+    sidebarName: 'Debug',
+    Content: (props: { id: SidebarType; onClose: () => void }) => {
+      return (
+        <>
+          <ModelingPaneHeader
+            id={props.id}
+            icon={faBugSlash}
+            title="Debug"
+            Menu={null}
+            onClose={props.onClose}
+          />
+          <DebugPane />
+        </>
+      )
+    },
     keybinding: 'Shift + D',
     hide: ({ settings }) => !settings.modeling.showDebugPanel.current,
   },

src/components/ModelingSidebar/ModelingSidebar.module.css

@@ -1,11 +0,0 @@
-.grid {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: 1fr 1fr;
-  row-gap: 0.25rem;
-  align-items: stretch;
-  position: relative;
-  padding-block: 1px;
-  max-width: 100%;
-  flex: 1 1 0;
-}

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>

src/lib/desktopFS.ts

@@ -5,7 +5,6 @@ import {
   INDEX_IDENTIFIER,
   MAX_PADDING,
   ONBOARDING_PROJECT_NAME,
-  PROJECT_ENTRYPOINT,
 } from 'lib/constants'
 import { bracket } from './exampleKcl'
 import { PATHS } from './paths'
@@ -22,36 +21,20 @@ export const isHidden = (fileOrDir: FileEntry) =>
 export const isDir = (fileOrDir: FileEntry) =>
   'children' in fileOrDir && fileOrDir.children !== undefined
 
-// Deeply sort the files and directories in a project like VS Code does:
-// The main.kcl file is always first, then files, then directories
+// Shallow sort the files and directories
 // Files and directories are sorted alphabetically
-export function sortProject(project: FileEntry[]): FileEntry[] {
-  const sortedProject = project.sort((a, b) => {
-    if (a.name === PROJECT_ENTRYPOINT) {
-      return -1
-    } else if (b.name === PROJECT_ENTRYPOINT) {
+export function sortFilesAndDirectories(files: FileEntry[]): FileEntry[] {
+  return files.sort((a, b) => {
+    if (a.children === null && b.children !== null) {
       return 1
-    } else if (a.children === null && b.children !== null) {
-      return -1
     } else if (a.children !== null && b.children === null) {
-      return 1
+      return -1
     } else if (a.name && b.name) {
       return a.name.localeCompare(b.name)
     } else {
       return 0
     }
   })
-
-  return sortedProject.map((fileOrDir: FileEntry) => {
-    if ('children' in fileOrDir && fileOrDir.children !== null) {
-      return {
-        ...fileOrDir,
-        children: sortProject(fileOrDir.children || []),
-      }
-    } else {
-      return fileOrDir
-    }
-  })
 }
 
 // create a regex to match the project name