UNO refactor (stage 2): Profile → tabbed 2-panel layout

Restructure ProfileScreen UNO-style: tabs (نمایه / مجموعه / تنظیمات). - Basic: player card (avatar/level/name/rank/coins/XP/VIP) BESIDE a stats grid + «زندگیِ حکم» ribbon + achievements summary (landscape 2-column). - Collection: avatar / title / card-front / card-back pickers in panels. - Settings: social + audio + sign-out. All glass cards → .panel; every handler/feature preserved. New profile.tab*/ lifeRibbon i18n. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-11 09:29:11 +03:30
parent 5b2fddee4a
commit 5c00f44fdc
2 changed files with 308 additions and 277 deletions
@@ -41,6 +41,7 @@ export function ProfileScreen() {
  const fileRef = useRef<HTMLInputElement>(null);
  const [editing, setEditing] = useState(false);
  const [name, setName] = useState(profile?.displayName ?? "");
+  const [tab, setTab] = useState<"basic" | "collection" | "settings">("basic");

  if (!profile) return null;
  const canUpload = profile.level >= PHOTO_UPLOAD_MIN_LEVEL;
@@ -67,17 +68,40 @@ export function ProfileScreen() {

  return (
    <ScreenShell>
-      {/* showXp=false: the identity card below already has a detailed XP bar. */}
      <ScreenHeader title={t("profile.title")} showXp={false} />

-      {/* identity */}
+      {/* tabs */}
+      <div className="flex gap-2 mb-4">
+        {(
+          [
+            ["basic", t("profile.tabBasic")],
+            ["collection", t("profile.tabCollection")],
+            ["settings", t("profile.tabSettings")],
+          ] as const
+        ).map(([key, label]) => (
+          <button
+            key={key}
+            onClick={() => setTab(key)}
+            className={cn(
+              "rounded-2xl px-5 py-2 text-sm font-bold transition",
+              tab === key ? "btn-gold" : "panel text-cream/70 hover:text-cream"
+            )}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {/* ===== Basic: player card + stats/achievements ===== */}
+      {tab === "basic" && (
+        <div className="grid gap-4 items-start landscape:grid-cols-[minmax(0,340px)_minmax(0,1fr)]">
+          {/* player card */}
          <motion.div
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ type: "spring", stiffness: 200, damping: 22 }}
-        className="glass rounded-3xl p-5 text-center relative overflow-hidden"
+            className="panel rounded-3xl p-5 text-center relative overflow-hidden"
          >
-        {/* soft gold glow behind avatar */}
            <div className="pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 size-40 bg-gold-500/10 blur-3xl rounded-full" />

            <div className="relative size-20 mx-auto">
@@ -89,7 +113,6 @@ export function ProfileScreen() {
              >
                <Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 80 : 56} />
              </motion.div>
-          {/* level badge */}
              <motion.span
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
@@ -112,9 +135,7 @@ export function ProfileScreen() {
              <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={onUpload} />
            </div>

-        {titleName && (
-          <div className="mt-2 text-xs font-bold text-gold-300">{titleName}</div>
-        )}
+            {titleName && <div className="mt-2 text-xs font-bold text-gold-300">{titleName}</div>}

            {editing ? (
              <div className="mt-3 flex items-center justify-center gap-2">
@@ -167,111 +188,11 @@ export function ProfileScreen() {
            </div>
          </motion.div>

-      {/* avatar picker */}
-      <div className="glass rounded-2xl p-4 mt-4">
-        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.chooseAvatar")}</h3>
-        <div className="flex flex-wrap gap-2">
-          {AVATARS.filter((a) => ownedAvatars.has(a.id)).map((a) => (
-            <button
-              key={a.id}
-              onClick={() => updateProfile({ avatar: a.id })}
-              className={cn(
-                "size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition overflow-hidden",
-                profile.avatar === a.id ? "gold-border ring-2 ring-gold-400/60" : "border border-transparent hover:bg-navy-800"
-              )}
-            >
-              <Avatar id={a.id} size={40} />
-            </button>
-          ))}
-        </div>
-      </div>
+          {/* stats + achievements */}
+          <div className="flex flex-col gap-4">
+            <div className="ribbon rounded-2xl py-2.5 text-center text-base">{t("profile.lifeRibbon")}</div>

-      {/* title picker */}
-      <div className="glass rounded-2xl p-4 mt-4">
-        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.titleLabel")}</h3>
-        <div className="flex flex-wrap gap-2">
-          {TITLES.filter((tt) => profile.ownedTitles.includes(tt.id)).map((tt) => (
-            <button
-              key={tt.id}
-              onClick={() => updateProfile({ title: tt.id })}
-              className={cn(
-                "rounded-lg px-3 py-1.5 text-sm transition",
-                profile.title === tt.id
-                  ? "btn-gold"
-                  : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
-              )}
-            >
-              {locale === "fa" ? tt.nameFa : tt.nameEn}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* card front picker */}
-      <div className="glass rounded-2xl p-4 mt-4">
-        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardFront")}</h3>
-        <div className="flex flex-wrap gap-2">
-          {CARD_FRONTS.filter((c) => ownedFronts.has(c.id)).map((c) => (
-            <button
-              key={c.id}
-              onClick={() => updateProfile({ cardFront: c.id })}
-              className={cn(
-                "rounded-xl p-1.5 flex items-center gap-2 transition",
-                profile.cardFront === c.id
-                  ? "gold-border ring-2 ring-gold-400/60 bg-navy-900/70"
-                  : "bg-navy-900/70 border border-transparent hover:bg-navy-800"
-              )}
-            >
-              <span
-                className="w-7 h-10 rounded-md border flex items-center justify-center text-xs text-slate-900"
-                style={{ background: `linear-gradient(160deg, ${c.bg1}, ${c.bg2})`, borderColor: c.border }}
-              >
-                ♠
-              </span>
-              <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* card back picker */}
-      <div className="glass rounded-2xl p-4 mt-4">
-        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardBack")}</h3>
-        <div className="flex flex-wrap gap-2">
-          {CARD_BACKS.filter((c) => ownedBacks.has(c.id)).map((c) => (
-            <button
-              key={c.id}
-              onClick={() => updateProfile({ cardBack: c.id })}
-              className={cn(
-                "rounded-xl p-1.5 flex items-center gap-2 transition",
-                profile.cardBack === c.id
-                  ? "gold-border ring-2 ring-gold-400/60 bg-navy-900/70"
-                  : "bg-navy-900/70 border border-transparent hover:bg-navy-800"
-              )}
-            >
-              <span
-                className="w-7 h-10 rounded-md border grid place-items-center"
-                style={{ borderColor: `${c.accent}80`, ...backVisualFromDef(c) }}
-              >
-                <span className="text-[10px]" style={{ color: `${c.accent}dd` }}>
-                  {cardBackMotif(c.pattern, c.motif)}
-                </span>
-              </span>
-              <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* gender + social links */}
-      <SocialSettings />
-
-      {/* audio settings */}
-      <SoundSettings />
-
-      {/* stats */}
-      <div className="glass rounded-2xl p-4 mt-4">
-        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.stats")}</h3>
+            <div className="panel rounded-2xl p-4">
              <div className="grid grid-cols-3 gap-2.5">
                <Stat label={t("profile.games")} value={s.games} />
                <Stat label={t("profile.wins")} value={s.wins} />
@@ -282,8 +203,7 @@ export function ProfileScreen() {
              </div>
            </div>

-      {/* achievements */}
-      <div className="glass rounded-2xl p-4 mt-4 mb-6">
+            <div className="panel rounded-2xl p-4">
              <div className="flex items-center justify-between mb-3">
                <h3 className="text-sm font-bold text-cream/80">
                  {t("profile.achievements")}
@@ -323,9 +243,7 @@ export function ProfileScreen() {
                          unlocked ? "bg-gold-500/10 border-gold-500/40" : "bg-navy-900/50 border-navy-700/50"
                        )}
                      >
-                <span className={cn("text-2xl", !unlocked && "grayscale opacity-50")}>
-                  {a.icon}
-                </span>
+                        <span className={cn("text-2xl", !unlocked && "grayscale opacity-50")}>{a.icon}</span>
                        <div className="flex-1 min-w-0">
                          <div className="text-sm font-semibold text-cream">
                            {locale === "fa" ? a.nameFa : a.nameEn}
@@ -335,10 +253,7 @@ export function ProfileScreen() {
                          </div>
                          {!unlocked && a.goal > 1 && (
                            <div className="h-1.5 rounded-full bg-navy-900 overflow-hidden mt-1.5">
-                      <div
-                        className="h-full bg-gold-500/70"
-                        style={{ width: `${pct}%` }}
-                      />
+                              <div className="h-full bg-gold-500/70" style={{ width: `${pct}%` }} />
                            </div>
                          )}
                        </div>
@@ -348,20 +263,128 @@ export function ProfileScreen() {
                  })}
              </div>
            </div>
+          </div>
+        </div>
+      )}

-      {/* Sign out */}
+      {/* ===== Collection: cosmetics pickers ===== */}
+      {tab === "collection" && (
+        <div className="grid gap-4 items-start landscape:grid-cols-2">
+          {/* avatar picker */}
+          <div className="panel rounded-2xl p-4">
+            <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.chooseAvatar")}</h3>
+            <div className="flex flex-wrap gap-2">
+              {AVATARS.filter((a) => ownedAvatars.has(a.id)).map((a) => (
+                <button
+                  key={a.id}
+                  onClick={() => updateProfile({ avatar: a.id })}
+                  className={cn(
+                    "size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition overflow-hidden",
+                    profile.avatar === a.id ? "gold-border ring-2 ring-gold-400/60" : "border border-transparent hover:bg-navy-800"
+                  )}
+                >
+                  <Avatar id={a.id} size={40} />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* title picker */}
+          <div className="panel rounded-2xl p-4">
+            <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.titleLabel")}</h3>
+            <div className="flex flex-wrap gap-2">
+              {TITLES.filter((tt) => profile.ownedTitles.includes(tt.id)).map((tt) => (
+                <button
+                  key={tt.id}
+                  onClick={() => updateProfile({ title: tt.id })}
+                  className={cn(
+                    "rounded-lg px-3 py-1.5 text-sm transition",
+                    profile.title === tt.id ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
+                  )}
+                >
+                  {locale === "fa" ? tt.nameFa : tt.nameEn}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* card front picker */}
+          <div className="panel rounded-2xl p-4">
+            <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardFront")}</h3>
+            <div className="flex flex-wrap gap-2">
+              {CARD_FRONTS.filter((c) => ownedFronts.has(c.id)).map((c) => (
+                <button
+                  key={c.id}
+                  onClick={() => updateProfile({ cardFront: c.id })}
+                  className={cn(
+                    "rounded-xl p-1.5 flex items-center gap-2 transition",
+                    profile.cardFront === c.id
+                      ? "gold-border ring-2 ring-gold-400/60 bg-navy-900/70"
+                      : "bg-navy-900/70 border border-transparent hover:bg-navy-800"
+                  )}
+                >
+                  <span
+                    className="w-7 h-10 rounded-md border flex items-center justify-center text-xs text-slate-900"
+                    style={{ background: `linear-gradient(160deg, ${c.bg1}, ${c.bg2})`, borderColor: c.border }}
+                  >
+                    ♠
+                  </span>
+                  <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* card back picker */}
+          <div className="panel rounded-2xl p-4">
+            <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardBack")}</h3>
+            <div className="flex flex-wrap gap-2">
+              {CARD_BACKS.filter((c) => ownedBacks.has(c.id)).map((c) => (
+                <button
+                  key={c.id}
+                  onClick={() => updateProfile({ cardBack: c.id })}
+                  className={cn(
+                    "rounded-xl p-1.5 flex items-center gap-2 transition",
+                    profile.cardBack === c.id
+                      ? "gold-border ring-2 ring-gold-400/60 bg-navy-900/70"
+                      : "bg-navy-900/70 border border-transparent hover:bg-navy-800"
+                  )}
+                >
+                  <span
+                    className="w-7 h-10 rounded-md border grid place-items-center"
+                    style={{ borderColor: `${c.accent}80`, ...backVisualFromDef(c) }}
+                  >
+                    <span className="text-[10px]" style={{ color: `${c.accent}dd` }}>
+                      {cardBackMotif(c.pattern, c.motif)}
+                    </span>
+                  </span>
+                  <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ===== Settings ===== */}
+      {tab === "settings" && (
+        <div className="grid gap-4 items-start landscape:grid-cols-2">
+          <SocialSettings />
+          <SoundSettings />
          {isAuthed && (
            <button
              onClick={() => {
                signOut();
                go("home");
              }}
-          className="mt-6 w-full glass rounded-2xl py-3 flex items-center justify-center gap-2 text-rose-300 hover:bg-navy-800/80 transition"
+              className="w-full panel rounded-2xl py-3 flex items-center justify-center gap-2 text-rose-300 hover:bg-navy-800/80 transition"
            >
              <LogOut className="size-4" />
              {t("menu.signOut")}
            </button>
          )}
+        </div>
+      )}
    </ScreenShell>
  );
 }
@@ -408,7 +431,7 @@ function SocialSettings() {
  };

  return (
-    <div className="glass rounded-2xl p-4 mt-4">
+    <div className="panel rounded-2xl p-4">
      <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.social")}</h3>

      {/* gender */}
@@ -492,7 +515,7 @@ function SoundSettings() {
    { id: "playful" as const, label: t("settings.trackPlayful") },
  ];
  return (
-    <div className="glass rounded-2xl p-4 mt-4">
+    <div className="panel rounded-2xl p-4">
      <h3 className="text-sm font-bold text-cream/80 mb-2">{t("settings.audio")}</h3>
      <ToggleRow icon={<Volume2 className="size-4 text-gold-400" />} label={t("settings.sound")} on={sfx} onClick={toggleSfx} />
      <ToggleRow icon={<Music className="size-4 text-gold-400" />} label={t("settings.music")} on={music} onClick={toggleMusic} />
@@ -155,6 +155,10 @@ const fa: Dict = {
  "friends.message": "پیام",

  "profile.title": "پروفایل",
+  "profile.tabBasic": "نمایه",
+  "profile.tabCollection": "مجموعه",
+  "profile.tabSettings": "تنظیمات",
+  "profile.lifeRibbon": "زندگیِ حکم",
  "profile.stats": "آمار",
  "profile.games": "بازی‌ها",
  "profile.wins": "بردها",
@@ -500,6 +504,10 @@ const en: Dict = {
  "friends.message": "Message",

  "profile.title": "Profile",
+  "profile.tabBasic": "Profile",
+  "profile.tabCollection": "Collection",
+  "profile.tabSettings": "Settings",
+  "profile.lifeRibbon": "Hokm Life",
  "profile.stats": "Stats",
  "profile.games": "Games",
  "profile.wins": "Wins",