Update homepage routes to include language and mode

apps/homepage/src/components/app-shell/AuthHeader.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { localizedPath, type Locale } from '@/lib/localization/config';
+import { localizedModePath, type Locale } from '@/lib/localization/config';
 import { type ThemePreference } from '@/lib/theme/config';
 import Image from 'next/image';
 import { LocalePill } from './LocalePill';
@@ -13,7 +13,7 @@ interface Props {
 }
 
 export function AuthHeader({ locale, themePreference }: Props) {
-  const homePath = localizedPath('home', locale);
+  const homePath = localizedModePath('home', locale, themePreference);
 
   return (
     <header className={styles.header}>

apps/homepage/src/components/app-shell/BrandLink.tsx

@@ -1,16 +1,25 @@
 'use client';
 
-import { localizedPath, routeIdFromPathname, type Locale } from '@/lib/localization/config';
+import { localizedModePath, routeIdFromPathname, type Locale } from '@/lib/localization/config';
+import type { ThemePreference } from '@/lib/theme/config';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 import styles from './SiteHeader.module.css';
 
-export function BrandLink({ locale, label }: { locale: Locale; label: string }) {
+export function BrandLink({
+  locale,
+  mode,
+  label,
+}: {
+  locale: Locale;
+  mode: ThemePreference;
+  label: string;
+}) {
   const pathname = usePathname();
   return (
     <a
       className={styles.brand}
-      href={localizedPath('home', locale)}
+      href={localizedModePath('home', locale, mode)}
       aria-label={label}
       aria-current={routeIdFromPathname(pathname) === 'home' ? 'page' : undefined}
     >

apps/homepage/src/components/app-shell/HeaderNavigation.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { localizedPath, routeIdFromPathname, type Locale } from '@/lib/localization/config';
+import { localizedModePath, routeIdFromPathname, type Locale } from '@/lib/localization/config';
+import type { ThemePreference } from '@/lib/theme/config';
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import styles from './SiteHeader.module.css';
@@ -9,6 +10,7 @@ export type HeaderNavId = 'product' | 'workflow' | 'modules' | 'pricing' | 'faq'
 
 interface HeaderNavigationProps {
   locale: Locale;
+  mode: ThemePreference;
   label: string;
   labels: Record<HeaderNavId, string>;
   onNavigate?: () => void;
@@ -19,6 +21,7 @@ const navigationIds: HeaderNavId[] = ['product', 'workflow', 'modules', 'pricing
 
 export function HeaderNavigation({
   locale,
+  mode,
   label,
   labels,
   onNavigate,
@@ -35,7 +38,7 @@ export function HeaderNavigation({
     return () => window.removeEventListener('hashchange', updateHash);
   }, []);
 
-  const home = localizedPath('home', locale);
+  const home = localizedModePath('home', locale, mode);
 
   return (
     <nav aria-label={label} className={mobile ? styles.drawerNavigation : styles.navigation}>

apps/homepage/src/components/app-shell/LocalePill.tsx

@@ -36,11 +36,8 @@ export function LocalePill({ locale }: Props) {
     setOpen(false);
     persistLocale(next);
     const routeId = routeIdFromPathname(pathname) ?? 'home';
-    router.push(
-      localeSwitchUrl(new URL(window.location.href), next, routeId).pathname +
-        new URL(window.location.href).search +
-        new URL(window.location.href).hash,
-    );
+    const target = localeSwitchUrl(new URL(window.location.href), next, routeId);
+    router.push(`${target.pathname}${target.search}${target.hash}`);
   };
 
   const otherLocales = locales.filter((l) => l !== locale);

apps/homepage/src/components/app-shell/LocalizedNotFound.tsx

@@ -1,7 +1,11 @@
 'use client';
 
 import { getClientShellMessages } from '@/lib/localization/client-messages';
-import { isLocale, localizedPath } from '@/lib/localization/config';
+import {
+  isLocale,
+  localizedModePath,
+  modeFromPathname,
+} from '@/lib/localization/config';
 import { usePathname } from 'next/navigation';
 import { StateAction, StateActions, StateShell } from './StateShell';
 
@@ -9,11 +13,14 @@ export function LocalizedNotFound() {
   const pathname = usePathname();
   const localeValue = pathname.split('/').filter(Boolean)[0];
   const locale = isLocale(localeValue) ? localeValue : 'en';
+  const mode = modeFromPathname(pathname);
   const messages = getClientShellMessages(locale);
   return (
     <StateShell title={messages.states.notFoundTitle} body={messages.states.notFoundBody}>
       <StateActions>
-        <StateAction href={localizedPath('home', locale)}>{messages.states.backHome}</StateAction>
+        <StateAction href={localizedModePath('home', locale, mode)}>
+          {messages.states.backHome}
+        </StateAction>
       </StateActions>
     </StateShell>
   );

apps/homepage/src/components/app-shell/MobileNavigation.tsx

@@ -2,7 +2,7 @@
 
 import { ActionLink } from '@/components/actions/ActionLink';
 import type { ShellMessages } from '@/lib/localization/messages';
-import { localizedPath, type Locale } from '@/lib/localization/config';
+import { localizedModePath, type Locale } from '@/lib/localization/config';
 import { accountCreateUrl } from '@/lib/account-urls';
 import type { ThemePreference } from '@/lib/theme/config';
 import { useEffect, useRef, useState } from 'react';
@@ -11,8 +11,8 @@ import { LocaleSelector } from './LocaleSelector';
 import styles from './SiteHeader.module.css';
 import { ThemeSelector } from './ThemeSelector';
 
-function signInUrl(locale: Locale): string {
-  return localizedPath('sign-in', locale);
+function signInUrl(locale: Locale, mode: ThemePreference): string {
+  return localizedModePath('sign-in', locale, mode);
 }
 
 interface MobileNavigationProps {
@@ -102,6 +102,7 @@ export function MobileNavigation({
 
           <HeaderNavigation
             locale={locale}
+            mode={themePreference}
             label={messages.header.navigationLabel}
             labels={messages.header.nav}
             mobile
@@ -127,7 +128,7 @@ export function MobileNavigation({
           </div>
 
           <div className={styles.drawerActions}>
-            <ActionLink href={signInUrl(locale)} variant="button-primary">
+            <ActionLink href={signInUrl(locale, themePreference)} variant="button-primary">
               {messages.header.login}
             </ActionLink>
             <ActionLink href={accountCreateUrl(locale)} variant="button-conversion">

apps/homepage/src/components/app-shell/SiteFooter.tsx

@@ -1,36 +1,50 @@
 import { StatusBadge } from '@/components/foundation/StatusBadge';
 import { accountCreateUrl } from '@/lib/account-urls';
-import { localizedPath, type Locale } from '@/lib/localization/config';
+import { localizedModePath, type Locale } from '@/lib/localization/config';
 import type { ShellMessages } from '@/lib/localization/messages';
+import type { ThemePreference } from '@/lib/theme/config';
 import Image from 'next/image';
 import styles from './SiteFooter.module.css';
 
-function signInUrl(locale: Locale): string {
-  return localizedPath('sign-in', locale);
+function signInUrl(locale: Locale, mode: ThemePreference): string {
+  return localizedModePath('sign-in', locale, mode);
 }
 
 interface SiteFooterProps {
   locale: Locale;
+  mode: ThemePreference;
   messages: ShellMessages;
 }
 
-function HashLink({ locale, hash, children }: { locale: Locale; hash: string; children: string }) {
-  return <a href={`${localizedPath('home', locale)}#${hash}`}>{children}</a>;
+function HashLink({
+  locale,
+  mode,
+  hash,
+  children,
+}: {
+  locale: Locale;
+  mode: ThemePreference;
+  hash: string;
+  children: string;
+}) {
+  return <a href={`${localizedModePath('home', locale, mode)}#${hash}`}>{children}</a>;
 }
 
 function PendingRouteLink({
   locale,
+  mode,
   routeId,
   label,
   pending,
 }: {
   locale: Locale;
+  mode: ThemePreference;
   routeId: 'sign-in' | 'forgot-password' | 'privacy' | 'terms' | 'accessibility';
   label: string;
   pending: string;
 }) {
   return (
-    <a className={styles.legalLink} href={localizedPath(routeId, locale)}>
+    <a className={styles.legalLink} href={localizedModePath(routeId, locale, mode)}>
       <span>{label}</span>
       <StatusBadge>{pending}</StatusBadge>
     </a>
@@ -46,7 +60,7 @@ function PendingItem({ label, pending }: { label: string; pending: string }) {
   );
 }
 
-export function SiteFooter({ locale, messages }: SiteFooterProps) {
+export function SiteFooter({ locale, mode, messages }: SiteFooterProps) {
   const footer = messages.footer;
   const year = new Date().getUTCFullYear();
 
@@ -74,22 +88,22 @@ export function SiteFooter({ locale, messages }: SiteFooterProps) {
             <h2 id="footer-product">{footer.groups.product}</h2>
             <ul>
               <li>
-                <HashLink locale={locale} hash="workflow">
+                <HashLink locale={locale} mode={mode} hash="workflow">
                   {footer.links.workflow}
                 </HashLink>
               </li>
               <li>
-                <HashLink locale={locale} hash="modules">
+                <HashLink locale={locale} mode={mode} hash="modules">
                   {footer.links.modules}
                 </HashLink>
               </li>
               <li>
-                <HashLink locale={locale} hash="pricing">
+                <HashLink locale={locale} mode={mode} hash="pricing">
                   {footer.links.pricing}
                 </HashLink>
               </li>
               <li>
-                <HashLink locale={locale} hash="faq">
+                <HashLink locale={locale} mode={mode} hash="faq">
                   {footer.links.faq}
                 </HashLink>
               </li>
@@ -112,7 +126,7 @@ export function SiteFooter({ locale, messages }: SiteFooterProps) {
             <h2 id="footer-account">{footer.groups.account}</h2>
             <ul>
               <li>
-                <a href={signInUrl(locale)}>
+                <a href={signInUrl(locale, mode)}>
                   {footer.links.login}
                 </a>
               </li>
@@ -125,6 +139,7 @@ export function SiteFooter({ locale, messages }: SiteFooterProps) {
               <li>
                 <PendingRouteLink
                   locale={locale}
+                  mode={mode}
                   routeId="privacy"
                   label={footer.links.privacy}
                   pending={footer.pending}
@@ -133,6 +148,7 @@ export function SiteFooter({ locale, messages }: SiteFooterProps) {
               <li>
                 <PendingRouteLink
                   locale={locale}
+                  mode={mode}
                   routeId="terms"
                   label={footer.links.terms}
                   pending={footer.pending}
@@ -141,6 +157,7 @@ export function SiteFooter({ locale, messages }: SiteFooterProps) {
               <li>
                 <PendingRouteLink
                   locale={locale}
+                  mode={mode}
                   routeId="accessibility"
                   label={footer.links.accessibility}
                   pending={footer.pending}

apps/homepage/src/components/app-shell/SiteHeader.tsx

@@ -1,4 +1,4 @@
-import { localizedPath, type Locale } from '@/lib/localization/config';
+import { localizedModePath, type Locale } from '@/lib/localization/config';
 import type { ShellMessages } from '@/lib/localization/messages';
 import type { ThemePreference } from '@/lib/theme/config';
 import { ActionLink } from '@/components/actions/ActionLink';
@@ -10,8 +10,8 @@ import { MobileNavigation } from './MobileNavigation';
 import styles from './SiteHeader.module.css';
 import { ThemePill } from './ThemePill';
 
-function signInUrl(locale: Locale): string {
-  return localizedPath('sign-in', locale);
+function signInUrl(locale: Locale, mode: ThemePreference): string {
+  return localizedModePath('sign-in', locale, mode);
 }
 
 interface SiteHeaderProps {
@@ -24,11 +24,12 @@ export function SiteHeader({ locale, messages, themePreference }: SiteHeaderProp
   return (
     <header className={styles.header}>
       <div className={styles.inner}>
-        <BrandLink locale={locale} label={messages.brandLabel} />
+        <BrandLink locale={locale} mode={themePreference} label={messages.brandLabel} />
 
         <div className={styles.desktopNavigation}>
           <HeaderNavigation
             locale={locale}
+            mode={themePreference}
             label={messages.header.navigationLabel}
             labels={messages.header.nav}
           />
@@ -41,7 +42,7 @@ export function SiteHeader({ locale, messages, themePreference }: SiteHeaderProp
         >
           <LocalePill locale={locale} />
           <ThemePill initialPreference={themePreference} />
-          <ActionLink href={signInUrl(locale)} variant="button-primary">
+          <ActionLink href={signInUrl(locale, themePreference)} variant="button-primary">
             {messages.header.login}
           </ActionLink>
           <ActionLink href={accountCreateUrl(locale)} variant="button-conversion">

apps/homepage/src/components/app-shell/ThemePill.tsx

@@ -2,6 +2,8 @@
 
 import { persistTheme, themePreferenceEvent } from '@/lib/theme/client';
 import { type ThemePreference } from '@/lib/theme/config';
+import { modeSwitchUrl, routeIdFromPathname } from '@/lib/localization/config';
+import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import styles from './ThemePill.module.css';
 
@@ -17,17 +19,15 @@ const labels: Record<ThemePreference, string> = {
 
 export function ThemePill({ initialPreference }: Props) {
   const [pref, setPref] = useState<ThemePreference>(initialPreference);
+  const pathname = usePathname();
+  const router = useRouter();
   const menuRef = useRef<HTMLDivElement | null>(null);
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
-    setPref(initialPreference);
-  }, [initialPreference]);
-
-  useEffect(() => {
-    const handler = () => {
-      const stored = localStorage.getItem('hpc.theme.preference');
-      if (stored === 'light' || stored === 'dark' || stored === 'system') setPref(stored);
+    const handler = (event: Event) => {
+      const next = (event as CustomEvent<ThemePreference>).detail;
+      if (next === 'light' || next === 'dark' || next === 'system') setPref(next);
     };
     window.addEventListener(themePreferenceEvent, handler);
     return () => window.removeEventListener(themePreferenceEvent, handler);
@@ -45,6 +45,9 @@ export function ThemePill({ initialPreference }: Props) {
     setOpen(false);
     persistTheme(next);
     setPref(next);
+    const routeId = routeIdFromPathname(pathname) ?? 'home';
+    const target = modeSwitchUrl(new URL(window.location.href), next, routeId);
+    router.push(`${target.pathname}${target.search}${target.hash}`);
   };
 
   const options: ThemePreference[] = ['light', 'dark', 'system'];

apps/homepage/src/components/app-shell/ThemeSelector.tsx

@@ -2,6 +2,8 @@
 
 import { persistTheme, themePreferenceEvent } from '@/lib/theme/client';
 import { themePreferences, themeStorageKey, type ThemePreference } from '@/lib/theme/config';
+import { modeSwitchUrl, routeIdFromPathname } from '@/lib/localization/config';
+import { usePathname } from 'next/navigation';
 import { useEffect, useId, useState } from 'react';
 import styles from './Controls.module.css';
 
@@ -21,6 +23,8 @@ export function ThemeSelector({
   compact = false,
 }: ThemeSelectorProps) {
   const [preference, setPreference] = useState<ThemePreference>(initialPreference);
+  const pathname = usePathname();
+  const routeId = routeIdFromPathname(pathname) ?? 'home';
   const statusId = useId();
 
   useEffect(() => {
@@ -58,6 +62,9 @@ export function ThemeSelector({
           const nextPreference = event.target.value as ThemePreference;
           setPreference(nextPreference);
           persistTheme(nextPreference);
+          window.location.assign(
+            modeSwitchUrl(new URL(window.location.href), nextPreference, routeId),
+          );
         }}
       >
         {themePreferences.map((option) => (

apps/homepage/src/components/auth/AuthShell.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { localizedPath, type Locale } from '@/lib/localization/config'
+import { localizedModePath, modeFromPathname, type Locale } from '@/lib/localization/config'
 import Image from 'next/image'
+import { usePathname } from 'next/navigation'
 import type { ReactNode } from 'react'
 import styles from './AuthShell.module.css'
 
@@ -13,6 +14,7 @@ interface AuthShellProps {
 }
 
 export function AuthShell({ locale, title, subtitle, children }: AuthShellProps) {
+  const mode = modeFromPathname(usePathname())
   return (
     <main
       id="main-content"
@@ -21,7 +23,7 @@ export function AuthShell({ locale, title, subtitle, children }: AuthShellProps)
     >
       <div className={styles.container}>
         <div className={styles.header}>
-          <a href={localizedPath('home', locale)}>
+          <a href={localizedModePath('home', locale, mode)}>
             <Image
               src="/rentaldrivego.png"
               alt="RentalDriveGo"

apps/homepage/src/components/auth/ForgotPasswordForm.tsx

@@ -5,7 +5,8 @@ import { TextInput } from '@/components/forms/TextInput'
 import { FormField } from '@/components/forms/FormField'
 import { AuthShell } from '@/components/auth/AuthShell'
 import { API_BASE } from '@/lib/api'
-import { localizedPath, type Locale } from '@/lib/localization/config'
+import { localizedModePath, modeFromPathname, type Locale } from '@/lib/localization/config'
+import { usePathname } from 'next/navigation'
 import { useState } from 'react'
 import styles from './AuthForms.module.css'
 
@@ -63,6 +64,7 @@ const dicts: Record<string, Dict> = {
 
 export function ForgotPasswordForm({ locale }: { locale: Locale }) {
   const dict = (dicts[locale] ?? dicts.en) as Dict
+  const mode = modeFromPathname(usePathname())
   const [email, setEmail] = useState('')
   const [loading, setLoading] = useState(false)
   const [sent, setSent] = useState(false)
@@ -94,7 +96,7 @@ export function ForgotPasswordForm({ locale }: { locale: Locale }) {
     }
   }
 
-  const signInHref = localizedPath('sign-in', locale)
+  const signInHref = localizedModePath('sign-in', locale, mode)
 
   return (
     <AuthShell locale={locale} title={dict.title} subtitle={dict.subtitle}>

apps/homepage/src/components/auth/ResetPasswordForm.tsx

@@ -4,8 +4,8 @@ import { Button } from '@/components/actions/Button';
 import { FormField } from '@/components/forms/FormField';
 import { AuthShell } from '@/components/auth/AuthShell';
 import { API_BASE } from '@/lib/api';
-import { localizedPath, type Locale } from '@/lib/localization/config';
-import { useSearchParams } from 'next/navigation';
+import { localizedModePath, modeFromPathname, type Locale } from '@/lib/localization/config';
+import { usePathname, useSearchParams } from 'next/navigation';
 import { Suspense, useState } from 'react';
 import styles from './AuthForms.module.css';
 
@@ -88,6 +88,7 @@ const dicts: Record<string, Dict> = {
 function ResetPasswordContent({ locale }: { locale: Locale }) {
   const dict = (dicts[locale] ?? dicts.en) as Dict;
   const searchParams = useSearchParams();
+  const mode = modeFromPathname(usePathname());
   const token = searchParams.get('token');
 
   const [password, setPassword] = useState('');
@@ -139,8 +140,8 @@ function ResetPasswordContent({ locale }: { locale: Locale }) {
     }
   }
 
-  const signInHref = localizedPath('sign-in', locale);
-  const forgotHref = localizedPath('forgot-password', locale);
+  const signInHref = localizedModePath('sign-in', locale, mode);
+  const forgotHref = localizedModePath('forgot-password', locale, mode);
 
   if (!token) {
     return (

apps/homepage/src/components/auth/SignInForm.tsx

@@ -6,8 +6,8 @@ import { FormField } from '@/components/forms/FormField';
 import { AuthShell } from '@/components/auth/AuthShell';
 import { API_BASE, EMPLOYEE_PROFILE_KEY } from '@/lib/api';
 import { classNames } from '@/lib/components/classNames';
-import { localizedPath, type Locale } from '@/lib/localization/config';
-import { useSearchParams } from 'next/navigation';
+import { localizedModePath, modeFromPathname, type Locale } from '@/lib/localization/config';
+import { usePathname, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 import styles from './AuthForms.module.css';
 
@@ -104,6 +104,7 @@ const dicts: Record<string, Dict> = {
 export function SignInForm({ locale }: { locale: Locale }) {
   const dict = (dicts[locale] ?? dicts.en) as Dict;
   const searchParams = useSearchParams();
+  const mode = modeFromPathname(usePathname());
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [showPassword, setShowPassword] = useState(false);
@@ -236,7 +237,7 @@ export function SignInForm({ locale }: { locale: Locale }) {
     }
   }
 
-  const hrefBase = localizedPath('forgot-password', locale);
+  const hrefBase = localizedModePath('forgot-password', locale, mode);
 
   return (
     <AuthShell locale={locale} title={dict.title} subtitle={dict.subtitle}>