web: Add account tab that shows your email address

Author: jahooma

web/src/app/profile/components/account-section.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { useSession } from 'next-auth/react'
+
+import { ProfileSection } from './profile-section'
+
+import { Badge } from '@/components/ui/badge'
+
+export function AccountSection() {
+  const { data: session } = useSession()
+  const email = session?.user?.email
+
+  return (
+    <ProfileSection
+      description="Your account information and settings."
+    >
+      <div className="flex items-center gap-4 p-4 bg-muted/50 rounded-lg">
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-muted-foreground">Email</p>
+          <p className="text-lg font-medium truncate">{email || '-'}</p>
+        </div>
+        <Badge variant="secondary">
+          {session?.user?.email ? 'Verified' : 'Unverified'}
+        </Badge>
+      </div>
+    </ProfileSection>
+  )
+}

web/src/app/profile/page.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import { CreditCard, Shield, Users, Key, Menu } from 'lucide-react'
+import { CreditCard, Shield, Users, Key, Menu, User } from 'lucide-react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import { useState, useEffect, Suspense } from 'react'
 
 
 // Import components
+import { AccountSection } from './components/account-section'
 import { ApiKeysSection } from './components/api-keys-section'
 import { ProfileLoggedOut } from './components/logged-out'
 import { ReferralsSection } from './components/referrals-section'
@@ -44,6 +45,12 @@ const sections = [
     icon: Users,
     component: ReferralsSection,
   },
+  {
+    id: 'account',
+    title: 'Account',
+    icon: User,
+    component: AccountSection,
+  },
 ]
 
 function ProfileSidebar({