feat(redaction): improve manual redaction with color selection and updated UI elements (#5679)

# Description of Changes

<img width="1920" height="977" alt="image"
src="https://github.com/user-attachments/assets/17e451b7-df2b-4097-b8aa-66954d89b935"
/>


<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Signed-off-by: Balázs Szücs <[email protected]>

frontend/src/core/components/viewer/RedactionAPIBridge.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useImperativeHandle } from 'react';
 import { useRedaction as useEmbedPdfRedaction } from '@embedpdf/plugin-redaction/react';
+import { PdfAnnotationSubtype } from '@embedpdf/models';
 import { useRedaction } from '@app/contexts/RedactionContext';
 import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
+import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
 
 /**
  * RedactionAPIBridge - Uses embedPDF v2.5.0
@@ -10,24 +12,25 @@ import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId'
  */
 export function RedactionAPIBridge() {
   const activeDocumentId = useActiveDocumentId();
-  
+
   // Don't render the inner component until we have a valid document ID
   if (!activeDocumentId) {
     return null;
   }
-  
+
   return <RedactionAPIBridgeInner documentId={activeDocumentId} />;
 }
 
 function RedactionAPIBridgeInner({ documentId }: { documentId: string }) {
-  const { state, provides } = useEmbedPdfRedaction(documentId);
-  const { 
-    redactionApiRef, 
-    setPendingCount, 
-    setActiveType, 
+  const { state, provides: redactionProvides } = useEmbedPdfRedaction(documentId);
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const {
+    redactionApiRef,
+    setPendingCount,
+    setActiveType,
     setIsRedacting,
-    setRedactionsApplied,
-    setBridgeReady
+    setBridgeReady,
+    manualRedactColor
   } = useRedaction();
 
   // Mark bridge as ready on mount, not ready on unmount
@@ -45,34 +48,51 @@ function RedactionAPIBridgeInner({ documentId }: { documentId: string }) {
       setActiveType(state.activeType ?? null);
       setIsRedacting(state.isRedacting ?? false);
     }
-  }, [state?.pendingCount, state?.activeType, state?.isRedacting, setPendingCount, setActiveType, setIsRedacting]);
+  }, [state, setPendingCount, setActiveType, setIsRedacting]);
+
+  // Synchronize manual redaction color with EmbedPDF
+  // Manual redaction uses the 'redact' annotation tool internally
+  useEffect(() => {
+    const annotationApi = annotationProvides as any;
+    if (annotationApi?.setToolDefaults) {
+      annotationApi.setToolDefaults('redact', {
+        type: PdfAnnotationSubtype.REDACT,
+        strokeColor: manualRedactColor,
+        color: manualRedactColor,
+        overlayColor: manualRedactColor,
+        fillColor: manualRedactColor,
+        interiorColor: manualRedactColor,
+        backgroundColor: manualRedactColor,
+        opacity: 1
+      });
+    }
+  }, [annotationProvides, manualRedactColor]);
 
   // Expose the EmbedPDF API through our context's ref
   // Uses v2.5.0 unified redaction mode
   useImperativeHandle(redactionApiRef, () => ({
     // Unified redaction methods (v2.5.0)
     toggleRedact: () => {
-      provides?.toggleRedact();
+      redactionProvides?.toggleRedact();
     },
     enableRedact: () => {
-      provides?.enableRedact();
+      redactionProvides?.enableRedact();
     },
     isRedactActive: () => {
-      return provides?.isRedactActive() ?? false;
+      return redactionProvides?.isRedactActive() ?? false;
     },
     endRedact: () => {
-      provides?.endRedact();
+      redactionProvides?.endRedact();
     },
     // Common methods
     commitAllPending: () => {
-      provides?.commitAllPending();
+      redactionProvides?.commitAllPending();
       // Don't set redactionsApplied here - it should only be set after the file is saved
       // The save operation in applyChanges will handle setting/clearing this flag
     },
     getActiveType: () => state?.activeType ?? null,
     getPendingCount: () => state?.pendingCount ?? 0,
-  }), [provides, state, setRedactionsApplied]);
+  }), [redactionProvides, state]);
 
   return null;
 }
-