feat: Add photo upload component for user and child profiles

- Created reusable PhotoUpload component with avatar preview
- Added photo upload to child create/edit dialog
- Added profile photo upload to settings page
- Show photo preview with fallback icon
- Display camera button for future file upload integration
- Support URL paste for immediate photo display
- Updated API types to support photoUrl field

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/app/settings/page.tsx

@@ -17,6 +17,7 @@ import { LanguageSelector } from '@/components/settings/LanguageSelector';
 import { MeasurementUnitSelector } from '@/components/settings/MeasurementUnitSelector';
 import { TimeZoneSelector } from '@/components/settings/TimeZoneSelector';
 import { TimeFormatSelector } from '@/components/settings/TimeFormatSelector';
+import { PhotoUpload } from '@/components/common/PhotoUpload';
 import { motion } from 'framer-motion';
 import { useTranslation } from '@/hooks/useTranslation';
 
@@ -24,6 +25,7 @@ export default function SettingsPage() {
   const { t } = useTranslation('settings');
   const { user, logout, refreshUser } = useAuth();
   const [name, setName] = useState(user?.name || '');
+  const [photoUrl, setPhotoUrl] = useState(user?.photoUrl || '');
   const [timezone, setTimezone] = useState(user?.timezone || 'UTC');
   const [timeFormat, setTimeFormat] = useState<'12h' | '24h'>(user?.preferences?.timeFormat || '12h');
   const [settings, setSettings] = useState({
@@ -50,11 +52,14 @@ export default function SettingsPage() {
     }
   }, [user?.preferences]);
 
-  // Sync name and timezone state when user data changes
+  // Sync name, photo, and timezone state when user data changes
   useEffect(() => {
     if (user?.name) {
       setName(user.name);
     }
+    if (user?.photoUrl) {
+      setPhotoUrl(user.photoUrl);
+    }
     if (user?.timezone) {
       setTimezone(user.timezone);
     }
@@ -74,6 +79,7 @@ export default function SettingsPage() {
     try {
       const response = await usersApi.updateProfile({
         name: name.trim(),
+        photoUrl: photoUrl || undefined,
         timezone,
         preferences: {
           ...settings,
@@ -135,6 +141,13 @@ export default function SettingsPage() {
               {t('profile.title')}
             </Typography>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }}>
+              <PhotoUpload
+                label="Profile Photo"
+                value={photoUrl}
+                onChange={setPhotoUrl}
+                disabled={isLoading}
+                size={100}
+              />
               <TextField
                 label={t('profile.name')}
                 value={name}