Merge pull request #180 from phattbeats/pha1283-velvet-box

PHA-1283: keep the challenge-coin velvet box (empty case, no explainer)

Author: phattbeats

src/app/(app)/players/[id]/page.tsx

@@ -316,7 +316,7 @@ export default async function PlayerProfilePage({
       )}
 
       {/* Challenge coins (PHA-1278) — collectible Major-logo shelf */}
-      <ChallengeCoinShelf coins={challengeCoins} />
+      <ChallengeCoinShelf coins={challengeCoins} isSelf={isSelf} />
 
       {/* Your Majors (PHA-1283) — moved off Settings onto your own profile, where
           the rest of your record already lives. Self only. */}

src/app/globals.css

@@ -913,7 +913,16 @@ main.shell.with-nav-action { padding-bottom: calc(152px + env(safe-area-inset-bo
   color: #eccd92; background: rgba(0,0,0,0.3); border: 1px solid rgba(196,154,84,0.4);
   border-radius: 999px; padding: 1px 8px; line-height: 1.6;
 }
-.coin-shelf-empty { font-size: 13px; color: #e7c39e; margin: 0; line-height: 1.5; }
+/* Empty velvet recess (PHA-1283) — a sunken circular slot awaiting a coin, with
+   a faint dashed gold rim so the empty case still reads as a display case. */
+.coin-shelf .coin-collectible-disc.coin-slot-empty {
+  border-radius: 50%;
+  border: 1px dashed rgba(196,154,84,0.45);
+  background:
+    radial-gradient(120% 120% at 50% 30%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
+  box-shadow: inset 0 4px 14px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.25);
+  filter: none;
+}
 /* each coin sits in a soft velvet recess */
 .coin-shelf .coin-collectible-disc {
   border-radius: 50%;

src/components/heat/ChallengeCoinShelf.tsx

@@ -4,10 +4,10 @@
  * and steel for taking part. Server component (no interactivity) — it just lays
  * out the pre-rendered coin art the pure core resolves.
  *
- * Empty by design until a Major concludes (coins mint on archive). An empty
- * shelf stays hidden entirely — no explainer, no empty rack (PHA-1283: let the
- * shelf speak for itself once coins land). It surfaces only when there's a coin
- * to show.
+ * Empty by design until a Major concludes (coins mint on archive). On your own
+ * profile the velvet display case still shows with empty recesses — no explainer
+ * text (PHA-1283: let people figure it out), just an obvious home for coins to
+ * land. On someone else's it stays hidden so a fresh profile isn't cluttered.
  */
 
 import { type ChallengeCoin } from "@/lib/challenge-coin-core";
@@ -26,12 +26,32 @@ function ordSuffix(n: number): string {
 
 export function ChallengeCoinShelf({
   coins,
+  isSelf,
 }: {
   coins: ChallengeCoin[];
+  isSelf: boolean;
 }) {
-  // Nothing to show until the first coin mints — no explainer, no empty rack
-  // (PHA-1283). The populated shelf below is self-explanatory.
-  if (coins.length === 0) return null;
+  // Empty velvet case on your own profile — the display case stays so there's an
+  // obvious home for coins, but the explainer text is gone (PHA-1283). Three
+  // empty recesses read as "a coin sits in each of these" without spelling it
+  // out. Hidden on other people's profiles so a fresh one isn't cluttered.
+  if (coins.length === 0) {
+    if (!isSelf) return null;
+    return (
+      <section className="coin-shelf">
+        <div className="coin-shelf-head">
+          <span className="eyebrow-mono">CHALLENGE COINS</span>
+        </div>
+        <div className="coin-shelf-grid" aria-hidden="true">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="coin-collectible">
+              <div className="coin-collectible-disc coin-slot-empty" />
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  }
 
   return (
     <section className="coin-shelf">