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

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -26,10 +26,7 @@ import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
 @Component({
   selector: 'pngx-saved-view-widget',
   templateUrl: './saved-view-widget.component.html',
-  styleUrls: [
-    './saved-view-widget.component.scss',
-    '../../../document-list/popover-preview/popover-preview.scss',
-  ],
+  styleUrls: ['./saved-view-widget.component.scss'],
 })
 export class SavedViewWidgetComponent
   extends ComponentWithPermissions
@@ -121,8 +118,11 @@ export class SavedViewWidgetComponent
     return this.documentService.getDownloadUrl(document.id)
   }
 
-  mouseEnterPreview(doc: PaperlessDocument) {
-    this.popover = this.popovers.get(this.documents.indexOf(doc))
+  mouseEnterPreviewButton(doc: PaperlessDocument) {
+    const newPopover = this.popovers.get(this.documents.indexOf(doc))
+    if (this.popover !== newPopover && this.popover?.isOpen())
+      this.popover.close()
+    this.popover = newPopover
     this.mouseOnPreview = true
     if (!this.popover.isOpen()) {
       // we're going to open but hide to pre-load content during hover delay
@@ -139,12 +139,24 @@ export class SavedViewWidgetComponent
     }
   }
 
-  mouseLeavePreview() {
-    this.mouseOnPreview = false
+  mouseEnterPreview() {
+    this.mouseOnPreview = true
   }
 
-  mouseLeaveCard() {
-    this.popover?.close()
+  mouseLeavePreview() {
+    this.mouseOnPreview = false
+    this.maybeClosePopover()
+  }
+
+  mouseLeavePreviewButton() {
+    this.mouseOnPreview = false
+    this.maybeClosePopover()
+  }
+
+  maybeClosePopover() {
+    setTimeout(() => {
+      if (!this.mouseOnPreview) this.popover?.close()
+    }, 300)
   }
 
   getCorrespondentQueryParams(correspondentId: number): Params {