Merge pull request 'feat: ✨ add sorting functionality for files and folders in AccountTab' (#1) from v1.0.0 into main

Reviewed-on: http://git.jdbnet.co.uk/jamie/s3-client/pulls/1

frontend/src/components/AccountTab.vue

@@ -34,6 +34,38 @@ const renameTarget = ref<{
   key: string;
 } | null>(null);
 const renameValue = ref("");
+const sortBy = ref("name-asc");
+
+const sortedFolders = computed(() => {
+  const arr = [...folders.value];
+  if (sortBy.value === "name-asc") {
+    arr.sort((a, b) => a.name.localeCompare(b.name));
+  } else if (sortBy.value === "name-desc") {
+    arr.sort((a, b) => b.name.localeCompare(a.name));
+  }
+  return arr;
+});
+
+const sortedFiles = computed(() => {
+  const arr = [...files.value];
+  const [field, dir] = sortBy.value.split("-");
+  
+  arr.sort((a, b) => {
+    let cmp = 0;
+    if (field === "name") {
+      cmp = a.name.localeCompare(b.name);
+    } else if (field === "date") {
+      const ta = a.last_modified ? new Date(a.last_modified).getTime() : 0;
+      const tb = b.last_modified ? new Date(b.last_modified).getTime() : 0;
+      cmp = ta - tb;
+    } else if (field === "size") {
+      cmp = a.size - b.size;
+    }
+    return dir === "asc" ? cmp : -cmp;
+  });
+  
+  return arr;
+});
 
 let searchTimer: number | undefined;
 
@@ -300,8 +332,8 @@ watch(
             </div>
           </div>
 
-          <div class="mt-3 flex items-center gap-2">
+          <div class="mt-3 flex flex-wrap items-center gap-2">
-            <div class="relative flex-1">
+            <div class="relative flex-1 min-w-[200px]">
               <Search class="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-slate-500" />
               <input
                 v-model="searchQuery"
@@ -309,6 +341,14 @@ watch(
                 @input="queueSearch"
               />
             </div>
+            <select v-model="sortBy" class="field w-auto text-sm">
+              <option value="name-asc">Name (A-Z)</option>
+              <option value="name-desc">Name (Z-A)</option>
+              <option value="date-desc">Date (Newest)</option>
+              <option value="date-asc">Date (Oldest)</option>
+              <option value="size-desc">Size (Largest)</option>
+              <option value="size-asc">Size (Smallest)</option>
+            </select>
             <button type="button" class="button-secondary" @click="searchQuery = ''; loadObjects()">
               Clear
             </button>
@@ -324,7 +364,7 @@ watch(
               <p class="text-xs font-medium uppercase tracking-wide text-slate-500">Folders</p>
               <ul class="mt-2 space-y-1">
                 <li
-                  v-for="f in folders"
+                  v-for="f in sortedFolders"
                   :key="f.prefix"
                   class="group flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-surface-overlay"
                 >
@@ -349,7 +389,7 @@ watch(
                     <Trash2 class="h-4 w-4" />
                   </button>
                 </li>
-                <li v-if="!folders.length" class="text-xs text-slate-500">No folders</li>
+                <li v-if="!sortedFolders.length" class="text-xs text-slate-500">No folders</li>
               </ul>
             </div>
 
@@ -357,17 +397,18 @@ watch(
               <p class="text-xs font-medium uppercase tracking-wide text-slate-500">Files</p>
               <ul class="mt-2 space-y-1">
                 <li
-                  v-for="f in files"
+                  v-for="f in sortedFiles"
                   :key="f.key"
                   class="group flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-surface-overlay"
                 >
-                  <div class="flex-1 truncate text-sm text-slate-200">
+                  <div class="flex-1 min-w-0">
-                    <span class="inline-flex items-center gap-2">
+                    <span class="inline-flex w-full items-center gap-2 text-sm text-slate-200">
-                      <File class="h-4 w-4" />
+                      <File class="h-4 w-4 shrink-0" />
-                      {{ f.name }}
+                      <span class="truncate">{{ f.name }}</span>
                     </span>
                   </div>
-                  <span class="text-xs text-slate-500">{{ fmtSize(f.size) }}</span>
+                  <span class="w-16 text-right text-xs text-slate-500">{{ fmtSize(f.size) }}</span>
+                  <span class="w-32 text-right text-[11px] text-slate-500">{{ fmtDate(f.last_modified) }}</span>
                   <button
                     type="button"
                     class="text-xs text-slate-400 opacity-0 transition group-hover:opacity-100"
@@ -390,7 +431,7 @@ watch(
                     <Trash2 class="h-4 w-4" />
                   </button>
                 </li>
-                <li v-if="!files.length" class="text-xs text-slate-500">No files</li>
+                <li v-if="!sortedFiles.length" class="text-xs text-slate-500">No files</li>
               </ul>
             </div>
           </div>