From b30f50b96dff7f3f9a934c8a6e3d5afc7fa09585 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 17 Oct 2025 15:11:47 +0200
Subject: [PATCH 1/2] Re-add the file drop initial view

---
 src/assets/css/sendattachments.scss           |  27 +++
 .../file_mode/SendAttachmentsLayout.vue       | 168 ++++++------------
 2 files changed, 80 insertions(+), 115 deletions(-)

diff --git a/src/assets/css/sendattachments.scss b/src/assets/css/sendattachments.scss
index 46f8394..8243dfa 100644
--- a/src/assets/css/sendattachments.scss
+++ b/src/assets/css/sendattachments.scss
@@ -38,6 +38,14 @@ $hiliteColor: #4642f1;
     display: flex;
     align-items: center;
     justify-content: center;
+    &.file-drop {
+      flex: 0 0 100px;
+      background-color: transparent;
+      flex-direction: column;
+      .file-drop-title {
+        margin-top: 8px;
+      }
+    }
   }
 
   .v-btn {
@@ -119,6 +127,25 @@ $hiliteColor: #4642f1;
     }
   }
 
+  .file-drop-choose-files {
+    background-color: $backgroundSection;
+    border-radius: 19px;
+    padding: 16px 18px;
+    flex: 0 0 40%;
+    margin: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    .file-format-info {
+      font-family: "Inter", sans-serif;
+      font-size: 11 * $chat-text-size;
+      line-height: 117%;
+      color: rgba(white, 0.6);
+      margin-top: 5px;
+    }
+  }
+
   .file-drop-thumbnail-container,
   .gallery-thumbnail-container {
     width: 100%;
diff --git a/src/components/file_mode/SendAttachmentsLayout.vue b/src/components/file_mode/SendAttachmentsLayout.vue
index ed26912..5c7d2f3 100644
--- a/src/components/file_mode/SendAttachmentsLayout.vue
+++ b/src/components/file_mode/SendAttachmentsLayout.vue
@@ -1,29 +1,32 @@
 <template>
   <div v-bind="{ ...$attrs }" class="send-attachments">
-    <v-btn
-      v-if="!fileModeMode"
-      class="back-button clickable"
-      icon="arrow_back"
-      size="default"
-      elevation="0"
-      @click.stop="close"
-      :disabled="backButtonDisabled"
-      variant="flat"
-    ></v-btn>
+    <v-btn v-if="!fileModeMode" class="back-button clickable" icon="arrow_back" size="default" elevation="0"
+      @click.stop="close" :disabled="backButtonDisabled" variant="flat"></v-btn>
 
-    <div class="title">{{ title }}</div>
+    <div v-if="fileModeMode" class="title file-drop">
+      <v-icon>$vuetify.icons.ic_lock</v-icon>
+      <div class="file-drop-title">{{ $t("file_mode.secure_file_send") }}</div>
+    </div>
+    <div v-else class="title">{{ title }}</div>
+
+    <!-- No attachments view -->
+    <template v-if="fileModeMode && status == mainStatuses.SELECTING && batch.attachments.length == 0">
+      <div :class="{ 'file-drop-choose-files': true, 'drop-target': dropTarget }" @drop.prevent="filesDropped"
+        @dragover.prevent="dropTarget = true" @dragleave.prevent="dropTarget = false"
+        @dragenter.prevent="dropTarget = true">
+        <v-btn @click="$emit('pick-file')" size="large">{{ $t("file_mode.choose_files") }}</v-btn>
+        <div class="file-format-info">{{ $t("file_mode.any_file_format_accepted") }}</div>
+      </div>
+    </template>
 
     <!-- ATTACHMENT SELECTION MODE -->
-    <template v-if="status == mainStatuses.SELECTING">
-      <div
-        :class="{ 'send-attachments__selecting__current-item': true, 'drop-target': dropTarget }"
-        @drop.prevent="filesDropped"
-        @dragover.prevent="dropTarget = true"
-        @dragleave.prevent="dropTarget = false"
-        @dragenter.prevent="dropTarget = true"
-      >
+    <template v-else-if="status == mainStatuses.SELECTING">
+      <div :class="{ 'send-attachments__selecting__current-item': true, 'drop-target': dropTarget }"
+        @drop.prevent="filesDropped" @dragover.prevent="dropTarget = true" @dragleave.prevent="dropTarget = false"
+        @dragenter.prevent="dropTarget = true">
         <ThumbnailView :item="currentAttachment" />
-        <div v-if="currentAttachment && currentAttachment.status === 'loading'" class="send-attachments__selecting__current-item__preparing">
+        <div v-if="currentAttachment && currentAttachment.status === 'loading'"
+          class="send-attachments__selecting__current-item__preparing">
           <div style="font-size: 0.7em; opacity: 0.7">
             <v-progress-circular indeterminate class="mb-0"></v-progress-circular>
           </div>
@@ -38,20 +41,14 @@
           <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>
-              <div
-                :class="{ 'file-drop-thumbnail': true, clickable: true, current: index == currentItemIndex }"
-                @click="
-                  () => {
-                    currentItemIndex = index;
-                  }
-                "
-              >
+              <div :class="{ 'file-drop-thumbnail': true, clickable: true, current: index == currentItemIndex }" @click="
+                () => {
+                  currentItemIndex = index;
+                }
+              ">
                 <v-img v-if="attachment && attachment.src" :src="attachment.src" />
-                <div
-                  v-if="currentItemIndex == index"
-                  class="remove clickable"
-                  @click.stop="batch.removeAttachment(attachment)"
-                >
+                <div v-if="currentItemIndex == index" class="remove clickable"
+                  @click.stop="batch.removeAttachment(attachment)">
                   <v-icon>$vuetify.icons.ic_trash</v-icon>
                 </div>
               </div>
@@ -65,40 +62,15 @@
       </div>
       <div class="file-drop-input-container">
         <div class="file-drop-input-container__input">
-          <v-text-field
-            ref="input"
-            full-width
-            variant="solo"
-            flat
-            v-model="messageInput"
-            no-resize
-            class="input-area-text"
-            rows="1"
-            :placeholder="$t('file_mode.add_a_message')"
-            hide-details
-            color="white"
-            background-color="transparent"
-          />
-          <v-btn
-            class="send-button clickable"
-            icon="arrow_upward"
-            size="default"
-            elevation="0"
-            color="black"
-            @click.stop="sendAll"
-            :disabled="sendButtonDisabled"
-          ></v-btn>
+          <v-text-field ref="input" full-width variant="solo" flat v-model="messageInput" no-resize
+            class="input-area-text" rows="1" :placeholder="$t('file_mode.add_a_message')" hide-details color="white"
+            background-color="transparent" />
+          <v-btn class="send-button clickable" icon="arrow_upward" size="default" elevation="0" color="black"
+            @click.stop="sendAll" :disabled="sendButtonDisabled"></v-btn>
         </div>
         <v-badge location="top right" color="#ff3300" dot class="cc-badge" :model-value="anyContainsCC">
-          <v-btn
-            class="info-button clickable"
-            icon="$vuetify.icons.ic_share_settings"
-            size="44"
-            elevation="0"
-            color="black"
-            @click.stop="showInformation"
-            :disabled="currentAttachment?.status !== 'loaded'"
-          ></v-btn>
+          <v-btn class="info-button clickable" icon="$vuetify.icons.ic_share_settings" size="44" elevation="0"
+            color="black" @click.stop="showInformation" :disabled="currentAttachment?.status !== 'loaded'"></v-btn>
         </v-badge>
       </div>
     </template>
@@ -110,13 +82,8 @@
           <div class="file-drop-stack-item direct" :style="stackItemTransform(null, -1)"></div>
           <div>{{ $t("file_mode.sending_progress") }}</div>
         </div>
-        <div
-          v-else
-          v-for="(info, index) in batch.attachmentsSent"
-          :key="info.file.name"
-          class="file-drop-stack-item animated"
-          :style="stackItemTransform(info, index)"
-        >
+        <div v-else v-for="(info, index) in batch.attachmentsSent" :key="info.file.name"
+          class="file-drop-stack-item animated" :style="stackItemTransform(info, index)">
           <v-img v-if="info.src" :src="info.src" />
         </div>
         <div v-if="status == mainStatuses.SENT" class="items-sent" :style="stackItemTransform(null, -1)">
@@ -145,41 +112,18 @@
           }}
         </div>
         <div class="file-drop-section">
-          <v-textarea
-            disabled
-            full-width
-            variant="solo"
-            flat
-            v-model="messageInput"
-            no-resize
-            class="input-area-text"
-            rows="1"
-            hide-details
-            background-color="transparent"
-          />
+          <v-textarea disabled full-width variant="solo" flat v-model="messageInput" no-resize class="input-area-text"
+            rows="1" hide-details background-color="transparent" />
         </div>
       </div>
 
       <!-- Bottom section -->
       <div v-if="status == mainStatuses.SENDING" class="file-drop-sending-input-container">
-        <v-textarea
-          disabled
-          full-width
-          variant="solo"
-          flat
-          auto-grow
-          v-model="messageInput"
-          no-resize
-          class="input-area-text"
-          rows="1"
-          :placeholder="$t('file_mode.add_a_message')"
-          hide-details
-          background-color="transparent"
-        />
-        <v-btn
-          >{{ $t("file_mode.sending")
-          }}<v-progress-circular indeterminate size="18" width="2" color="#4642F1"></v-progress-circular
-        ></v-btn>
+        <v-textarea disabled full-width variant="solo" flat auto-grow v-model="messageInput" no-resize
+          class="input-area-text" rows="1" :placeholder="$t('file_mode.add_a_message')" hide-details
+          background-color="transparent" />
+        <v-btn>{{ $t("file_mode.sending")
+        }}<v-progress-circular indeterminate size="18" width="2" color="#4642F1"></v-progress-circular></v-btn>
       </div>
       <div v-else-if="status == mainStatuses.SENT" class="file-drop-sent-input-container">
         <v-btn class="close" @click.stop="close">{{ $t("file_mode.close") }}</v-btn>
@@ -189,23 +133,17 @@
     <v-bottom-sheet v-model="showAttachmentInformation" theme="dark" height="80%">
       <v-card class="text-center send-attachments-info-popup">
         <v-card-title class="d-flex flex-column pa-0">
-          <div class="align-self-end done-button clickable" @click="showAttachmentInformation = false">{{ $t("menu.done") }}</div>
+          <div class="align-self-end done-button clickable" @click="showAttachmentInformation = false">{{
+            $t("menu.done") }}
+          </div>
           <v-divider />
         </v-card-title>
         <v-card-title class="d-flex">
-          <v-btn
-            class="left-right-arrow flex-0-0"
-            icon="chevron_left"
-            @click.stop="currentItemIndex -= 1"
-            :disabled="currentItemIndex == 0"
-          ></v-btn>
+          <v-btn class="left-right-arrow flex-0-0" icon="chevron_left" @click.stop="currentItemIndex -= 1"
+            :disabled="currentItemIndex == 0"></v-btn>
           <div class="title flex-fill">{{ currentAttachment.file.name }}</div>
-          <v-btn
-            class="left-right-arrow flex-0-0"
-            icon="chevron_right"
-            @click.stop="currentItemIndex += 1"
-            :disabled="currentItemIndex >= batch.attachments.length - 1"
-          ></v-btn>
+          <v-btn class="left-right-arrow flex-0-0" icon="chevron_right" @click.stop="currentItemIndex += 1"
+            :disabled="currentItemIndex >= batch.attachments.length - 1"></v-btn>
         </v-card-title>
         <v-card-text>
           <AttachmentInfo :attachment="currentAttachment" />

From 47373c447bb4ca9b21fbd8c0519f1a789161eb0d Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 17 Oct 2025 17:06:00 +0200
Subject: [PATCH 2/2] Re-add the "send more files" option to file drop

---
 src/assets/css/sendattachments.scss                | 4 ++++
 src/components/Chat.vue                            | 5 +++++
 src/components/file_mode/SendAttachmentsLayout.vue | 8 ++++++++
 3 files changed, 17 insertions(+)

diff --git a/src/assets/css/sendattachments.scss b/src/assets/css/sendattachments.scss
index 8243dfa..256db11 100644
--- a/src/assets/css/sendattachments.scss
+++ b/src/assets/css/sendattachments.scss
@@ -66,6 +66,10 @@ $hiliteColor: #4642f1;
       height: $large-button-height;
       border-radius: $large-button-height * 0.5;
     }
+
+    &.text {
+      background-color: transparent !important;
+    }
   }
 
   .back-button {
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index d5f0021..4cd4e04 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -35,6 +35,7 @@
       v-on:add-files="(files) => addAttachments(files)"
       :batch="uploadBatch"
       v-on:close="closeFileMode"
+      v-on:reset="resetFileMode"
       :fileModeMode="true"
       :defaultRootMessageText="$t('file_mode.files')"
     />
@@ -1975,6 +1976,10 @@ export default {
       }
     },
 
+    resetFileMode() {
+      this.uploadBatch = this.$matrix.attachmentManager.createUpload(this.room);
+    },
+
     closeFileMode() {
       this.uploadBatch?.cancel();
       this.uploadBatch = undefined;
diff --git a/src/components/file_mode/SendAttachmentsLayout.vue b/src/components/file_mode/SendAttachmentsLayout.vue
index 5c7d2f3..9374014 100644
--- a/src/components/file_mode/SendAttachmentsLayout.vue
+++ b/src/components/file_mode/SendAttachmentsLayout.vue
@@ -126,6 +126,7 @@
         }}<v-progress-circular indeterminate size="18" width="2" color="#4642F1"></v-progress-circular></v-btn>
       </div>
       <div v-else-if="status == mainStatuses.SENT" class="file-drop-sent-input-container">
+        <v-btn class="text" @click.stop="reset">{{ $t("file_mode.send_more_files") }}</v-btn>
         <v-btn class="close" @click.stop="close">{{ $t("file_mode.close") }}</v-btn>
       </div>
     </template>
@@ -264,6 +265,13 @@ export default defineComponent({
       }
       this.batch.addFiles(files);
     },
+    reset() {
+      this.sendingAttachments = [];
+      this.status = this.mainStatuses.SELECTING;
+      this.messageInput = "";
+      this.currentItemIndex = 0;
+      this.$emit('reset');
+    },
     close() {
       this.batch.cancel();
       this.status = this.mainStatuses.SELECTING;