@bytebrand/fe-ui-core-autobahn 1.0.56 → 1.0.58

package/chrome/TopBar.tsx

@@ -68,9 +68,19 @@ const Flag: React.FunctionComponent<{ code: string }> = ({ code }) =>
     </svg>
   );
 
+/** Which reduced icon set the MOBILE header row shows (≤600px) — desktop is unaffected, it always
+ *  shows the full search/heart/bell/lang/account set. Per the Figma mobile header spec:
+ *  - 'default':   search + account            ("Globaler Default Header")
+ *  - 'browsing':  search + heart + account     ("Browsing-Header")
+ *  - 'conversion':search + phone + account     ("Conversion-Header")
+ *  No page-type → variant mapping exists yet in this codebase; the caller (App.tsx) decides. */
+export type TopBarVariant = 'default' | 'browsing' | 'conversion';
+
 export interface TopBarProps {
   /** i18n function (drilled from the page wrapper's this.props.t). */
   t: TranslationFunction;
+  /** mobile-only header icon set — see TopBarVariant. Defaults to 'default'. */
+  variant?: TopBarVariant;
   /** real auth state (authStore.isAuthorized) — guest vs profile menu. */
   isAuthorized?: boolean;
   /** label for the authed menu header (authStore.userEmail / profile name). */
@@ -96,6 +106,10 @@ export interface TopBarProps {
   /** 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;
+  /** where the mobile "conversion" variant's phone icon goes — no single real business phone
+   *  number/tel: link was confirmed for this, so it defaults to the contact page. Pass a `tel:...`
+   *  href here once one is confirmed. */
+  phoneHref?: string;
 }
 
 /**
@@ -109,6 +123,7 @@ export interface TopBarProps {
  */
 const TopBar: React.FunctionComponent<TopBarProps> = ({
   t,
+  variant = 'default',
   isAuthorized = false,
   userLabel,
   favoritesCount = 0,
@@ -121,6 +136,7 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
   onSignOut,
   onLangSelect,
   onNavigate,
+  phoneHref = '/service/kontakt/',
 }) => {
   const [menu, setMenu] = useState(false); // mobile hamburger dropdown
   const [account, setAccount] = useState(false); // account popover
@@ -199,9 +215,179 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
     <div key={key} style={{ height: 1, background: 'var(--md-outline-variant)', margin: '6px 0' }} />
   );
 
+  /** First letter of the email's local-part, e.g. "adminvika@…" → "A" — a placeholder single-letter
+   *  avatar. ProfileStore already carries a real firstName/lastName (privateAddress) that isn't
+   *  threaded down to TopBar yet; wire that through for a proper two-letter "AV"-style initial. */
+  const avatarInitial = (userLabel || '?').trim().charAt(0).toUpperCase() || '?';
+
+  /** one Account Layer row (mobile design): icon + label + optional badge + trailing chevron —
+   *  distinct from the desktop popover's `row()` (no chevron, no avatar section there). */
+  const mrow = (key: string, label: string, onClick: () => void, opts?: { icon?: string; badge?: number }): JSX.Element => (
+    <button
+      key={key}
+      type="button"
+      className="amenu-mobile-row"
+      onClick={onClick}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        width: '100%',
+        padding: '13px 4px',
+        border: 0,
+        background: 'transparent',
+        color: 'var(--md-on-surface)',
+        cursor: 'pointer',
+        font: 'inherit',
+        fontWeight: 500,
+        textAlign: 'left',
+      }}
+    >
+      {opts && opts.icon && <Icon name={opts.icon} size={19} style={{ flex: 'none', color: 'var(--md-on-surface-variant)' }} />}
+      <span style={{ flex: 1, fontSize: 15 }}>{label}</span>
+      {opts && typeof opts.badge === 'number' && opts.badge > 0 && (
+        <span className="md-label-sm" style={{ fontWeight: 700 }}>{opts.badge}</span>
+      )}
+      <Icon name="chevron-right" size={18} style={{ flex: 'none', color: 'var(--md-on-surface-variant)' }} />
+    </button>
+  );
+
+  /** language row (mobile design): real flag + label, checkmark bubble on the active one — matches
+   *  the Figma "Sprache" section exactly (the desktop popover's globe/check-icon version is left
+   *  as-is, out of scope for this mobile-only pass). */
+  const mLangRow = (code: string, label: string): JSX.Element => {
+    const active = language === code;
+    return (
+      <button
+        key={`mlang-${code}`}
+        type="button"
+        onClick={() => { setAccount(false); if (onLangSelect) onLangSelect(code); }}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          width: '100%',
+          padding: '10px 4px',
+          border: 0,
+          background: 'transparent',
+          cursor: 'pointer',
+          font: 'inherit',
+          textAlign: 'left',
+        }}
+      >
+        <Flag code={code} />
+        <span style={{ flex: 1, fontSize: 15, color: 'var(--md-on-surface)' }}>{label}</span>
+        {active && (
+          <span
+            style={{
+              width: 20, height: 20, borderRadius: '50%', background: 'var(--md-primary)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none',
+            }}
+          >
+            <Icon name="check" size={13} color="#fff" stroke={3} />
+          </span>
+        )}
+      </button>
+    );
+  };
+
+  /** Mobile-only "Account Layer" — a full-width sheet under the header (Figma: "03 | Account
+   *  Layer"), replacing the desktop popover's small 264px card on mobile widths. Shown/hidden
+   *  purely via the `show-mobile`/`hide-mobile` CSS classes (this project's existing convention —
+   *  see the hamburger button/topbar-menu above), not JS width checks. */
+  const renderMobileAccountLayer = (): JSX.Element => (
+    <div className="amenu-mobile show-mobile mcard" style={{ flexDirection: 'column' }}>
+      <div style={{ padding: '20px 20px 8px', textAlign: isAuthorized ? 'left' : 'center' }}>
+        {isAuthorized ? (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <span
+              style={{
+                width: 44, height: 44, borderRadius: '50%', flex: 'none',
+                background: 'color-mix(in srgb, var(--md-primary) 15%, transparent)',
+                color: 'var(--md-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                fontWeight: 700, fontSize: 16,
+              }}
+            >
+              {avatarInitial}
+            </span>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div className="md-title-sm" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {userLabel}
+              </div>
+              <a
+                onClick={() => goRoute(R_SETTINGS)}
+                className="md-label"
+                style={{ color: 'var(--md-primary)', cursor: 'pointer', fontWeight: 600 }}
+              >
+                {t('autobahn:chrome.myProfile')} ›
+              </a>
+            </div>
+          </div>
+        ) : (
+          <>
+            <span
+              style={{
+                width: 44, height: 44, borderRadius: '50%', margin: '0 auto 14px',
+                background: 'var(--md-outline-variant)', color: 'var(--md-on-surface-variant)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+              }}
+            >
+              <Icon name="user" size={22} />
+            </span>
+            <div className="md-headline-sm" style={{ fontWeight: 700, marginBottom: 6 }}>
+              {t('autobahn:chrome.welcome')}
+            </div>
+            <div className="md-body" style={{ marginBottom: 16 }}>
+              {t('autobahn:chrome.welcomeSubtext')}
+            </div>
+          </>
+        )}
+      </div>
+
+      <div style={{ padding: '4px 20px 8px' }}>
+        {isAuthorized ? (
+          <>
+            {!isDealerMain &&
+              mrow('m-dashboard', t('autobahn:chrome.dashboard'), () => goRoute(R_DASHBOARD), { icon: 'layout-grid' })}
+            {mrow('m-vehicles', t('autobahn:chrome.myVehicles'), () => goRoute(R_MY_VEHICLES), { icon: 'car' })}
+            {mrow('m-searches', t('autobahn:chrome.savedSearches'), () => goRoute(R_SAVED_SEARCHES), { icon: 'bell' })}
+            {mrow('m-favorites', t('autobahn:chrome.favorites'), () => goRoute(R_FAVOURITES), { icon: 'heart', badge: favoritesCount })}
+            {mrow('m-settings', t('autobahn:chrome.settings'), () => goRoute(R_SETTINGS), { icon: 'settings' })}
+            {mrow('m-help', t('autobahn:chrome.helpContact'), () => goRoute(R_KONTAKT), { icon: 'help-circle' })}
+            {isDealerMain && mrow('m-dealer', t('autobahn:chrome.dealerDashboard'), () => goRoute(R_DASHBOARD), { icon: 'store' })}
+            {mrow('m-signout', t('autobahn:chrome.signOut'), () => { setAccount(false); if (onSignOut) onSignOut(); }, { icon: 'log-out' })}
+          </>
+        ) : (
+          <>
+            <button
+              type="button"
+              className="mbtn mbtn--filled mbtn--block"
+              style={{ width: '100%', marginBottom: 4 }}
+              onClick={() => goRoute(R_SIGN_IN)}
+            >
+              {t('autobahn:chrome.signIn')}
+            </button>
+            {mrow('m-register', t('autobahn:chrome.register'), () => goRoute(R_SIGN_UP), { icon: 'user-plus' })}
+            {mrow('m-dealer-signup', t('autobahn:chrome.dealerSignUp'), () => goRoute(R_DEALER), { icon: 'store' })}
+            {mrow('m-favorites', t('autobahn:chrome.favorites'), () => goRoute(R_FAVOURITES), { icon: 'heart', badge: favoritesCount })}
+          </>
+        )}
+      </div>
+
+      {divider('m-d1')}
+
+      <div style={{ padding: '8px 20px 20px' }}>
+        <div className="md-label-sm" style={{ color: 'var(--md-on-surface-variant)', padding: '4px 4px 6px' }}>
+          {t('autobahn:chrome.language')}
+        </div>
+        {LANGS.map(([code, label]) => mLangRow(code, label))}
+      </div>
+    </div>
+  );
+
   const renderAccountMenu = (): JSX.Element => (
     <div
-      className="amenu mcard"
+      className="amenu mcard hide-mobile"
       style={{
         position: 'absolute',
         top: 'calc(100% + 8px)',
@@ -308,21 +494,37 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
         <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' }}>
+        {/* Merkliste → /favourites with a real count badge — desktop-only now; the mobile row
+            below shows it ONLY for the 'browsing' variant instead. */}
+        <span className="hide-mobile" 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' }}>
+        {/* Suchaufträge → /my-searches (saved searches list) — desktop-only; no Figma mobile
+            header variant includes a bell icon. */}
+        <span className="hide-mobile" 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>
 
+        {/* Mobile-only reduced icon set — which ONE extra icon (besides search+account, both
+            always shown) appears depends on `variant`, per the 3 Figma mobile header specs. */}
+        {variant === 'browsing' && (
+          <span className="show-mobile" 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>
+        )}
+        {variant === 'conversion' && (
+          <span className="show-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
+            <IconButton name="phone" label={t('autobahn:chrome.callUs')} onClick={() => goNav({ href: phoneHref })} />
+          </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')}>
@@ -331,23 +533,28 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
           </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). */}
+        {/* Konto trigger + account layer — 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). Desktop keeps the
+            tonal "Konto" pill; ≤600px it collapses to a plain icon (topbar-account-btn CSS) and
+            opens the full-width mobile Account Layer instead of the small popover. */}
         <span style={{ position: 'relative', display: 'inline-flex' }}>
           <button
-            className="mbtn mbtn--tonal mbtn--sm"
+            className="mbtn mbtn--tonal mbtn--sm topbar-account-btn"
             style={{ marginLeft: 4 }}
             onClick={() => setAccount((a) => !a)}
             aria-expanded={account}
+            aria-label={t('autobahn:chrome.account')}
           >
             <Icon name="user" size={18} />
-            {t('autobahn:chrome.account')}
+            <span className="hide-mobile">{t('autobahn:chrome.account')}</span>
           </button>
           {account && renderAccountMenu()}
         </span>
       </div>
 
+      {account && renderMobileAccountLayer()}
+
       {/* click-away backdrop for the account popover */}
       {account && (
         <div

package/constants.ts

@@ -1,31 +1,31 @@
-// Autobahn (auto.de redesign) — shared lookup constants barrel.
-// Pure data re-exported from ./constants/autobahn (kept import-safe for plain Node consumers,
-// see that file's header) plus the legacy fe-ui-core shim re-exports below.
-export * from './constants/autobahn';
-
-// ---------------------------------------------------------------------------
-// Legacy shared constants (moved here from fe-ui-core).
-//
-// This block mirrors the public symbol set of the old
-// `@bytebrand/fe-ui-core/constants` barrel so consumers can swap that
-// specifier for `@bytebrand/fe-ui-core-autobahn/constants` 1:1. The
-// implementations live under ./constants/ (core.ts, app.ts, price.ts,
-// Search.ts, …); fe-ui-core re-exports them via shims until it is deleted.
-// ---------------------------------------------------------------------------
-
-export {
-  offers,
-  checkoutOffers,
-  checkoutWarranties,
-  checkoutSteps,
-  checkoutSubStep,
-  DELIVERY_PERIODS_EXTRA,
-  THREE,
-  WLTP_ENERGY_EFFICIENCY_CLASS
-} from './constants/core';
-
-export { CUSTOM_ERROR_MESSAGES, supportPhone, supportPhoneLink } from './constants/app';
-
-export { priceRatings } from './constants/price';
-
-export { THROTTLE_DELAY } from './constants/Search';
+// Autobahn (auto.de redesign) — shared lookup constants barrel.
+// Pure data re-exported from ./constants/autobahn (kept import-safe for plain Node consumers,
+// see that file's header) plus the legacy fe-ui-core shim re-exports below.
+export * from './constants/autobahn';
+
+// ---------------------------------------------------------------------------
+// Legacy shared constants (moved here from fe-ui-core).
+//
+// This block mirrors the public symbol set of the old
+// `@bytebrand/fe-ui-core/constants` barrel so consumers can swap that
+// specifier for `@bytebrand/fe-ui-core-autobahn/constants` 1:1. The
+// implementations live under ./constants/ (core.ts, app.ts, price.ts,
+// Search.ts, …); fe-ui-core re-exports them via shims until it is deleted.
+// ---------------------------------------------------------------------------
+
+export {
+  offers,
+  checkoutOffers,
+  checkoutWarranties,
+  checkoutSteps,
+  checkoutSubStep,
+  DELIVERY_PERIODS_EXTRA,
+  THREE,
+  WLTP_ENERGY_EFFICIENCY_CLASS
+} from './constants/core';
+
+export { CUSTOM_ERROR_MESSAGES, supportPhone, supportPhoneLink } from './constants/app';
+
+export { priceRatings } from './constants/price';
+
+export { THROTTLE_DELAY } from './constants/Search';

package/locales/de/autobahn.json

@@ -188,7 +188,10 @@
     "requestLabel": "Jetzt Anfragen",
     "threeSixtyLabel": "360°-Ansicht",
     "counterLabel": "Bild {{current}} von {{total}}",
-    "moreThumbsLabel": "{{count}} weitere Bilder"
+    "moreThumbsLabel": "{{count}} weitere Bilder",
+    "allPhotosTitle": "Alle {{count}} Fotos",
+    "allPhotosSubtitle": "Tippe auf ein Foto, um es zu öffnen.",
+    "allPhotosFooter": "{{count}} Fotos insgesamt"
   },
   "chrome": {
     "menu": "Menü",
@@ -204,6 +207,10 @@
     "dealerSignUp": "Als Händler anmelden",
     "language": "Sprache",
     "myAccount": "Mein Konto",
+    "myProfile": "Mein Profil",
+    "welcome": "Willkommen bei auto.de",
+    "welcomeSubtext": "Melde dich an oder erstelle ein Konto, um alle Vorteile zu nutzen.",
+    "callUs": "Anrufen",
     "usedCars": "Gebrauchtwagen",
     "newCars": "Neuwagen",
     "leasing": "Leasing",

package/locales/en/autobahn.json

@@ -188,7 +188,10 @@
     "requestLabel": "Enquire now",
     "threeSixtyLabel": "360° view",
     "counterLabel": "Image {{current}} of {{total}}",
-    "moreThumbsLabel": "{{count}} more images"
+    "moreThumbsLabel": "{{count}} more images",
+    "allPhotosTitle": "All {{count}} photos",
+    "allPhotosSubtitle": "Tap a photo to open it.",
+    "allPhotosFooter": "{{count}} photos total"
   },
   "chrome": {
     "menu": "Menu",
@@ -204,6 +207,10 @@
     "dealerSignUp": "Become a dealer",
     "language": "Language",
     "myAccount": "My account",
+    "myProfile": "My profile",
+    "welcome": "Welcome to auto.de",
+    "welcomeSubtext": "Sign in or create an account to use all the benefits.",
+    "callUs": "Call us",
     "usedCars": "Used cars",
     "newCars": "New cars",
     "leasing": "Leasing",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.56",
+  "version": "1.0.58",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",