From f2049f672f4b2fed8bc362a1c776e49ccbda3129 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Tue, 4 Nov 2025 13:28:24 -0500
Subject: [PATCH] feat: improve note card layout and filtering behavior

- Updated thumbnail sizing to be responsive (20x20 on mobile, 24x24 on larger screens) and centered vertically
- Changed background image sizing from fixed height to full coverage for better visual consistency
- Added automatic sort reset to "updated ascending" when filters change to ensure predictable ordering
- Removed truncation from description text to show full excerpts
---
 .../list/paginated-notes-list.component.ts    | 20 +++++++++++++++----
 vault/Allo-3/test/dessin.excalidraw.md        |  2 +-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app/features/list/paginated-notes-list.component.ts b/src/app/features/list/paginated-notes-list.component.ts
index 772d012..418fc7b 100644
--- a/src/app/features/list/paginated-notes-list.component.ts
+++ b/src/app/features/list/paginated-notes-list.component.ts
@@ -151,12 +151,12 @@ import { takeUntil } from 'rxjs/operators';
                     <div class="title text-sm truncate">{{ note.title }}</div>
                     <div class="meta text-xs truncate">{{ note.filePath }}</div>
                     <div *ngIf="getAuthorById(note.id) as a" class="text-xs text-gray-500 dark:text-gray-400 truncate">✍️ {{ a }}</div>
-                    <div *ngIf="getDescriptionById(note.id) as d" class="text-xs text-muted truncate">{{ d }}</div>
+                    <div *ngIf="getDescriptionById(note.id) as d" class="text-xs excerpt">{{ d }}</div>
                     <div *ngIf="getUpdatedTimestampById(note) as ts" class="text-xs text-gray-500 dark:text-gray-400">🕓 {{ formatDateTime(ts) }}</div>
                   </div>
                 </div>
-                <div class="flex-shrink-0 sm:ml-4 mt-2 sm:mt-0" *ngIf="getThumbnailSrcById(note) as imgSrc">
-                  <img [src]="imgSrc" alt="" class="rounded-md shadow-sm object-cover w-24 h-24" />
+                <div class="flex-shrink-0 sm:ml-4 mt-2 sm:mt-0 sm:self-center" *ngIf="getThumbnailSrcById(note) as imgSrc">
+                  <img [src]="imgSrc" alt="" class="rounded-md shadow-sm object-cover w-20 h-20 sm:w-24 sm:h-24" />
                 </div>
               </div>
             </li>
@@ -315,7 +315,7 @@ import { takeUntil } from 'rxjs/operators';
     .action-buttons { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.5rem; }
 
     /* Enhanced note card with color indicator and action buttons */
-    .note-card { transition: all 0.3s ease-in-out; background-repeat: no-repeat; background-size: 100% 120px; background-position: top center; }
+    .note-card { transition: all 0.3s ease-in-out; background-repeat: no-repeat; background-size: 100% 100%; background-position: top center; }
     .note-card:hover { transform: translateY(-1px); }
 
     /* Color dot indicator */
@@ -388,6 +388,18 @@ export class PaginatedNotesListComponent implements OnInit, OnDestroy {
   @Output() clearQuickLinkFilter = new EventEmitter<void>();
   @Output() clearFolderFilter = new EventEmitter<void>();
 
+  // Enforce default sort (updated asc) when filters change
+  private resetSortOnFilterChange = effect(() => {
+    // Track dependencies
+    const _folder = this.folderFilter();
+    const _tag = this.tagFilter();
+    const _quick = this.quickLinkFilter();
+    const _tagsList = this.filter.tags();
+    // Apply default sort
+    this.state.setSortBy('updated');
+    this.state.setSortOrder('asc');
+  });
+
   // Local state
   private q = signal('');
   selectedNoteId = signal<string | null>(null);
diff --git a/vault/Allo-3/test/dessin.excalidraw.md b/vault/Allo-3/test/dessin.excalidraw.md
index d735e76..f643b94 100644
--- a/vault/Allo-3/test/dessin.excalidraw.md
+++ b/vault/Allo-3/test/dessin.excalidraw.md
@@ -1,6 +1,6 @@
 ---
-excalidraw-plugin: parsed
 updated: "2025-11-04T01:33:48.022Z"
+description: "Données d'un dessin Excalidraw, à consulter et modifier dans la vue Excalidraw."
 ---
 ==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠==