From a6c90941d29c2fd53124fd9de4171ab9aaed9f9d Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Wed, 2 Sep 2026 21:56:28 +0700
Subject: [PATCH] =?UTF-8?q?Ensure=20Become-Skater=20=E2=86=94=20Profile=20?=
 =?UTF-8?q?field=20consistency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fields collected on the Become-Skater form were being dropped on the profile:
- Instagram: now rendered in the profile Info card (normalizes @handle / full URL, links to instagram.com), matching where website/lightning live
- Location (city/area): now shown as "Based in" in the skate-layer stats row
- hasSkateLayer now also triggers on location/instagram so the skate card renders even when those are the only fields filled

All other fields (photo from kind-0, bio, styles, stance, level/custom level, years, home spot + mapped link, website) already round-trip consistently between the two pages.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/pages/NIP19Page.tsx | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/pages/NIP19Page.tsx b/src/pages/NIP19Page.tsx
index f67abb3..916d664 100644
--- a/src/pages/NIP19Page.tsx
+++ b/src/pages/NIP19Page.tsx
@@ -32,6 +32,7 @@ import {
   Copy,
   Check,
   ShieldCheck,
+  Instagram,
   Users,
   Crown,
   Bot,
@@ -95,7 +96,7 @@ function ProfilePage({ pubkey }: { pubkey: string }) {
   const skaterWebsite = skater?.website || website;
   const hasSkateLayer = !!skater && (
     !!stanceMeta || !!levelMeta || !!skater.customLevel || skater.styles.length > 0 ||
-    !!skater.yearsSkating || !!skater.homeSpot
+    !!skater.yearsSkating || !!skater.homeSpot || !!skater.location || !!skater.instagram
   );
 
   const handleCopyNpub = () => {
@@ -328,6 +329,15 @@ function ProfilePage({ pubkey }: { pubkey: string }) {
                         <Link to={spotHref} className="group/home min-w-0">{inner}</Link>
                       ) : inner;
                     })()}
+                    {skater?.location && (
+                      <div className="flex items-center gap-1.5 min-w-0">
+                        <MapPin className="h-4 w-4 text-[#ccff00] flex-shrink-0" />
+                        <div className="leading-tight min-w-0">
+                          <p className="text-[10px] uppercase tracking-wide text-gray-500 font-bold">Based in</p>
+                          <p className="text-white font-bold truncate">{skater.location}</p>
+                        </div>
+                      </div>
+                    )}
                   </div>
 
                   {/* Styles */}
@@ -559,6 +569,23 @@ function ProfilePage({ pubkey }: { pubkey: string }) {
                   </a>
                 )}
 
+                {skater?.instagram && (() => {
+                  const handle = skater.instagram.trim().replace(/^@+/, '').replace(/^https?:\/\/(www\.)?instagram\.com\//i, '').replace(/\/+$/, '');
+                  if (!handle) return null;
+                  return (
+                    <a
+                      href={`https://instagram.com/${handle}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-3 p-3 rounded-lg bg-gray-900 hover:bg-gray-800 transition-colors"
+                    >
+                      <Instagram className="h-4 w-4 text-pink-400 flex-shrink-0" />
+                      <span className="text-gray-300 text-sm truncate">@{handle}</span>
+                      <ExternalLink className="h-3 w-3 text-gray-500 ml-auto flex-shrink-0" />
+                    </a>
+                  );
+                })()}
+
                 {lud16 && (
                   <div className="flex items-center gap-3 p-3 rounded-lg bg-gray-900">
                     <Zap className="h-4 w-4 text-yellow-400 flex-shrink-0" />