feat(nav): pass extraPaths to isActiveRoute in DesktopSidebar and MobileTabBar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/nav/DesktopSidebar.svelte

@@ -24,7 +24,7 @@
 				{section.title}
 			</p>
 			{#each section.items as item (item.href)}
-				{@const active = isActiveRoute(item.href, $page.url.pathname)}
+				{@const active = isActiveRoute(item.href, $page.url.pathname, item.extraPaths)}
 				<a
 					href={item.href}
 					aria-current={active ? 'page' : undefined}

frontend/src/lib/nav/DesktopSidebar.test.ts

@@ -59,3 +59,18 @@ describe('DesktopSidebar', () => {
 		expect(widget).toBeInTheDocument();
 	});
 });
+
+describe('DesktopSidebar — extraPaths active state', () => {
+	it('marks Einstellungen active when on /household/staples', async () => {
+		const { readable } = await import('svelte/store');
+		vi.doMock('$app/stores', () => ({
+			page: readable({ url: new URL('http://localhost/household/staples') })
+		}));
+		vi.resetModules();
+		const { render: r, screen: s } = await import('@testing-library/svelte');
+		const { default: Sidebar } = await import('./DesktopSidebar.svelte');
+		r(Sidebar, { props: { appName: 'Test', householdName: 'Test' } });
+		const link = s.getByRole('link', { name: /einstellungen/i });
+		expect(link).toHaveAttribute('aria-current', 'page');
+	});
+});

frontend/src/lib/nav/MobileTabBar.svelte

@@ -8,7 +8,7 @@
 	class="fixed bottom-0 w-full flex justify-around bg-white border-t pb-[env(safe-area-inset-bottom,20px)] md:hidden"
 >
 	{#each mobileNavItems as item (item.href)}
-		{@const active = isActiveRoute(item.href, $page.url.pathname)}
+		{@const active = isActiveRoute(item.href, $page.url.pathname, item.extraPaths)}
 		<a
 			href={item.href}
 			aria-current={active ? 'page' : undefined}

frontend/src/lib/nav/MobileTabBar.test.ts

@@ -53,3 +53,18 @@ describe('MobileTabBar', () => {
 		expect(recipesLink).not.toHaveAttribute('aria-current');
 	});
 });
+
+describe('MobileTabBar — extraPaths active state', () => {
+	it('marks Einstellungen active when on /household/staples', async () => {
+		const { readable } = await import('svelte/store');
+		vi.doMock('$app/stores', () => ({
+			page: readable({ url: new URL('http://localhost/household/staples') })
+		}));
+		vi.resetModules();
+		const { render: r, screen: s } = await import('@testing-library/svelte');
+		const { default: TabBar } = await import('./MobileTabBar.svelte');
+		r(TabBar);
+		const link = s.getByRole('link', { name: /einstellungen/i });
+		expect(link).toHaveAttribute('aria-current', 'page');
+	});
+});