feat: add icons

frontend/src/components/prompts/UploadFiles.vue

@@ -11,8 +11,8 @@
         <button
           class="action"
           @click="toggle"
-          :aria-label="$t('sidebar.newFolder')"
-          :title="$t('sidebar.newFolder')"
+          aria-label="Toggle file upload list"
+          title="Toggle file upload list"
         >
           <i class="material-icons">{{
             open ? "keyboard_arrow_down" : "keyboard_arrow_up"
@@ -20,9 +20,16 @@
         </button>
       </div>
 
-      <div class="card-content">
-        <div class="file" v-for="file in filesInUpload" :key="file.id">
-          <div class="file-name">{{ file.name }}</div>
+      <div class="card-content file-icons">
+        <div
+          class="file"
+          v-for="file in filesInUpload"
+          :key="file.id"
+          :data-type="file.type"
+        >
+          <div class="file-name">
+            <i class="material-icons"></i> {{ file.name }}
+          </div>
           <div class="file-progress">
             <div v-bind:style="{ width: file.progress + '%' }"></div>
           </div>

frontend/src/css/base.css

@@ -150,6 +150,12 @@ main {
 
 .upload-files .file .file-name {
   font-size: 1.1em;
+  display: flex;
+  align-items: center;
+}
+
+.upload-files .file .file-name i {
+  margin-right: 5px;
 }
 
 .upload-files .file .file-progress {
@@ -168,16 +174,18 @@ main {
 
 .upload-files.closed .card-content {
   display: none;
-  padding: 0em 1em;
+  padding: 0em 1em 1em 1em;
 }
 
-.upload-files .card-title {
+.upload-files .card .card-title {
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 0.8em;
+  padding: 1em 1em 0em;
 }
 
 .upload-files.closed .card-title {
   font-size: 0.7em;
   padding: 0.5em 1em;
-}
+}

frontend/src/store/getters.js

@@ -24,11 +24,17 @@ const getters = {
     for (let index in state.upload.uploads) {
       let upload = state.upload.uploads[index];
       let id = upload.id;
+      let type = upload.type;
       let name = decodeURIComponent(upload.path.replace(/^.*[\\/]/, ""));
       let progress = state.upload.progress[id];
       let size = state.upload.sizes[id];
 
-      files.push({ id, name, progress: Math.ceil((progress / size) * 100) });
+      files.push({
+        id,
+        name,
+        progress: Math.ceil((progress / size) * 100),
+        type,
+      });
     }
 
     return files.sort((a, b) => a.progress - b.progress);

frontend/src/utils/upload.js

@@ -99,6 +99,15 @@ export function scanFiles(dt) {
   });
 }
 
+function detectType(mimetype) {
+  if (mimetype.startsWith("video")) return "video";
+  if (mimetype.startsWith("audio")) return "audio";
+  if (mimetype.startsWith("image")) return "image";
+  if (mimetype.startsWith("pdf")) return "pdf";
+  if (mimetype.startsWith("text")) return "text";
+  return "blob";
+}
+
 export function handleFiles(files, base, overwrite = false) {
   for (let i = 0; i < files.length; i++) {
     let id = store.state.upload.id;
@@ -120,6 +129,7 @@ export function handleFiles(files, base, overwrite = false) {
       path,
       file,
       overwrite,
+      type: detectType(file.type),
     };
 
     store.dispatch("upload/upload", item);