skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 9 Packages Wiki Activity Actions 1

Mobile bottom nav: Profile tab now opens your profile, not Settings

Browse source 
The avatar "Profile" tab in the mobile bottom bar linked to /settings,
so tapping your own face took you to Settings instead of your public
profile. It now routes to /:npub (View Profile) when logged in, and
still falls back to /settings when logged out (where login lives).
Long-press to customize the nav is preserved.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-09-02 19:23:56 +07:00
parent 9086123240
commit 889f6311ed
1 changed files with 47 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
src/components/Layout.tsx
View file

@ -344,44 +344,53 @@ function MobileNav({
{/* CUSTOM: 3 middle tabs */} {/* CUSTOM: 3 middle tabs */}
{resolvedMiddle.map((tab, i) => renderTab(tab, `mid-${tab.id}-${i}`))} {resolvedMiddle.map((tab, i) => renderTab(tab, `mid-${tab.id}-${i}`))}
{/* FIXED: Profile / Login tab — always lands on Settings root */} {/* FIXED: Profile / Login tab.
<Link Logged in → your public profile (View Profile).
to="/settings" Logged out → Settings (login lives there).
onTouchStart={startPress} Long-press / right-click still opens nav customization. */}
onTouchEnd={cancelPress} {(() => {
onTouchMove={cancelPress} const profileHref = isLoggedIn && userPubkey ? `/${nip19.npubEncode(userPubkey)}` : '/settings';
onContextMenu={(e) => { const tabActive = isActive(profileHref);
e.preventDefault(); return (
onCustomize(); <Link
}} to={profileHref}
className={cn( onTouchStart={startPress}
'relative flex flex-col items-center justify-center gap-0.5 py-1.5 px-1 rounded-xl transition-all duration-150 flex-1 touch-manipulation active:scale-90', onTouchEnd={cancelPress}
isActive('/settings') ? 'text-[#ff0040]' : 'text-gray-500' onTouchMove={cancelPress}
)} onContextMenu={(e) => {
> e.preventDefault();
{isActive('/settings') && ( onCustomize();
<span className="absolute top-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-[#ff0040]" /> }}
)} className={cn(
{isLoggedIn && userPubkey ? ( 'relative flex flex-col items-center justify-center gap-0.5 py-1.5 px-1 rounded-xl transition-all duration-150 flex-1 touch-manipulation active:scale-90',
<div className="relative"> tabActive ? 'text-[#ff0040]' : 'text-gray-500'
<Avatar className={cn( )}
'h-[22px] w-[22px] border-2 transition-transform', >
isActive('/settings') ? 'border-[#ff0040] scale-110' : 'border-gray-600' {tabActive && (
)}> <span className="absolute top-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-[#ff0040]" />
<AvatarImage src={userAvatar} alt={userName} /> )}
<AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-[8px] font-bold"> {isLoggedIn && userPubkey ? (
{(userName || '??').slice(0, 2).toUpperCase()} <div className="relative">
</AvatarFallback> <Avatar className={cn(
</Avatar> 'h-[22px] w-[22px] border-2 transition-transform',
<span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-green-500 border border-black rounded-full" /> tabActive ? 'border-[#ff0040] scale-110' : 'border-gray-600'
</div> )}>
) : ( <AvatarImage src={userAvatar} alt={userName} />
<User className="h-[22px] w-[22px]" /> <AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-[8px] font-bold">
)} {(userName || '??').slice(0, 2).toUpperCase()}
<span className="text-[9px] xs:text-[10px] font-semibold leading-tight tracking-wide uppercase"> </AvatarFallback>
{isLoggedIn ? 'Profile' : 'Log In'} </Avatar>
</span> <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-green-500 border border-black rounded-full" />
</Link> </div>
) : (
<User className="h-[22px] w-[22px]" />
)}
<span className="text-[9px] xs:text-[10px] font-semibold leading-tight tracking-wide uppercase">
{isLoggedIn ? 'Profile' : 'Log In'}
</span>
</Link>
);
})()}
</div> </div>
</div> </div>
</nav> </nav>