feat: enhance attachment actions with Font Awesome icons and improve layout

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);

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

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();
   });
 });

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('');