From 3905155ab785aa38ffbe75ff4307d20601318b6f Mon Sep 17 00:00:00 2001
From: grngxd <36968271+grngxd@users.noreply.github.com>
Date: Fri, 1 Aug 2025 11:01:58 +0100
Subject: [PATCH] refactor: simplify file sorting logic

---
 src/components/dashboard/Actionbar.tsx |  4 +++-
 src/routes/dashboard/index.tsx         | 20 ++++++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/dashboard/Actionbar.tsx b/src/components/dashboard/Actionbar.tsx
index eb7953d..c06ace3 100644
--- a/src/components/dashboard/Actionbar.tsx
+++ b/src/components/dashboard/Actionbar.tsx
@@ -32,7 +32,8 @@ export default component$(() => {
             );
 
             input.value = "";
-            files.value = [...files.value, ...metas].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
+            //files.value = [...files.value, ...metas].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
+            files.value = [...files.value, ...metas]
         }
     });
 
@@ -73,6 +74,7 @@ export default component$(() => {
             <input
                 ref={fileInputRef}
                 type="file"
+                multiple
                 class="hidden"
                 onChange$={handleFileChange}
             />
diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx
index aec2a66..b1bdb5e 100644
--- a/src/routes/dashboard/index.tsx
+++ b/src/routes/dashboard/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable qwik/jsx-img */
 /* eslint-disable qwik/no-use-visible-task */
-import { component$, Signal, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
+import { component$, Signal, useComputed$, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
 import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city";
 import Actionbar from "~/components/dashboard/Actionbar";
 import Settings from "~/components/dashboard/Settings";
@@ -60,7 +60,7 @@ const Files = component$(() => {
 			{fileType.value === "image" && (
 				<div
 					style={{
-						aspectRatio: file.Width && file.Height ? `${file.Width} / ${file.Height}` : "16 / 9",
+						aspectRatio: (file.Width && file.Height) ? `${file.Width} / ${file.Height}` : "16 / 9",
 						width: "100%",
 						position: "relative",
 						overflow: "hidden",
@@ -129,6 +129,9 @@ const Files = component$(() => {
     const sentinel = useSignal<HTMLDivElement>();
 
     const files = useNanostore$<StereoFile[]>(loadedFiles, [])
+	const sortedFiles = useComputed$(() => {
+		return files.value.slice().sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
+	})
     const page = useSignal(1);
 
 	// TODO: make it load enough images to fill the viewport instead
@@ -152,8 +155,9 @@ const Files = component$(() => {
                         hasMore.value = false;
                         if (sentinel.value) observer.unobserve(sentinel.value);
                     } else {
-                        files.value = [...files.value, ...newFiles].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
-                        page.value++;
+                        //files.value = [...files.value, ...newFiles].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
+                        files.value = [...files.value, ...newFiles]
+						page.value++;
                     }
                     loadingMore.value = false;
 				}, 50)();
@@ -171,25 +175,25 @@ const Files = component$(() => {
         <div class="px-2 mb-6 flex-grow overflow-y-auto mask-clip-content rounded-3xl">
             <div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 space-y-2 relative">
 				<div>
-					{files.value.filter((_, index) => index % 4 === 0).map((file) => (
+					{sortedFiles.value.filter((_, index) => index % 4 === 0).map((file) => (
 						<File key={file.ID} file={file} />
 					))}
 				</div>
 
 				<div>
-					{files.value.filter((_, index) => index % 4 === 1).map((file) => (
+					{sortedFiles.value.filter((_, index) => index % 4 === 1).map((file) => (
 						<File key={file.ID} file={file} />
 					))}
 				</div>
 
 				<div>
-					{files.value.filter((_, index) => index % 4 === 2).map((file) => (
+					{sortedFiles.value.filter((_, index) => index % 4 === 2).map((file) => (
 						<File key={file.ID} file={file} />
 					))}
 				</div>
 
 				<div>
-					{files.value.filter((_, index) => index % 4 === 3).map((file) => (
+					{sortedFiles.value.filter((_, index) => index % 4 === 3).map((file) => (
 						<File key={file.ID} file={file} />
 					))}
 				</div>