Improvement/V2/generic_obscure_component_wrapper (#4794)

Created PrivateContent Component to be used as wrapper. This way all tools that need to obscure contents can update this wrapper. --------- Co-authored-by: Connor Yoh <connor@stirlingpdf.com> Co-authored-by: James Brunton <jbrunton96@gmail.com>
2025-11-16 01:21:16 +01:00 · 2025-11-10 11:24:14 +00:00 · 2025-11-10 11:24:14 +00:00 · f4543d26cd
commit f4543d26cd
parent 45389340ed
18 changed files with 237 additions and 166 deletions
--- a/frontend/src/core/components/annotation/shared/DrawingCanvas.tsx
+++ b/frontend/src/core/components/annotation/shared/DrawingCanvas.tsx
@ -3,6 +3,7 @@ import { Paper, Button, Modal, Stack, Text, Popover, ColorPicker as MantineColor
 import { ColorSwatchButton } from '@app/components/annotation/shared/ColorPicker';
 import PenSizeSelector from '@app/components/tools/sign/PenSizeSelector';
 import SignaturePad from 'signature_pad';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 interface DrawingCanvasProps {
  selectedColor: string;
@ -177,19 +178,21 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
      <Paper withBorder p="md">
        <Stack gap="sm">
          <Text fw={500}>Draw your signature</Text>
-          <canvas
-            ref={previewCanvasRef}
-            width={width}
-            height={height}
-            style={{
-              border: '1px solid #ccc',
-              borderRadius: '4px',
-              cursor: disabled ? 'default' : 'pointer',
-              backgroundColor: '#ffffff',
-              width: '100%',
-            }}
-            onClick={disabled ? undefined : openModal}
-          />
+          <PrivateContent>
+            <canvas
+              ref={previewCanvasRef}
+              width={width}
+              height={height}
+              style={{
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                cursor: disabled ? 'default' : 'pointer',
+                backgroundColor: '#ffffff',
+                width: '100%',
+              }}
+              onClick={disabled ? undefined : openModal}
+            />
+          </PrivateContent>
          <Text size="sm" c="dimmed" ta="center">
            Click to open drawing canvas
          </Text>
@ -246,23 +249,25 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
            </div>
          </div>

-          <canvas
-            ref={(el) => {
-              modalCanvasRef.current = el;
-              if (el) initPad(el);
-            }}
-            style={{
-              border: '1px solid #ccc',
-              borderRadius: '4px',
-              display: 'block',
-              touchAction: 'none',
-              backgroundColor: 'white',
-              width: '100%',
-              maxWidth: '800px',
-              height: '400px',
-              cursor: 'crosshair',
-            }}
-          />
+          <PrivateContent>
+            <canvas
+              ref={(el) => {
+                modalCanvasRef.current = el;
+                if (el) initPad(el);
+              }}
+              style={{
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                display: 'block',
+                touchAction: 'none',
+                backgroundColor: 'white',
+                width: '100%',
+                maxWidth: '800px',
+                height: '400px',
+                cursor: 'crosshair',
+              }}
+            />
+          </PrivateContent>

          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Button variant="subtle" color="red" onClick={clear}>
--- a/frontend/src/core/components/annotation/shared/ImageUploader.tsx
+++ b/frontend/src/core/components/annotation/shared/ImageUploader.tsx
@ -1,6 +1,7 @@
 import React from 'react';
 import { FileInput, Text, Stack } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 interface ImageUploaderProps {
  onImageChange: (file: File | null) => void;
@ -40,13 +41,15 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({

  return (
    <Stack gap="sm">
-      <FileInput
-        label={label || t('sign.image.label', 'Upload signature image')}
-        placeholder={placeholder || t('sign.image.placeholder', 'Select image file')}
-        accept="image/*"
-        onChange={handleImageChange}
-        disabled={disabled}
-      />
+      <PrivateContent>
+        <FileInput
+          label={label || t('sign.image.label', 'Upload signature image')}
+          placeholder={placeholder || t('sign.image.placeholder', 'Select image file')}
+          accept="image/*"
+          onChange={handleImageChange}
+          disabled={disabled}
+        />
+      </PrivateContent>
      <Text size="sm" c="dimmed">
        {hint || t('sign.image.hint', 'Upload an image of your signature')}
      </Text>
--- a/frontend/src/core/components/fileEditor/FileEditorThumbnail.tsx
+++ b/frontend/src/core/components/fileEditor/FileEditorThumbnail.tsx
@ -21,6 +21,7 @@ import { FileId } from '@app/types/file';
 import { formatFileSize } from '@app/utils/fileUtils';
 import ToolChain from '@app/components/shared/ToolChain';
 import HoverActionMenu, { HoverAction } from '@app/components/shared/HoverActionMenu';
+import { PrivateContent } from '@app/components/shared/PrivateContent';



@ -328,8 +329,8 @@ const FileEditorThumbnail = ({
        marginTop: '0.5rem',
        marginBottom: '0.5rem',
      }}>
-        <Text  size="lg" fw={700} className={`${styles.title}  ph-no-capture `}  lineClamp={2}>
-          {file.name}
+        <Text  size="lg" fw={700} className={styles.title}  lineClamp={2}>
+          <PrivateContent>{file.name}</PrivateContent>
        </Text>
        <Text
          size="sm"
@ -353,20 +354,20 @@ const FileEditorThumbnail = ({
      >
        <div className={styles.previewPaper}>
          {file.thumbnailUrl && (
-            <img
-              className="ph-no-capture"
-              src={file.thumbnailUrl}
-              alt={file.name}
-              draggable={false}
-              loading="lazy"
-              decoding="async"
-              onError={(e) => {
-                const img = e.currentTarget;
-                img.style.display = 'none';
-                img.parentElement?.setAttribute('data-thumb-missing', 'true');
-              }}
-              style={{
-                maxWidth: '80%',
+            <PrivateContent>
+              <img
+                src={file.thumbnailUrl}
+                alt={file.name}
+                draggable={false}
+                loading="lazy"
+                decoding="async"
+                onError={(e) => {
+                  const img = e.currentTarget;
+                  img.style.display = 'none';
+                  img.parentElement?.setAttribute('data-thumb-missing', 'true');
+                }}
+                style={{
+                  maxWidth: '80%',
                maxHeight: '80%',
                objectFit: 'contain',
                borderRadius: 0,
@ -378,6 +379,7 @@ const FileEditorThumbnail = ({
                alignSelf: 'start'
              }}
            />
+            </PrivateContent>
          )}
        </div>

--- a/frontend/src/core/components/fileManager/CompactFileDetails.tsx
+++ b/frontend/src/core/components/fileManager/CompactFileDetails.tsx
@ -6,6 +6,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { useTranslation } from 'react-i18next';
 import { getFileSize } from '@app/utils/fileUtils';
 import { StirlingFileStub } from '@app/types/fileContext';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 interface CompactFileDetailsProps {
  currentFile: StirlingFileStub | null;
@ -41,18 +42,19 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
        {/* Small preview */}
        <Box style={{ width: '7.5rem', height: '9.375rem', flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {currentFile && thumbnail ? (
-            <img
-              className='ph-no-capture'
-              src={thumbnail}
-              alt={currentFile.name}
-              style={{
-                maxWidth: '100%',
-                maxHeight: '100%',
-                objectFit: 'contain',
-                borderRadius: '0.25rem',
-                boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
-              }}
-            />
+            <PrivateContent>
+              <img
+                src={thumbnail}
+                alt={currentFile.name}
+                style={{
+                  maxWidth: '100%',
+                  maxHeight: '100%',
+                  objectFit: 'contain',
+                  borderRadius: '0.25rem',
+                  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
+                }}
+              />
+            </PrivateContent>
          ) : currentFile ? (
            <Center style={{
              width: '100%',
@ -67,8 +69,8 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({

        {/* File info */}
        <Box style={{ flex: 1, minWidth: 0 }}>
-          <Text className='ph-no-capture' size="sm" fw={500} truncate>
-            {currentFile ? currentFile.name : 'No file selected'}
+          <Text size="sm" fw={500} truncate>
+            <PrivateContent>{currentFile ? currentFile.name : 'No file selected'}</PrivateContent>
          </Text>
          <Text size="xs" c="dimmed">
            {currentFile ? getFileSize(currentFile) : ''}
--- a/frontend/src/core/components/fileManager/FileInfoCard.tsx
+++ b/frontend/src/core/components/fileManager/FileInfoCard.tsx
@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { detectFileExtension, getFileSize } from '@app/utils/fileUtils';
 import { StirlingFileStub } from '@app/types/fileContext';
 import ToolChain from '@app/components/shared/ToolChain';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 interface FileInfoCardProps {
  currentFile: StirlingFileStub | null;
@ -26,7 +27,9 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
      <ScrollArea style={{ flex: 1 }} p="md">
        <Stack gap="sm">
          <Group justify="space-between" py="xs">
-            <Text className='ph-no-capture' size="sm" c="dimmed">{t('fileManager.fileName', 'Name')}</Text>
+            <Text size="sm" c="dimmed">
+              <PrivateContent>{t('fileManager.fileName', 'Name')}</PrivateContent>
+            </Text>
            <Text size="sm" fw={500} style={{ maxWidth: '60%', textAlign: 'right' }} truncate>
              {currentFile ? currentFile.name : ''}
            </Text>
--- a/frontend/src/core/components/fileManager/FileListItem.tsx
+++ b/frontend/src/core/components/fileManager/FileListItem.tsx
@ -13,6 +13,7 @@ import { useFileManagerContext } from '@app/contexts/FileManagerContext';
 import { zipFileService } from '@app/services/zipFileService';
 import ToolChain from '@app/components/shared/ToolChain';
 import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 interface FileListItemProps {
  file: StirlingFileStub;
@ -99,7 +100,9 @@ const FileListItem: React.FC<FileListItemProps> = ({

          <Box style={{ flex: 1, minWidth: 0 }}>
            <Group gap="xs" align="center">
-              <Text size="sm" fw={500} className='ph-no-capture' truncate style={{ flex: 1 }}>{file.name}</Text>
+              <Text size="sm" fw={500} truncate style={{ flex: 1 }}>
+                <PrivateContent>{file.name}</PrivateContent>
+              </Text>
              <Badge size="xs" variant="light" color={"blue"}>
                v{currentVersion}
              </Badge>
--- a/frontend/src/core/components/pageEditor/FileThumbnail.tsx
+++ b/frontend/src/core/components/pageEditor/FileThumbnail.tsx
@ -12,6 +12,7 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import styles from '@app/components/pageEditor/PageEditor.module.css';
 import { useFileContext } from '@app/contexts/FileContext';
 import { FileId } from '@app/types/file';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 interface FileItem {
  id: FileId;
@ -316,29 +317,30 @@ const FileThumbnail = ({
          }}
        >
          {file.thumbnail && (
-            <img
-              className="ph-no-capture"
-              src={file.thumbnail}
-              alt={file.name}
-              draggable={false}
-              onError={(e) => {
-                // Hide broken image if blob URL was revoked
-                const img = e.target as HTMLImageElement;
-                img.style.display = 'none';
+            <PrivateContent>
+              <img
+                src={file.thumbnail}
+                alt={file.name}
+                draggable={false}
+                onError={(e) => {
+                  // Hide broken image if blob URL was revoked
+                  const img = e.target as HTMLImageElement;
+                  img.style.display = 'none';
+                }}
+              style={{
+                maxWidth: '80%',
+                maxHeight: '80%',
+                objectFit: 'contain',
+                borderRadius: 0,
+                background: '#ffffff',
+                border: '1px solid var(--border-default)',
+                display: 'block',
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                alignSelf: 'start'
              }}
-            style={{
-              maxWidth: '80%',
-              maxHeight: '80%',
-              objectFit: 'contain',
-              borderRadius: 0,
-              background: '#ffffff',
-              border: '1px solid var(--border-default)',
-              display: 'block',
-              marginLeft: 'auto',
-              marginRight: 'auto',
-              alignSelf: 'start'
-            }}
-          />
+            />
+            </PrivateContent>
          )}
        </div>

--- a/frontend/src/core/components/pageEditor/PageThumbnail.tsx
+++ b/frontend/src/core/components/pageEditor/PageThumbnail.tsx
@ -14,6 +14,7 @@ import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
 import { useFilesModalContext } from '@app/contexts/FilesModalContext';
 import styles from '@app/components/pageEditor/PageEditor.module.css';
 import HoverActionMenu, { HoverAction } from '@app/components/shared/HoverActionMenu';
+import { PrivateContent } from '@app/components/shared/PrivateContent';


 interface PageThumbnailProps {
@ -442,21 +443,22 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
              }}></div>
            </div>
          ) : thumbnailUrl ? (
-            <img
-              className="ph-no-capture"
-              src={thumbnailUrl}
-              alt={`Page ${page.pageNumber}`}
-              draggable={false}
-              data-original-rotation={page.rotation}
-              style={{
-                width: '100%',
-                height: '100%',
-                objectFit: 'contain',
-                borderRadius: 2,
-                transform: `rotate(${page.rotation}deg)`,
-                transition: 'transform 0.3s ease-in-out'
-              }}
-            />
+            <PrivateContent>
+              <img
+                src={thumbnailUrl}
+                alt={`Page ${page.pageNumber}`}
+                draggable={false}
+                data-original-rotation={page.rotation}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'contain',
+                  borderRadius: 2,
+                  transform: `rotate(${page.rotation}deg)`,
+                  transition: 'transform 0.3s ease-in-out'
+                }}
+              />
+            </PrivateContent>
          ) : (
            <div style={{ textAlign: 'center' }}>
              <Text size="lg" c="dimmed">📄</Text>
--- a/frontend/src/core/components/shared/FileDropdownMenu.tsx
+++ b/frontend/src/core/components/shared/FileDropdownMenu.tsx
@ -3,6 +3,7 @@ import { Menu, Loader, Group, Text } from '@mantine/core';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import FitText from '@app/components/shared/FitText';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 interface FileDropdownMenuProps {
  displayName: string;
@ -31,7 +32,9 @@ export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
          ) : (
            <VisibilityIcon fontSize="small" />
          )}
-          <FitText text={displayName} fontSize={14} minimumFontScale={0.6} className="ph-no-capture" />
+          <PrivateContent>
+            <FitText text={displayName} fontSize={14} minimumFontScale={0.6} />
+          </PrivateContent>
          <KeyboardArrowDownIcon fontSize="small" />
        </div>
      </Menu.Target>
@ -61,7 +64,9 @@ export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
            >
              <Group gap="xs" style={{ width: '100%', justifyContent: 'space-between' }}>
                <div style={{ flex: 1, textAlign: 'left', minWidth: 0 }}>
-                  <FitText text={itemName} fontSize={14} minimumFontScale={0.7} className="ph-no-capture" />
+                  <PrivateContent>
+                    <FitText text={itemName} fontSize={14} minimumFontScale={0.7} />
+                  </PrivateContent>
                </div>
                {file.versionNumber && file.versionNumber > 1 && (
                  <Text size="xs" c="dimmed">
--- a/frontend/src/core/components/shared/PrivateContent.tsx
+++ b/frontend/src/core/components/shared/PrivateContent.tsx
@ -0,0 +1,40 @@
+import React from 'react';
+
+interface PrivateContentProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactNode;
+}
+
+/**
+ * Wrapper component for content that should not be captured by analytics tools.
+ * Currently applies the 'ph-no-capture' className to prevent PostHog capture.
+ *
+ * Uses `display: contents` to be layout-invisible - the wrapper exists in the DOM
+ * for analytics filtering, but doesn't affect layout, flexbox, grid, or styling.
+ *
+ * Use this component to wrap any content containing sensitive or private information
+ * that should be excluded from analytics tracking.
+ *
+ * @example
+ * <PrivateContent>
+ *   <Text>Sensitive filename.pdf</Text>
+ * </PrivateContent>
+ *
+ * <PrivateContent>
+ *   <img src={thumbnail} alt="preview" />
+ * </PrivateContent>
+ */
+export const PrivateContent: React.FC<PrivateContentProps> = ({
+  children,
+  className = '',
+  style,
+  ...props
+}) => {
+  const combinedClassName = `ph-no-capture${className ? ` ${className}` : ''}`;
+  const combinedStyle = { display: 'contents' as const, ...style };
+
+  return (
+    <span className={combinedClassName} style={combinedStyle} {...props}>
+      {children}
+    </span>
+  );
+};
--- a/frontend/src/core/components/shared/TopControls.tsx
+++ b/frontend/src/core/components/shared/TopControls.tsx
@ -9,6 +9,7 @@ import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
 import { WorkbenchType, isValidWorkbench } from '@app/types/workbench';
 import type { CustomWorkbenchViewInstance } from '@app/contexts/ToolWorkflowContext';
 import { FileDropdownMenu } from '@app/components/shared/FileDropdownMenu';
+import { PrivateContent } from '@app/components/shared/PrivateContent';


 const viewOptionStyle: React.CSSProperties = {
@ -54,7 +55,7 @@ const createViewOptions = (
        ) : (
          <VisibilityIcon fontSize="small" />
        )}
-        <span className="ph-no-capture">{displayName}</span>
+        <PrivateContent>{displayName}</PrivateContent>
      </div>
    ),
    value: "viewer",
--- a/frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx
+++ b/frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx
@ -2,6 +2,7 @@ import React from 'react';
 import { Box, Center, Image } from '@mantine/core';
 import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 import { StirlingFileStub } from '@app/types/fileContext';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 export interface DocumentThumbnailProps {
  file: File | StirlingFileStub | null;
@ -35,13 +36,14 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
  if (thumbnail) {
    return (
      <Box style={containerStyle} onClick={onClick}>
-        <Image
-          className='ph-no-capture'
-          src={thumbnail}
-          alt={`Preview of ${file.name}`}
-          fit="contain"
-          style={{ maxWidth: '100%', maxHeight: '100%' }}
-        />
+        <PrivateContent>
+          <Image
+            src={thumbnail}
+            alt={`Preview of ${file.name}`}
+            fit="contain"
+            style={{ maxWidth: '100%', maxHeight: '100%' }}
+          />
+        </PrivateContent>
        {children}
      </Box>
    );
@ -50,13 +52,14 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
  return (
    <Box style={containerStyle} onClick={onClick}>
      <Center style={{ width: '100%', height: '100%', backgroundColor: 'var(--mantine-color-gray-1)', borderRadius: '0.25rem' }}>
-        <PictureAsPdfIcon
-          className='ph-no-capture'
-          style={{
-            fontSize: '2rem',
-            color: 'var(--mantine-color-gray-6)'
-          }}
-        />
+        <PrivateContent>
+          <PictureAsPdfIcon
+            style={{
+              fontSize: '2rem',
+              color: 'var(--mantine-color-gray-6)'
+            }}
+          />
+        </PrivateContent>
      </Center>
      {children}
    </Box>
--- a/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx
+++ b/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx
@ -4,6 +4,7 @@ import { AddPageNumbersParameters } from '@app/components/tools/addPageNumbers/u
 import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
 import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
 import styles from '@app/components/tools/addPageNumbers/PageNumberPreview.module.css';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 // Simple utilities for page numbers (adapted from stamp)
 const A4_ASPECT_RATIO = 0.707;
@ -197,12 +198,14 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
        style={containerStyle}
      >
        {pageThumbnail && (
-          <img
-            src={pageThumbnail}
-            alt="page preview"
-            className={`${styles.pageThumbnail} ph-no-capture`}
-            draggable={false}
-          />
+          <PrivateContent>
+            <img
+              src={pageThumbnail}
+              alt="page preview"
+              className={styles.pageThumbnail}
+              draggable={false}
+            />
+          </PrivateContent>
        )}

        {/* Quick position overlay grid - EXACT copy from stamp */}
--- a/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx
+++ b/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx
@ -7,6 +7,7 @@ import { useFilesModalContext } from "@app/contexts/FilesModalContext";
 import { useAllFiles } from "@app/contexts/FileContext";
 import { useFileManager } from "@app/hooks/useFileManager";
 import { StirlingFile } from "@app/types/fileContext";
+import { PrivateContent } from "@app/components/shared/PrivateContent"

 export interface FileStatusIndicatorProps {
  selectedFiles?: StirlingFile[];
@ -134,7 +135,9 @@ const FileStatusIndicator = ({

  return (
   <Text size="sm" c="dimmed" style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}>
-      ✓ {selectedFiles.length === 1 ? t("fileSelected", "Selected: {{filename}}", { filename: selectedFiles[0]?.name }) : t("filesSelected", "{{count}} files selected", { count: selectedFiles.length })}
+      ✓ {selectedFiles.length === 1
+          ? <PrivateContent>{t("fileSelected", "Selected: {{filename}}", { filename: selectedFiles[0]?.name }) }</PrivateContent>
+          : t("filesSelected", "{{count}} files selected", { count: selectedFiles.length })}
    </Text>
  );
 };
--- a/frontend/src/core/components/tools/shared/ResultsPreview.tsx
+++ b/frontend/src/core/components/tools/shared/ResultsPreview.tsx
@ -3,6 +3,7 @@ import { Box, Text, Loader, Stack, Center, Flex } from '@mantine/core';
 import FilePreview from '@app/components/shared/FilePreview';
 import FileMetadata from '@app/components/tools/shared/FileMetadata';
 import NavigationControls from '@app/components/tools/shared/NavigationControls';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 export interface ReviewFile {
  file: File;
@ -62,7 +63,6 @@ const ResultsPreview = ({
      {/* File name at the top */}
      <Box mb="sm" style={{ minHeight: '3rem', display: 'flex', alignItems: 'flex-start' }}>
        <Text
-          className='ph-no-capture'
          size="sm"
          fw={500}
          style={{
@ -71,7 +71,7 @@ const ResultsPreview = ({
          }}
          title={currentFile.file.name}
        >
-          {currentFile.file.name}
+          <PrivateContent>{currentFile.file.name}</PrivateContent>
        </Text>
      </Box>

--- a/frontend/src/core/components/viewer/LocalEmbedPDF.tsx
+++ b/frontend/src/core/components/viewer/LocalEmbedPDF.tsx
@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { createPluginRegistration } from '@embedpdf/core';
 import { EmbedPDF } from '@embedpdf/core/react';
 import { usePdfiumEngine } from '@embedpdf/engines/react';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 // Import the essential plugins
 import { Viewport, ViewportPluginPackage } from '@embedpdf/plugin-viewport/react';
@ -184,18 +185,17 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur

  // Wrap your UI with the <EmbedPDF> provider
  return (
-    <div
-      className='ph-no-capture'
-
-      style={{
-        height: '100%',
-        width: '100%',
-        position: 'relative',
-        overflow: 'hidden',
-        flex: 1,
-        minHeight: 0,
-        minWidth: 0,
-    }}>
+    <PrivateContent>
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          position: 'relative',
+          overflow: 'hidden',
+          flex: 1,
+          minHeight: 0,
+          minWidth: 0,
+      }}>
      <EmbedPDF
        engine={engine}
        plugins={plugins}
@ -338,6 +338,7 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur
          </Viewport>
        </GlobalPointerProvider>
      </EmbedPDF>
-    </div>
+      </div>
+    </PrivateContent>
  );
 }
--- a/frontend/src/core/components/viewer/ThumbnailSidebar.tsx
+++ b/frontend/src/core/components/viewer/ThumbnailSidebar.tsx
@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Box, ScrollArea } from '@mantine/core';
 import { useViewer } from '@app/contexts/ViewerContext';
+import { PrivateContent } from '@app/components/shared/PrivateContent';

 interface ThumbnailSidebarProps {
  visible: boolean;
@ -145,18 +146,19 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, activeFileIndex
                  >
                    {/* Thumbnail Image */}
                    {thumbnails[pageIndex] && thumbnails[pageIndex] !== 'error' ? (
-                      <img
-                        className='ph-no-capture'
-                        src={thumbnails[pageIndex]}
-                        alt={`Page ${pageIndex + 1} thumbnail`}
-                        style={{
-                          maxWidth: '100%',
-                          height: 'auto',
-                          borderRadius: '4px',
-                          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-                          border: '1px solid var(--border-subtle)'
-                        }}
-                      />
+                      <PrivateContent>
+                        <img
+                          src={thumbnails[pageIndex]}
+                          alt={`Page ${pageIndex + 1} thumbnail`}
+                          style={{
+                            maxWidth: '100%',
+                            height: 'auto',
+                            borderRadius: '4px',
+                            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+                            border: '1px solid var(--border-subtle)'
+                          }}
+                        />
+                      </PrivateContent>
                    ) : thumbnails[pageIndex] === 'error' ? (
                      <div style={{
                        width: '11.5rem',
--- a/frontend/vitest.minimal.config.ts
+++ b/frontend/vitest.minimal.config.ts
@ -1,9 +0,0 @@
-import { defineConfig } from 'vitest/config';
-
-export default defineConfig({
-  test: {
-    environment: 'node',
-    testTimeout: 5000,
-    include: ['src/utils/convertUtils.test.ts']
-  },
-});