AI Coach messages bookmarking. Top bar refined.

src/components/Profile.tsx

@@ -11,6 +11,8 @@ import { t } from '../services/i18n';
 import Snackbar from './Snackbar';
 import { Button } from './ui/Button';
 import { Card } from './ui/Card';
+import { TopBar } from './ui/TopBar';
+
 import { Modal } from './ui/Modal';
 import { SideSheet } from './ui/SideSheet';
 import { Checkbox } from './ui/Checkbox';
@@ -267,15 +269,15 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
 
     return (
         <div className="h-full flex flex-col bg-surface">
-            <div className="p-4 bg-surface-container shadow-elevation-1 flex items-center justify-between z-10 shrink-0">
-                <h2 className="text-xl font-normal text-on-surface flex items-center gap-2">
-                    <UserIcon size={20} />
-                    {t('profile_title', lang)}
-                </h2>
-                <Button onClick={onLogout} variant="ghost" size="sm" className="text-error hover:bg-error-container/10">
-                    <LogOut size={16} className="mr-1" /> {t('logout', lang)}
-                </Button>
-            </div>
+            <TopBar
+                title={t('profile_title', lang)}
+                icon={UserIcon}
+                actions={
+                    <Button onClick={onLogout} variant="ghost" size="sm" className="text-error hover:bg-error-container/10">
+                        <LogOut size={16} className="mr-1" /> {t('logout', lang)}
+                    </Button>
+                }
+            />
 
             <div className="flex-1 overflow-y-auto p-4 space-y-6 pb-24">
                 <div className="max-w-2xl mx-auto space-y-6">