feat: add profile editing (bio, display name, stat visibility)

apps/web/src/components/game/ProfilePage.tsx

@@ -49,6 +49,8 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
     );
   }
 
+  const s = profile.profileSettings;
+
   const avatarUrl = profile.avatar
     ? `https://cdn.discordapp.com/avatars/${discordId}/${profile.avatar}.png?size=128`
     : `https://cdn.discordapp.com/embed/avatars/${parseInt(discordId, 10) % 5}.png`;
@@ -59,6 +61,27 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
     day: "numeric",
   });
 
+  const visibleStats = [
+    s.showTotalGold && {
+      icon: "🪙",
+      value: formatNumber(profile.totalGoldEarned),
+      label: "Total Gold Earned",
+      date: false,
+    },
+    s.showTotalClicks && {
+      icon: "👆",
+      value: formatNumber(profile.totalClicks),
+      label: "Total Clicks",
+      date: false,
+    },
+    s.showGuildFounded && {
+      icon: "📅",
+      value: memberSince,
+      label: "Guild Founded",
+      date: true,
+    },
+  ].filter(Boolean) as Array<{ icon: string; value: string; label: string; date: boolean }>;
+
   return (
     <div className="profile-page">
       <div className="profile-card">
@@ -71,7 +94,7 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
           <div className="profile-identity">
             <h1 className="profile-character-name">{profile.characterName}</h1>
             <p className="profile-username">@{profile.username}</p>
-            {profile.prestigeCount > 0 && (
+            {s.showPrestige && profile.prestigeCount > 0 && (
               <span className="profile-prestige-badge">
                 ⭐ Prestige {profile.prestigeCount}
               </span>
@@ -79,23 +102,23 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
           </div>
         </div>
 
-        <div className="profile-stats">
-          <div className="profile-stat">
-            <span className="profile-stat-icon">🪙</span>
-            <span className="profile-stat-value">{formatNumber(profile.totalGoldEarned)}</span>
-            <span className="profile-stat-label">Total Gold Earned</span>
+        {profile.bio && (
+          <p className="profile-bio">{profile.bio}</p>
+        )}
+
+        {visibleStats.length > 0 && (
+          <div className="profile-stats">
+            {visibleStats.map((stat) => (
+              <div key={stat.label} className="profile-stat">
+                <span className="profile-stat-icon">{stat.icon}</span>
+                <span className={`profile-stat-value ${stat.date ? "profile-stat-date" : ""}`}>
+                  {stat.value}
+                </span>
+                <span className="profile-stat-label">{stat.label}</span>
+              </div>
+            ))}
           </div>
-          <div className="profile-stat">
-            <span className="profile-stat-icon">👆</span>
-            <span className="profile-stat-value">{formatNumber(profile.totalClicks)}</span>
-            <span className="profile-stat-label">Total Clicks</span>
-          </div>
-          <div className="profile-stat">
-            <span className="profile-stat-icon">📅</span>
-            <span className="profile-stat-value profile-stat-date">{memberSince}</span>
-            <span className="profile-stat-label">Guild Founded</span>
-          </div>
-        </div>
+        )}
 
         <div className="profile-actions">
           <button