From 48835efe1dd7d11f00032560ea325d50e32a289b Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 6 Oct 2025 13:46:06 +0000
Subject: [PATCH] feat: Show actual change values in compact mode

---
 src/components/moderation/FieldComparison.tsx | 83 +++++++++++++++++--
 1 file changed, 78 insertions(+), 5 deletions(-)

diff --git a/src/components/moderation/FieldComparison.tsx b/src/components/moderation/FieldComparison.tsx
index c35b13b3..dd5fb883 100644
--- a/src/components/moderation/FieldComparison.tsx
+++ b/src/components/moderation/FieldComparison.tsx
@@ -5,6 +5,15 @@ import { ArrowRight } from 'lucide-react';
 import { ArrayFieldDiff } from './ArrayFieldDiff';
 import { SpecialFieldDisplay } from './SpecialFieldDisplay';
 
+// Helper to format compact values (truncate long strings)
+function formatCompactValue(value: any, maxLength = 30): string {
+  const formatted = formatFieldValue(value);
+  if (formatted.length > maxLength) {
+    return formatted.substring(0, maxLength) + '...';
+  }
+  return formatted;
+}
+
 interface FieldDiffProps {
   change: FieldChange;
   compact?: boolean;
@@ -41,9 +50,35 @@ export function FieldDiff({ change, compact = false }: FieldDiffProps) {
   };
 
   if (compact) {
+    const fieldName = formatFieldName(field);
+    
+    if (changeType === 'added') {
+      return (
+        <Badge variant="outline" className={getChangeColor()}>
+          {fieldName}: + {formatCompactValue(newValue)}
+        </Badge>
+      );
+    }
+    
+    if (changeType === 'removed') {
+      return (
+        <Badge variant="outline" className={getChangeColor()}>
+          {fieldName}: <span className="line-through">{formatCompactValue(oldValue)}</span>
+        </Badge>
+      );
+    }
+    
+    if (changeType === 'modified') {
+      return (
+        <Badge variant="outline" className={getChangeColor()}>
+          {fieldName}: {formatCompactValue(oldValue)} → {formatCompactValue(newValue)}
+        </Badge>
+      );
+    }
+    
     return (
       <Badge variant="outline" className={getChangeColor()}>
-        {formatFieldName(field)}
+        {fieldName}
       </Badge>
     );
   }
@@ -88,9 +123,28 @@ export function ImageDiff({ change, compact = false }: ImageDiffProps) {
   const { type, oldUrl, newUrl } = change;
 
   if (compact) {
+    const imageLabel = type === 'banner' ? 'Banner' : 'Card';
+    const isAddition = !oldUrl && newUrl;
+    const isRemoval = oldUrl && !newUrl;
+    const isReplacement = oldUrl && newUrl;
+    
+    let action = '';
+    let colorClass = 'text-blue-600 dark:text-blue-400';
+    
+    if (isAddition) {
+      action = ' (Added)';
+      colorClass = 'text-green-600 dark:text-green-400';
+    } else if (isRemoval) {
+      action = ' (Removed)';
+      colorClass = 'text-red-600 dark:text-red-400';
+    } else if (isReplacement) {
+      action = ' (Changed)';
+      colorClass = 'text-amber-600 dark:text-amber-400';
+    }
+    
     return (
-      <Badge variant="outline" className="text-blue-600 dark:text-blue-400">
-        {type === 'banner' ? 'Banner' : 'Card'} Image
+      <Badge variant="outline" className={colorClass}>
+        {imageLabel} Image{action}
       </Badge>
     );
   }
@@ -160,9 +214,28 @@ export function LocationDiff({ oldLocation, newLocation, compact = false }: Loca
   };
 
   if (compact) {
+    const oldLoc = formatLocation(oldLocation);
+    const newLoc = formatLocation(newLocation);
+    
+    if (!oldLocation && newLocation) {
+      return (
+        <Badge variant="outline" className="text-green-600 dark:text-green-400">
+          Location: + {newLoc}
+        </Badge>
+      );
+    }
+    
+    if (oldLocation && !newLocation) {
+      return (
+        <Badge variant="outline" className="text-red-600 dark:text-red-400">
+          Location: <span className="line-through">{oldLoc}</span>
+        </Badge>
+      );
+    }
+    
     return (
-      <Badge variant="outline" className="text-blue-600 dark:text-blue-400">
-        Location
+      <Badge variant="outline" className="text-amber-600 dark:text-amber-400">
+        Location: {oldLoc} → {newLoc}
       </Badge>
     );
   }