fix: drawRedactionApproved draws box overlay + distinct green badge

The approved draw function was only drawing text with no overlay on the
redaction box area, making it look like the redaction disappeared.
Now draws a blue semi-transparent box over the redaction area (like
other states) plus the merged blue text along the line.

Also made the approved CSS badge green (--accent) to distinguish it
from the blue analyzed badge.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

unredact/static/canvas.js

@@ -264,6 +264,14 @@ function drawRedactionApproved(r, isActive) {
   const fontName = state.fonts.find(f => f.id === (o.fontId ?? a.font.id))?.name ?? a.font.name;
   const fontSize = o.fontSize ?? a.font.size;
 
+  // Always draw a box overlay on the redaction area so it stays visible
+  ctx.fillStyle = isActive ? "rgba(30, 100, 255, 0.25)" : "rgba(30, 100, 255, 0.12)";
+  ctx.fillRect(r.x, r.y, r.w, r.h);
+  ctx.strokeStyle = isActive ? "rgba(30, 100, 255, 0.8)" : "rgba(30, 100, 255, 0.4)";
+  ctx.lineWidth = isActive ? 2 : 1;
+  ctx.strokeRect(r.x, r.y, r.w, r.h);
+
+  // Draw the full merged text along the line
   const startX = a.line.x + (o.offsetX ?? 0);
   const startY = a.line.y + (o.offsetY ?? 0);
 
@@ -273,7 +281,7 @@ function drawRedactionApproved(r, isActive) {
   ctx.fillText(r.approvedText, startX, startY);
 
   if (isActive) {
-    ctx.strokeStyle = "rgba(30, 100, 255, 0.3)";
+    ctx.strokeStyle = "rgba(30, 100, 255, 0.2)";
     ctx.lineWidth = 1;
     ctx.strokeRect(a.line.x, a.line.y, a.line.w, a.line.h);
   }

unredact/static/style.css

@@ -228,8 +228,8 @@ main {
 }
 
 .redaction-status.status-approved {
-  color: var(--blue);
-  background: rgba(66, 165, 245, 0.15);
+  color: var(--accent);
+  background: rgba(0, 212, 116, 0.15);
 }
 
 .redaction-status.status-error {