From ba695e2426b84c549cca4b497b27fd50f78e7e6f Mon Sep 17 00:00:00 2001
From: Nessar <th.theophyl.hoguet@gmail.com>
Date: Thu, 16 Jul 2026 20:32:11 +0200
Subject: [PATCH] feat: enhance attachment actions with Font Awesome icons and
 improve layout

---
 .../app/components/tenant-card/tenant-card.css    | 15 +++++++++++++++
 .../app/components/tenant-card/tenant-card.html   |  6 ++++--
 .../components/tenant-card/tenant-card.spec.ts    |  3 ++-
 .../src/app/components/tenant-card/tenant-card.ts |  3 ++-
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/tenant-card/tenant-card.css b/frontend/src/app/components/tenant-card/tenant-card.css
index af57670..5fc30bb 100644
--- a/frontend/src/app/components/tenant-card/tenant-card.css
+++ b/frontend/src/app/components/tenant-card/tenant-card.css
@@ -79,11 +79,26 @@
 }
 .attachment-row.mat-mdc-button {
   --mdc-text-button-label-text-color: var(--text);
+  display: flex;
   flex: 1;
+  align-items: center;
   min-width: 0;
   justify-content: flex-start;
   padding: 0 5px;
   font-size: 0.78rem;
+  overflow: hidden;
+  text-align: left;
+}
+.attachment-download-icon,
+.attachment-row mat-spinner {
+  flex: 0 0 16px;
+  width: 16px;
+  margin-right: 8px;
+}
+.attachment-file-name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-align: left;
 }
 .attachment-delete.mat-mdc-button {
   --mdc-text-button-label-text-color: var(--danger);
diff --git a/frontend/src/app/components/tenant-card/tenant-card.html b/frontend/src/app/components/tenant-card/tenant-card.html
index a04c020..086230d 100644
--- a/frontend/src/app/components/tenant-card/tenant-card.html
+++ b/frontend/src/app/components/tenant-card/tenant-card.html
@@ -48,9 +48,11 @@
             (click)="attachmentDownloadRequested.emit({ tenantId: tenant().id!, attachment })"
           >
             @if (downloadingAttachmentIds().has(attachment.id)) {
-              <mat-spinner diameter="16" aria-hidden="true" /> Téléchargement…
+              <mat-spinner diameter="16" aria-hidden="true" />
+              <span class="attachment-file-name">Téléchargement…</span>
             } @else {
-              <span aria-hidden="true">↧</span>{{ attachment.fileName }}
+              <fa-icon class="attachment-download-icon" [icon]="faDownload" aria-hidden="true" />
+              <span class="attachment-file-name">{{ attachment.fileName }}</span>
             }
           </button>
           <button
diff --git a/frontend/src/app/components/tenant-card/tenant-card.spec.ts b/frontend/src/app/components/tenant-card/tenant-card.spec.ts
index c1fbc4e..69d4517 100644
--- a/frontend/src/app/components/tenant-card/tenant-card.spec.ts
+++ b/frontend/src/app/components/tenant-card/tenant-card.spec.ts
@@ -101,7 +101,7 @@ describe('TenantCard', () => {
     expect(remove.getAttribute('aria-label')).toBe('Retirer la pièce jointe id.pdf');
   });
 
-  it('uses a Font Awesome cross icon for the remove action', () => {
+  it('uses Font Awesome icons for attachment actions', () => {
     const fixture = TestBed.createComponent(TenantCard);
     fixture.componentRef.setInput('tenant', {
       id: 'tenant-1',
@@ -116,6 +116,7 @@ describe('TenantCard', () => {
     });
     fixture.detectChanges();
 
+    expect(fixture.nativeElement.querySelector('.attachment-download-icon')).not.toBeNull();
     expect(fixture.nativeElement.querySelector('.attachment-delete fa-icon')).not.toBeNull();
   });
 });
diff --git a/frontend/src/app/components/tenant-card/tenant-card.ts b/frontend/src/app/components/tenant-card/tenant-card.ts
index ebe014e..023533e 100644
--- a/frontend/src/app/components/tenant-card/tenant-card.ts
+++ b/frontend/src/app/components/tenant-card/tenant-card.ts
@@ -1,6 +1,6 @@
 import { Component, input, output, signal } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faDownload, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { MatButtonModule } from '@angular/material/button';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -18,6 +18,7 @@ export interface TenantAttachmentRequest {
   styleUrl: './tenant-card.css',
 })
 export class TenantCard {
+  readonly faDownload = faDownload;
   readonly faXmark = faXmark;
   readonly tenant = input.required<Tenant>();
   readonly attachmentError = input('');