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/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) : ''}

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>

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>