feat(ST-507): add email input to settings and surface in user menu

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/settings/profile-editor.tsx

@@ -8,6 +8,7 @@ import { Textarea } from '@/components/ui/textarea'
 import { updateProfileAction } from '@/actions/profile'
 
 interface ProfileEditorProps {
+  email: string | null
   bio: string | null
   bioDetail: string | null
   hasAvatar: boolean
@@ -17,7 +18,7 @@ interface ProfileEditorProps {
 const ALLOWED = ['image/jpeg', 'image/png', 'image/webp']
 const MAX_BYTES = 12 * 1024 * 1024
 
-export function ProfileEditor({ bio, bioDetail, hasAvatar, avatarVersion }: ProfileEditorProps) {
+export function ProfileEditor({ email, bio, bioDetail, hasAvatar, avatarVersion }: ProfileEditorProps) {
   const [state, formAction, isPending] = useActionState(updateProfileAction, null)
   const [avatarSrc, setAvatarSrc] = useState<string | null>(
     hasAvatar ? `/api/profile/avatar?v=${avatarVersion}` : null
@@ -107,6 +108,23 @@ export function ProfileEditor({ bio, bioDetail, hasAvatar, avatarVersion }: Prof
       </div>
 
       <form action={formAction} className="space-y-4">
+        <div className="space-y-1.5">
+          <label htmlFor="email" className="text-xs font-medium text-foreground">
+            E-mailadres
+          </label>
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            defaultValue={email ?? ''}
+            placeholder="jij@voorbeeld.nl"
+            maxLength={254}
+            disabled={isPending}
+            autoComplete="email"
+          />
+          <p className="text-xs text-muted-foreground">Optioneel — wordt getoond in je accountmenu</p>
+        </div>
+
         <div className="space-y-1.5">
           <label htmlFor="bio" className="text-xs font-medium text-foreground">
             Korte omschrijving