feat: add upload file list with progress (#1825)

frontend/src/components/prompts/UploadFiles.vue

@@ -0,0 +1,62 @@
+<template>
+  <div
+    v-if="filesInUploadCount > 0"
+    class="upload-files"
+    v-bind:class="{ closed: !open }"
+  >
+    <div class="card floating">
+      <div class="card-title">
+        <h2>{{ $t("prompts.uploadFiles", { files: filesInUploadCount }) }}</h2>
+
+        <button
+          class="action"
+          @click="toggle"
+          aria-label="Toggle file upload list"
+          title="Toggle file upload list"
+        >
+          <i class="material-icons">{{
+            open ? "keyboard_arrow_down" : "keyboard_arrow_up"
+          }}</i>
+        </button>
+      </div>
+
+      <div class="card-content file-icons">
+        <div
+          class="file"
+          v-for="file in filesInUpload"
+          :key="file.id"
+          :data-type="file.type"
+          :aria-label="file.name"
+        >
+          <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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "uploadFiles",
+  data: function () {
+    return {
+      open: false,
+    };
+  },
+  computed: {
+    ...mapGetters(["filesInUpload", "filesInUploadCount"]),
+  },
+  methods: {
+    toggle: function () {
+      this.open = !this.open;
+    },
+  },
+};
+</script>

frontend/src/css/base.css

@@ -1,5 +1,5 @@
 body {
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   padding-top: 4em;
   background-color: #fafafa;
   color: #333333;
@@ -13,7 +13,7 @@ body {
 *:hover,
 *:active,
 *:focus {
-  outline: 0
+  outline: 0;
 }
 
 a {
@@ -44,7 +44,7 @@ i.spin {
 }
 
 #app {
-  transition: .2s ease padding;
+  transition: 0.2s ease padding;
 }
 
 #app.multiple {
@@ -63,17 +63,17 @@ nav .action {
   display: block;
   border-radius: 0;
   font-size: 1.1em;
-  padding: .5em;
+  padding: 0.5em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-nav>div {
+nav > div {
   border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-nav .action>* {
+nav .action > * {
   vertical-align: middle;
 }
 
@@ -97,19 +97,25 @@ main {
 
 .breadcrumbs a {
   color: inherit;
-  transition: .1s ease-in;
-  border-radius: .125em;
+  transition: 0.1s ease-in;
+  border-radius: 0.125em;
 }
 
 .breadcrumbs a:hover {
-  background-color: rgba(0,0,0, 0.05);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 .breadcrumbs span a {
-  padding: .2em;
+  padding: 0.2em;
 }
 
-#progress {
+.files {
+  position: absolute;
+  bottom: 30px;
+  width: 100%;
+}
+
+.progress {
   position: fixed;
   top: 0;
   left: 0;
@@ -118,11 +124,11 @@ main {
   z-index: 9999999999;
 }
 
-#progress div {
+.progress div {
   height: 100%;
   background-color: #40c4ff;
   width: 0;
-  transition: .2s ease width;
+  transition: 0.2s ease width;
 }
 
 .break-word {