From 0dc907b75c2a479ed1136073ae05f2e9e4c3d990 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sun, 26 Apr 2026 19:37:51 +0200
Subject: [PATCH] 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>
---
 app/(app)/layout.tsx                   |  4 ++--
 app/(app)/settings/page.tsx            |  3 ++-
 components/settings/profile-editor.tsx | 20 +++++++++++++++++++-
 components/shared/nav-bar.tsx          |  6 +++---
 components/shared/user-menu.tsx        |  6 +++---
 5 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
index 5bc6df2..5bb4999 100644
--- a/app/(app)/layout.tsx
+++ b/app/(app)/layout.tsx
@@ -17,7 +17,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
   const [user, userRoles] = await Promise.all([
     prisma.user.findUnique({
       where: { id: session.userId },
-      select: { username: true, bio: true },
+      select: { username: true, email: true },
     }),
     prisma.userRole.findMany({
       where: { user_id: session.userId },
@@ -40,7 +40,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
         roles={roles}
         userId={session.userId}
         username={user.username}
-        bio={user.bio}
+        email={user.email}
       />
       <MinWidthBanner />
       <main id="main-content" className="flex-1 flex flex-col overflow-y-auto min-h-0">
diff --git a/app/(app)/settings/page.tsx b/app/(app)/settings/page.tsx
index 0c57363..70e0466 100644
--- a/app/(app)/settings/page.tsx
+++ b/app/(app)/settings/page.tsx
@@ -13,7 +13,7 @@ export default async function SettingsPage() {
   const [user, userRoles, ownedProducts, memberships] = await Promise.all([
     prisma.user.findUnique({
       where: { id: session.userId },
-      select: { username: true, bio: true, bio_detail: true, avatar_data: true, updated_at: true },
+      select: { username: true, email: true, bio: true, bio_detail: true, avatar_data: true, updated_at: true },
     }),
     prisma.userRole.findMany({ where: { user_id: session.userId } }),
     prisma.product.findMany({
@@ -58,6 +58,7 @@ export default async function SettingsPage() {
           <p className="text-sm text-muted-foreground">Niet beschikbaar in demo-modus.</p>
         ) : (
           <ProfileEditor
+            email={user?.email ?? null}
             bio={user?.bio ?? null}
             bioDetail={user?.bio_detail ?? null}
             hasAvatar={!!user?.avatar_data}
diff --git a/components/settings/profile-editor.tsx b/components/settings/profile-editor.tsx
index 164f736..5c81963 100644
--- a/components/settings/profile-editor.tsx
+++ b/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
diff --git a/components/shared/nav-bar.tsx b/components/shared/nav-bar.tsx
index bafdd5c..f52685a 100644
--- a/components/shared/nav-bar.tsx
+++ b/components/shared/nav-bar.tsx
@@ -14,10 +14,10 @@ interface NavBarProps {
   roles: string[]
   userId: string
   username: string
-  bio: string | null
+  email: string | null
 }
 
-export function NavBar({ isDemo, roles, userId, username, bio }: NavBarProps) {
+export function NavBar({ isDemo, roles, userId, username, email }: NavBarProps) {
   const pathname = usePathname()
   const currentProduct = useProductStore(s => s.currentProduct)
 
@@ -97,7 +97,7 @@ export function NavBar({ isDemo, roles, userId, username, bio }: NavBarProps) {
 
       {/* Rechts: account-menu */}
       <div className="flex items-center gap-2 flex-1 justify-end">
-        <UserMenu userId={userId} username={username} bio={bio} roles={roles} />
+        <UserMenu userId={userId} username={username} email={email} roles={roles} />
       </div>
     </header>
   )
diff --git a/components/shared/user-menu.tsx b/components/shared/user-menu.tsx
index a7c750b..169bda6 100644
--- a/components/shared/user-menu.tsx
+++ b/components/shared/user-menu.tsx
@@ -23,14 +23,14 @@ const ROLE_LABELS: Record<string, string> = {
 interface UserMenuProps {
   userId: string
   username: string
-  bio: string | null
+  email: string | null
   roles: string[]
 }
 
-export function UserMenu({ userId, username, bio, roles }: UserMenuProps) {
+export function UserMenu({ userId, username, email, roles }: UserMenuProps) {
   const initials = username.slice(0, 2).toUpperCase()
   const roleLabels = roles.map((r) => ROLE_LABELS[r]).filter(Boolean)
-  const subtitle = bio?.trim() ? bio.trim() : 'Lokaal account'
+  const subtitle = email?.trim() ? email.trim() : 'Lokaal account'
 
   return (
     <DropdownMenu>