feat(frontend:files): enhance overwrite handling by updating MIME type on rename and improving file model consistency and UI visuals

Author: johaven

frontend/src/app/applications/files/components/dialogs/files-overwrite-dialog.component.html

@@ -17,16 +17,17 @@ <h4 class="modal-title" l10nTranslate>
 </div>
 <div class="modal-body">
   @if (renamedTo) {
-    <div
-      [innerHTML]="'RenameFileToExisting' | translate:locale.language:{ old: files[0].name, new: renamedTo }">
-    </div>
+    <div [innerHTML]="'RenameFileToExisting' | translate:locale.language:{ old: files[0].name, new: renamedTo }"></div>
   } @else {
-    <div l10nTranslate>Do you want to replace the existing file(s)?</div>
-    <ul class="my-2" style="padding-left: inherit">
-      @for (file of files; track $index) {
-        <li><b>{{ file.name }}</b></li>
-      }
-    </ul>
+    <div class="fw-bold mb-3" l10nTranslate>Do you want to replace the existing file(s)?</div>
+    @for (f of files; track $index) {
+      <div class="d-flex align-items-center mb-1" draggable="true">
+        <img [src]="f.mimeUrl" alt="" height="24" width="24" (error)="f.fallBackMimeUrl()">
+        <div class="d-flex flex-column text-truncate ms-1">
+          <span>{{ f.name }}</span>
+        </div>
+      </div>
+    }
   }
 </div>
 <div class="modal-footer">

frontend/src/app/applications/files/components/dialogs/files-overwrite-dialog.component.ts

@@ -9,14 +9,15 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome'
 import { faFileShield } from '@fortawesome/free-solid-svg-icons'
 import { L10N_LOCALE, L10nLocale, L10nTranslateDirective, L10nTranslatePipe } from 'angular-l10n'
 import { LayoutService } from '../../../../layout/layout.service'
+import { FileModel } from '../../models/file.model'
 
 @Component({
   selector: 'app-files-overwrite-dialog',
   imports: [FaIconComponent, L10nTranslateDirective, L10nTranslatePipe],
   templateUrl: 'files-overwrite-dialog.component.html'
 })
 export class FilesOverwriteDialogComponent {
-  @Input() files: File[] = []
+  @Input() files: FileModel[] = []
   @Input() renamedTo: string
   public overwrite = output<boolean>()
   protected readonly locale = inject<L10nLocale>(L10N_LOCALE)

frontend/src/app/applications/files/models/file.model.ts

@@ -117,6 +117,11 @@ export class FileModel implements File {
     this.path = [...this.path.split('/').slice(0, -1), this.name].join('/')
   }
 
+  updateMime(mime: string) {
+    this.mime = mime
+    this.setMimeUrl()
+  }
+
   private getType(inShare: boolean) {
     return this.isDir ? (inShare ? mimeDirectoryShare : mimeDirectory) : mimeFile
   }

frontend/src/app/applications/spaces/components/spaces-browser.component.ts

@@ -480,7 +480,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
     const f: FileModel = ev.object
     const renamedTo = ev.name
     let overwrite = false
-    const fileExists = this.files.find((file) => file.name.toLowerCase() === renamedTo.toLowerCase() && file.id !== f.id)
+    const fileExists: FileModel = this.files.find((file) => file.name.toLowerCase() === renamedTo.toLowerCase() && file.id !== f.id)
     if (fileExists) {
       overwrite = await this.filesService.openOverwriteDialog([f], renamedTo)
       if (!overwrite) return
@@ -493,6 +493,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
           f.rename(dto.name)
           f.isEditable = false
           if (overwrite) {
+            f.updateMime(fileExists.mime)
             this.sortBy(
               this.sortTable.sortParam.column,
               false,
@@ -584,7 +585,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
         if (!overwrite) return
       }
     } else {
-      const exist: File[] = [...ev.files].filter((f: File) => this.files.some((x) => x.name.toLowerCase() === f.name.toLowerCase()))
+      const exist: FileModel[] = this.files.filter((x: FileModel) => [...ev.files].some((f) => f.name.toLowerCase() === x.name.toLowerCase()))
       if (exist.length > 0) {
         overwrite = await this.filesService.openOverwriteDialog(exist)
         if (!overwrite) return
@@ -595,7 +596,9 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
 
   async onDropFiles(ev: { dataTransfer: { files: File[] } }) {
     let overwrite = false
-    const exist: File[] = [...ev.dataTransfer.files].filter((f: File) => this.files.some((x) => x.name.toLowerCase() === f.name.toLowerCase()))
+    const exist: FileModel[] = this.files.filter((x: FileModel) =>
+      [...ev.dataTransfer.files].some((f) => f.name.toLowerCase() === x.name.toLowerCase())
+    )
     if (exist.length > 0) {
       overwrite = await this.filesService.openOverwriteDialog(exist)
       if (!overwrite) return