Merge pull request #47294 from nextcloud/fix/natural-order-tree

fix(files): Sort tree views correctly by natural order

3 files changed, 17 insertions, 5 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 = {
diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue
index 9566b886b26..9570cb1be66 100644
--- a/apps/files/src/views/Navigation.vue
+++ b/apps/files/src/views/Navigation.vue
@@ -122,7 +122,6 @@ export default defineComponent({
 			return this.views
 				.reduce((map, view) => {
 					map[view.parent!] = [...(map[view.parent!] || []), view]
-					// TODO Allow undefined order for natural sort
 					map[view.parent!].sort((a, b) => {
 						if (typeof a.order === 'number' || typeof b.order === 'number') {
 							return (a.order ?? 0) - (b.order ?? 0)
diff --git a/apps/files/src/views/folderTree.ts b/apps/files/src/views/folderTree.ts
index 06d8a916cb6..208a7db9f94 100644
--- a/apps/files/src/views/folderTree.ts
+++ b/apps/files/src/views/folderTree.ts
@@ -77,7 +77,6 @@ const registerNodeView = (node: TreeNode | Folder) => {
 		name: node.displayName ?? node.displayname ?? node.basename,
 
 		icon: FolderSvg,
-		order: 0, // TODO Allow undefined order for natural sort
 
 		getContents,
 		loadChildViews: getLoadChildViews(node),