fix(nav): keep Support pinned in mobile bottom-nav

Previously the bottom nav swapped Support out for Wheel whenever the
operator enabled the wheel feature flag. This left a frustrated
paying customer (a key persona — already mid-ticket, opening the
app to follow up) unable to find help from the primary nav: they had
to know to dig into the hamburger drawer.

Wheel is a brand-moment surface, Support is a critical-path surface.
Replacing the second with the first is the wrong IA trade.

New rule: Support is the floor of the bottom nav and never moves.
Slot 4 still carries an optional item, with Wheel winning over
Referral when both are enabled (operator opted into Wheel as a
deliberate brand moment; Referral users can use the hamburger).

Critique P3 issue.
This commit is contained in:
c0mrade
2026-05-26 23:27:44 +03:00
parent 75f775064c
commit 68a97b896b

View File

@@ -26,16 +26,29 @@ export function MobileBottomNav({
const isActive = (path: string) =>
path === '/' ? location.pathname === '/' : location.pathname.startsWith(path);
// Core navigation items for bottom bar
// When wheel is enabled, it replaces Support in the bottom nav (Support is still accessible via hamburger menu)
// Core navigation items for bottom bar.
//
// Support is ALWAYS present — frustrated paying customers must find help
// in the primary nav, not in the hamburger drawer. Previously Wheel
// (a brand-moment surface) displaced Support (a critical-path surface)
// when the wheel feature flag was on; that trade is hostile to the
// support-user persona and was flagged by the /impeccable critique.
//
// Slot priority when both Wheel and Referral are enabled and only
// four slots remain after Dashboard / Subscriptions / Balance / Support:
// - Wheel wins (operator opted in as a deliberate brand moment)
// - Referral falls back to the hamburger drawer
// When only one of them is enabled, that one fills the slot.
const coreItems = [
{ path: '/', label: t('nav.dashboard'), icon: HomeIcon },
{ path: '/subscriptions', label: t('nav.subscription'), icon: SubscriptionIcon },
{ path: '/balance', label: t('nav.balance'), icon: WalletIcon },
...(referralEnabled ? [{ path: '/referral', label: t('nav.referral'), icon: UsersIcon }] : []),
...(wheelEnabled
? [{ path: '/wheel', label: t('nav.wheel'), icon: WheelIcon }]
: [{ path: '/support', label: t('nav.support'), icon: ChatIcon }]),
: referralEnabled
? [{ path: '/referral', label: t('nav.referral'), icon: UsersIcon }]
: []),
{ path: '/support', label: t('nav.support'), icon: ChatIcon },
];
const handleNavClick = () => {