fix move submenu: use folder names with tree-ordered indentation instead of stale paths

- Compute folder depth from parentId chain client-side (avoids stale server-computed path field)
- Tree-order folders so parents appear before their children, sorted by sortOrder then name
- Show folder.name instead of folder.path so optimistic renames are reflected immediately
- Indent each folder by depth * 12px in the submenu so po/shit renders as 'shit' indented under 'po'
- MoveOption gains optional depth field; contextMenuMoveOptions is a separate memo from moveFolderOptions (modal keeps its existing path-label behavior)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/file-row-context-menu.tsx

@@ -21,6 +21,7 @@ import { Folder } from '@/components/emcn/icons'
 interface MoveOption {
   value: string
   label: string
+  depth?: number
 }
 
 interface FileRowContextMenuProps {
@@ -103,7 +104,13 @@ export const FileRowContextMenu = memo(function FileRowContextMenu({
                 </DropdownMenuSubTrigger>
                 <DropdownMenuSubContent>
                   {moveOptions.map((option) => (
-                    <DropdownMenuItem key={option.value} onSelect={() => onMove(option.value)}>
+                    <DropdownMenuItem
+                      key={option.value}
+                      onSelect={() => onMove(option.value)}
+                      style={
+                        option.depth ? { paddingLeft: `${option.depth * 12 + 8}px` } : undefined
+                      }
+                    >
                       <Folder />
                       {option.label}
                     </DropdownMenuItem>

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -1514,6 +1514,46 @@ export function Files() {
     [folders, selectedFolderIds, descendantFolderIdsByFolderId]
   )
 
+  const contextMenuMoveOptions = useMemo(() => {
+    const depthById = new Map<string, number>()
+    const getDepth = (id: string): number => {
+      if (depthById.has(id)) return depthById.get(id)!
+      const f = folders.find((folder) => folder.id === id)
+      const d = f?.parentId ? getDepth(f.parentId) + 1 : 0
+      depthById.set(id, d)
+      return d
+    }
+    for (const f of folders) getDepth(f.id)
+
+    const treeOrdered: WorkspaceFileFolderApi[] = []
+    const addChildren = (parentId: string | null) => {
+      const children = folders
+        .filter((f) => f.parentId === parentId)
+        .sort((a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name))
+      for (const child of children) {
+        treeOrdered.push(child)
+        addChildren(child.id)
+      }
+    }
+    addChildren(null)
+
+    const filtered = treeOrdered.filter((folder) => {
+      if (selectedFolderIds.includes(folder.id)) return false
+      return selectedFolderIds.every(
+        (selectedFolderId) => !descendantFolderIdsByFolderId.get(selectedFolderId)?.has(folder.id)
+      )
+    })
+
+    return [
+      { value: '__root__', label: 'Files', depth: 0 },
+      ...filtered.map((folder) => ({
+        value: folder.id,
+        label: folder.name,
+        depth: depthById.get(folder.id) ?? 0,
+      })),
+    ]
+  }, [folders, selectedFolderIds, descendantFolderIdsByFolderId])
+
   const sortConfig: SortConfig = useMemo(
     () => ({
       options: [
@@ -1821,7 +1861,7 @@ export function Files() {
         onRename={handleContextMenuRename}
         onDelete={handleContextMenuDelete}
         onMove={handleContextMenuMove}
-        moveOptions={moveFolderOptions}
+        moveOptions={contextMenuMoveOptions}
         canEdit={canEdit}
         selectedCount={selectedRowIds.size}
       />