Add document viewer to the compliance portal

Add a full-page viewer at /documents/:alias that resolves the aliased
node, exports its watermarked bytes, and renders them: PDFs via react-pdf
with page navigation and zoom, images inline, and a download fallback for
other file types. Unauthorized visitors see a locked state.

Wire the documents list "View" action to link into the viewer (fragments
now select alias) and drop the previous open-in-new-tab helpers, since the
viewer owns the export.

Bound MainLayout to the viewport so the top bar and footer stay fixed and
the page area scrolls on its own; the viewer then keeps its toolbar fixed
while the PDF body scrolls, matching the design.

Add the react-pdf dependency with the pdf.js worker bundled via Vite (for
CSP safety) and a headless v2 Separator kit component for the toolbar.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-07-16 11:14:51 +02:00
parent 99990d6f6b
commit 6054c92899
24 changed files with 929 additions and 129 deletions

View File

@@ -17,9 +17,11 @@
"@probo/routes": "1.0.0",
"@probo/ui": "1.0.0",
"i18next": "^26.3.4",
"pdfjs-dist": "^5.4.296",
"react": "^19.2.7",
"react-dom": "^19.2.7",
"react-i18next": "^17.0.8",
"react-pdf": "^10.3.0",
"react-relay": "^21.0.1",
"react-router": "^8.1.0",
"relay-runtime": "^21.0.1"