Merge branch 'beta' into dev

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -661,7 +661,6 @@ export class FilterableDropdownSelectionModel {
   imports: [
     ClearableBadgeComponent,
     ToggleableDropdownButtonComponent,
-    FilterPipe,
     FormsModule,
     ReactiveFormsModule,
     NgxBootstrapIconsModule,

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.spec.ts

@@ -138,6 +138,18 @@ describe('PngxPdfViewerComponent', () => {
     expect(applyScaleSpy).toHaveBeenCalled()
   })
 
+  it('does not reset the viewer when it is already on the requested page', async () => {
+    await initComponent()
+
+    const viewer = (component as any).pdfViewer as PDFViewer
+    const currentPageSpy = jest.spyOn(viewer, 'currentPageNumber', 'set')
+    component.page = viewer.currentPageNumber
+
+    ;(component as any).applyViewerState()
+
+    expect(currentPageSpy).not.toHaveBeenCalled()
+  })
+
   it('dispatches find when search query changes after render', async () => {
     await initComponent()
 

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts

@@ -256,7 +256,9 @@ export class PngxPdfViewerComponent
         Math.max(Math.trunc(this.page), 1),
         this.pdfViewer.pagesCount
       )
-      this.pdfViewer.currentPageNumber = nextPage
+      if (nextPage !== this.pdfViewer.currentPageNumber) {
+        this.pdfViewer.currentPageNumber = nextPage
+      }
     }
     if (this.page === this.lastViewerPage) {
       this.lastViewerPage = undefined

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -2,7 +2,11 @@
   <div class="row g-0">
     <div class="col-md-2 doc-img-container rounded-start" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit()">
        @if (document()) {
-        <img [ngSrc]="getThumbUrl()" fill class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()">
+        @if (priority()) {
+          <img [ngSrc]="getThumbUrl()" fill priority class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()" alt="{{ document().title | documentTitle }} thumbnail" i18n-alt>
+        } @else {
+          <img [ngSrc]="getThumbUrl()" fill class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()" alt="{{ document().title | documentTitle }} thumbnail" i18n-alt>
+        }
 
         <div class="border-end border-bottom bg-light document-card-check">
           <div class="form-check">

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts

@@ -94,6 +94,15 @@ describe('DocumentCardLargeComponent', () => {
     expect(thumbnail.getAttribute('loading')).toEqual('lazy')
   })
 
+  it('should prioritize the thumbnail when requested', () => {
+    fixture.componentRef.setInput('priority', true)
+    fixture.detectChanges()
+    const thumbnail: HTMLImageElement =
+      fixture.nativeElement.querySelector('img.doc-img')
+    expect(thumbnail.getAttribute('loading')).toEqual('eager')
+    expect(thumbnail.getAttribute('fetchpriority')).toEqual('high')
+  })
+
   it('should trim content', () => {
     expect(component.contentTrimmed).toHaveLength(503) // includes ...
   })

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -66,6 +66,7 @@ export class DocumentCardLargeComponent
   private documentService = inject(DocumentService)
   settingsService = inject(SettingsService)
   readonly selected = input(false)
+  readonly priority = input(false)
   readonly displayFields = input<string[]>(
     DEFAULT_DISPLAY_FIELDS.map((f) => f.id)
   )

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -2,7 +2,11 @@
   <div class="card h-100 shadow-sm document-card" [class.placeholder-glow]="!document()" [class.card-selected]="selected()" (mouseleave)="mouseLeaveCard()">
     <div class="border-bottom doc-img-container rounded-top" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit(this)">
        @if (document()) {
-        <img class="card-img doc-img" [class.inverted]="getIsThumbInverted()" [ngSrc]="getThumbUrl()" fill>
+        @if (priority()) {
+          <img class="card-img doc-img" [class.inverted]="getIsThumbInverted()" [ngSrc]="getThumbUrl()" fill priority alt="{{ document().title | documentTitle }} thumbnail" i18n-alt>
+        } @else {
+          <img class="card-img doc-img" [class.inverted]="getIsThumbInverted()" [ngSrc]="getThumbUrl()" fill alt="{{ document().title | documentTitle }} thumbnail" i18n-alt>
+        }
 
         <div class="border-end border-bottom bg-light py-1 px-2 document-card-check">
           <div class="form-check">

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts

@@ -67,6 +67,15 @@ describe('DocumentCardSmallComponent', () => {
     expect(thumbnail.getAttribute('loading')).toEqual('lazy')
   })
 
+  it('should prioritize the thumbnail when requested', () => {
+    fixture.componentRef.setInput('priority', true)
+    fixture.detectChanges()
+    const thumbnail: HTMLImageElement =
+      fixture.nativeElement.querySelector('img.doc-img')
+    expect(thumbnail.getAttribute('loading')).toEqual('eager')
+    expect(thumbnail.getAttribute('fetchpriority')).toEqual('high')
+  })
+
   it('should display a document, limit tags to 5', () => {
     expect(fixture.nativeElement.textContent).toContain('Document 10')
     expect(

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -66,6 +66,7 @@ export class DocumentCardSmallComponent
   private documentService = inject(DocumentService)
   settingsService = inject(SettingsService)
   readonly selected = input(false)
+  readonly priority = input(false)
   readonly document = input<Document>(undefined)
   readonly displayFields = input<string[]>(
     DEFAULT_DISPLAY_FIELDS.map((f) => f.id)

src-ui/src/app/components/document-list/document-list.component.html

@@ -164,9 +164,10 @@
   } @else {
     @if (list.displayMode === DisplayMode.LARGE_CARDS) {
       <div>
-        @for (d of list.documents; track d.id) {
+        @for (d of list.documents; track d.id; let i = $index) {
           <pngx-document-card-large
             [selected]="list.isSelected(d)"
+            [priority]="i < 2"
             (toggleSelected)="toggleSelected(d, $event)"
             (dblClickDocument)="openDocumentDetail(d)"
             [document]="d"
@@ -398,9 +399,10 @@
     }
     @if (list.displayMode === DisplayMode.SMALL_CARDS) {
       <div class="row row-cols-paperless-cards">
-        @for (d of list.documents; track d.id) {
+        @for (d of list.documents; track d.id; let i = $index) {
           <pngx-document-card-small class="p-0"
             [selected]="list.isSelected(d)"
+            [priority]="i < 6"
             (toggleSelected)="toggleSelected(d, $event)"
             (dblClickDocument)="openDocumentDetail(d)"
             [document]="d"