fix(files): Render folders in natural sort order

- Nodes are returned from the endpoint in an undefined order

Signed-off-by: Christopher Ng <chrng8@gmail.com>

1 files changed, 17 insertions, 3 deletions

diff --git a/apps/files/src/services/FolderTree.ts b/apps/files/src/services/FolderTree.ts
index 8b156182f69..82f0fb392e5 100644
--- a/apps/files/src/services/FolderTree.ts
+++ b/apps/files/src/services/FolderTree.ts
@@ -11,16 +11,19 @@ import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { dirname, encodePath, joinPaths } from '@nextcloud/paths'
+import { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'
 
 import { getContents as getFiles } from './Files.ts'
 
 // eslint-disable-next-line no-use-before-define
-type Tree = Array<{
+type Tree = TreeNodeData[]
+
+interface TreeNodeData {
 	id: number,
 	basename: string,
 	displayName?: string,
 	children: Tree,
-}>
+}
 
 export interface TreeNode {
 	source: string,
@@ -35,8 +38,19 @@ export const folderTreeId = 'folders'
 
 export const sourceRoot = `${davRemoteURL}/files/${getCurrentUser()?.uid}`
 
+const collator = Intl.Collator(
+	[getLanguage(), getCanonicalLocale()],
+	{
+		numeric: true,
+		usage: 'sort',
+	},
+)
+
+const compareNodes = (a: TreeNodeData, b: TreeNodeData) => collator.compare(a.displayName ?? a.basename, b.displayName ?? b.basename)
+
 const getTreeNodes = (tree: Tree, currentPath: string = '/', nodes: TreeNode[] = []): TreeNode[] => {
-	for (const { id, basename, displayName, children } of tree) {
+	const sortedTree = tree.toSorted(compareNodes)
+	for (const { id, basename, displayName, children } of sortedTree) {
 		const path = joinPaths(currentPath, basename)
 		const source = `${sourceRoot}${path}`
 		const node: TreeNode = {