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

19
src/components/Layout.tsx
View file

@ -344,9 +344,16 @@ 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.
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 <Link
to="/settings" to={profileHref}
onTouchStart={startPress} onTouchStart={startPress}
onTouchEnd={cancelPress} onTouchEnd={cancelPress}
onTouchMove={cancelPress} onTouchMove={cancelPress}
@ -356,17 +363,17 @@ function MobileNav({
}} }}
className={cn( 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', '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' tabActive ? 'text-[#ff0040]' : 'text-gray-500'
)} )}
> >
{isActive('/settings') && ( {tabActive && (
<span className="absolute top-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-[#ff0040]" /> <span className="absolute top-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-[#ff0040]" />
)} )}
{isLoggedIn && userPubkey ? ( {isLoggedIn && userPubkey ? (
<div className="relative"> <div className="relative">
<Avatar className={cn( <Avatar className={cn(
'h-[22px] w-[22px] border-2 transition-transform', 'h-[22px] w-[22px] border-2 transition-transform',
isActive('/settings') ? 'border-[#ff0040] scale-110' : 'border-gray-600' tabActive ? 'border-[#ff0040] scale-110' : 'border-gray-600'
)}> )}>
<AvatarImage src={userAvatar} alt={userName} /> <AvatarImage src={userAvatar} alt={userName} />
<AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-[8px] font-bold"> <AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-[8px] font-bold">
@ -382,6 +389,8 @@ function MobileNav({
{isLoggedIn ? 'Profile' : 'Log In'} {isLoggedIn ? 'Profile' : 'Log In'}
</span> </span>
</Link> </Link>
);
})()}
</div> </div>
</div> </div>
</nav> </nav>