skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 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 */}
{resolvedMiddle.map((tab, i) => renderTab(tab, `mid-${tab.id}-${i}`))}
{/* FIXED: Profile / Login tab — always lands on Settings root */}
<Link
to="/settings"
onTouchStart={startPress}
onTouchEnd={cancelPress}
onTouchMove={cancelPress}
onContextMenu={(e) => {
e.preventDefault();
onCustomize();
}}
className={cn(
'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',
isActive('/settings') ? 'text-[#ff0040]' : 'text-gray-500'
)}
>
{isActive('/settings') && (
<span className="absolute top-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-[#ff0040]" />
)}
{isLoggedIn && userPubkey ? (
<div className="relative">
<Avatar className={cn(
'h-[22px] w-[22px] border-2 transition-transform',
isActive('/settings') ? 'border-[#ff0040] scale-110' : 'border-gray-600'
)}>
<AvatarImage src={userAvatar} alt={userName} />
<AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-[8px] font-bold">
{(userName || '??').slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
<span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-green-500 border border-black rounded-full" />
</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>
{/* FIXED: Profile / Login tab.
Logged in → your public profile (View Profile).
Logged out → Settings (login lives there).
Long-press / right-click still opens nav customization. */}
{(() => {
const profileHref = isLoggedIn && userPubkey ? `/${nip19.npubEncode(userPubkey)}` : '/settings';
const tabActive = isActive(profileHref);
return (
<Link
to={profileHref}
onTouchStart={startPress}
onTouchEnd={cancelPress}
onTouchMove={cancelPress}
onContextMenu={(e) => {
e.preventDefault();
onCustomize();
}}
className={cn(
'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',
tabActive ? 'text-[#ff0040]' : 'text-gray-500'
)}
>
{tabActive && (
<span className="absolute top-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-[#ff0040]" />
)}
{isLoggedIn && userPubkey ? (
<div className="relative">
<Avatar className={cn(
'h-[22px] w-[22px] border-2 transition-transform',
tabActive ? 'border-[#ff0040] scale-110' : 'border-gray-600'
)}>
<AvatarImage src={userAvatar} alt={userName} />
<AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-[8px] font-bold">
{(userName || '??').slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
<span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-green-500 border border-black rounded-full" />
</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>
</nav>