Ensure Become-Skater ↔ Profile field consistency

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>
This commit is contained in:
shakespeare.diy 2026-09-02 21:56:28 +07:00
parent dbae3a1501
commit a6c90941d2

View file

@ -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" />