feat: Implement reusable button components

src/components/moderation/ValidationSummary.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo } from 'react';
-import { AlertCircle, CheckCircle, Info, AlertTriangle, RefreshCw } from 'lucide-react';
+import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
+import { RefreshButton } from '@/components/ui/refresh-button';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { validateEntityData, ValidationResult } from '@/lib/entityValidationSchemas';
@@ -25,6 +25,7 @@ export function ValidationSummary({ item, onValidationChange, compact = false, v
   const [isLoading, setIsLoading] = useState(true);
   const [isExpanded, setIsExpanded] = useState(false);
   const [manualTriggerCount, setManualTriggerCount] = useState(0);
+  const [isRevalidating, setIsRevalidating] = useState(false);
 
   // Helper to extract the correct entity ID based on entity type
   const getEntityId = (
@@ -225,15 +226,24 @@ export function ValidationSummary({ item, onValidationChange, compact = false, v
           </Badge>
         )}
         
-        <Button
-          variant="outline"
+        <RefreshButton
+          onRefresh={async () => {
+            setIsRevalidating(true);
+            try {
+              setManualTriggerCount(prev => prev + 1);
+              // Short delay to show feedback
+              await new Promise(resolve => setTimeout(resolve, 500));
+            } finally {
+              setIsRevalidating(false);
+            }
+          }}
+          isLoading={isRevalidating}
           size="sm"
-          onClick={() => setManualTriggerCount(prev => prev + 1)}
+          variant="outline"
           className="text-xs h-7"
         >
-          <RefreshCw className="w-3 h-3 mr-1" />
           Re-validate
-        </Button>
+        </RefreshButton>
       </div>
 
       {/* Detailed Issues */}