From 2a3357ce5c90fa571b518d90e58e811ca9397647 Mon Sep 17 00:00:00 2001
From: Thaum Rystra <9525416+ThaumRystra@users.noreply.github.com>
Date: Tue, 3 Sep 2024 16:32:10 +0200
Subject: [PATCH] Moved upload input to front of file lists

---
 .../ui/files/userImages/ImageInputDialog.vue  | 27 +++++++---
 app/imports/client/ui/pages/Files.vue         | 49 ++++++++++---------
 2 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/app/imports/client/ui/files/userImages/ImageInputDialog.vue b/app/imports/client/ui/files/userImages/ImageInputDialog.vue
index 3b09400d..d9f04b5d 100644
--- a/app/imports/client/ui/files/userImages/ImageInputDialog.vue
+++ b/app/imports/client/ui/files/userImages/ImageInputDialog.vue
@@ -22,6 +22,11 @@
         <div
           class="user-image-list pa-4 d-flex flex-wrap"
         >
+          <image-upload-input
+            class="ma-1"
+            style="height: 250px;"
+            @uploaded="link => selectUserImage(link)"
+          />
           <v-img
             v-for="file in userImages"
             :key="file._id"
@@ -30,6 +35,7 @@
             :class="{'elevation-4': file.link === href}"
             height="250"
             :src="file.link"
+            :lazy-src="file.thumbHashDataUrl"
             @click="selectUserImage(file.link)"
           >
             <v-btn
@@ -40,13 +46,18 @@
               <v-icon>mdi-magnify-plus</v-icon>
             </v-btn>
           </v-img>
-          <image-upload-input
-            style="height: 250px;"
-            @uploaded="link => selectUserImage(link)"
+          <div
+            style="height: 0;"
+            class="ma-1"
+          />
+          <div
+            style="height: 0;"
+            class="ma-1"
+          />
+          <div
+            style="height: 0;"
+            class="ma-1"
           />
-          <div style="height: 0;" />
-          <div style="height: 0;" />
-          <div style="height: 0;" />
         </div>
       </v-tab-item>
       <v-tab-item
@@ -94,6 +105,7 @@ import UserImages from '/imports/api/files/userImages/UserImages';
 import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
 import ImageUploadInput from '/imports/client/ui/components/ImageUploadInput.vue';
 import prettyBytes from 'pretty-bytes';
+import { thumbHashToDataURL } from 'thumbhash';
 
 export default {
   components: {
@@ -132,6 +144,9 @@ export default {
       ).map(f => {
         f.size = prettyBytes(f.size);
         f.link = UserImages.link(f);
+        if (f.meta?.thumbHash) {
+          f.thumbHashDataUrl = thumbHashToDataURL(f.meta.thumbHash);
+        }
         return f;
       });
     },
diff --git a/app/imports/client/ui/pages/Files.vue b/app/imports/client/ui/pages/Files.vue
index 73b0ae98..ac0d28c6 100644
--- a/app/imports/client/ui/pages/Files.vue
+++ b/app/imports/client/ui/pages/Files.vue
@@ -10,19 +10,7 @@
       <v-col cols="12">
         <v-subheader> Archived Characters </v-subheader>
       </v-col>
-      <template v-if="archiveFiles && archiveFiles.length">
-        <v-col
-          v-for="file in archiveFiles"
-          :key="file._id"
-          cols="12"
-          sm="6"
-          md="4"
-          lg="3"
-          xl="2"
-        >
-          <archive-file-card :model="file" />
-        </v-col>
-      </template>
+      
       <v-col
         key="upload"
         cols="12"
@@ -63,11 +51,35 @@
           />
         </v-btn>
       </v-col>
+      <template v-if="archiveFiles && archiveFiles.length">
+        <v-col
+          v-for="file in archiveFiles"
+          :key="file._id"
+          cols="12"
+          sm="6"
+          md="4"
+          lg="3"
+          xl="2"
+        >
+          <archive-file-card :model="file" />
+        </v-col>
+      </template>
     </v-row>
     <v-row dense>
       <v-col cols="12">
         <v-subheader> Images </v-subheader>
       </v-col>
+      <v-col
+        cols="12"
+        sm="6"
+        md="4"
+        lg="3"
+        xl="2"
+      >
+        <image-upload-input
+          style="height: 100%; width: 100%; min-height: 120px;"
+        />
+      </v-col>
       <template v-if="imageFiles && imageFiles.length">
         <v-col
           v-for="file in imageFiles"
@@ -81,17 +93,6 @@
           <user-image-card :model="file" />
         </v-col>
       </template>
-      <v-col
-        cols="12"
-        sm="6"
-        md="4"
-        lg="3"
-        xl="2"
-      >
-        <image-upload-input
-          style="height: 100%; width: 100%; min-height: 120px;"
-        />
-      </v-col>
     </v-row>
       <!--
     <v-row dense>