Add a real, visible patient-profile button

apps/web/app/_components/AccountMenu.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { LogIn, LogOut, UserRound } from "lucide-react";
+import { ClipboardList, LogIn, LogOut, UserRound } from "lucide-react";
 import type { AuthUser } from "@duoc-thu/shared-types";
 import { logout, me } from "@duoc-thu/api-client";
 
@@ -37,11 +37,10 @@ export function AccountMenu() {
   }
 
   return (
+    <div className="flex items-center gap-1.5">
       <div className="flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface px-3 py-1.5 text-xs font-semibold text-txt-secondary">
         <UserRound className="h-3.5 w-3.5" />
-      <Link href="/profile" className="hover:underline" title="Hồ sơ bệnh nhân">
-        {user.username}
-      </Link>
+        <span>{user.username}</span>
         <button
           aria-label="Đăng xuất"
           onClick={async () => {
@@ -54,5 +53,17 @@ export function AccountMenu() {
           <LogOut className="h-3.5 w-3.5" />
         </button>
       </div>
+      {/* A real, labeled button — not a tooltip hidden on plain text (that
+       * shipped invisible: an owner testing the feature live couldn't find
+       * it at all). Same destination as before, `/profile`. */}
+      <Link
+        href="/profile"
+        title="Hồ sơ bệnh nhân"
+        className="flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface px-3 py-1.5 text-xs font-semibold text-txt-secondary hover:bg-surface-hover"
+      >
+        <ClipboardList className="h-3.5 w-3.5" />
+        <span>Hồ sơ bệnh nhân</span>
+      </Link>
+    </div>
   );
 }