@autobusal/routes-order 1.40.2 → 1.40.3

package/Found/Route/Route.tsx

@@ -3,12 +3,12 @@ import { TFunction } from 'i18next';
 import { HiOutlineArrowNarrowRight, HiOutlineDocumentText, HiChevronDown, HiChevronUp } from 'react-icons/hi';
 import { BiHourglass } from 'react-icons/bi';
 import { RiBus2Line } from 'react-icons/ri';
-import { MdOutlineAltRoute } from 'react-icons/md';
+import { MdOutlineAltRoute, MdEventSeat } from 'react-icons/md';
 import { formatDuration, splitPrice } from '../refine';
 import { Button, RouteFeature, Information, Rating } from '@autobusal/common';
 import { useGetSettings } from '@autobusal/providers/services';
 import { createDate, getDayParts } from '@autobusal/utilities';
-import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, SeatsLeft, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves, Day, NextDay, Standard, Stops, StopsItems, StopRow, StopTime, StopDay, StopBorder } from './styles';
+import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, SeatsLeft, SeatsCompact, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves, Day, NextDay, Standard, Stops, StopsItems, StopRow, StopTime, StopDay, StopBorder } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 /**
@@ -195,6 +195,25 @@ const Route = ({ data, type, date, passengers, t, onSave }: Props): JSX.Element
             <MdOutlineAltRoute />
             { data.code }
           </CodeCompany>
+
+          { /* Claude - 2026-09-27 (Ferjolt: "on small screens, can we show the
+               Seats left inline with operator logo and route code, on the
+               right side of the row?"). A seat and the number rather than the
+               sentence: the row is short on a phone, and a seat icon ALONE
+               could be read as "choose your seat" (a paid add-on) - the
+               number is what makes it a count. The full sentence stays for
+               screen readers and as the tooltip. Phones only; wider screens
+               keep the sentence under the price. */ }
+          { seats !== null && (
+            <SeatsCompact
+              $low={ seats <= LOW_SEATS }
+              title={ t('routes_order.step2.route.seats_left', { count: seats }) }
+              aria-label={ t('routes_order.step2.route.seats_left', { count: seats }) }
+            >
+              <MdEventSeat aria-hidden="true" />
+              { seats }
+            </SeatsCompact>
+          ) }
         </Company>
 
         <Location $side="from">

package/Found/Route/styles.ts

@@ -157,6 +157,18 @@ export const Company = styled.div`
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 4px;
+
+    /*
+     * Claude - 2026-09-27: the operator's rating as ONE star and the number
+     * ("★ 4.3 (3)") on a phone. Measured at 375px: logo 96 + five stars and
+     * the score 120 + route code 77 + the seats count 48 is 365px on a 315px
+     * row, so the seats count wrapped to a line of its own. The full five
+     * stars stay on wider screens, and the whole summary is the tooltip
+     * (Rating's title). The rating is the only span before the seats count.
+     */
+    & > span:first-of-type svg:not(:first-child) {
+      display: none;
+    }
   }
 
   /**
@@ -1051,7 +1063,41 @@ export const SeatsLeft = styled.span<{ $low: boolean }>`
   font-weight: ${ props => (props.$low ? 700 : 400) };
   color: ${ props => (props.$low ? props.theme.font.error : props.theme.font.faded) };
 
+  // Claude - 2026-09-27: on a phone the count moves up to the operator row
+  // (SeatsCompact) - one place to read it, not two
+  @media (max-width: 639px) {
+    display: none;
+  }
+
   @media (min-width: 768px) {
     text-align: center;
   }
 `;
+
+/*
+ * Claude - 2026-09-27 (Ferjolt): the seats count on a phone - a seat and the
+ * number, pushed to the right end of the operator row (logo, rating, route
+ * code). Same emphasis as SeatsLeft when few are left.
+ */
+export const SeatsCompact = styled.span<{ $low: boolean }>`
+  display: none;
+
+  @media (max-width: 639px) {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+    padding: 2px 8px;
+    border-radius: 100px;
+    background: ${ props => (props.$low ? 'rgba(204, 51, 51, .1)' : props.theme.background.neutral) };
+    color: ${ props => (props.$low ? props.theme.font.error : props.theme.font.faded) };
+    font-size: ${ props => props.theme.size.xs };
+    font-weight: 700;
+    line-height: 1.4;
+    white-space: nowrap;
+
+    svg {
+      font-size: 1.15em;
+    }
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.40.2",
+  "version": "1.40.3",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts",