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

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',