From 115f8c8f3417e33ecb00265fdfdb8d6269a8e5da Mon Sep 17 00:00:00 2001
From: zen0 <tartnenas_kai@outlook.com>
Date: Fri, 26 Dec 2025 05:48:36 +0800
Subject: [PATCH] fix: show username in profile card from Logto claims

---
 packages/kal-backend/src/lib/context.ts            |  6 ++++--
 packages/kal-frontend/src/app/dashboard/client.tsx | 13 ++++++++-----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/kal-backend/src/lib/context.ts b/packages/kal-backend/src/lib/context.ts
index 32ad951..5f08e6a 100644
--- a/packages/kal-backend/src/lib/context.ts
+++ b/packages/kal-backend/src/lib/context.ts
@@ -23,7 +23,8 @@ async function syncUserFromLogto(
   const now = new Date();
   const usersCollection = db.collection<User>("users");
   
-  const displayName = claims.name || claims.username;
+  // Use name, username, or email (before @) as display name
+  const displayName = claims.name || claims.username || claims.email?.split("@")[0] || "";
 
   // Upsert user - create if not exists, update if exists
   const result = await usersCollection.findOneAndUpdate(
@@ -31,7 +32,8 @@ async function syncUserFromLogto(
     {
       $set: {
         email: claims.email || "",
-        name: displayName,
+        // Only update name if we have a value (don't overwrite with empty)
+        ...(displayName ? { name: displayName } : {}),
         updatedAt: now,
       },
       $setOnInsert: {
diff --git a/packages/kal-frontend/src/app/dashboard/client.tsx b/packages/kal-frontend/src/app/dashboard/client.tsx
index a98d500..67bf6be 100644
--- a/packages/kal-frontend/src/app/dashboard/client.tsx
+++ b/packages/kal-frontend/src/app/dashboard/client.tsx
@@ -29,12 +29,12 @@ export default function DashboardClient({ logtoId, email, name }: DashboardClien
   return (
     <>
       <AuthUpdater logtoId={logtoId} email={email} name={name} />
-      <DashboardContentWrapper expectedLogtoId={logtoId} />
+      <DashboardContentWrapper expectedLogtoId={logtoId} nameProp={name} />
     </>
   );
 }
 
-function DashboardContentWrapper({ expectedLogtoId }: { expectedLogtoId?: string }) {
+function DashboardContentWrapper({ expectedLogtoId, nameProp }: { expectedLogtoId?: string; nameProp?: string | null }) {
   const { logtoId } = useAuth();
   
   // Wait until context is updated with the Logto ID
@@ -46,10 +46,10 @@ function DashboardContentWrapper({ expectedLogtoId }: { expectedLogtoId?: string
     );
   }
 
-  return <DashboardContent />;
+  return <DashboardContent nameProp={nameProp} />;
 }
 
-function DashboardContent() {
+function DashboardContent({ nameProp }: { nameProp?: string | null }) {
   const [showGenerateModal, setShowGenerateModal] = useState(false);
   const [newKeyName, setNewKeyName] = useState("");
   const [newKeyExpiration, setNewKeyExpiration] = useState<"1_week" | "1_month" | "never">("1_month");
@@ -116,6 +116,9 @@ function DashboardContent() {
   const dailyRemaining = Math.max(0, limits.dailyLimit - dailyUsed);
   const dailyPercentage = Math.min(100, (dailyUsed / limits.dailyLimit) * 100);
 
+  // Use userInfo from backend, or fall back to prop from Logto claims
+  const displayName = userInfo?.name || nameProp || "Developer";
+
   return (
     <div className="dashboard-content">
       {/* Usage Stats Section */}
@@ -128,7 +131,7 @@ function DashboardContent() {
             </div>
             <div className="profile-info">
               <p className="profile-name">
-                {isLoadingUser ? "Loading..." : userInfo?.name || "Developer"}
+                {isLoadingUser ? "Loading..." : displayName}
               </p>
               <p className="profile-email">{userInfo?.email}</p>
             </div>