From b8b98ec00af8ed047813f7bf612fd43969e9a062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Thu, 22 Dec 2022 13:08:37 +0100
Subject: [PATCH] sort folders first

---
 .../views/collection-view-media-grid.element.ts        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts
index a9e995e54c..29bf8daba8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts
@@ -95,7 +95,7 @@ export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin(
 		if (!this._collectionContext) return;
 
 		this.observe<Array<MediaDetails>>(this._collectionContext.data, (mediaItems) => {
-			this._mediaItems = mediaItems;
+			this._mediaItems = mediaItems.sort((a, b) => (a.hasChildren === b.hasChildren ? 0 : a ? -1 : 1));
 		});
 
 		this.observe<Array<string>>(this._collectionContext.selection, (selection) => {
@@ -143,7 +143,13 @@ export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin(
 				@file-change=${(e: any) => console.log(e)}
 				label="Drop files here"
 				accept=""></uui-file-dropzone>
-			<div id="media-files">${repeat(this._mediaItems, (file) => this._renderMediaItem(file))}</div>
+			<div id="media-files">
+				${repeat(
+					this._mediaItems,
+					(file) => file.key,
+					(file) => this._renderMediaItem(file)
+				)}
+			</div>
 		`;
 	}
 }