diff --git a/src/components/CustomizeNavSheet.tsx b/src/components/CustomizeNavSheet.tsx index 31101d1..a2b4d91 100644 --- a/src/components/CustomizeNavSheet.tsx +++ b/src/components/CustomizeNavSheet.tsx @@ -7,10 +7,10 @@ import { DEFAULT_TAB_IDS, type NavTab, } from '@/hooks/useNavPreferences'; -import { useCurrentUser } from '@/hooks/useCurrentUser'; import { useTranslation } from '@/contexts/language'; +import { useCurrentUser } from '@/hooks/useCurrentUser'; import { cn } from '@/lib/utils'; -import { MapPin, User, Lock, ArrowUp, ArrowDown, RotateCcw, Check, Sparkles } from 'lucide-react'; +import { MapPin, MoreHorizontal, Lock, ArrowUp, ArrowDown, RotateCcw, Check, Sparkles } from 'lucide-react'; interface CustomizeNavSheetProps { open: boolean; @@ -20,14 +20,14 @@ interface CustomizeNavSheetProps { /** * Bottom-sheet editor for the mobile nav bar. * - * Layout model: Map (fixed left) · 3 user-picked · Profile (fixed right). + * Layout model: Map (fixed left) · 3 user-picked · More (fixed right). * The user toggles up to 3 destinations from the catalog and can reorder them. * Draft state is local until "Done", so changes feel deliberate and cancelable. */ export function CustomizeNavSheet({ open, onOpenChange }: CustomizeNavSheetProps) { const { middleIds, setMiddleIds, reset, catalog } = useNavPreferences(); - const { user } = useCurrentUser(); const { t } = useTranslation(); + const { user } = useCurrentUser(); // Local draft so we can cancel without persisting. const [draft, setDraft] = useState(middleIds); @@ -115,8 +115,8 @@ export function CustomizeNavSheet({ open, onOpenChange }: CustomizeNavSheetProps } return ; })} - {/* Fixed Profile */} - + {/* Fixed More */} + diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index c01eddb..e776aa1 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -367,21 +367,17 @@ function MobileHeaderUserMenu({ function MobileNav({ isActive, isLoggedIn, - userPubkey, - userAvatar, - userName, t, onCustomize, + onMore, fixedMapTab, middleTabs, }: { isActive: (path: string) => boolean; isLoggedIn: boolean; - userPubkey?: string; - userAvatar?: string; - userName?: string; t: (key: string) => string; onCustomize: () => void; + onMore: () => void; fixedMapTab: NavTab; middleTabs: NavTab[]; }) { @@ -483,60 +479,21 @@ function MobileNav({ {/* CUSTOM: 3 middle tabs */} {resolvedMiddle.map((tab, i) => renderTab(tab, `mid-${tab.id}-${i}`))} - {/* 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 ( - { - e.preventDefault(); - onCustomize(); - }} - className={cn( - 'group relative flex flex-col items-center justify-center gap-1 py-1.5 px-1 flex-1 touch-manipulation active:scale-90 transition-transform duration-150', - tabActive ? 'text-[#ff0040]' : 'text-gray-500' - )} - > - - {isLoggedIn && userPubkey ? ( -
- - - - {(userName || '??').slice(0, 2).toUpperCase()} - - - -
- ) : ( - - )} -
- - {isLoggedIn ? t('chromeUi.profile') : t('chromeUi.logIn')} - - - ); - })()} + {/* FIXED: More — the burger menu owns profile, login, wallet, + settings and every secondary section. */} + @@ -618,7 +575,6 @@ export function Layout({ children, noPadding }: LayoutProps) { const { currentUser: currentAccount, removeLogin } = useLoggedInAccounts(); const author = useAuthor(user?.pubkey || ''); const displayName = author.data?.metadata?.name ?? genUserName(user?.pubkey); - const userAvatar = author.data?.metadata?.picture; const { fixedMapTab, middleTabs, catalog: navCatalog } = useNavPreferences(); const { primaryTabs: desktopPrimaryTabs, @@ -1283,10 +1239,8 @@ export function Layout({ children, noPadding }: LayoutProps) { {/* Mobile Bottom Navigation */} setMobileMenuOpen(true)} isLoggedIn={!!user} - userPubkey={user?.pubkey} - userAvatar={userAvatar} - userName={displayName} t={t} onCustomize={() => setShowCustomizeNav(true)} fixedMapTab={fixedMapTab} diff --git a/src/hooks/useNavPreferences.ts b/src/hooks/useNavPreferences.ts index 40a446e..a440b6e 100644 --- a/src/hooks/useNavPreferences.ts +++ b/src/hooks/useNavPreferences.ts @@ -23,8 +23,8 @@ import { usePreferences } from '@/hooks/usePreferences'; * Bottom-nav customization (mobile). * * Model: the bar always shows a FIXED Map (Shops & Spots) on the left and a - * FIXED Profile/Login slot on the right. The user customizes the **3 middle - * slots** from a curated catalog. Anything they don't pin stays reachable in the + * FIXED More button on the right. The user customizes the **3 middle slots** + * from a curated catalog. Profile/login lives in the header avatar menu. Anything they don't pin stays reachable in the * burger menu, so nothing is ever lost — just re-prioritized. * * Stored per-device in localStorage (v1). Could later sync across devices via a @@ -55,7 +55,7 @@ export const FIXED_MAP_TAB: NavTab = { /** * Everything the user can pin to the 3 middle slots. - * (Map is excluded — it's the fixed anchor. Profile is the fixed right slot.) + * (Map is excluded — it's the fixed anchor. More is the fixed right slot.) */ export const NAV_CATALOG: NavTab[] = [ { id: 'lab', href: '/lab', labelKey: 'nav.lab', label: 'The Lab', icon: GraduationCap }, @@ -75,11 +75,12 @@ export const NAV_CATALOG: NavTab[] = [ ]; /** Number of user-customizable middle slots. */ -export const MIDDLE_SLOTS = 4; +export const MIDDLE_SLOTS = 3; -/** Default middle tabs. Includes Mints (Cashu mint directory) so it's reachable - * from the phone nav out of the box; users can swap any of them via long-press. */ -export const DEFAULT_TAB_IDS = ['lab', 'events', 'crews', 'mints']; +/** Default middle tabs. Keep the mobile bar to five intents total: + * fixed Map + these three + a fixed More button. Everything else lives in the + * burger menu, and users can still swap any middle tab via long-press. */ +export const DEFAULT_TAB_IDS = ['lab', 'events', 'crews']; const STORAGE_KEY = 'skatespots:nav-tabs:v1'; @@ -90,7 +91,7 @@ const STORAGE_KEY = 'skatespots:nav-tabs:v1'; // ever lost. Map is always the first primary tab and cannot be hidden/moved. /** Default desktop primary tabs. */ -export const DEFAULT_DESKTOP_IDS = ['lab', 'events', 'crews', 'mints']; +export const DEFAULT_DESKTOP_IDS = ['lab', 'events', 'crews', 'community']; const DESKTOP_STORAGE_KEY = 'skatespots:desktop-nav:v1';