Unify page layouts, compact headers and shared UI styling

frontend/app/profile/page.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import PageHeading from '../ui/PageHeading'
+
 import { useCallback, useEffect, useState, type FormEvent, type KeyboardEvent } from 'react'
 import { useRouter } from 'next/navigation'
 import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
@@ -167,10 +169,9 @@ export default function ProfilePage() {
 
   return (
     <main className="account-page">
-      <header className="account-heading">
-        <div><span className="account-eyebrow">YOUR ACCOUNT</span><h1>My profile</h1></div>
-        {user && <div className="account-identity"><span className="account-avatar" aria-hidden="true">{user.username.slice(0, 1).toUpperCase()}</span><div><strong>{user.username}</strong><span>{user.role === 'admin' ? 'Administrator' : 'Member'}</span></div></div>}
-      </header>
+      <PageHeading title="My profile" description="Your contact details, security, and activity." actions={
+        user && <div className="account-identity"><span className="account-avatar" aria-hidden="true">{user.username.slice(0, 1).toUpperCase()}</span><div><strong>{user.username}</strong><span>{user.role === 'admin' ? 'Administrator' : 'Member'}</span></div></div>
+      } />
 
       {loading ? <p className="account-empty" role="status">Loading your profile…</p> : loadError ? (
         <div className="account-empty"><p role="alert">{loadError}</p><button type="button" className="account-secondary" onClick={() => void loadProfile()}>Try again</button></div>