Enhancement: Improved popup preview, respect embedded viewer, error handling (#4947)

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

@@ -94,7 +94,7 @@
             </svg>
           </a>
           <ng-template #previewContent>
-            <object [data]="previewUrl | safeUrl" class="preview" width="100%"></object>
+            <pngx-preview-popup [document]="document"></pngx-preview-popup>
           </ng-template>
           <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" i18n-title (click)="$event.stopPropagation()">
             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

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

@@ -22,6 +22,7 @@ import { By } from '@angular/platform-browser'
 import { TagComponent } from '../../common/tag/tag.component'
 import { PaperlessTag } from 'src/app/data/paperless-tag'
 import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
+import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
 
 const doc = {
   id: 10,
@@ -64,6 +65,7 @@ describe('DocumentCardSmallComponent', () => {
         SafeUrlPipe,
         TagComponent,
         IsNumberPipe,
+        PreviewPopupComponent,
       ],
       providers: [DatePipe],
       imports: [

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

@@ -16,10 +16,7 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
 @Component({
   selector: 'pngx-document-card-small',
   templateUrl: './document-card-small.component.html',
-  styleUrls: [
-    './document-card-small.component.scss',
-    '../popover-preview/popover-preview.scss',
-  ],
+  styleUrls: ['./document-card-small.component.scss'],
 })
 export class DocumentCardSmallComponent extends ComponentWithPermissions {
   constructor(