All updates
ProductionQAFrontend

Unified in-app file viewer and smoother folder-assignment typing

PR #357shoumikssahuSep 6, 2025 · 09:46 UTC
QASep 5, 2025
ProductionSep 6, 2025

Executive summary

This release brings a rebuilt, native file preview experience across mail and batch screens. PDFs, images, and other documents now render directly inside the app (replacing embedded iframes), ZIP attachments are extracted faster, and keyboard typing in folder-assignment dropdowns behaves more naturally. Although the pull request is titled as a build/dependency fix, it carries the feature work merged from the PDF-viewer branch (#347) and the keyboard-navigation fix (#356).

Why this was needed

The previous preview relied on embedded iframes and separate one-off PDF components, which gave inconsistent rendering, limited file-type support, and a clunky in-app experience. Separately, the multi-select folder picker captured keystrokes in a way that blocked normal Tab navigation and dropdown control. Build tooling also needed updates so the new PDF rendering library could compile reliably.

Client / user impact

Users get a single, consistent viewer for PDFs, images, and documents directly inside mail and batch detail, resolution-center, and add-document screens, with file-type icons and clearer loading/error states. ZIP-based uploads process faster and without an artificial size cap. Assigning folders to mail is less frustrating: Tab moves focus normally, Escape closes the dropdown, and the arrow keys open it.

Technical scope

  • Replaced iframe-based and legacy multi-pdf-viewer/pdf-viewer components with a unified react-pdf + pdfjs-dist viewer, split into PDFViewerCore, PDFControls, and usePDFState/usePDFViewer hooks.
  • Added a comprehensive file-preview component with broad file-type detection (PDF, image, document, spreadsheet, text, archive, video, audio) and useDebounce helper.
  • Switched ZIP extraction to fflate, removed the extraction size limit, and reworked file-handling hooks across batch/mail add-and-edit flows.
  • Tuned MultipleSelector keyboard handling: Tab navigates naturally, Escape closes and blurs, ArrowUp/Down opens a closed dropdown.
  • Build/config: next.config.ts webpack aliases (canvas/encoding to false), pnpm override mapping canvas to @napi-rs/canvas, .npmrc hoist for pdfjs-dist, new deps (react-pdf, pdfjs-dist, fflate, react-resize-detector, simplebar-react) and a regenerated pnpm-lock.yaml (also bumps CKEditor 46.0.2->46.0.3 and other minor patches).

Risk & mitigation

Medium. Swapping the entire PDF/file-preview stack and rebuilding the lockfile touches many screens and the build pipeline; risks include rendering regressions, broken worker loading, or build/runtime issues from the canvas override. Mitigation: the change reached QA for verification before any production promotion, and TypeScript/ESLint build gates remain in place. Validate on the dev/QA environment across browsers before promoting.

QA validation focus

  • Open PDFs, images, and other files in mail detail, batch mail detail, resolution-center mail, and add-document/add-mail flows; confirm in-app rendering, page controls, zoom/scroll, and error states.
  • Upload and edit ZIP batches; verify extraction (including large archives) and that images inside ZIPs preview correctly.
  • In assign-folders-to-mail, test Tab focus movement, Escape to close, and ArrowUp/Down to open the dropdown, plus normal selection.
  • Confirm a clean production build with the new lockfile/webpack config and that the PDF worker loads without console errors.