Make FileTree a pane (desktop only) (#2232)

src/components/ModelingSidebar/ModelingPanes/index.ts

@@ -10,21 +10,32 @@ import { KclEditorMenu } from 'components/ModelingSidebar/ModelingPanes/KclEdito
 import { CustomIconName } from 'components/CustomIcon'
 import { KclEditorPane } from 'components/ModelingSidebar/ModelingPanes/KclEditorPane'
 import { ReactNode } from 'react'
-import type { PaneType } from 'useStore'
 import { MemoryPane } from './MemoryPane'
 import { KclErrorsPane, LogsPane } from './LoggingPanes'
 import { DebugPane } from './DebugPane'
+import { FileTreeInner, FileTreeMenu } from 'components/FileTree'
 
-export type Pane = {
-  id: PaneType
+export type SidebarType =
+  | 'code'
+  | 'debug'
+  | 'export'
+  | 'files'
+  | 'kclErrors'
+  | 'logs'
+  | 'lspMessages'
+  | 'variables'
+
+export type SidebarPane = {
+  id: SidebarType
   title: string
   icon: CustomIconName | IconDefinition
+  keybinding: string
   Content: ReactNode | React.FC
   Menu?: ReactNode | React.FC
-  keybinding: string
+  hideOnPlatform?: 'desktop' | 'web'
 }
 
-export const topPanes: Pane[] = [
+export const topPanes: SidebarPane[] = [
   {
     id: 'code',
     title: 'KCL Code',
@@ -33,9 +44,18 @@ export const topPanes: Pane[] = [
     keybinding: 'shift + c',
     Menu: KclEditorMenu,
   },
+  {
+    id: 'files',
+    title: 'Project Files',
+    icon: 'folder',
+    Content: FileTreeInner,
+    keybinding: 'shift + f',
+    Menu: FileTreeMenu,
+    hideOnPlatform: 'web',
+  },
 ]
 
-export const bottomPanes: Pane[] = [
+export const bottomPanes: SidebarPane[] = [
   {
     id: 'variables',
     title: 'Variables',

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -2,13 +2,19 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Resizable } from 're-resizable'
 import { useCallback, useEffect, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { PaneType, useStore } from 'useStore'
+import { useStore } from 'useStore'
 import { Tab } from '@headlessui/react'
-import { Pane, bottomPanes, topPanes } from './ModelingPanes'
+import {
+  SidebarPane,
+  SidebarType,
+  bottomPanes,
+  topPanes,
+} from './ModelingPanes'
 import Tooltip from 'components/Tooltip'
 import { ActionIcon } from 'components/ActionIcon'
 import styles from './ModelingSidebar.module.css'
 import { ModelingPane } from './ModelingPane'
+import { isTauri } from 'lib/isTauri'
 
 interface ModelingSidebarProps {
   paneOpacity: '' | 'opacity-20' | 'opacity-40'
@@ -52,7 +58,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
 }
 
 interface ModelingSidebarSectionProps {
-  panes: Pane[]
+  panes: SidebarPane[]
   alignButtons?: 'start' | 'end'
 }
 
@@ -69,11 +75,11 @@ function ModelingSidebarSection({
   }))
   const foundOpenPane = openPanes.find((pane) => paneIds.includes(pane))
   const [currentPane, setCurrentPane] = useState(
-    foundOpenPane || ('none' as PaneType | 'none')
+    foundOpenPane || ('none' as SidebarType | 'none')
   )
 
   const togglePane = useCallback(
-    (newPane: PaneType | 'none') => {
+    (newPane: SidebarType | 'none') => {
       if (newPane === 'none') {
         setOpenPanes(openPanes.filter((p) => p !== currentPane))
         setCurrentPane('none')
@@ -90,9 +96,15 @@ function ModelingSidebarSection({
 
   // Filter out the debug panel if it's not supposed to be shown
   // TODO: abstract out for allowing user to configure which panes to show
-  const filteredPanes = showDebugPanel.current
-    ? panes
-    : panes.filter((pane) => pane.id !== 'debug')
+  const filteredPanes = (
+    showDebugPanel.current ? panes : panes.filter((pane) => pane.id !== 'debug')
+  ).filter(
+    (pane) =>
+      !pane.hideOnPlatform ||
+      (isTauri()
+        ? pane.hideOnPlatform === 'web'
+        : pane.hideOnPlatform === 'desktop')
+  )
   useEffect(() => {
     if (
       !showDebugPanel.current &&
@@ -168,8 +180,8 @@ function ModelingSidebarSection({
 }
 
 interface ModelingPaneButtonProps {
-  paneConfig: Pane
-  currentPane: PaneType | 'none'
+  paneConfig: SidebarPane
+  currentPane: SidebarType | 'none'
   togglePane: () => void
 }