Refactor user settings implementation

src/components/settings/SimplePhotoUpload.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { Upload } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useToast } from '@/hooks/use-toast';
+
+interface SimplePhotoUploadProps {
+  onUpload: (imageId: string, imageUrl: string) => Promise<void>;
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+export function SimplePhotoUpload({ onUpload, disabled, children }: SimplePhotoUploadProps) {
+  const [uploading, setUploading] = useState(false);
+  const { toast } = useToast();
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+      toast({
+        title: 'Invalid file',
+        description: 'Please select an image file',
+        variant: 'destructive'
+      });
+      return;
+    }
+
+    if (file.size > 5 * 1024 * 1024) {
+      toast({
+        title: 'File too large',
+        description: 'Please select an image under 5MB',
+        variant: 'destructive'
+      });
+      return;
+    }
+
+    setUploading(true);
+    try {
+      // Create a mock upload for now - in real implementation would upload to CloudFlare
+      const mockImageId = `avatar_${Date.now()}`;
+      const mockImageUrl = URL.createObjectURL(file);
+      
+      await onUpload(mockImageId, mockImageUrl);
+      
+      toast({
+        title: 'Image uploaded',
+        description: 'Your image has been uploaded successfully'
+      });
+    } catch (error: any) {
+      toast({
+        title: 'Upload failed',
+        description: error.message || 'Failed to upload image',
+        variant: 'destructive'
+      });
+    } finally {
+      setUploading(false);
+      // Reset input
+      event.target.value = '';
+    }
+  };
+
+  return (
+    <div className="relative">
+      <Input
+        type="file"
+        accept="image/*"
+        onChange={handleFileSelect}
+        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+        disabled={disabled || uploading}
+      />
+      {children || (
+        <Button variant="outline" disabled={disabled || uploading}>
+          <Upload className="w-4 h-4 mr-2" />
+          {uploading ? 'Uploading...' : 'Upload Image'}
+        </Button>
+      )}
+    </div>
+  );
+}