a736843cd2
Protect dashboard image artifacts while providing a dedicated preview experience. - Fetch image media with header authentication and render revocable blob URLs. - Add desktop and mobile viewer behavior across gallery, documents, task, and mailbox surfaces. - Cover viewer, blob-loading, and updated artifact-surface behavior with tests and documentation. Files changed: docs/dashboard-guide.md | 1 + .../app/components/ArtifactImageViewer.css | 9 ++ .../app/components/ArtifactImageViewer.tsx | 100 ++++++++++++++++++ .../dashboard/app/components/ArtifactMedia.tsx | 8 +- .../dashboard/app/components/ArtifactsGallery.tsx | 10 +- .../dashboard/app/components/DocumentsView.tsx | 4 +- .../app/components/MailboxArtifactAttachment.tsx | 29 +++--- .../dashboard/app/components/TaskDocumentsTab.tsx | 114 ++------------------- .../__tests__/ArtifactImageViewer.test.tsx | 48 +++++++++ .../__tests__/ArtifactsGallery.swipe-back.test.tsx | 7 +- .../components/__tests__/DocumentsView.test.tsx | 9 +- .../__tests__/MailboxArtifactAttachment.test.tsx | 34 ++++-- .../components/__tests__/TaskDocumentsTab.test.tsx | 22 ++-- .../hooks/__tests__/useArtifactImageBlob.test.tsx | 92 +++++++++++++++++ .../dashboard/app/hooks/useArtifactImageBlob.ts | 59 +++++++++++ 15 files changed, 387 insertions(+), 159 deletions(-) Fusion-Task-Id: FN-017 Fusion-Task-Lineage: 893c5a50-536a-4f54-a9a4-cba33ea111b5 Co-authored-by: Fusion <noreply@runfusion.ai>
10 lines
1.1 KiB
CSS
10 lines
1.1 KiB
CSS
/* FNXC:ArtifactImageSecurity 2026-08-19-18:08: The dedicated image viewer fills its shared FloatingWindow while preserving the existing mobile sheet behavior. */
|
|
.artifact-image-viewer { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
|
|
.artifact-image-viewer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); border-bottom: var(--border-width) solid var(--border); }
|
|
.artifact-image-viewer__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.artifact-image-viewer__content { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; padding: var(--space-md); overflow: auto; }
|
|
.artifact-image-viewer__image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
|
|
.artifact-image-viewer__failure { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
|
|
.artifact-image-viewer__error { margin: 0; color: var(--color-error); }
|
|
@media (max-width: 768px) { .artifact-image-viewer__content { padding: var(--space-sm); } }
|