fix: resolve 7 bugs from QA sweep (#208)

- Fix selective metadata stripping (P1): use Sharp's keepExif()/keepIccProfile()
  instead of broken withMetadata({}) that preserved everything
- Fix meme font mapping (P1): add ArchivoBlack and ComicNeue fonts, map
  arial-black and comic-sans to correct TTF files instead of Anton
- Fix meme contentType (P2): detect actual output format from Sharp metadata
  instead of hardcoding image/png
- Fix info/text-overlay/color-palette i18n (P2): wire up existing translation
  keys that were imported but never used
- Fix info and color-palette displayMode (P2): change from before-after to
  no-comparison since neither tool produces a processed image
- Add missing i18n keys across all 21 locales
- Update displayMode test assertions

apps/web/src/components/tools/color-palette-settings.tsx

@@ -6,6 +6,7 @@ import { copyToClipboard } from "@/lib/utils";
 import { useFileStore } from "@/stores/file-store";
 export function ColorPaletteSettings() {
   const { t } = useTranslation();
+  const ts = t.toolSettings["color-palette"];
   const { files, processing, error, setProcessing, setError } = useFileStore();
   const [colors, setColors] = useState<string[]>([]);
   const [copiedIdx, setCopiedIdx] = useState<number | null>(null);
@@ -35,7 +36,7 @@ export function ColorPaletteSettings() {
       const data = await res.json();
       setColors(data.colors);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Extraction failed");
+      setError(err instanceof Error ? err.message : ts.extracting);
     } finally {
       setProcessing(false);
     }
@@ -61,7 +62,7 @@ export function ColorPaletteSettings() {
         className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
       >
         {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Extracting..." : "Extract Colors"}
+        {processing ? ts.extracting : ts.submit}
       </button>
 
       {error && <p className="text-xs text-red-500">{error}</p>}
@@ -69,7 +70,7 @@ export function ColorPaletteSettings() {
       {colors.length > 0 && (
         <div className="space-y-2">
           <p className="text-xs font-medium text-muted-foreground">
-            Dominant Colors ({colors.length})
+            {ts.dominantColors} ({colors.length})
           </p>
           <div className="grid grid-cols-2 gap-1.5">
             {colors.map((color, i) => (

apps/web/src/components/tools/info-settings.tsx

@@ -80,14 +80,14 @@ export function InfoSettings() {
         setInfo(data);
       } catch (err) {
         if (err instanceof DOMException && err.name === "AbortError") return;
-        setError(err instanceof Error ? err.message : "Failed to read info");
+        setError(err instanceof Error ? err.message : t.toolSettings.info.failedToRead);
       } finally {
         if (!controller.signal.aborted) {
           setProcessing(false);
         }
       }
     },
-    [setProcessing, setError],
+    [setProcessing, setError, t],
   );
 
   useEffect(() => {
@@ -122,6 +122,8 @@ export function InfoSettings() {
     alpha: "bg-gray-500",
   };
 
+  const ts = t.toolSettings.info;
+
   return (
     <div className="space-y-4">
       <button
@@ -132,7 +134,7 @@ export function InfoSettings() {
         className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
       >
         {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Reading..." : "Read Info"}
+        {processing ? ts.reading : ts.readInfo}
       </button>
 
       {error && <p className="text-xs text-red-500">{error}</p>}
@@ -140,37 +142,37 @@ export function InfoSettings() {
       {info && (
         <div className="space-y-3">
           <div className="grid grid-cols-2 gap-1 text-xs">
-            <div className="text-muted-foreground">Dimensions</div>
+            <div className="text-muted-foreground">{ts.dimensions}</div>
             <div className="text-foreground font-mono">
               {info.width} x {info.height}
             </div>
-            <div className="text-muted-foreground">Format</div>
+            <div className="text-muted-foreground">{ts.format}</div>
             <div className="text-foreground font-mono">{info.format}</div>
-            <div className="text-muted-foreground">File Size</div>
+            <div className="text-muted-foreground">{ts.fileSize}</div>
             <div className="text-foreground font-mono">{(info.fileSize / 1024).toFixed(1)} KB</div>
-            <div className="text-muted-foreground">Channels</div>
+            <div className="text-muted-foreground">{ts.channels}</div>
             <div className="text-foreground font-mono">{info.channels}</div>
-            <div className="text-muted-foreground">Color Space</div>
+            <div className="text-muted-foreground">{ts.colorSpace}</div>
             <div className="text-foreground font-mono">{info.colorSpace}</div>
-            <div className="text-muted-foreground">Alpha</div>
-            <div className="text-foreground font-mono">{info.hasAlpha ? "Yes" : "No"}</div>
-            <div className="text-muted-foreground">DPI</div>
-            <div className="text-foreground font-mono">{info.density ?? "N/A"}</div>
-            <div className="text-muted-foreground">Progressive</div>
-            <div className="text-foreground font-mono">{info.isProgressive ? "Yes" : "No"}</div>
-            <div className="text-muted-foreground">ICC Profile</div>
-            <div className="text-foreground font-mono">{info.hasIcc ? "Yes" : "No"}</div>
-            <div className="text-muted-foreground">EXIF Data</div>
-            <div className="text-foreground font-mono">{info.hasExif ? "Yes" : "No"}</div>
-            <div className="text-muted-foreground">XMP Data</div>
-            <div className="text-foreground font-mono">{info.hasXmp ? "Yes" : "No"}</div>
-            <div className="text-muted-foreground">Pages</div>
+            <div className="text-muted-foreground">{ts.hasAlpha}</div>
+            <div className="text-foreground font-mono">{info.hasAlpha ? ts.yes : ts.no}</div>
+            <div className="text-muted-foreground">{ts.density}</div>
+            <div className="text-foreground font-mono">{info.density ?? ts.na}</div>
+            <div className="text-muted-foreground">{ts.progressive}</div>
+            <div className="text-foreground font-mono">{info.isProgressive ? ts.yes : ts.no}</div>
+            <div className="text-muted-foreground">{ts.hasIcc}</div>
+            <div className="text-foreground font-mono">{info.hasIcc ? ts.yes : ts.no}</div>
+            <div className="text-muted-foreground">{ts.hasExif}</div>
+            <div className="text-foreground font-mono">{info.hasExif ? ts.yes : ts.no}</div>
+            <div className="text-muted-foreground">{ts.hasXmp}</div>
+            <div className="text-foreground font-mono">{info.hasXmp ? ts.yes : ts.no}</div>
+            <div className="text-muted-foreground">{ts.pages}</div>
             <div className="text-foreground font-mono">{info.pages}</div>
           </div>
 
           {/* Histogram */}
           <div>
-            <p className="text-xs font-medium text-muted-foreground">Channel Stats</p>
+            <p className="text-xs font-medium text-muted-foreground">{ts.channelStats}</p>
             <div className="mt-1 space-y-1.5">
               {info.histogram.map((ch) => (
                 <div key={ch.channel} className="space-y-0.5">

apps/web/src/components/tools/text-overlay-settings.tsx

@@ -15,7 +15,9 @@ export function TextOverlayControls({
   settings: initialSettings,
   onChange,
 }: TextOverlayControlsProps) {
-  const [text, setText] = useState("Your Text Here");
+  const { t } = useTranslation();
+  const ts = t.toolSettings["text-overlay"];
+  const [text, setText] = useState(ts.defaultText);
   const [fontSize, setFontSize] = useState(48);
   const [color, setColor] = useState("#FFFFFF");
   const [position, setPosition] = useState<"top" | "center" | "bottom">("bottom");
@@ -60,7 +62,7 @@ export function TextOverlayControls({
     <div className="space-y-4">
       <div>
         <label htmlFor="text-overlay-text" className="text-xs text-muted-foreground">
-          Text
+          {ts.text}
         </label>
         <input
           id="text-overlay-text"
@@ -74,7 +76,7 @@ export function TextOverlayControls({
       <div>
         <div className="flex justify-between items-center">
           <label htmlFor="text-overlay-font-size" className="text-xs text-muted-foreground">
-            Font Size
+            {ts.fontSize}
           </label>
           <span className="text-xs font-mono text-foreground">{fontSize}px</span>
         </div>
@@ -91,7 +93,7 @@ export function TextOverlayControls({
 
       <div>
         <label htmlFor="text-overlay-color" className="text-xs text-muted-foreground">
-          Text Color
+          {ts.color}
         </label>
         <input
           id="text-overlay-color"
@@ -104,7 +106,7 @@ export function TextOverlayControls({
 
       <div>
         <label htmlFor="text-overlay-position" className="text-xs text-muted-foreground">
-          Position
+          {ts.position}
         </label>
         <select
           id="text-overlay-position"
@@ -112,9 +114,9 @@ export function TextOverlayControls({
           onChange={(e) => setPosition(e.target.value as "top" | "center" | "bottom")}
           className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
         >
-          <option value="top">Top</option>
-          <option value="center">Center</option>
-          <option value="bottom">Bottom</option>
+          <option value="top">{ts.top}</option>
+          <option value="center">{ts.center}</option>
+          <option value="bottom">{ts.bottom}</option>
         </select>
       </div>
 
@@ -125,7 +127,7 @@ export function TextOverlayControls({
           onChange={(e) => setShadow(e.target.checked)}
           className="rounded"
         />
-        Drop Shadow
+        {ts.shadow}
       </label>
 
       <label className="flex items-center gap-2 text-sm text-foreground">
@@ -135,13 +137,13 @@ export function TextOverlayControls({
           onChange={(e) => setBackgroundBox(e.target.checked)}
           className="rounded"
         />
-        Background Box
+        {ts.backgroundBox}
       </label>
 
       {backgroundBox && (
         <div>
           <label htmlFor="text-overlay-box-color" className="text-xs text-muted-foreground">
-            Box Color
+            {ts.backgroundColor}
           </label>
           <input
             id="text-overlay-box-color"
@@ -158,6 +160,7 @@ export function TextOverlayControls({
 
 export function TextOverlaySettings() {
   const { t } = useTranslation();
+  const ts = t.toolSettings["text-overlay"];
   const { files } = useFileStore();
   const {
     processFiles,
@@ -199,7 +202,7 @@ export function TextOverlaySettings() {
         <ProgressCard
           active={processing}
           phase={progress.phase === "idle" ? "uploading" : progress.phase}
-          label="Adding text"
+          label={ts.progressLabel}
           stage={progress.stage}
           percent={progress.percent}
           elapsed={progress.elapsed}
@@ -212,7 +215,7 @@ export function TextOverlaySettings() {
           disabled={!hasFile || processing || !settings.text}
           className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
         >
-          {files.length > 1 ? `Apply Overlay (${files.length} files)` : "Apply Overlay"}
+          {files.length > 1 ? format(ts.submitBatch, { count: files.length }) : ts.submit}
         </button>
       )}
 
@@ -224,7 +227,7 @@ export function TextOverlaySettings() {
           className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
-          Download
+          {ts.download}
         </a>
       )}
     </div>

apps/web/src/lib/tool-registry.tsx

@@ -417,7 +417,7 @@ export const toolRegistry = new Map<string, ToolRegistryEntry>([
   ],
 
   // Utilities
-  ["info", { displayMode: "before-after", Settings: InfoSettings }],
+  ["info", { displayMode: "no-comparison", Settings: InfoSettings }],
   ["compare", { displayMode: "before-after", Settings: CompareSettings }],
   [
     "find-duplicates",
@@ -427,7 +427,7 @@ export const toolRegistry = new Map<string, ToolRegistryEntry>([
       ResultsPanel: FindDuplicatesResults,
     },
   ],
-  ["color-palette", { displayMode: "before-after", Settings: ColorPaletteSettings }],
+  ["color-palette", { displayMode: "no-comparison", Settings: ColorPaletteSettings }],
   [
     "qr-generate",
     { displayMode: "no-dropzone", Settings: QrGenerateSettings, ResultsPanel: QrGeneratePreview },