feat: add more profile stats and auto-populate edit modal

Exposes four new stats on public profiles (bosses defeated, quests
completed, adventurers recruited, achievements unlocked) with
corresponding visibility toggles. The edit modal now auto-populates
the character name, bio, and settings from the server on open.

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

@@ -1,5 +1,6 @@
 import type { ProfileSettings } from "@elysium/types";
-import { useState } from "react";
+import { DEFAULT_PROFILE_SETTINGS } from "@elysium/types";
+import { useEffect, useState } from "react";
 import { updateProfile } from "../../api/client.js";
 import { useGame } from "../../context/GameContext.js";
 
@@ -11,6 +12,10 @@ const STAT_TOGGLES: { key: keyof ProfileSettings; label: string; icon: string }[
   { key: "showTotalGold", label: "Total Gold Earned", icon: "🪙" },
   { key: "showTotalClicks", label: "Total Clicks", icon: "👆" },
   { key: "showPrestige", label: "Prestige Level", icon: "⭐" },
+  { key: "showBossesDefeated", label: "Bosses Defeated", icon: "💀" },
+  { key: "showQuestsCompleted", label: "Quests Completed", icon: "📜" },
+  { key: "showAdventurersRecruited", label: "Adventurers Recruited", icon: "⚔️" },
+  { key: "showAchievementsUnlocked", label: "Achievements Unlocked", icon: "🏆" },
   { key: "showGuildFounded", label: "Guild Founded Date", icon: "📅" },
 ];
 
@@ -20,16 +25,35 @@ export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.
 
   const [characterName, setCharacterName] = useState(player?.characterName ?? "");
   const [bio, setBio] = useState("");
-  const [settings, setSettings] = useState<ProfileSettings>({
-    showTotalGold: true,
-    showTotalClicks: true,
-    showPrestige: true,
-    showGuildFounded: true,
-  });
+  const [settings, setSettings] = useState<ProfileSettings>({ ...DEFAULT_PROFILE_SETTINGS });
+  const [loadingProfile, setLoadingProfile] = useState(true);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [saved, setSaved] = useState(false);
 
+  // Fetch current profile to auto-populate bio and settings
+  useEffect(() => {
+    if (!player?.discordId) return;
+    fetch(`/api/profile/${player.discordId}`)
+      .then(async (res) => {
+        if (!res.ok) return;
+        const data = (await res.json()) as {
+          bio: string;
+          profileSettings: ProfileSettings;
+          characterName: string;
+        };
+        setBio(data.bio ?? "");
+        setSettings({ ...DEFAULT_PROFILE_SETTINGS, ...data.profileSettings });
+        setCharacterName(data.characterName ?? player.characterName ?? "");
+      })
+      .catch(() => {
+        // Fall back to local state if fetch fails — not a blocking error
+      })
+      .finally(() => {
+        setLoadingProfile(false);
+      });
+  }, [player?.discordId, player?.characterName]);
+
   const handleSave = async (): Promise<void> => {
     setSaving(true);
     setError(null);
@@ -63,75 +87,79 @@ export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.
           </button>
         </div>
 
-        <div className="edit-profile-form">
-          <label className="edit-profile-label" htmlFor="edit-char-name">
-            Display Name
-          </label>
-          <input
-            className="edit-profile-input"
-            id="edit-char-name"
-            maxLength={32}
-            placeholder="Your character's name"
-            type="text"
-            value={characterName}
-            onChange={(e) => { setCharacterName(e.target.value); }}
-          />
-          <span className="edit-profile-hint">{characterName.length} / 32</span>
+        {loadingProfile ? (
+          <p className="edit-profile-loading">Loading your profile…</p>
+        ) : (
+          <div className="edit-profile-form">
+            <label className="edit-profile-label" htmlFor="edit-char-name">
+              Display Name
+            </label>
+            <input
+              className="edit-profile-input"
+              id="edit-char-name"
+              maxLength={32}
+              placeholder="Your character's name"
+              type="text"
+              value={characterName}
+              onChange={(e) => { setCharacterName(e.target.value); }}
+            />
+            <span className="edit-profile-hint">{characterName.length} / 32</span>
 
-          <label className="edit-profile-label" htmlFor="edit-bio">
-            Bio
-          </label>
-          <textarea
-            className="edit-profile-textarea"
-            id="edit-bio"
-            maxLength={200}
-            placeholder="Tell the world about your guild… (optional)"
-            rows={3}
-            value={bio}
-            onChange={(e) => { setBio(e.target.value); }}
-          />
-          <span className="edit-profile-hint">{bio.length} / 200</span>
+            <label className="edit-profile-label" htmlFor="edit-bio">
+              Bio
+            </label>
+            <textarea
+              className="edit-profile-textarea"
+              id="edit-bio"
+              maxLength={200}
+              placeholder="Tell the world about your guild… (optional)"
+              rows={3}
+              value={bio}
+              onChange={(e) => { setBio(e.target.value); }}
+            />
+            <span className="edit-profile-hint">{bio.length} / 200</span>
 
-          <div className="edit-profile-section">
-            <p className="edit-profile-label">Visible Stats</p>
-            <p className="edit-profile-sublabel">Choose which stats appear on your public profile.</p>
-            <div className="stat-toggles">
-              {STAT_TOGGLES.map(({ key, label, icon }) => (
-                <button
-                  key={key}
-                  className={`stat-toggle-btn ${settings[key] ? "stat-toggle-on" : "stat-toggle-off"}`}
-                  onClick={() => { toggleSetting(key); }}
-                  type="button"
-                >
-                  <span>{icon} {label}</span>
-                  <span className="stat-toggle-indicator">
-                    {settings[key] ? "✓ Shown" : "Hidden"}
-                  </span>
-                </button>
-              ))}
+            <div className="edit-profile-section">
+              <p className="edit-profile-label">Visible Stats</p>
+              <p className="edit-profile-sublabel">Choose which stats appear on your public profile.</p>
+              <div className="stat-toggles">
+                {STAT_TOGGLES.map(({ key, label, icon }) => (
+                  <button
+                    key={key}
+                    className={`stat-toggle-btn ${settings[key] ? "stat-toggle-on" : "stat-toggle-off"}`}
+                    onClick={() => { toggleSetting(key); }}
+                    type="button"
+                  >
+                    <span>{icon} {label}</span>
+                    <span className="stat-toggle-indicator">
+                      {settings[key] ? "✓ Shown" : "Hidden"}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {error && <p className="edit-profile-error">{error}</p>}
+
+            <div className="edit-profile-actions">
+              <button
+                className="edit-profile-cancel"
+                onClick={onClose}
+                type="button"
+              >
+                Cancel
+              </button>
+              <button
+                className="edit-profile-save"
+                disabled={saving || !characterName.trim()}
+                onClick={() => { void handleSave(); }}
+                type="button"
+              >
+                {saved ? "✓ Saved!" : saving ? "Saving…" : "Save Profile"}
+              </button>
             </div>
           </div>
-
-          {error && <p className="edit-profile-error">{error}</p>}
-
-          <div className="edit-profile-actions">
-            <button
-              className="edit-profile-cancel"
-              onClick={onClose}
-              type="button"
-            >
-              Cancel
-            </button>
-            <button
-              className="edit-profile-save"
-              disabled={saving || !characterName.trim()}
-              onClick={() => { void handleSave(); }}
-              type="button"
-            >
-              {saved ? "✓ Saved!" : saving ? "Saving…" : "Save Profile"}
-            </button>
-          </div>
-        </div>
+        )}
       </div>
     </div>
   );