Show top level dir (#4165)

* Reload FileTree and File when changed externally

* Added tests

* Show project root in files pane

* Cut off titles that are too long

* Fix tests

src/components/ModelingSidebar/ModelingPane.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react'
 import styles from './ModelingPane.module.css'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { ActionButton } from 'components/ActionButton'
@@ -6,22 +7,24 @@ import { CustomIconName } from 'components/CustomIcon'
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import { ActionIcon } from 'components/ActionIcon'
 
-export interface ModelingPaneProps
-  extends React.PropsWithChildren,
-    React.HTMLAttributes<HTMLDivElement> {
+export interface ModelingPaneProps {
+  id: string
+  children: ReactNode | ReactNode[]
+  className?: string
   icon?: CustomIconName | IconDefinition
-  title: string
+  title: ReactNode
   Menu?: React.ReactNode | React.FC
   detailsTestId?: string
   onClose: () => void
 }
 
 export const ModelingPaneHeader = ({
+  id,
   icon,
   title,
   Menu,
   onClose,
-}: Pick<ModelingPaneProps, 'icon' | 'title' | 'Menu' | 'onClose'>) => {
+}: Pick<ModelingPaneProps, 'id' | 'icon' | 'title' | 'Menu' | 'onClose'>) => {
   return (
     <div className={styles.header}>
       <div className="flex gap-2 items-center flex-1">
@@ -34,7 +37,7 @@ export const ModelingPaneHeader = ({
             bgClassName="!bg-transparent"
           />
         )}
-        <span>{title}</span>
+        <span data-testid={id + '-header'}>{title}</span>
       </div>
       {Menu instanceof Function ? <Menu /> : Menu}
       <ActionButton
@@ -86,6 +89,7 @@ export const ModelingPane = ({
       }
     >
       <ModelingPaneHeader
+        id={id}
         icon={icon}
         title={title}
         Menu={Menu}

src/components/ModelingSidebar/ModelingPanes/index.tsx

@@ -6,7 +6,7 @@ import { MouseEventHandler, ReactNode } from 'react'
 import { MemoryPane, MemoryPaneMenu } from './MemoryPane'
 import { LogsPane } from './LoggingPanes'
 import { DebugPane } from './DebugPane'
-import { FileTreeInner, FileTreeMenu } from 'components/FileTree'
+import { FileTreeInner, FileTreeMenu, FileTreeRoot } from 'components/FileTree'
 import { useKclContext } from 'lang/KclProvider'
 import { editorManager } from 'lib/singletons'
 import { ContextFrom } from 'xstate'
@@ -38,7 +38,8 @@ interface PaneCallbackProps {
 
 export type SidebarPane = {
   id: SidebarType
-  title: string
+  title: ReactNode
+  sidebarName?: string
   icon: CustomIconName | IconDefinition
   keybinding: string
   Content: ReactNode | React.FC
@@ -49,7 +50,7 @@ export type SidebarPane = {
 
 export type SidebarAction = {
   id: string
-  title: string
+  title: ReactNode
   icon: CustomIconName
   iconClassName?: string // Just until we get rid of FontAwesome icons
   keybinding: string
@@ -78,7 +79,8 @@ export const sidebarPanes: SidebarPane[] = [
   },
   {
     id: 'files',
-    title: 'Project Files',
+    title: <FileTreeRoot />,
+    sidebarName: 'Project Files',
     icon: 'folder',
     Content: FileTreeInner,
     keybinding: 'Shift + F',

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -5,6 +5,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  ReactNode,
   useContext,
 } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -270,7 +271,8 @@ interface ModelingPaneButtonProps
   extends React.HTMLAttributes<HTMLButtonElement> {
   paneConfig: {
     id: string
-    title: string
+    title: ReactNode
+    sidebarName?: string
     icon: CustomIconName | IconDefinition
     keybinding: string
     iconClassName?: string
@@ -299,7 +301,10 @@ 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.title}
+        name={
+          paneConfig.sidebarName ??
+          (typeof paneConfig.title === 'string' ? paneConfig.title : '')
+        }
         data-testid={paneConfig.id + '-pane-button'}
         disabled={disabledText !== undefined}
         aria-disabled={disabledText !== undefined}
@@ -315,7 +320,7 @@ function ModelingPaneButton({
           }
         />
         <span className="sr-only">
-          {paneConfig.title}
+          {paneConfig.sidebarName ?? paneConfig.title}
           {paneIsOpen !== undefined ? ` pane` : ''}
         </span>
         <Tooltip
@@ -324,7 +329,7 @@ function ModelingPaneButton({
           hoverOnly
         >
           <span className="flex-1">
-            {paneConfig.title}
+            {paneConfig.sidebarName ?? paneConfig.title}
             {disabledText !== undefined ? ` (${disabledText})` : ''}
             {paneIsOpen !== undefined ? ` pane` : ''}
           </span>