@bytebrand/fe-ui-core-autobahn 1.0.2 → 1.0.4

package/cards/CarRow.tsx

@@ -65,45 +65,45 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
       onClick={() => onOpen(car)}
       style={{ background: 'var(--md-sc-lowest)' }}
     >
-      <div className="listcard-media" onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
-        <div className="listcard-media-img">
-          <CardCarousel images={car.gallery} height="100%" fit="contain" />
-          {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%. The price RATING
-              ('Guter Preis') is NOT here — it lives in the price column (PricePaths meter). */}
-          <div
-            style={{
-              position: 'absolute',
-              top: 10,
-              left: 10,
-              right: 10,
-              zIndex: 3,
-              display: 'flex',
-              flexDirection: 'row',
-              flexWrap: 'nowrap',
-              alignItems: 'center',
-              gap: 5,
-            }}
-          >
-            {car.isNew && <span className="neu-badge">NEU</span>}
-            {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-            <ZeroDownChip t={t} show={car.zeroDown} compact />
-            <PercentChip pct={car.dropPct} />
-          </div>
-          <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
-            <span className="imglabel">
-              <Icon name="image" size={13} />
-              {car.photos}
-            </span>
-          </div>
-          <div
-            onClick={(e) => e.stopPropagation()}
-            className="show-mobile"
-            style={{ position: 'absolute', top: 8, right: 8, zIndex: 3 }}
-          >
-            <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
-          </div>
+      <div className="listcard-media" style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
+        <CardCarousel images={car.gallery} height="100%" fit="contain" />
+        {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%. The price RATING
+            ('Guter Preis') is NOT here — it lives in the price column (PricePaths meter). */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 10,
+            left: 10,
+            right: 10,
+            zIndex: 3,
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'nowrap',
+            alignItems: 'center',
+            gap: 5,
+          }}
+        >
+          {car.isNew && <span className="neu-badge">NEU</span>}
+          {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+          <ZeroDownChip t={t} show={car.zeroDown} compact />
+          <PercentChip pct={car.dropPct} />
+        </div>
+        <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
+          <span className="imglabel">
+            <Icon name="image" size={13} />
+            {car.photos}
+          </span>
+        </div>
+        <div
+          onClick={(e) => e.stopPropagation()}
+          className="show-mobile"
+          style={{ position: 'absolute', top: 8, right: 8, zIndex: 3 }}
+        >
+          <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
         </div>
-        {/* activity/trust pill row — always under the image, never overlaid on it. */}
+        {/* activity/trust badges — overlaid on the studio-white floor at the bottom of the photo
+            itself (PM ref), not a separate divided strip below it. Opposite corner from the photo
+            count so the two never collide. */}
         <GalleryBadges car={car} t={t} />
       </div>
 

package/cards/cardParts.tsx

@@ -494,36 +494,38 @@ export interface GalleryBadgesProps {
 }
 
 /**
- * Trust/activity pill row rendered under the gallery on the SRP list card — mirrors the mobile
- * VDP gallery header (availability · views · favorites · Geprüft). Availability/views/favorites
- * are real data and each pill is omitted when its value isn't present yet; 'Geprüft' is auto.de's
- * general inspection/warranty promise (same claim as the legacy VDP trust strip, e.g.
- * VehicleDetailedSliderModal/Sidebar.tsx), not per-car data, so it always renders — it exists here
- * mainly so the row never looks empty while the async view/favorite counts are still loading.
+ * Trust/activity badges overlaid on the photo itself, bottom-left (PM reference, 2026-07-10) —
+ * flat icon+text, no pill border/background/divider, sitting on the studio-white floor every
+ * inventory photo already has (see .cc-media/.listcard-media background in md3.css). Mirrors the
+ * mobile VDP gallery header (availability · views · favorites · Geprüft).
+ *
+ * PM decision (Viktoriia — "this logic already exists on prod"): the row is all-or-nothing. A
+ * missing or zero view/favorite count is NOT shown as "0×" — the whole row (including the
+ * always-on availability/Geprüft items) is hidden rather than reading as an empty/broken card. It
+ * only appears once BOTH counts are real and positive.
  */
-export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car, t }) => (
-  <div className="gallery-badges">
-    {car.availability && (
-      <span className="gallery-pill gallery-pill--good">
-        <Icon name="circle-check" size={14} stroke={2} />
-        {car.availability}
-      </span>
-    )}
-    {car.viewsCount != null && (
+export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car, t }) => {
+  if (!car.viewsCount || !car.favoritesCount) return null;
+  return (
+    <div className="gallery-badges" style={{ position: 'absolute', left: 10, bottom: 10, zIndex: 3 }}>
+      {car.availability && (
+        <span className="gallery-pill">
+          <Icon name="circle-check" size={15} stroke={2} color="var(--md-good)" />
+          {car.availability}
+        </span>
+      )}
       <span className="gallery-pill">
-        <Icon name="eye" size={14} stroke={1.9} />
+        <Icon name="eye" size={15} stroke={1.9} />
         {t('autobahn:card.activity.viewsCount', { count: car.viewsCount })}
       </span>
-    )}
-    {car.favoritesCount != null && (
       <span className="gallery-pill">
-        <Icon name="heart" size={14} stroke={1.9} />
+        <Icon name="heart" size={15} stroke={1.9} />
         {t('autobahn:card.activity.favoritesCount', { count: car.favoritesCount })}
       </span>
-    )}
-    <span className="gallery-pill">
-      <Icon name="shield-check" size={14} stroke={1.9} />
-      {t('autobahn:card.trust.checked')}
-    </span>
-  </div>
-);
+      <span className="gallery-pill">
+        <Icon name="shield-check" size={15} stroke={1.9} />
+        {t('autobahn:card.trust.checked')}
+      </span>
+    </div>
+  );
+};

package/cards/types.ts

@@ -113,8 +113,10 @@ export interface AutobahnCar {
   views?: number;
 
   // --- gallery activity strip (real data: UserActionsAPI 'stats/viewers', loaded async and
-  //     keyed by carId in SearchResultsStore.statsData — see fieldMapping.ts). Absent until
-  //     that fetch resolves; the gallery badge row simply omits the pill until then. ---
+  //     keyed by carId in SearchResultsStore.statsData — see fieldMapping.ts). Absent until that
+  //     fetch resolves. PM decision: the WHOLE badge row (availability/views/favorites/Geprüft)
+  //     is all-or-nothing — it renders only when BOTH counts are present and > 0; a missing or
+  //     zero count hides the entire row rather than showing a "0×" pill (GalleryBadges). ---
   /** total detail-page views (stats totalCarImpCount) — shown as the eye pill under the image. */
   viewsCount?: number;
   /** total users who favorited this car (stats totalFavCount) — shown as the heart pill under the image. */

package/package.json

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

@@ -1002,17 +1002,13 @@
 
 /* horizontal listing card (SRP): image | info | price */
 .md3 .listcard { display: grid; grid-template-columns: 300px 1fr 240px; align-items: stretch; }
-.md3 .listcard-media { position: relative; min-height: 100%; display: flex; flex-direction: column; }
-/* wraps the carousel + its absolute overlays; flexes to fill whatever height the badge row below
-   doesn't need, so the row height stays governed by the grid (like before this row existed). */
-.md3 .listcard-media-img { position: relative; flex: 1 1 auto; min-height: 0; }
-/* activity/trust pill row under the SRP card image (availability · views · favorites · Geprüft) */
-.md3 .gallery-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px;
-  border-top: 1px solid var(--md-outline-variant); background: var(--md-sc-lowest); flex: none; }
-.md3 .gallery-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
-  border-radius: var(--md-r-full); border: 1px solid var(--md-outline-variant); background: var(--md-sc-lowest);
-  color: var(--md-on-surface); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
-.md3 .gallery-pill--good { color: var(--md-good); border-color: var(--md-good); }
+.md3 .listcard-media { position: relative; min-height: 100%; }
+/* activity/trust badges overlaid on the photo's studio-white floor, bottom-left (opposite corner
+   from the bottom-right photo-count .imglabel so they never collide) — PM ref, no divider/box,
+   flat icon+text pairs. */
+.md3 .gallery-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
+.md3 .gallery-pill { display: inline-flex; align-items: center; gap: 5px; color: var(--md-on-surface-variant);
+  font-size: 13px; font-weight: 600; white-space: nowrap; }
 .md3 .listcard-info  { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
 .md3 .listcard-price { position: relative; padding: 16px 18px; border-left: 1px solid var(--md-outline-variant);
   display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; background: var(--md-sc-low); }
@@ -1298,10 +1294,9 @@
 
 @media (max-width: 600px) {
   .md3 .cards-3, .md3 .cards-2 { grid-template-columns: 1fr; }
-  /* listing card stacks: image (4:3) → badges → info → price */
+  /* listing card stacks: image (4:3) → info → price */
   .md3 .listcard { grid-template-columns: 1fr; }
-  .md3 .listcard-media { min-height: 0; }
-  .md3 .listcard-media-img { aspect-ratio: 4 / 3; flex: none; }
+  .md3 .listcard-media { aspect-ratio: 4 / 3; min-height: 0; }
   .md3 .listcard-price { border-left: 0; border-top: 1px solid var(--md-outline-variant); padding: 14px 16px;
     flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 14px; }
   .md3 .listcard-price .pricepaths { flex: none; min-width: 0; }