@bytebrand/fe-ui-core-autobahn 1.0.15 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "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",

package/theme/md3.css

@@ -155,6 +155,12 @@
    NOT the 38px tappable filter-chip the base .chip is. */
 .md3 .listcard-chips .chip { height: 24px; padding: 0 10px; font-size: 11.5px; border-radius: 8px; cursor: default; }
 .md3 .listcard-chips .chip:hover { background: var(--md-surface); border-color: var(--md-outline-variant); }
+/* VDP trust row (Sofort verfügbar/views/favorites/Geprüft) — same compact non-interactive
+   sizing as the listcard equipment tags, standalone (not nested under .listcard-chips). */
+.md3 .vdp-trust-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
+  border-radius: 8px; font-size: 11.5px; font-weight: 500; line-height: 1; cursor: default; white-space: nowrap;
+  background: var(--md-surface); color: var(--md-on-surface-variant); border: 1px solid var(--md-outline-variant); }
+.md3 .vdp-trust-chip .lucide { width: 14px; height: 14px; flex: none; }
 
 /* status / rating chip (no CTA) */
 .md3 .statchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
@@ -1283,7 +1289,14 @@
   .md3 .srp-rail       { display: none; } /* rail is desktop-only; ≤980 uses the filter sheet */
   .md3 .srp-grid       { grid-template-columns: 1fr; }
   .md3 .vdp-grid       { display: flex; flex-direction: column; }
-  .md3 .vdp-gallery    { order: 1; } .md3 .vdp-aside { order: 2; } .md3 .vdp-details { order: 3; }
+  .md3 .vdp-gallery    { order: 1; }
+  /* mobile-only "first screen": identity + trust row BEFORE the finance card, highlights/
+     condition tiles moved AFTER it (both split out of the desktop-only VdpHeaderCard,
+     which stays bundled inside .vdp-gallery, hidden on mobile via hide-mobile). */
+  .md3 .vdp-header-summary { order: 2; padding: 0 4px; margin-bottom: 4px; }
+  .md3 .vdp-aside      { order: 3; }
+  .md3 .vdp-header-extras  { order: 4; margin-top: 16px; }
+  .md3 .vdp-details    { order: 5; }
   .md3 .vdp-aside      { position: static; }
   .md3 .price-card     { position: static; }
   .md3 .fin-call       { display: block; } /* tap-to-call restored on touch */

package/vdp/VdpModules.tsx

@@ -51,14 +51,10 @@ export interface VdpHeaderCardProps {
   t: TranslationFunction;
 }
 
-/**
- * One container holding the entire vehicle identity: headline + trim/power, the
- * dot-separated fact line, the hand-picked highlight chips, and the condition
- * (zustand) tiles footer. The gallery itself is composed by the page (W3b) — this
- * is just the textual header card that sits beneath it.
- */
-export const VdpHeaderCard: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => {
-  const { condition } = vehicle;
+/** headline + trim/power + rating pill, then the dot-separated fact line — the vehicle's
+ *  identity block. Split out so the mobile-only layout can show this BEFORE the finance
+ *  card (see VdpTrustRow) while the highlights/condition tiles move after it. */
+export const VdpHeaderSummary: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => {
   const factLine: ReadonlyArray<readonly [string, string]> = [
     ['gauge', fmtKm(vehicle.km)],
     ['calendar', vehicle.reg],
@@ -66,15 +62,8 @@ export const VdpHeaderCard: React.FunctionComponent<VdpHeaderCardProps> = ({ veh
     ['fuel', stripParen(vehicle.fuel)],
     ['user', t('autobahn:header.owners', { owners: vehicle.owners, count: vehicle.owners })],
   ];
-  // condition.hu === 'Neu' compares the RAW backend data value, not a display string — left as-is.
-  const tiles: ReadonlyArray<readonly [string, string, string]> = [
-    ['wrench', t('autobahn:header.huLabel'), condition.hu === 'Neu' ? t('autobahn:header.huNew') : t('autobahn:header.huUntil', { date: condition.hu })],
-    ['shield-check', t('autobahn:header.accidentFree'), condition.unfallfrei ? t('autobahn:header.yes') : t('autobahn:header.no')],
-    ['clipboard-check', t('autobahn:header.serviceHistory'), condition.scheckheft ? t('autobahn:header.yes') : t('autobahn:header.no')],
-    ['award', t('autobahn:header.warranty'), condition.garantie],
-  ];
   return (
-    <div className="mcard" style={{ marginTop: 16, padding: '22px 24px 18px' }}>
+    <>
       <div className="vdp-headrow">
         <div style={{ minWidth: 0 }}>
           <h1 className="md-headline" style={{ margin: '0 0 4px' }}>
@@ -106,43 +95,112 @@ export const VdpHeaderCard: React.FunctionComponent<VdpHeaderCardProps> = ({ veh
           </span>
         ))}
       </div>
+    </>
+  );
+};
 
-      {/* hand-picked highlights — the single accent row of the header */}
-      <div
-        className="vdp-highlights"
-        style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, marginTop: 14 }}
-      >
-        {vehicle.highlights.slice(0, 6).map((f) => (
-          <span key={f} className="chip chip--filter chip--selected" style={{ cursor: 'default' }}>
-            <Icon name="check" size={14} stroke={2.4} />
-            {f}
-          </span>
-        ))}
-      </div>
+/** hand-picked highlights — the single accent row of the header. */
+export const VdpHeaderHighlights: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle }) => (
+  <div className="vdp-highlights" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
+    {vehicle.highlights.slice(0, 6).map((f) => (
+      <span key={f} className="chip chip--filter chip--selected" style={{ cursor: 'default' }}>
+        <Icon name="check" size={14} stroke={2.4} />
+        {f}
+      </span>
+    ))}
+  </div>
+);
 
-      {/* condition — footer row of the header card, divided by a hairline */}
-      <div className="zustand-grid">
-        {tiles.map(([ic, l, v]) => (
-          <div key={l} className="zustand-tile">
-            <Icon name={ic} size={19} color="var(--md-primary)" stroke={1.9} style={{ flex: 'none' }} />
-            <span style={{ minWidth: 0 }}>
-              <span
-                className="md-label-sm"
-                style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
-              >
-                {l}
-              </span>
-              <span className="md-title-sm" style={{ display: 'block' }}>
-                {v}
-              </span>
+/** condition (zustand) tiles — TÜV/Unfallfrei/Scheckheft/Garantie. */
+export const VdpHeaderCondition: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => {
+  const { condition } = vehicle;
+  // condition.hu === 'Neu' compares the RAW backend data value, not a display string — left as-is.
+  const tiles: ReadonlyArray<readonly [string, string, string]> = [
+    ['wrench', t('autobahn:header.huLabel'), condition.hu === 'Neu' ? t('autobahn:header.huNew') : t('autobahn:header.huUntil', { date: condition.hu })],
+    ['shield-check', t('autobahn:header.accidentFree'), condition.unfallfrei ? t('autobahn:header.yes') : t('autobahn:header.no')],
+    ['clipboard-check', t('autobahn:header.serviceHistory'), condition.scheckheft ? t('autobahn:header.yes') : t('autobahn:header.no')],
+    ['award', t('autobahn:header.warranty'), condition.garantie],
+  ];
+  return (
+    <div className="zustand-grid">
+      {tiles.map(([ic, l, v]) => (
+        <div key={l} className="zustand-tile">
+          <Icon name={ic} size={19} color="var(--md-primary)" stroke={1.9} style={{ flex: 'none' }} />
+          <span style={{ minWidth: 0 }}>
+            <span
+              className="md-label-sm"
+              style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+            >
+              {l}
             </span>
-          </div>
-        ))}
-      </div>
+            <span className="md-title-sm" style={{ display: 'block' }}>
+              {v}
+            </span>
+          </span>
+        </div>
+      ))}
     </div>
   );
 };
 
+/**
+ * One container holding the entire vehicle identity: headline + trim/power, the
+ * dot-separated fact line, the hand-picked highlight chips, and the condition
+ * (zustand) tiles footer. The gallery itself is composed by the page (W3b) — this
+ * is just the textual header card that sits beneath it. Desktop-only usage (mobile
+ * splits these 3 pieces across the "before/after finance card" layout — see the page).
+ */
+export const VdpHeaderCard: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => (
+  <div className="mcard" style={{ marginTop: 16, padding: '22px 24px 18px' }}>
+    <VdpHeaderSummary vehicle={vehicle} t={t} />
+    <div style={{ marginTop: 14 }}>
+      <VdpHeaderHighlights vehicle={vehicle} t={t} />
+    </div>
+    <VdpHeaderCondition vehicle={vehicle} t={t} />
+  </div>
+);
+
+export interface VdpTrustRowProps {
+  /** maps to carStore.isAvailable / state.isOnline — "Sofort verfügbar". */
+  available: boolean;
+  /** real totalCarImpCount from /service/user-actions/api/v1/stats/viewers — omit while loading. */
+  viewCount?: number;
+  /** real totalFavCount from the same endpoint — omit while loading. */
+  favCount?: number;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** mobile-only trust-signal row shown between the identity block and the finance card:
+ *  availability · view count · favorite count · "Geprüft" (every auto.de listing is
+ *  130-point inspected, so this one is always shown, not conditional real data). */
+export const VdpTrustRow: React.FunctionComponent<VdpTrustRowProps> = ({ available, viewCount, favCount, t }) => (
+  <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 6, marginTop: 10 }}>
+    {available && (
+      <span className="vdp-trust-chip">
+        <Icon name="check" size={13} stroke={2.4} color="var(--md-good)" />
+        {t('autobahn:availability.immediately')}
+      </span>
+    )}
+    {viewCount != null && (
+      <span className="vdp-trust-chip">
+        <Icon name="eye" size={13} />
+        {t('autobahn:activity.viewsCount', { count: viewCount })}
+      </span>
+    )}
+    {favCount != null && (
+      <span className="vdp-trust-chip">
+        <Icon name="heart" size={13} />
+        {t('autobahn:activity.favoritesCount', { count: favCount })}
+      </span>
+    )}
+    <span className="vdp-trust-chip">
+      <Icon name="shield-check" size={13} />
+      {t('autobahn:trust.checked')}
+    </span>
+  </div>
+);
+
 // ---------------------------------------------------------------------------
 // Fahrzeugdaten spec table (mobile clamp + "Mehr anzeigen")
 // ---------------------------------------------------------------------------

package/vdp/index.ts

@@ -23,6 +23,10 @@ export type {
 // Remaining presentational modules.
 export {
   VdpHeaderCard,
+  VdpHeaderSummary,
+  VdpHeaderHighlights,
+  VdpHeaderCondition,
+  VdpTrustRow,
   VdpSpecTable,
   EquipmentList,
   Co2Label,
@@ -41,6 +45,7 @@ export {
 } from './VdpModules';
 export type {
   VdpHeaderCardProps,
+  VdpTrustRowProps,
   VdpSpecTableProps,
   EquipmentListProps,
   Co2LabelProps,