From 126f2c6c5fad01bb1ea004b422df533951d95b12 Mon Sep 17 00:00:00 2001 From: Developer Date: Fri, 25 Sep 2026 15:35:55 -0400 Subject: [PATCH] feat(website): add Group Rides Hub navigation links for authenticated riders --- website/app/account/page.tsx | 14 ++ .../founder-portal/founder-rides.tsx | 29 ++-- .../founder-portal/founder-top-bar.tsx | 12 ++ website/components/site-header-client.tsx | 133 +++++++++++------- website/tests/group-rides-page.test.tsx | 41 ++++++ 5 files changed, 168 insertions(+), 61 deletions(-) diff --git a/website/app/account/page.tsx b/website/app/account/page.tsx index 9dce1b3..2094e66 100644 --- a/website/app/account/page.tsx +++ b/website/app/account/page.tsx @@ -78,6 +78,13 @@ export default function AccountPage() {
{user ? ( <> + + groups + Group Rides Hub +
+ + groups + Group Rides Hub +
-
- add_road - Plan Club Ride - - SOON - +
+ + groups + Live Pack Radar & Hub + +
+ add_road + Plan Club Ride + + SOON + +
diff --git a/website/components/founder-portal/founder-top-bar.tsx b/website/components/founder-portal/founder-top-bar.tsx index 171efba..24a068f 100644 --- a/website/components/founder-portal/founder-top-bar.tsx +++ b/website/components/founder-portal/founder-top-bar.tsx @@ -247,6 +247,18 @@ export function FounderTopBar({ Rider Account + setUserMenuOpen(false)} + role="menuitem" + className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-slate-200 hover:text-brand-cyan hover:bg-surface-container transition-colors text-xs font-semibold" + > + + groups + + Group Rides + + setUserMenuOpen(false)} diff --git a/website/components/site-header-client.tsx b/website/components/site-header-client.tsx index 69ac6f7..e38656d 100644 --- a/website/components/site-header-client.tsx +++ b/website/components/site-header-client.tsx @@ -109,63 +109,85 @@ export function SiteHeaderClient({ signedIn, role }: SiteHeaderProps) { {signedIn ? ( -
- + groups + Group Rides + - {userMenuOpen && ( -
+ - setUserMenuOpen(false)} - role="menuitem" - className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-on-surface hover:text-primary-container hover:bg-surface-container transition-colors text-xs font-semibold" + {userMenuOpen && ( +
- - person - - Rider Account - +
+ + Rider Account + + + {isAdmin ? 'Staff / Administrator' : 'Telemetry Connected'} + +
- setUserMenuOpen(false)} - role="menuitem" - className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-on-surface hover:text-secondary hover:bg-surface-container transition-colors text-xs font-semibold" - > - - shield - - Founder Portal - + setUserMenuOpen(false)} + role="menuitem" + className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-on-surface hover:text-primary-container hover:bg-surface-container transition-colors text-xs font-semibold" + > + + person + + Rider Account + + + setUserMenuOpen(false)} + role="menuitem" + className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-on-surface hover:text-primary-container hover:bg-surface-container transition-colors text-xs font-semibold" + > + + groups + + Group Rides + + + setUserMenuOpen(false)} + role="menuitem" + className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-on-surface hover:text-secondary hover:bg-surface-container transition-colors text-xs font-semibold" + > + + shield + + Founder Portal + {isAdmin && ( )}
+
) : (
person Rider Account + setMobileMenuOpen(false)} + className="px-space-md py-2.5 rounded-xl font-label-md text-label-md transition-colors min-h-[44px] flex items-center gap-2 text-on-surface hover:bg-surface-container" + > + groups + Group Rides + setMobileMenuOpen(false)} diff --git a/website/tests/group-rides-page.test.tsx b/website/tests/group-rides-page.test.tsx index bca6090..c78243a 100644 --- a/website/tests/group-rides-page.test.tsx +++ b/website/tests/group-rides-page.test.tsx @@ -7,6 +7,12 @@ import { JoinRideModal } from '../components/group-rides/join-ride-modal'; import { CreateRideModal } from '../components/group-rides/create-ride-modal'; import { GroupRidesDirectory } from '../components/group-rides/group-rides-directory'; import { INITIAL_GROUP_RIDES } from '../components/group-rides/fixtures'; +import { SiteHeaderClient } from '../components/site-header-client'; + +vi.mock('next/navigation', () => ({ + usePathname: () => '/', + useRouter: () => ({ push: vi.fn(), replace: vi.fn(), back: vi.fn() }), +})); describe('Group Rides Interactive Page & Components', () => { beforeEach(() => { @@ -303,4 +309,39 @@ describe('Group Rides Interactive Page & Components', () => { }); }); }); + + // ============================================================ + // 6. Authenticated Navigation to Group Rides + // ============================================================ + describe('Authenticated Navigation to Group Rides', () => { + it('renders Group Rides quick button and user dropdown link for signed-in users', () => { + render(); + + // Quick header button for signed-in users + const quickGroupRidesBtn = screen.getByTitle('Group Rides Hub'); + expect(quickGroupRidesBtn).toBeDefined(); + expect(quickGroupRidesBtn.getAttribute('href')).toBe('/group-rides'); + + // Open Rider Menu dropdown + const riderMenuBtn = screen.getByRole('button', { name: /open rider menu/i }); + fireEvent.click(riderMenuBtn); + + // Verify Group Rides link exists inside dropdown menu + const groupRidesLinks = screen.getAllByRole('menuitem', { name: /group rides/i }); + expect(groupRidesLinks.length).toBeGreaterThan(0); + expect(groupRidesLinks[0].getAttribute('href')).toBe('/group-rides'); + }); + + it('renders Group Rides in mobile navigation drawer for signed-in users', () => { + render(); + + const hamburgerBtn = screen.getByRole('button', { name: /open navigation menu/i }); + fireEvent.click(hamburgerBtn); + + const groupRidesNavLinks = screen.getAllByRole('link', { name: /group rides/i }); + const mobileDrawerLink = groupRidesNavLinks.find(link => link.getAttribute('href') === '/group-rides'); + expect(mobileDrawerLink).toBeDefined(); + }); + }); }); +