Attachment info button

src/components/file_mode/SendAttachmentsLayout.vue

@@ -31,14 +31,20 @@
             <v-progress-linear indeterminate class="mb-0"></v-progress-linear>
           </div>
         </div>
+        <v-btn
+          class="info-button clickable"
+          icon="information"
+          size="default"
+          elevation="0"
+          color="black"
+          @click.stop="showInformation"
+        ></v-btn>
       </div>
       <div class="file-drop-thumbnail-container">
         <v-tooltip location="top" v-for="(attachment, index) in batch.attachments" :key="index">
           <template v-slot:activator="{ props }">
             <v-badge :model-value="batch.isTooLarge(attachment)" color="error">
-              <template v-slot:badge
-                ><span v-bind="props">&nbsp;</span></template
-              >
+              <template v-slot:badge><span v-bind="props">&nbsp;</span></template>
               <div
                 :class="{ 'file-drop-thumbnail': true, clickable: true, current: index == currentItemIndex }"
                 @click="currentItemIndex = index"
@@ -175,6 +181,14 @@
         <v-btn class="close" @click.stop="close">{{ $t("file_mode.close") }}</v-btn>
       </div>
     </template>
+
+    <v-bottom-sheet v-model="showAttachmentInformation" theme="dark">
+      <v-card class="text-center">
+        <v-card-text>
+          <AttachmentInfo :attachment="currentAttachment" />
+        </v-card-text>
+      </v-card>
+    </v-bottom-sheet>
   </div>
 </template>
 
@@ -185,10 +199,11 @@ import prettyBytes from "pretty-bytes";
 import { Attachment } from "../../models/attachment";
 import C2PABadge from "../c2pa/C2PABadge.vue";
 import { createUploadBatch } from "../../models/attachmentManager";
+import AttachmentInfo from "./AttachmentInfo.vue";
 
 export default defineComponent({
   mixins: [messageMixin],
-  components: { C2PABadge },
+  components: { C2PABadge, AttachmentInfo },
   emits: ["pick-file", "close"],
   props: {
     showBackButton: {
@@ -200,7 +215,7 @@ export default defineComponent({
     batch: {
       type: Object,
       default: function () {
-        return reactive(createUploadBatch(null, null, 0))
+        return reactive(createUploadBatch(null, null, 0));
       },
     },
   },
@@ -215,6 +230,7 @@ export default defineComponent({
       }),
       status: 0,
       dropTarget: false,
+      showAttachmentInformation: false,
     };
   },
   mounted() {
@@ -255,6 +271,11 @@ export default defineComponent({
     },
   },
   methods: {
+    showInformation() {
+      if (this.currentAttachment) {
+        this.showAttachmentInformation = true;
+      }
+    },
     filesDropped(e: DragEvent) {
       this.dropTarget = false;
       let droppedFiles: FileList | undefined = e.dataTransfer?.files;
@@ -264,9 +285,6 @@ export default defineComponent({
         this.batch.addAttachment(this.$matrix.attachmentManager.createAttachment(file));
       }
     },
-    formatBytes(bytes: number) {
-      return prettyBytes(bytes);
-    },
     close() {
       this.batch.cancel();
       this.status = this.mainStatuses.SELECTING;