From f51c57025f0843c677d716d0f1ba96b4d10e5494 Mon Sep 17 00:00:00 2001
From: Sergei Garin <sergei.garin@enso.org>
Date: Mon, 24 Feb 2025 13:16:06 +0300
Subject: [PATCH] Fix nav

---
 MODULE.bazel.lock                             |  4 +-
 .../components/Breadcrumbs/BreadcrumbItem.tsx |  1 +
 .../components/Scroller/Scroller.tsx          |  6 +-
 .../components/dashboard/AssetRow.tsx         |  2 +-
 app/gui/src/dashboard/layouts/AssetsTable.tsx |  3 -
 .../layouts/Drive/Categories/Category.ts      |  7 +-
 .../Drive/Categories/categoriesHooks.tsx      | 17 +++--
 .../Drive/DriveBar/DriveBarNavigation.tsx     | 70 ++++++++++---------
 .../src/dashboard/services/LocalBackend.ts    | 64 +++++++++++++----
 app/gui/src/dashboard/services/utilities.ts   | 39 +++++++++--
 10 files changed, 144 insertions(+), 69 deletions(-)

diff --git a/MODULE.bazel.lock b/MODULE.bazel.lock
index 8475a0064e2f..ae50b35d9da1 100644
--- a/MODULE.bazel.lock
+++ b/MODULE.bazel.lock
@@ -619,7 +619,7 @@
         "bzlTransitiveDigest": "2bm8JGpVfTeP2/OEWLfaiC0BppLkZjpmq45/K90H3Zw=",
         "usagesDigest": "jdSuIdTp7Rqi17ioQocHd+ejglFQ3z+AyEWLmlCK/og=",
         "recordedFileInputs": {
-          "@@rules_rust++rust_host_tools+rust_host_tools//bin/rustc": "241027b94ad67beb36d0356f7cc05180daaa9966b2958cfba1d4de089d2e521c",
+          "@@rules_rust++rust_host_tools+rust_host_tools//bin/rustc": "b953c69e6f682bf55e39bdd55bdcbd3e1cc0cbdf9dfda24b9c6478ee2c38359b",
           "@@//app/rust-ffi/Cargo.toml": "b17bf21f56720ffba5031fdf70296acb53ff018adcf17a8cdcec86b46103d1d8",
           "@@//build_tools/install/config/Cargo.toml": "a6d15eb23a5f90467f680b296fe2e35af904f9ff00ce9530d754c96728288008",
           "@@//lib/rust/parser/debug/fuzz/Cargo.toml": "d93cea0a1b3a5e96ea99d0f57c7a07361b6e3b46afb95dab362e7562d86655d0",
@@ -650,7 +650,7 @@
           "@@//lib/rust/prelude/Cargo.toml": "d247be5470788ea62ada9fcc9aeb65be876c77fc7a0689a660c43b266bd6c504",
           "@@+_repo_rules+wasm_bindgen_cli_crate//Cargo.toml": "40b1c540eed2e2031f1622391be27ec7f28ddea710447f078c5f2fd245ef2750",
           "@@//lib/rust/metamodel/Cargo.toml": "20f5bb60a5c394ee059eecf25bcf5d3dd15151600e50cbc069c1e4fdb77d7ab9",
-          "@@rules_rust++rust_host_tools+rust_host_tools//bin/cargo": "35099f3b7b9497b3ae95aa00886ac6839343488e5cdb958e69c16c9b58c3afb2"
+          "@@rules_rust++rust_host_tools+rust_host_tools//bin/cargo": "be459aeefa634aa6693a9a4741cfa4d63dd8a50af2d1a8ff221b7565e7eb4e4c"
         },
         "recordedDirentsInputs": {},
         "envVariables": {
diff --git a/app/gui/src/dashboard/components/Breadcrumbs/BreadcrumbItem.tsx b/app/gui/src/dashboard/components/Breadcrumbs/BreadcrumbItem.tsx
index 286b92e7ca6a..0bed6b838ec3 100644
--- a/app/gui/src/dashboard/components/Breadcrumbs/BreadcrumbItem.tsx
+++ b/app/gui/src/dashboard/components/Breadcrumbs/BreadcrumbItem.tsx
@@ -220,6 +220,7 @@ export function BreadcrumbItem<IconType extends string>(props: BreadcrumbItemPro
     : <Button
         {...linkProps}
         loading={dropMutation.isPending}
+        loaderPosition="icon"
         onPress={onPress}
         icon={iconComponent}
       >
diff --git a/app/gui/src/dashboard/components/Scroller/Scroller.tsx b/app/gui/src/dashboard/components/Scroller/Scroller.tsx
index 8a1fff2c3408..576fd4226a98 100644
--- a/app/gui/src/dashboard/components/Scroller/Scroller.tsx
+++ b/app/gui/src/dashboard/components/Scroller/Scroller.tsx
@@ -4,6 +4,7 @@
  * Scroller is a component that
  */
 
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useEventListener } from '#/hooks/eventListenerHooks'
 import { useMeasureCallback } from '#/hooks/measureHooks'
 import { mergeRefs } from '#/utilities/mergeRefs'
@@ -16,7 +17,6 @@ import {
   type HTMLAttributes,
   type PropsWithChildren,
 } from 'react'
-import { useEventCallback } from '../../hooks/eventCallbackHooks'
 import type { TestIdProps } from '../AriaComponents'
 
 export const SCROLLER_STYLES = tv({
@@ -145,8 +145,8 @@ export function Scroller(props: ScrollerProps) {
 
   const containerRef = useRef<HTMLDivElement>(null)
 
-  const [startHidden, setStartHidden] = useState(false)
-  const [endHidden, setEndHidden] = useState(false)
+  const [startHidden, setStartHidden] = useState(true)
+  const [endHidden, setEndHidden] = useState(true)
 
   const setHidden = useEventCallback((start: boolean, end: boolean) => {
     startTransition(() => {
diff --git a/app/gui/src/dashboard/components/dashboard/AssetRow.tsx b/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
index d9d7c249b49b..97ebb03ed3a3 100644
--- a/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
+++ b/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
@@ -262,7 +262,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
   const { nodeMap, doCopy, doCut, doPaste } = state
   const { category, rootDirectoryId, backend } = state
 
-  const [isLoading, startTransition] = useTransition()
+  const [, startTransition] = useTransition()
 
   const driveStore = useDriveStore()
   const { user } = useFullUserSession()
diff --git a/app/gui/src/dashboard/layouts/AssetsTable.tsx b/app/gui/src/dashboard/layouts/AssetsTable.tsx
index aaed60d7ab8a..ddf388643b17 100644
--- a/app/gui/src/dashboard/layouts/AssetsTable.tsx
+++ b/app/gui/src/dashboard/layouts/AssetsTable.tsx
@@ -1201,9 +1201,6 @@ function AssetsTable(props: AssetsTableProps) {
               isOpened={false}
               backendType={backend.type}
               state={state}
-              // Default states.
-              isSoleSelected={false}
-              selected={false}
               rowState={INITIAL_ROW_STATE}
               // The drag placeholder cannot be interacted with.
               setSelected={noop}
diff --git a/app/gui/src/dashboard/layouts/Drive/Categories/Category.ts b/app/gui/src/dashboard/layouts/Drive/Categories/Category.ts
index 5de86f7fed91..4b77a450ef91 100644
--- a/app/gui/src/dashboard/layouts/Drive/Categories/Category.ts
+++ b/app/gui/src/dashboard/layouts/Drive/Categories/Category.ts
@@ -84,7 +84,12 @@ export type TeamCategory = z.infer<typeof TEAM_CATEGORY_SCHEMA>
 /** A category corresponding to the primary root directory for Local projects. */
 
 const LOCAL_CATEGORY_SCHEMA = z
-  .object({ type: z.literal('local'), id: z.literal('local') })
+  .object({
+    type: z.literal('local'),
+    id: z.literal('local'),
+    rootPath: PATH_SCHEMA,
+    homeDirectoryId: DIRECTORY_ID_SCHEMA,
+  })
   .merge(EACH_CATEGORY_SCHEMA)
   .readonly()
 /** A category corresponding to the primary root directory for Local projects. */
diff --git a/app/gui/src/dashboard/layouts/Drive/Categories/categoriesHooks.tsx b/app/gui/src/dashboard/layouts/Drive/Categories/categoriesHooks.tsx
index 5c4b6ddd3989..e018d54f4921 100644
--- a/app/gui/src/dashboard/layouts/Drive/Categories/categoriesHooks.tsx
+++ b/app/gui/src/dashboard/layouts/Drive/Categories/categoriesHooks.tsx
@@ -166,6 +166,8 @@ export function useLocalCategoryList() {
     id: 'local',
     label: getText('localCategory'),
     icon: ComputerIcon,
+    homeDirectoryId: newDirectoryId(localBackend?.rootPath() ?? Path('')),
+    rootPath: localBackend?.rootPath() ?? Path(''),
   }
 
   const predefinedLocalCategories: AnyLocalCategory[] = [localCategory]
@@ -203,10 +205,17 @@ export function useLocalCategoryList() {
     (id: CategoryId) => categories.find((category) => category.id === id) ?? null,
   )
 
-  const getCategoryByDirectoryId = useEventCallback(
-    (id: DirectoryId): AnyLocalCategory | null =>
-      categories.find((category) => category.id === id) ?? null,
-  )
+  const getCategoryByDirectoryId = useEventCallback((id: DirectoryId): AnyLocalCategory | null => {
+    return (
+      categories.find((category) => {
+        if ('homeDirectoryId' in category) {
+          return category.homeDirectoryId === id
+        }
+
+        return false
+      }) ?? null
+    )
+  })
 
   const getCategoriesByType = useEventCallback(
     <T extends AnyLocalCategory['type']>(type: T) =>
diff --git a/app/gui/src/dashboard/pages/dashboard/Drive/DriveBar/DriveBarNavigation.tsx b/app/gui/src/dashboard/pages/dashboard/Drive/DriveBar/DriveBarNavigation.tsx
index 82f1dd46faea..c4d242180494 100644
--- a/app/gui/src/dashboard/pages/dashboard/Drive/DriveBar/DriveBarNavigation.tsx
+++ b/app/gui/src/dashboard/pages/dashboard/Drive/DriveBar/DriveBarNavigation.tsx
@@ -12,36 +12,26 @@ import { moveAssetsMutationOptions } from '#/hooks/backendBatchedHooks'
 import { listDirectoryQueryOptions } from '#/hooks/backendHooks'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { AssetPanelToggle } from '#/layouts/AssetPanel'
-import { type Category } from '#/layouts/CategorySwitcher/Category'
 import { useCategories, useCategoriesAPI } from '#/layouts/Drive/Categories/categoriesHooks'
 import { useDirectoryIds } from '#/layouts/Drive/directoryIdsHooks'
 import { useFullUserSession } from '#/providers/AuthProvider'
 import { useDriveStore } from '#/providers/DriveProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
 import { isDirectoryId } from '#/services/Backend'
 import { parseDirectoriesPath } from '#/services/utilities'
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 import { useState, useTransition } from 'react'
 import { toast } from 'react-toastify'
 
-/** Props for a {@link DriveBarNavigation}. */
-export interface DriveBarNavigationProps {
-  readonly backend: Backend
-  readonly category: Category
-}
-
 /**
  * Displays the current directory path and permissions, upload and download buttons,
  * and a column display mode switcher.
  */
-export function DriveBarNavigation(props: DriveBarNavigationProps) {
-  const { backend, category } = props
-
+export function DriveBarNavigation() {
   const { getText } = useText()
   const { user } = useFullUserSession()
   const { getCategoryByDirectoryId } = useCategories()
-  const { associatedBackend } = useCategoriesAPI()
+  const { associatedBackend, category } = useCategoriesAPI()
   const [isTransitioning, startTransition] = useTransition()
   const [navigatingKey, setNavigatingKey] = useState<React.Key | null>(null)
 
@@ -67,7 +57,7 @@ export function DriveBarNavigation(props: DriveBarNavigationProps) {
 
   const { data: directoryData } = useSuspenseQuery({
     ...listDirectoryQueryOptions({
-      backend,
+      backend: associatedBackend,
       parentId: parentDirectoryId,
       category,
     }),
@@ -91,7 +81,7 @@ export function DriveBarNavigation(props: DriveBarNavigationProps) {
       }
 
       return {
-        parentsPath: directory.parentsPath + '/' + currentDirectoryId,
+        parentsPath: directory.parentsPath + '/' + directory.id,
         virtualParentsPath: virtualParentsPath(),
       }
     },
@@ -104,11 +94,11 @@ export function DriveBarNavigation(props: DriveBarNavigationProps) {
       return
     }
 
-    setNavigatingKey(id)
     startTransition(() => {
+      setNavigatingKey(id)
       setCurrentDirectoryId({
         current: id,
-        // This is safe, because we know the index is present in the array.
+        // This is safe, because we know the index presents in the array.
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         parent: parentId < 0 ? null : finalPath[parentId]!.id,
       })
@@ -141,10 +131,21 @@ export function DriveBarNavigation(props: DriveBarNavigationProps) {
   })
 
   switch (category.type) {
-    case 'recent':
     case 'trash': {
-      return null
+      return (
+        <div className="py-2">
+          <Button
+            icon={BackIcon}
+            aria-label={getText('back')}
+            isDisabled={currentDirectoryId === user.rootDirectoryId}
+            onPress={navigateToParent}
+            variant="icon"
+          />
+        </div>
+      )
     }
+    case 'recent':
+      return null
     case 'cloud':
     case 'local':
     case 'user':
@@ -152,40 +153,41 @@ export function DriveBarNavigation(props: DriveBarNavigationProps) {
     case 'local-directory': {
       return (
         <div className="flex w-full flex-none items-center">
-          <ButtonGroup
-            className="mr-2 w-auto flex-none"
-            buttonVariants={{ variant: 'icon', size: 'small' }}
-          >
+          <ButtonGroup className="mr-2 w-auto flex-none">
             <Menu.Trigger trigger="longPress">
               <Button
                 icon={BackIcon}
                 aria-label={getText('back')}
                 isDisabled={currentDirectoryId === user.rootDirectoryId}
                 onPress={navigateToParent}
+                variant="icon"
               />
 
               <Menu items={[...finalPath].reverse()} onAction={navigateToDirectory}>
-                {(item) => (
-                  <Menu.Item
-                    key={item.id}
-                    id={item.id}
-                    icon={item.icon}
-                    isDisabled={item.id === currentDirectoryId}
-                  >
-                    {item.label}
-                  </Menu.Item>
-                )}
+                {(item) => {
+                  const index = finalPath.findIndex((pathItem) => pathItem.id === item.id)
+                  return (
+                    <Menu.Item
+                      key={item.id + index}
+                      id={item.id}
+                      icon={item.icon}
+                      isDisabled={item.id === currentDirectoryId}
+                    >
+                      {item.label}
+                    </Menu.Item>
+                  )
+                }}
               </Menu>
             </Menu.Trigger>
           </ButtonGroup>
 
           <Scroller orientation="horizontal">
             <Breadcrumbs onAction={navigateToDirectory} onDrop={onDrop}>
-              {finalPath.map((pathItem) => {
+              {finalPath.map((pathItem, index) => {
                 const isLoading = isTransitioning && pathItem.id === navigatingKey
                 return (
                   <Breadcrumbs.Item
-                    key={pathItem.id}
+                    key={pathItem.id + index}
                     id={pathItem.id}
                     icon={pathItem.icon}
                     isLoading={isLoading}
diff --git a/app/gui/src/dashboard/services/LocalBackend.ts b/app/gui/src/dashboard/services/LocalBackend.ts
index 26c0c9f7db75..1059e456d873 100644
--- a/app/gui/src/dashboard/services/LocalBackend.ts
+++ b/app/gui/src/dashboard/services/LocalBackend.ts
@@ -12,7 +12,7 @@ import { APP_BASE_URL } from '#/utilities/appBaseUrl'
 import { download } from '#/utilities/download'
 import { tryGetMessage } from '#/utilities/error'
 import { fileExtension, getFileName, getFolderPath } from '#/utilities/fileInfo'
-import { getDirectoryAndName, joinPath } from '#/utilities/path'
+import { getDirectoryAndName, joinPath, Path } from '#/utilities/path'
 import { uniqueString } from 'enso-common/src/utilities/uniqueString'
 import invariant from 'tiny-invariant'
 
@@ -28,20 +28,23 @@ function ipWithSocketToAddress(ipWithSocket: projectManager.IpWithSocket) {
 // ======================================
 // === Functions for manipulating ids ===
 // ======================================
+export const DIRECTORY_ID_PREFIX = `${backend.AssetType.directory}-`
+export const PROJECT_ID_PREFIX = `${backend.AssetType.project}-`
+export const FILE_ID_PREFIX = `${backend.AssetType.file}-`
 
 /** Create a {@link backend.DirectoryId} from a path. */
 export function newDirectoryId(path: projectManager.Path) {
-  return backend.DirectoryId(`${backend.AssetType.directory}-${path}` as const)
+  return backend.DirectoryId(`${DIRECTORY_ID_PREFIX}${path}` as const)
 }
 
 /** Create a {@link backend.ProjectId} from a UUID. */
 export function newProjectId(uuid: projectManager.UUID, path: projectManager.Path) {
-  return backend.ProjectId(`${backend.AssetType.project}-${uuid}-${path}`)
+  return backend.ProjectId(`${PROJECT_ID_PREFIX}${uuid}-${path}`)
 }
 
 /** Create a {@link backend.FileId} from a path. */
 export function newFileId(path: projectManager.Path) {
-  return backend.FileId(`${backend.AssetType.file}-${path}`)
+  return backend.FileId(`${FILE_ID_PREFIX}${path}`)
 }
 
 /** The internal asset type and properly typed corresponding internal ID of a directory. */
@@ -165,19 +168,50 @@ export default class LocalBackend extends Backend {
       const entries = await this.projectManager.listDirectory(parentIdRaw)
       result = entries
         .map((entry) => {
-          console.log('entry', {
-            entry,
-            parentId,
-            parentIdRaw,
-            rootDirectory: this.projectManager.rootDirectory,
-            parentsPath: entry.path.replace(this.projectManager.rootDirectory, ''),
-            virtualParentsPath: entry.path.replace(this.projectManager.rootDirectory, ''),
-          })
           switch (entry.type) {
             case projectManager.FileSystemEntryType.DirectoryEntry: {
+              const id = newDirectoryId(entry.path)
+
+              const virtualParentsPath = (() => {
+                let path = entry.path.replace(this.projectManager.rootDirectory, '')
+
+                if (path.startsWith('/')) {
+                  path = path.slice(1)
+                }
+
+                if (path.endsWith('/')) {
+                  path = path.slice(0, -1)
+                }
+
+                return path
+              })()
+
+              const parentsPath = (() => {
+                const parentsPathArray: backend.DirectoryId[] = [newDirectoryId(this.rootPath())]
+                const splitPath = virtualParentsPath.split('/')
+
+                let previousPath = ''
+
+                for (const directory of splitPath) {
+                  if (directory === '') {
+                    continue
+                  }
+
+                  previousPath = Path(previousPath + '/' + directory)
+
+                  if (previousPath.endsWith('/')) {
+                    previousPath = previousPath.slice(0, -1)
+                  }
+
+                  parentsPathArray.push(newDirectoryId(Path(this.rootPath() + previousPath)))
+                }
+
+                return parentsPathArray.slice(0, -1).join('/')
+              })()
+
               return {
+                id,
                 type: backend.AssetType.directory,
-                id: newDirectoryId(entry.path),
                 modifiedAt: entry.attributes.lastModifiedTime,
                 parentId,
                 title: getFileName(entry.path),
@@ -186,8 +220,8 @@ export default class LocalBackend extends Backend {
                 extension: null,
                 labels: [],
                 description: null,
-                parentsPath: entry.path.replace(this.projectManager.rootDirectory, ''),
-                virtualParentsPath: entry.path.replace(this.projectManager.rootDirectory, ''),
+                parentsPath,
+                virtualParentsPath,
               } satisfies backend.DirectoryAsset
             }
             case projectManager.FileSystemEntryType.ProjectEntry: {
diff --git a/app/gui/src/dashboard/services/utilities.ts b/app/gui/src/dashboard/services/utilities.ts
index bd503ab39c6f..0b3498c6eb2b 100644
--- a/app/gui/src/dashboard/services/utilities.ts
+++ b/app/gui/src/dashboard/services/utilities.ts
@@ -3,8 +3,9 @@
  */
 import FolderIcon from '#/assets/folder.svg'
 import type { AnyCategory } from '../layouts/Drive/Categories/Category'
-import { isDirectoryId, type DirectoryId } from './Backend'
-
+import type { DirectoryId } from './Backend'
+import { Path } from './Backend'
+import { DIRECTORY_ID_PREFIX, newDirectoryId } from './LocalBackend'
 /**
  * Options for the parseDirectoriesPath function.
  */
@@ -29,9 +30,10 @@ export interface PathItem {
 export function parseDirectoriesPath(options: ParsedDirectoriesPathOptions) {
   const { getCategoryByDirectoryId, parentsPath, rootDirectoryId, virtualParentsPath } = options
 
-  // Parents path is a string of directory ids separated by slashes.
+  // Split the path using the helper function
+  // Parents path is a string of directory ids separated by slashes, but the ids are not escaped, so we need to split them manually.
   // e.g: parentsPath = 'directory-id1adsf/directory-id2adsf/directory-id3adsf'
-  const splitPath = parentsPath.split('/').filter(isDirectoryId)
+  const splitPath = splitDirectoryPath(parentsPath)
   const rootDirectoryInPath = splitPath[0] ?? rootDirectoryId
 
   const splitVirtualParentsPath = virtualParentsPath.split('/')
@@ -62,9 +64,9 @@ export function parseDirectoriesPath(options: ParsedDirectoriesPathOptions) {
 
     result.push({
       id: rootDirectoryId,
-      categoryId: rootCategory.id,
-      label: rootCategory.label,
       icon: rootCategory.icon,
+      label: rootCategory.label,
+      categoryId: rootCategory.id,
     })
 
     for (const [index, id] of virtualParentsIds.entries()) {
@@ -87,3 +89,28 @@ export function parseDirectoriesPath(options: ParsedDirectoriesPathOptions) {
 
   return { finalPath } as const
 }
+
+/**
+ * Splits a path string containing directory IDs into an array of individual directory IDs.
+ * Handles cases where directory IDs themselves may contain forward slashes.
+ */
+function splitDirectoryPath(path: string): DirectoryId[] {
+  if (path === '') {
+    return []
+  }
+
+  const result: DirectoryId[] = []
+
+  const directories = path.split(DIRECTORY_ID_PREFIX)
+
+  // Iterate through each character
+  for (const directory of directories) {
+    if (directory === '') {
+      continue
+    }
+
+    result.push(newDirectoryId(Path(directory.replace(/\/$/, ''))))
+  }
+
+  return result
+}