Better form control and profile page

App.tsx

@@ -3,13 +3,14 @@ import { Dashboard } from './components/Dashboard';
 import { Inventory } from './components/Inventory';
 import { ProtocolChecker } from './components/ProtocolChecker';
 import { Onboarding } from './components/Onboarding';
+import { ProfileSettings } from './components/ProfileSettings';
 import { LoginForm } from './components/auth/LoginForm';
 import { SignUpForm } from './components/auth/SignUpForm';
 import { EmailVerification } from './components/auth/EmailVerification';
 import { ForgotPassword } from './components/auth/ForgotPassword';
 import { ResetPassword } from './components/auth/ResetPassword';
 import { useSession, signOut } from './lib/auth-client';
-import { LayoutDashboard, Package, FileCheck, LogOut } from 'lucide-react';
+import { LayoutDashboard, Package, FileCheck, LogOut, UserCircle } from 'lucide-react';
 
 const logo = '/logo.png';
 
@@ -23,7 +24,7 @@ type AppView =
   | 'onboarding'
   | 'app';
 
-type Tab = 'dashboard' | 'inventory' | 'protocol';
+type Tab = 'dashboard' | 'inventory' | 'protocol' | 'profile';
 
 function isResetPasswordRoute() {
   return (
@@ -135,10 +136,20 @@ export default function App() {
             );
           })}
         </nav>
-        <div className="p-4 border-t border-border">
-          <div className="text-xs text-muted-foreground mb-2 truncate px-1">
-            {session.user.email}
-          </div>
+        <div className="p-4 border-t border-border space-y-1">
+          <button
+            onClick={() => setActiveTab('profile')}
+            className={`w-full flex items-center gap-3 px-4 py-2 rounded-lg transition-colors text-sm ${
+              activeTab === 'profile'
+                ? 'bg-accent text-primary'
+                : 'text-muted-foreground hover:bg-muted'
+            }`}
+          >
+            <UserCircle className="w-4 h-4 shrink-0" />
+            <span className="truncate text-left">
+              {session.user.name || session.user.email}
+            </span>
+          </button>
           <button
             onClick={() => signOut()}
             className="w-full flex items-center gap-3 px-4 py-2 rounded-lg text-muted-foreground hover:bg-muted transition-colors text-sm"
@@ -152,6 +163,7 @@ export default function App() {
         {activeTab === 'dashboard' && <Dashboard setActiveTab={setActiveTab} />}
         {activeTab === 'inventory' && <Inventory />}
         {activeTab === 'protocol' && <ProtocolChecker />}
+        {activeTab === 'profile' && <ProfileSettings />}
       </main>
     </div>
   );