Add "login as user" to user profile card

Extract ImpersonateButton into a shared component and reuse it on the
admin user profile page (header, hidden for admins) — same behaviour as
the users list.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/admin/users/[userId]/page.tsx

@@ -5,6 +5,7 @@ import { UserEnrollmentManager } from "@/components/admin/user-enrollment-manage
 import { UserContactEditor } from "@/components/admin/user-contact-editor";
 import { UserBalanceBlock } from "@/components/admin/user-balance-block";
 import { ResetPasswordButton } from "@/components/admin/reset-password-button";
+import { ImpersonateButton } from "@/components/admin/impersonate-button";
 
 interface Props {
   params: Promise<{ userId: string }>;
@@ -63,6 +64,9 @@ export default async function UserPage({ params }: Props) {
           <div>
             <h1 className="text-xl font-bold">{user.name}</h1>
             <p className="text-sm mt-0.5" style={{ color: "var(--muted-foreground)" }}>{user.email}</p>
+            {user.role !== "admin" && (
+              <ImpersonateButton userId={userId} className="mt-3" />
+            )}
           </div>
           <div className="flex flex-col items-end gap-1">
             <span className="tag-aubade">{roleLabel[user.role] ?? user.role}</span>