@bytebrand/fe-ui-core-autobahn 1.0.5 → 1.0.6

package/cards/cardParts.tsx

@@ -494,38 +494,38 @@ export interface GalleryBadgesProps {
 }
 
 /**
- * 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).
+ * Trust/activity badges overlaid on the photo itself, bottom-right (PM reference, 2026-07-10),
+ * Figma pill styling (border/radius/height — see .gallery-pill 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.
+ * Each pill is independent, not all-or-nothing: a missing or zero view/favorite count just omits
+ * THAT pill (never shown as "0×") — availability and Geprüft still render on their own terms.
+ * .gallery-badges is anchored via `right`, not `left` (md3.css), so however many pills survive
+ * they stay stuck to the right edge instead of drifting to wherever the row happens to start.
  */
-export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car, t }) => {
-  if (!car.viewsCount || !car.favoritesCount) return null;
-  return (
-    <div className="gallery-badges">
-      {car.availability && (
-        <span className="gallery-pill">
-          <Icon name="circle-check" size={15} stroke={2} color="var(--md-good)" />
-          {car.availability}
-        </span>
-      )}
+export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car, t }) => (
+  <div className="gallery-badges">
+    {car.availability && (
+      <span className="gallery-pill">
+        <Icon name="circle-check" size={15} stroke={2} color="var(--md-good)" />
+        {car.availability}
+      </span>
+    )}
+    {!!car.viewsCount && (
       <span className="gallery-pill">
         <Icon name="eye" size={15} stroke={1.9} />
         {t('autobahn:card.activity.viewsCount', { count: car.viewsCount })}
       </span>
+    )}
+    {!!car.favoritesCount && (
       <span className="gallery-pill">
         <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={15} 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

@@ -114,9 +114,9 @@ export interface AutobahnCar {
 
   // --- 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. 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). ---
+  //     fetch resolves. Each pill in the badge row is independent (GalleryBadges): a missing or
+  //     zero count omits just that pill (never a "0×"), availability/Geprüft still show on their
+  //     own terms — the row is anchored to the right edge so it never looks lopsided. ---
   /** 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.5",
+  "version": "1.0.6",
   "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",