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 <[email protected]>
Co-authored-by: James Brunton <[email protected]>

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 */}

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>
   );
 };

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>