@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/chrome/TopBar.tsx

@@ -1,405 +1,405 @@
-import React, { useState } from 'react';
-import { TranslationFunction } from '../types';
-
-import { Button, Icon, IconButton } from '../ui';
-import logoUrl from '../assets/autode-logo.svg';
-
-/** Where the logo navigates on click. '/' is NOT an SPA route — traefik serves the WordPress
- *  homepage there (generate-routes.py: wp-home at higher priority) — so the logo must be a FULL
- *  navigation (<a href>), never history.push, or the SPA renders its 404 page. */
-const HOME_PATH = '/';
-/** The flagged Autobahn search entry point (pilot). */
-const SEARCH_PATH = '/search';
-
-/**
- * Primary nav (German UI copy — matches the legacy Header destinations, NOT the design's
- * "everything routes to SRP" stub). Car-listing entries stay inside the SPA pilot (/search);
- * the content pages (Finanzierung/Magazin) are real WP routes opened as full navigations.
- */
-const NAV_LINKS: ReadonlyArray<{ labelKey: string; to?: string; href?: string }> = [
-  { labelKey: 'autobahn:chrome.navSearch',    to:   SEARCH_PATH },
-  { labelKey: 'autobahn:chrome.navInform',    href: '/magazin/' },
-  { labelKey: 'autobahn:chrome.navFinancing', href: '/finanzieren/' },
-  { labelKey: 'autobahn:chrome.navInsurance', href: '/versichern/' },
-  { labelKey: 'autobahn:chrome.navService',   href: '/service/kontakt/' },
-  { labelKey: 'autobahn:chrome.navBafa',      href: '/magazin/bafa-praemie-fuer-elektroautos-ab-2026/' },
-  { labelKey: 'autobahn:chrome.navJobs',      href: 'https://jobs.auto.de/' },
-];
-
-/** Account-menu routes (all real fe-main SPA routes — see GuestMenu/ProfileMenu + AppRouter). */
-const R_SIGN_IN = '/login/sign-in';
-const R_SIGN_UP = '/login/sign-up';
-const R_DEALER = '/dealer/sign-up';
-const R_FAVOURITES = '/favourites';
-const R_SAVED_SEARCHES = '/my-searches';
-const R_MY_VEHICLES = '/my-vehicles/overview';
-const R_SETTINGS = '/my-settings';
-const R_MY_ORDERS = '/account/my-orders';
-const R_DEALER_DASHBOARD = '/account/dashboard';
-const R_IMAGE_SETTINGS = '/account/image-settings';
-
-/** Languages offered in the account menu (legacy supports de/en/ru). Labels are proper nouns
- *  (endonyms) and stay untranslated. */
-const LANGS: ReadonlyArray<readonly [code: string, label: string]> = [
-  ['de', 'Deutsch'],
-  ['en', 'English'],
-];
-
-/** Tiny inline flag (self-contained SVG — no external asset, CSP-safe). DE tricolor / UK union jack. */
-const Flag: React.FunctionComponent<{ code: string }> = ({ code }) =>
-  code === 'en' ? (
-    <svg viewBox="0 0 60 30" width="20" height="14" style={{ borderRadius: 2, flex: 'none', display: 'block' }} aria-hidden="true">
-      <clipPath id="uk-clip"><rect width="60" height="30" /></clipPath>
-      <g clipPath="url(#uk-clip)">
-        <rect width="60" height="30" fill="#012169" />
-        <path d="M0,0 60,30 M60,0 0,30" stroke="#fff" strokeWidth="6" />
-        <path d="M0,0 60,30 M60,0 0,30" stroke="#C8102E" strokeWidth="4" />
-        <path d="M30,0 V30 M0,15 H60" stroke="#fff" strokeWidth="10" />
-        <path d="M30,0 V30 M0,15 H60" stroke="#C8102E" strokeWidth="6" />
-      </g>
-    </svg>
-  ) : (
-    <svg viewBox="0 0 5 3" width="20" height="14" style={{ borderRadius: 2, flex: 'none', display: 'block' }} aria-hidden="true">
-      <rect width="5" height="1" y="0" fill="#000" />
-      <rect width="5" height="1" y="1" fill="#DD0000" />
-      <rect width="5" height="1" y="2" fill="#FFCE00" />
-    </svg>
-  );
-
-export interface TopBarProps {
-  /** i18n function (drilled from the page wrapper's this.props.t). */
-  t: TranslationFunction;
-  /** real auth state (authStore.isAuthorized) — guest vs profile menu. */
-  isAuthorized?: boolean;
-  /** label for the authed menu header (authStore.userEmail / profile name). */
-  userLabel?: string;
-  /** Merkliste count (favoriteStore.favoritesIDs.length) — badge on the heart + menu row. */
-  favoritesCount?: number;
-  /** unread Suchaufträge count — badge on the bell. Defaults to 0 (no badge). */
-  notificationCount?: number;
-  /** placed-orders count (profileStore.totalOrdered) — badge on the my-orders menu row. */
-  ordersCount?: number;
-  /** active language tag (appStore.language) — ticks the current language row. */
-  language?: string;
-  /** dealer-main account (authStore.isDealerMain) — shows the dealer menu section. */
-  isDealerMain?: boolean;
-  /** attached dealerships (profileStore.dealers: { dealer: {id, email}, isActive }[]). */
-  dealers?: ReadonlyArray<{ dealer: { id: string; email: string }; isActive: boolean }>;
-  /** switch the active dealership (App.setMainDealer → profileStore.switchDealer). */
-  onDealerSelect?: (dealerId: string) => void;
-  /** sign out (authStore.signOut). */
-  onSignOut?: () => void;
-  /** switch language (appStore.changeLang). */
-  onLangSelect?: (lang: string) => void;
-  /** SPA navigation for internal routes (fe-main passes history.push). Hosts without a
-   *  client-side router (fe-landing, WP widgets) omit it → full page navigation. */
-  onNavigate?: (to: string) => void;
-}
-
-/**
- * Sticky global top app bar (h64) for the Autobahn pilot: mobile hamburger, logo, desktop
- * inline nav, action icons (search / Merkliste / Suchaufträge) and a tonal "Konto" button that
- * opens a REAL MD3 account menu (guest: Anmelden/Registrieren/Händler/Merkliste/Sprache;
- * authed: profile links/Merkliste/Abmelden/Sprache) wired to the live auth routes/actions —
- * replacing the legacy mobile-only SidePanel UserMenu (which rendered unstyled on desktop).
- *
- * Pure MD3 chrome — renders correctly only inside a `<div className="md3">` subtree.
- */
-const TopBar: React.FunctionComponent<TopBarProps> = ({
-  t,
-  isAuthorized = false,
-  userLabel,
-  favoritesCount = 0,
-  notificationCount = 0,
-  ordersCount = 0,
-  language = 'de',
-  isDealerMain = false,
-  dealers = [],
-  onDealerSelect,
-  onSignOut,
-  onLangSelect,
-  onNavigate,
-}) => {
-  const [menu, setMenu] = useState(false); // mobile hamburger dropdown
-  const [account, setAccount] = useState(false); // account popover
-
-  const navigate = onNavigate || ((to: string): void => { window.location.href = to; });
-
-  const goSearch = (): void => {
-    setMenu(false);
-    navigate(SEARCH_PATH);
-  };
-  /** navigate a nav/menu entry: SPA push for `to`, full navigation for external `href`. */
-  const goNav = (item: { to?: string; href?: string }): void => {
-    setMenu(false);
-    setAccount(false);
-    if (item.to) {
-      navigate(item.to);
-    } else if (item.href) {
-      window.location.href = item.href;
-    }
-  };
-  const goRoute = (to: string): void => {
-    setMenu(false);
-    setAccount(false);
-    navigate(to);
-  };
-
-  const renderNav = (cls: string, itemStyle: React.CSSProperties): JSX.Element => (
-    <nav className={cls} style={cls === 'hide-mobile' ? { display: 'flex', gap: 4, marginLeft: 8 } : { flexDirection: 'column', gap: 2 }}>
-      {NAV_LINKS.map((item) => (
-        <a
-          key={item.labelKey}
-          onClick={() => goNav(item)}
-          className={cls === 'hide-mobile' ? 'md-label' : 'md-title-sm'}
-          style={itemStyle}
-        >
-          {t(item.labelKey)}
-        </a>
-      ))}
-    </nav>
-  );
-
-  /** one account-menu row. `key` is a stable identifier; `label` is the (translated) display text. */
-  const row = (key: string, label: string, onClick: () => void, opts?: { icon?: string; primary?: boolean; badge?: number }): JSX.Element => (
-    <button
-      key={key}
-      type="button"
-      className="amenu-row"
-      onClick={onClick}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 10,
-        width: '100%',
-        padding: '10px 14px',
-        border: 0,
-        background: opts && opts.primary ? 'var(--md-primary)' : 'transparent',
-        color: opts && opts.primary ? '#fff' : 'var(--md-on-surface)',
-        borderRadius: opts && opts.primary ? 'var(--md-r-full)' : 0,
-        margin: opts && opts.primary ? '0 0 6px' : 0,
-        cursor: 'pointer',
-        font: 'inherit',
-        fontWeight: opts && opts.primary ? 700 : 500,
-        justifyContent: opts && opts.primary ? 'center' : 'flex-start',
-        textAlign: 'left',
-      }}
-    >
-      {opts && opts.icon && <Icon name={opts.icon} size={17} style={{ flex: 'none' }} />}
-      <span style={{ flex: 1 }}>{label}</span>
-      {opts && typeof opts.badge === 'number' && (
-        <span className="md-label-sm" style={{ fontWeight: 700 }}>{opts.badge}</span>
-      )}
-    </button>
-  );
-
-  const divider = (key: string): JSX.Element => (
-    <div key={key} style={{ height: 1, background: 'var(--md-outline-variant)', margin: '6px 0' }} />
-  );
-
-  const renderAccountMenu = (): JSX.Element => (
-    <div
-      className="amenu mcard"
-      style={{
-        position: 'absolute',
-        top: 'calc(100% + 8px)',
-        right: 0,
-        width: 264,
-        padding: 8,
-        zIndex: 60,
-        boxShadow: 'var(--md-elev-2)',
-      }}
-    >
-      {isAuthorized ? (
-        <>
-          <div className="md-label-sm" style={{ padding: '6px 14px 8px', color: 'var(--md-on-surface-variant)' }}>
-            {userLabel || t('autobahn:chrome.myAccount')}
-          </div>
-          {row('autobahn:chrome.myVehicles', t('autobahn:chrome.myVehicles'), () => goRoute(R_MY_VEHICLES), { icon: 'car' })}
-          {row('autobahn:chrome.myOrders', t('autobahn:chrome.myOrders'), () => goRoute(R_MY_ORDERS), { icon: 'package', badge: ordersCount > 0 ? ordersCount : undefined })}
-          {row('autobahn:chrome.savedSearches', t('autobahn:chrome.savedSearches'), () => goRoute(R_SAVED_SEARCHES), { icon: 'bell' })}
-          {row('autobahn:chrome.favorites', t('autobahn:chrome.favorites'), () => goRoute(R_FAVOURITES), { icon: 'heart', badge: favoritesCount })}
-          {row('autobahn:chrome.settings', t('autobahn:chrome.settings'), () => goRoute(R_SETTINGS), { icon: 'settings' })}
-          {isDealerMain && (
-            <>
-              {divider('d-dealer')}
-              {row('autobahn:chrome.dealerDashboard', t('autobahn:chrome.dealerDashboard'), () => goRoute(R_DEALER_DASHBOARD), { icon: 'store' })}
-              {row('autobahn:chrome.imageSettings', t('autobahn:chrome.imageSettings'), () => goRoute(R_IMAGE_SETTINGS), { icon: 'image' })}
-            </>
-          )}
-          {dealers.length > 1 && (
-            <>
-              <div className="md-label-sm" style={{ padding: '8px 14px 4px', color: 'var(--md-on-surface-variant)' }}>
-                {t('autobahn:chrome.myDealers')} ({dealers.length})
-              </div>
-              {dealers.map((d) =>
-                row(`dealer-${d.dealer.id}`, d.dealer.email, () => {
-                  setAccount(false);
-                  if (!d.isActive && onDealerSelect) onDealerSelect(d.dealer.id);
-                }, { icon: d.isActive ? 'check' : 'store' }),
-              )}
-            </>
-          )}
-          {divider('d1')}
-          {row('autobahn:chrome.signOut', t('autobahn:chrome.signOut'), () => { setAccount(false); if (onSignOut) onSignOut(); }, { icon: 'log-out' })}
-        </>
-      ) : (
-        <>
-          {row('autobahn:chrome.signIn', t('autobahn:chrome.signIn'), () => goRoute(R_SIGN_IN), { primary: true })}
-          {row('autobahn:chrome.register', t('autobahn:chrome.register'), () => goRoute(R_SIGN_UP), { icon: 'user-plus' })}
-          {row('autobahn:chrome.dealerSignUp', t('autobahn:chrome.dealerSignUp'), () => goRoute(R_DEALER), { icon: 'store' })}
-          {divider('d1')}
-          {row('autobahn:chrome.favorites', t('autobahn:chrome.favorites'), () => goRoute(R_FAVOURITES), { icon: 'heart', badge: favoritesCount })}
-        </>
-      )}
-      {divider('d2')}
-      <div className="md-label-sm" style={{ padding: '4px 14px', color: 'var(--md-on-surface-variant)' }}>{t('autobahn:chrome.language')}</div>
-      {LANGS.map(([code, label]) =>
-        row(`lang-${code}`, label, () => { setAccount(false); if (onLangSelect) onLangSelect(code); }, {
-          icon: language === code ? 'check' : 'globe',
-        }),
-      )}
-    </div>
-  );
-
-  return (
-    <header
-      style={{
-        position: 'sticky',
-        top: 0,
-        zIndex: 50,
-        background: 'var(--md-surface)',
-        borderBottom: '1px solid var(--md-outline-variant)',
-      }}
-    >
-      <div
-        className="container"
-        style={{ height: 64, display: 'flex', alignItems: 'center', gap: 16, padding: '0 16px' }}
-      >
-        {/* mobile hamburger */}
-        <button
-          className="icon-btn show-mobile"
-          aria-label={t('autobahn:chrome.menu')}
-          aria-expanded={menu}
-          onClick={() => setMenu((m) => !m)}
-        >
-          <Icon name={menu ? 'x' : 'menu'} size={22} />
-        </button>
-
-        {/* full navigation — '/' belongs to WordPress behind traefik, not the SPA (see HOME_PATH). */}
-        <a href={HOME_PATH} style={{ flex: 'none', display: 'inline-flex' }}>
-          <img src={logoUrl} height="32" style={{ cursor: 'pointer', display: 'block' }} alt="auto.de" />
-        </a>
-
-        {renderNav('hide-mobile', {
-          cursor: 'pointer',
-          padding: '8px 12px',
-          borderRadius: 'var(--md-r-full)',
-          color: 'var(--md-on-surface-variant)',
-        })}
-
-        <div style={{ flex: 1 }} />
-
-        <IconButton name="search" label={t('autobahn:chrome.search')} onClick={goSearch} />
-        {/* Merkliste → /favourites with a real count badge */}
-        <span style={{ position: 'relative', display: 'inline-flex' }}>
-          <IconButton name="heart" label={t('autobahn:chrome.favorites')} onClick={() => goRoute(R_FAVOURITES)} />
-          {favoritesCount > 0 && (
-            <span style={badgeStyle}>{favoritesCount}</span>
-          )}
-        </span>
-        {/* Suchaufträge → /my-searches (saved searches list) */}
-        <span style={{ position: 'relative', display: 'inline-flex' }}>
-          <IconButton name="bell" label={t('autobahn:chrome.savedSearches')} onClick={() => goRoute(R_SAVED_SEARCHES)} />
-          {notificationCount > 0 && (
-            <span style={badgeStyle}>{notificationCount}</span>
-          )}
-        </span>
-
-        {/* language segmented control — hidden ≤600px (the account menu carries language rows). */}
-        {onLangSelect && (
-          <div className="lang-seg hide-mobile" aria-label={t('autobahn:chrome.switchLanguage')}>
-            <button type="button" className={'lang-seg-btn' + (language !== 'en' ? ' on' : '')} onClick={() => onLangSelect('de')}>DE</button>
-            <button type="button" className={'lang-seg-btn' + (language === 'en' ? ' on' : '')} onClick={() => onLangSelect('en')}>EN</button>
-          </div>
-        )}
-
-        {/* Konto button + MD3 account popover — visible at EVERY width: this menu is the only
-            place sign-out / settings / dealer switching exist, so it must never be display:none'd
-            (the pre-cutover hide-tablet left 601–980px with no logout at all). */}
-        <span style={{ position: 'relative', display: 'inline-flex' }}>
-          <button
-            className="mbtn mbtn--tonal mbtn--sm"
-            style={{ marginLeft: 4 }}
-            onClick={() => setAccount((a) => !a)}
-            aria-expanded={account}
-          >
-            <Icon name="user" size={18} />
-            {t('autobahn:chrome.account')}
-          </button>
-          {account && renderAccountMenu()}
-        </span>
-      </div>
-
-      {/* click-away backdrop for the account popover */}
-      {account && (
-        <div
-          onClick={() => setAccount(false)}
-          style={{ position: 'fixed', inset: 0, zIndex: 40, background: 'transparent' }}
-        />
-      )}
-
-      {/* mobile dropdown */}
-      {menu && (
-        <div className="topbar-menu show-mobile" style={{ flexDirection: 'column', gap: 2 }}>
-          {NAV_LINKS.map((item) => (
-            <a
-              key={item.labelKey}
-              onClick={() => goNav(item)}
-              className="md-title-sm"
-              style={{
-                cursor: 'pointer',
-                padding: '14px 8px',
-                borderBottom: '1px solid var(--md-outline-variant)',
-                color: 'var(--md-on-surface)',
-              }}
-            >
-              {t(item.labelKey)}
-            </a>
-          ))}
-          <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
-            <Button variant="outlined" icon="heart" style={{ flex: 1 }} onClick={() => goRoute(R_FAVOURITES)}>
-              {t('autobahn:chrome.favorites')}{favoritesCount > 0 ? ` (${favoritesCount})` : ''}
-            </Button>
-            <Button variant="filled" icon="user" style={{ flex: 1 }} onClick={() => goRoute(isAuthorized ? R_MY_VEHICLES : R_SIGN_IN)}>
-              {isAuthorized ? t('autobahn:chrome.mobileMyAccount') : t('autobahn:chrome.signIn')}
-            </Button>
-          </div>
-        </div>
-      )}
-    </header>
-  );
-};
-
-/** small red count badge shared by the heart + bell. */
-const badgeStyle: React.CSSProperties = {
-  position: 'absolute',
-  top: 4,
-  right: 4,
-  minWidth: 15,
-  height: 15,
-  padding: '0 4px',
-  borderRadius: 999,
-  background: 'var(--md-error)',
-  color: '#fff',
-  fontSize: 9.5,
-  fontWeight: 700,
-  lineHeight: 1,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  boxShadow: '0 0 0 2px var(--md-surface)',
-  pointerEvents: 'none',
-};
-
-export default TopBar;
+import React, { useState } from 'react';
+import { TranslationFunction } from '../types';
+
+import { Button, Icon, IconButton } from '../ui';
+import logoUrl from '../assets/autode-logo.svg';
+
+/** Where the logo navigates on click. '/' is NOT an SPA route — traefik serves the WordPress
+ *  homepage there (generate-routes.py: wp-home at higher priority) — so the logo must be a FULL
+ *  navigation (<a href>), never history.push, or the SPA renders its 404 page. */
+const HOME_PATH = '/';
+/** The flagged Autobahn search entry point (pilot). */
+const SEARCH_PATH = '/search';
+
+/**
+ * Primary nav (German UI copy — matches the legacy Header destinations, NOT the design's
+ * "everything routes to SRP" stub). Car-listing entries stay inside the SPA pilot (/search);
+ * the content pages (Finanzierung/Magazin) are real WP routes opened as full navigations.
+ */
+const NAV_LINKS: ReadonlyArray<{ labelKey: string; to?: string; href?: string }> = [
+  { labelKey: 'autobahn:chrome.navSearch',    to:   SEARCH_PATH },
+  { labelKey: 'autobahn:chrome.navInform',    href: '/magazin/' },
+  { labelKey: 'autobahn:chrome.navFinancing', href: '/finanzieren/' },
+  { labelKey: 'autobahn:chrome.navInsurance', href: '/versichern/' },
+  { labelKey: 'autobahn:chrome.navService',   href: '/service/kontakt/' },
+  { labelKey: 'autobahn:chrome.navBafa',      href: '/magazin/bafa-praemie-fuer-elektroautos-ab-2026/' },
+  { labelKey: 'autobahn:chrome.navJobs',      href: 'https://jobs.auto.de/' },
+];
+
+/** Account-menu routes (all real fe-main SPA routes — see GuestMenu/ProfileMenu + AppRouter). */
+const R_SIGN_IN = '/login/sign-in';
+const R_SIGN_UP = '/login/sign-up';
+const R_DEALER = '/dealer/sign-up';
+const R_FAVOURITES = '/favourites';
+const R_SAVED_SEARCHES = '/my-searches';
+const R_MY_VEHICLES = '/my-vehicles/overview';
+const R_SETTINGS = '/my-settings';
+const R_MY_ORDERS = '/account/my-orders';
+const R_DEALER_DASHBOARD = '/account/dashboard';
+const R_IMAGE_SETTINGS = '/account/image-settings';
+
+/** Languages offered in the account menu (legacy supports de/en/ru). Labels are proper nouns
+ *  (endonyms) and stay untranslated. */
+const LANGS: ReadonlyArray<readonly [code: string, label: string]> = [
+  ['de', 'Deutsch'],
+  ['en', 'English'],
+];
+
+/** Tiny inline flag (self-contained SVG — no external asset, CSP-safe). DE tricolor / UK union jack. */
+const Flag: React.FunctionComponent<{ code: string }> = ({ code }) =>
+  code === 'en' ? (
+    <svg viewBox="0 0 60 30" width="20" height="14" style={{ borderRadius: 2, flex: 'none', display: 'block' }} aria-hidden="true">
+      <clipPath id="uk-clip"><rect width="60" height="30" /></clipPath>
+      <g clipPath="url(#uk-clip)">
+        <rect width="60" height="30" fill="#012169" />
+        <path d="M0,0 60,30 M60,0 0,30" stroke="#fff" strokeWidth="6" />
+        <path d="M0,0 60,30 M60,0 0,30" stroke="#C8102E" strokeWidth="4" />
+        <path d="M30,0 V30 M0,15 H60" stroke="#fff" strokeWidth="10" />
+        <path d="M30,0 V30 M0,15 H60" stroke="#C8102E" strokeWidth="6" />
+      </g>
+    </svg>
+  ) : (
+    <svg viewBox="0 0 5 3" width="20" height="14" style={{ borderRadius: 2, flex: 'none', display: 'block' }} aria-hidden="true">
+      <rect width="5" height="1" y="0" fill="#000" />
+      <rect width="5" height="1" y="1" fill="#DD0000" />
+      <rect width="5" height="1" y="2" fill="#FFCE00" />
+    </svg>
+  );
+
+export interface TopBarProps {
+  /** i18n function (drilled from the page wrapper's this.props.t). */
+  t: TranslationFunction;
+  /** real auth state (authStore.isAuthorized) — guest vs profile menu. */
+  isAuthorized?: boolean;
+  /** label for the authed menu header (authStore.userEmail / profile name). */
+  userLabel?: string;
+  /** Merkliste count (favoriteStore.favoritesIDs.length) — badge on the heart + menu row. */
+  favoritesCount?: number;
+  /** unread Suchaufträge count — badge on the bell. Defaults to 0 (no badge). */
+  notificationCount?: number;
+  /** placed-orders count (profileStore.totalOrdered) — badge on the my-orders menu row. */
+  ordersCount?: number;
+  /** active language tag (appStore.language) — ticks the current language row. */
+  language?: string;
+  /** dealer-main account (authStore.isDealerMain) — shows the dealer menu section. */
+  isDealerMain?: boolean;
+  /** attached dealerships (profileStore.dealers: { dealer: {id, email}, isActive }[]). */
+  dealers?: ReadonlyArray<{ dealer: { id: string; email: string }; isActive: boolean }>;
+  /** switch the active dealership (App.setMainDealer → profileStore.switchDealer). */
+  onDealerSelect?: (dealerId: string) => void;
+  /** sign out (authStore.signOut). */
+  onSignOut?: () => void;
+  /** switch language (appStore.changeLang). */
+  onLangSelect?: (lang: string) => void;
+  /** SPA navigation for internal routes (fe-main passes history.push). Hosts without a
+   *  client-side router (fe-landing, WP widgets) omit it → full page navigation. */
+  onNavigate?: (to: string) => void;
+}
+
+/**
+ * Sticky global top app bar (h64) for the Autobahn pilot: mobile hamburger, logo, desktop
+ * inline nav, action icons (search / Merkliste / Suchaufträge) and a tonal "Konto" button that
+ * opens a REAL MD3 account menu (guest: Anmelden/Registrieren/Händler/Merkliste/Sprache;
+ * authed: profile links/Merkliste/Abmelden/Sprache) wired to the live auth routes/actions —
+ * replacing the legacy mobile-only SidePanel UserMenu (which rendered unstyled on desktop).
+ *
+ * Pure MD3 chrome — renders correctly only inside a `<div className="md3">` subtree.
+ */
+const TopBar: React.FunctionComponent<TopBarProps> = ({
+  t,
+  isAuthorized = false,
+  userLabel,
+  favoritesCount = 0,
+  notificationCount = 0,
+  ordersCount = 0,
+  language = 'de',
+  isDealerMain = false,
+  dealers = [],
+  onDealerSelect,
+  onSignOut,
+  onLangSelect,
+  onNavigate,
+}) => {
+  const [menu, setMenu] = useState(false); // mobile hamburger dropdown
+  const [account, setAccount] = useState(false); // account popover
+
+  const navigate = onNavigate || ((to: string): void => { window.location.href = to; });
+
+  const goSearch = (): void => {
+    setMenu(false);
+    navigate(SEARCH_PATH);
+  };
+  /** navigate a nav/menu entry: SPA push for `to`, full navigation for external `href`. */
+  const goNav = (item: { to?: string; href?: string }): void => {
+    setMenu(false);
+    setAccount(false);
+    if (item.to) {
+      navigate(item.to);
+    } else if (item.href) {
+      window.location.href = item.href;
+    }
+  };
+  const goRoute = (to: string): void => {
+    setMenu(false);
+    setAccount(false);
+    navigate(to);
+  };
+
+  const renderNav = (cls: string, itemStyle: React.CSSProperties): JSX.Element => (
+    <nav className={cls} style={cls === 'hide-mobile' ? { display: 'flex', gap: 4, marginLeft: 8 } : { flexDirection: 'column', gap: 2 }}>
+      {NAV_LINKS.map((item) => (
+        <a
+          key={item.labelKey}
+          onClick={() => goNav(item)}
+          className={cls === 'hide-mobile' ? 'md-label' : 'md-title-sm'}
+          style={itemStyle}
+        >
+          {t(item.labelKey)}
+        </a>
+      ))}
+    </nav>
+  );
+
+  /** one account-menu row. `key` is a stable identifier; `label` is the (translated) display text. */
+  const row = (key: string, label: string, onClick: () => void, opts?: { icon?: string; primary?: boolean; badge?: number }): JSX.Element => (
+    <button
+      key={key}
+      type="button"
+      className="amenu-row"
+      onClick={onClick}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        width: '100%',
+        padding: '10px 14px',
+        border: 0,
+        background: opts && opts.primary ? 'var(--md-primary)' : 'transparent',
+        color: opts && opts.primary ? '#fff' : 'var(--md-on-surface)',
+        borderRadius: opts && opts.primary ? 'var(--md-r-full)' : 0,
+        margin: opts && opts.primary ? '0 0 6px' : 0,
+        cursor: 'pointer',
+        font: 'inherit',
+        fontWeight: opts && opts.primary ? 700 : 500,
+        justifyContent: opts && opts.primary ? 'center' : 'flex-start',
+        textAlign: 'left',
+      }}
+    >
+      {opts && opts.icon && <Icon name={opts.icon} size={17} style={{ flex: 'none' }} />}
+      <span style={{ flex: 1 }}>{label}</span>
+      {opts && typeof opts.badge === 'number' && (
+        <span className="md-label-sm" style={{ fontWeight: 700 }}>{opts.badge}</span>
+      )}
+    </button>
+  );
+
+  const divider = (key: string): JSX.Element => (
+    <div key={key} style={{ height: 1, background: 'var(--md-outline-variant)', margin: '6px 0' }} />
+  );
+
+  const renderAccountMenu = (): JSX.Element => (
+    <div
+      className="amenu mcard"
+      style={{
+        position: 'absolute',
+        top: 'calc(100% + 8px)',
+        right: 0,
+        width: 264,
+        padding: 8,
+        zIndex: 60,
+        boxShadow: 'var(--md-elev-2)',
+      }}
+    >
+      {isAuthorized ? (
+        <>
+          <div className="md-label-sm" style={{ padding: '6px 14px 8px', color: 'var(--md-on-surface-variant)' }}>
+            {userLabel || t('autobahn:chrome.myAccount')}
+          </div>
+          {row('autobahn:chrome.myVehicles', t('autobahn:chrome.myVehicles'), () => goRoute(R_MY_VEHICLES), { icon: 'car' })}
+          {row('autobahn:chrome.myOrders', t('autobahn:chrome.myOrders'), () => goRoute(R_MY_ORDERS), { icon: 'package', badge: ordersCount > 0 ? ordersCount : undefined })}
+          {row('autobahn:chrome.savedSearches', t('autobahn:chrome.savedSearches'), () => goRoute(R_SAVED_SEARCHES), { icon: 'bell' })}
+          {row('autobahn:chrome.favorites', t('autobahn:chrome.favorites'), () => goRoute(R_FAVOURITES), { icon: 'heart', badge: favoritesCount })}
+          {row('autobahn:chrome.settings', t('autobahn:chrome.settings'), () => goRoute(R_SETTINGS), { icon: 'settings' })}
+          {isDealerMain && (
+            <>
+              {divider('d-dealer')}
+              {row('autobahn:chrome.dealerDashboard', t('autobahn:chrome.dealerDashboard'), () => goRoute(R_DEALER_DASHBOARD), { icon: 'store' })}
+              {row('autobahn:chrome.imageSettings', t('autobahn:chrome.imageSettings'), () => goRoute(R_IMAGE_SETTINGS), { icon: 'image' })}
+            </>
+          )}
+          {dealers.length > 1 && (
+            <>
+              <div className="md-label-sm" style={{ padding: '8px 14px 4px', color: 'var(--md-on-surface-variant)' }}>
+                {t('autobahn:chrome.myDealers')} ({dealers.length})
+              </div>
+              {dealers.map((d) =>
+                row(`dealer-${d.dealer.id}`, d.dealer.email, () => {
+                  setAccount(false);
+                  if (!d.isActive && onDealerSelect) onDealerSelect(d.dealer.id);
+                }, { icon: d.isActive ? 'check' : 'store' }),
+              )}
+            </>
+          )}
+          {divider('d1')}
+          {row('autobahn:chrome.signOut', t('autobahn:chrome.signOut'), () => { setAccount(false); if (onSignOut) onSignOut(); }, { icon: 'log-out' })}
+        </>
+      ) : (
+        <>
+          {row('autobahn:chrome.signIn', t('autobahn:chrome.signIn'), () => goRoute(R_SIGN_IN), { primary: true })}
+          {row('autobahn:chrome.register', t('autobahn:chrome.register'), () => goRoute(R_SIGN_UP), { icon: 'user-plus' })}
+          {row('autobahn:chrome.dealerSignUp', t('autobahn:chrome.dealerSignUp'), () => goRoute(R_DEALER), { icon: 'store' })}
+          {divider('d1')}
+          {row('autobahn:chrome.favorites', t('autobahn:chrome.favorites'), () => goRoute(R_FAVOURITES), { icon: 'heart', badge: favoritesCount })}
+        </>
+      )}
+      {divider('d2')}
+      <div className="md-label-sm" style={{ padding: '4px 14px', color: 'var(--md-on-surface-variant)' }}>{t('autobahn:chrome.language')}</div>
+      {LANGS.map(([code, label]) =>
+        row(`lang-${code}`, label, () => { setAccount(false); if (onLangSelect) onLangSelect(code); }, {
+          icon: language === code ? 'check' : 'globe',
+        }),
+      )}
+    </div>
+  );
+
+  return (
+    <header
+      style={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 50,
+        background: 'var(--md-surface)',
+        borderBottom: '1px solid var(--md-outline-variant)',
+      }}
+    >
+      <div
+        className="container"
+        style={{ height: 64, display: 'flex', alignItems: 'center', gap: 16, padding: '0 16px' }}
+      >
+        {/* mobile hamburger */}
+        <button
+          className="icon-btn show-mobile"
+          aria-label={t('autobahn:chrome.menu')}
+          aria-expanded={menu}
+          onClick={() => setMenu((m) => !m)}
+        >
+          <Icon name={menu ? 'x' : 'menu'} size={22} />
+        </button>
+
+        {/* full navigation — '/' belongs to WordPress behind traefik, not the SPA (see HOME_PATH). */}
+        <a href={HOME_PATH} style={{ flex: 'none', display: 'inline-flex' }}>
+          <img src={logoUrl} height="32" style={{ cursor: 'pointer', display: 'block' }} alt="auto.de" />
+        </a>
+
+        {renderNav('hide-mobile', {
+          cursor: 'pointer',
+          padding: '8px 12px',
+          borderRadius: 'var(--md-r-full)',
+          color: 'var(--md-on-surface-variant)',
+        })}
+
+        <div style={{ flex: 1 }} />
+
+        <IconButton name="search" label={t('autobahn:chrome.search')} onClick={goSearch} />
+        {/* Merkliste → /favourites with a real count badge */}
+        <span style={{ position: 'relative', display: 'inline-flex' }}>
+          <IconButton name="heart" label={t('autobahn:chrome.favorites')} onClick={() => goRoute(R_FAVOURITES)} />
+          {favoritesCount > 0 && (
+            <span style={badgeStyle}>{favoritesCount}</span>
+          )}
+        </span>
+        {/* Suchaufträge → /my-searches (saved searches list) */}
+        <span style={{ position: 'relative', display: 'inline-flex' }}>
+          <IconButton name="bell" label={t('autobahn:chrome.savedSearches')} onClick={() => goRoute(R_SAVED_SEARCHES)} />
+          {notificationCount > 0 && (
+            <span style={badgeStyle}>{notificationCount}</span>
+          )}
+        </span>
+
+        {/* language segmented control — hidden ≤600px (the account menu carries language rows). */}
+        {onLangSelect && (
+          <div className="lang-seg hide-mobile" aria-label={t('autobahn:chrome.switchLanguage')}>
+            <button type="button" className={'lang-seg-btn' + (language !== 'en' ? ' on' : '')} onClick={() => onLangSelect('de')}>DE</button>
+            <button type="button" className={'lang-seg-btn' + (language === 'en' ? ' on' : '')} onClick={() => onLangSelect('en')}>EN</button>
+          </div>
+        )}
+
+        {/* Konto button + MD3 account popover — visible at EVERY width: this menu is the only
+            place sign-out / settings / dealer switching exist, so it must never be display:none'd
+            (the pre-cutover hide-tablet left 601–980px with no logout at all). */}
+        <span style={{ position: 'relative', display: 'inline-flex' }}>
+          <button
+            className="mbtn mbtn--tonal mbtn--sm"
+            style={{ marginLeft: 4 }}
+            onClick={() => setAccount((a) => !a)}
+            aria-expanded={account}
+          >
+            <Icon name="user" size={18} />
+            {t('autobahn:chrome.account')}
+          </button>
+          {account && renderAccountMenu()}
+        </span>
+      </div>
+
+      {/* click-away backdrop for the account popover */}
+      {account && (
+        <div
+          onClick={() => setAccount(false)}
+          style={{ position: 'fixed', inset: 0, zIndex: 40, background: 'transparent' }}
+        />
+      )}
+
+      {/* mobile dropdown */}
+      {menu && (
+        <div className="topbar-menu show-mobile" style={{ flexDirection: 'column', gap: 2 }}>
+          {NAV_LINKS.map((item) => (
+            <a
+              key={item.labelKey}
+              onClick={() => goNav(item)}
+              className="md-title-sm"
+              style={{
+                cursor: 'pointer',
+                padding: '14px 8px',
+                borderBottom: '1px solid var(--md-outline-variant)',
+                color: 'var(--md-on-surface)',
+              }}
+            >
+              {t(item.labelKey)}
+            </a>
+          ))}
+          <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
+            <Button variant="outlined" icon="heart" style={{ flex: 1 }} onClick={() => goRoute(R_FAVOURITES)}>
+              {t('autobahn:chrome.favorites')}{favoritesCount > 0 ? ` (${favoritesCount})` : ''}
+            </Button>
+            <Button variant="filled" icon="user" style={{ flex: 1 }} onClick={() => goRoute(isAuthorized ? R_MY_VEHICLES : R_SIGN_IN)}>
+              {isAuthorized ? t('autobahn:chrome.mobileMyAccount') : t('autobahn:chrome.signIn')}
+            </Button>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+};
+
+/** small red count badge shared by the heart + bell. */
+const badgeStyle: React.CSSProperties = {
+  position: 'absolute',
+  top: 4,
+  right: 4,
+  minWidth: 15,
+  height: 15,
+  padding: '0 4px',
+  borderRadius: 999,
+  background: 'var(--md-error)',
+  color: '#fff',
+  fontSize: 9.5,
+  fontWeight: 700,
+  lineHeight: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxShadow: '0 0 0 2px var(--md-surface)',
+  pointerEvents: 'none',
+};
+
+export default TopBar;