feat: Implement privacy modernization plan

src/components/privacy/BlockedUsers.tsx

@@ -1,29 +1,17 @@
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
 import { UserX, Trash2 } from 'lucide-react';
 import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
-import { useToast } from '@/hooks/use-toast';
-
-interface BlockedUser {
-  id: string;
-  blocked_id: string;
-  reason?: string;
-  created_at: string;
-  blocked_profile?: {
-    username: string;
-    display_name?: string;
-    avatar_url?: string;
-  };
-}
+import { handleError, handleSuccess } from '@/lib/errorHandler';
+import { logger } from '@/lib/logger';
+import type { UserBlock } from '@/types/privacy';
 
 export function BlockedUsers() {
   const { user } = useAuth();
-  const { toast } = useToast();
-  const [blockedUsers, setBlockedUsers] = useState<BlockedUser[]>([]);
+  const [blockedUsers, setBlockedUsers] = useState<UserBlock[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -43,7 +31,15 @@ export function BlockedUsers() {
         .eq('blocker_id', user.id)
         .order('created_at', { ascending: false });
 
-      if (blocksError) throw blocksError;
+      if (blocksError) {
+        logger.error('Failed to fetch user blocks', {
+          userId: user.id,
+          action: 'fetch_blocked_users',
+          error: blocksError.message,
+          errorCode: blocksError.code
+        });
+        throw blocksError;
+      }
 
       if (!blocks || blocks.length === 0) {
         setBlockedUsers([]);
@@ -57,46 +53,99 @@ export function BlockedUsers() {
         .select('user_id, username, display_name, avatar_url')
         .in('user_id', blockedIds);
 
-      if (profilesError) throw profilesError;
+      if (profilesError) {
+        logger.error('Failed to fetch blocked user profiles', {
+          userId: user.id,
+          action: 'fetch_blocked_user_profiles',
+          error: profilesError.message,
+          errorCode: profilesError.code
+        });
+        throw profilesError;
+      }
 
       // Combine the data
       const blockedUsersWithProfiles = blocks.map(block => ({
         ...block,
+        blocker_id: user.id,
         blocked_profile: profiles?.find(p => p.user_id === block.blocked_id)
       }));
 
       setBlockedUsers(blockedUsersWithProfiles);
-    } catch (error: any) {
-      console.error('Error fetching blocked users:', error);
-      toast({
-        title: 'Error',
-        description: 'Failed to load blocked users',
-        variant: 'destructive'
+      
+      logger.info('Blocked users fetched successfully', {
+        userId: user.id,
+        action: 'fetch_blocked_users',
+        count: blockedUsersWithProfiles.length
+      });
+    } catch (error) {
+      logger.error('Error fetching blocked users', {
+        userId: user.id,
+        action: 'fetch_blocked_users',
+        error: error instanceof Error ? error.message : String(error)
+      });
+      
+      handleError(error, {
+        action: 'Load blocked users',
+        userId: user.id
       });
     } finally {
       setLoading(false);
     }
   };
 
-  const handleUnblock = async (blockId: string, username: string) => {
+  const handleUnblock = async (blockId: string, blockedUserId: string, username: string) => {
+    if (!user) return;
+    
     try {
       const { error } = await supabase
         .from('user_blocks')
         .delete()
         .eq('id', blockId);
 
-      if (error) throw error;
+      if (error) {
+        logger.error('Failed to unblock user', {
+          userId: user.id,
+          action: 'unblock_user',
+          targetUserId: blockedUserId,
+          error: error.message,
+          errorCode: error.code
+        });
+        throw error;
+      }
+
+      // Log to audit trail
+      await supabase.from('profile_audit_log').insert({
+        user_id: user.id,
+        changed_by: user.id,
+        action: 'user_unblocked',
+        changes: {
+          blocked_user_id: blockedUserId,
+          username,
+          timestamp: new Date().toISOString()
+        }
+      });
 
       setBlockedUsers(prev => prev.filter(block => block.id !== blockId));
-      toast({
-        title: 'User unblocked',
-        description: `You have unblocked @${username}`
+      
+      logger.info('User unblocked successfully', {
+        userId: user.id,
+        action: 'unblock_user',
+        targetUserId: blockedUserId
       });
-    } catch (error: any) {
-      toast({
-        title: 'Error',
-        description: 'Failed to unblock user',
-        variant: 'destructive'
+      
+      handleSuccess('User unblocked', `You have unblocked @${username}`);
+    } catch (error) {
+      logger.error('Error unblocking user', {
+        userId: user.id,
+        action: 'unblock_user',
+        targetUserId: blockedUserId,
+        error: error instanceof Error ? error.message : String(error)
+      });
+      
+      handleError(error, {
+        action: 'Unblock user',
+        userId: user.id,
+        metadata: { targetUsername: username }
       });
     }
   };
@@ -178,7 +227,11 @@ export function BlockedUsers() {
               <AlertDialogFooter>
                 <AlertDialogCancel>Cancel</AlertDialogCancel>
                 <AlertDialogAction 
-                  onClick={() => handleUnblock(block.id, block.blocked_profile?.username || 'user')}
+                  onClick={() => handleUnblock(
+                    block.id,
+                    block.blocked_id,
+                    block.blocked_profile?.username || 'user'
+                  )}
                 >
                   Unblock
                 </AlertDialogAction>
@@ -189,4 +242,4 @@ export function BlockedUsers() {
       ))}
     </div>
   );
-}
+}