@autobusal/routes-order 1.8.0 → 1.9.3

package/CHANGELOG.md

@@ -3,6 +3,118 @@
 All notable changes to this package are documented here. This project follows
 [Keep a Changelog](https://keepachangelog.com/) and [Semantic Versioning](https://semver.org/).
 
+> Note: 1.8.0 was published without a changelog entry. The gap is left as-is
+> rather than reconstructed after the fact.
+
+## [1.9.3] - 2026-08-01
+
+### Changed
+
+- **Trip length reads as a duration, not a clock time.** "08:30" sat
+  directly between two real departure times with nothing to say it meant
+  eight and a half hours rather than half past eight. It now renders as
+  `07h 30m` behind an hourglass, and an exact number of hours drops the
+  minutes (`08h`, not `08h 00m`). The unit labels come from the translation
+  files - "h"/"m" are a Latin-script convention, so Greek reads `07ω 30λ`,
+  Bulgarian and Macedonian `07ч 30м`, Albanian `07o 30m`.
+  obtapi's `-` sentinel (no computable duration) still passes straight
+  through rather than becoming a confident "0h 0m".
+- **Stop name down to 12px** on the result cards.
+
+## [1.9.2] - 2026-08-01
+
+### Changed
+
+- **Stop name stepped down to 14px** on the result cards. At the same 16px
+  as body copy it competed with the city name above it; the city should be
+  read first and the stop only when it is needed.
+- **Country code renders upper case and smaller.** It arrives from the
+  database lower case ("alb", "grc") - an ISO country code is upper case by
+  definition, so it is cased at render time rather than left to the data,
+  where every consumer would have to remember.
+
+## [1.9.1] - 2026-08-01
+
+### Changed
+
+- **Filters became a sidebar** at 1280px and up - always visible, sticky
+  while the list scrolls, no click needed to discover them. Below 1280px
+  they stay the collapsible panel above the list. The breakpoint is 1280
+  rather than 1024 because the result cards switch to their wide row layout
+  at 1024px on VIEWPORT width, not container width, so taking a column out
+  of a 1024px window would leave the cards using a layout their remaining
+  space cannot carry.
+- **Facet counts are a filled pill**, separate from the from-price. They
+  used to read as one muted string ("5 · 38.00 EUR") where the two numbers
+  ran together and it was not obvious which was which.
+- **Facet labels wrap instead of truncating.** In a sidebar column an
+  ellipsis reduced two different stops at the same city to the same
+  "Terminali Lindor Inte..." - the one distinction the filter exists to
+  make.
+- **The result-count / sort bar sits on the card surface** rather than
+  floating on the page background.
+
+### Fixed
+
+- Filter panel grid tracks used `1fr`, whose implicit min-width is `auto`,
+  so a long stop name pushed the whole panel wider than its column and
+  pushed the counts and prices out of view entirely. Now `minmax(0, 1fr)`.
+
+## [1.9.0] - 2026-08-01
+
+### Added
+
+- **Sorting on the results list** - recommended, cheapest, fastest,
+  earliest, latest. Preferred-stop pinning stays the outer partition and
+  each side sorts within itself, so choosing "cheapest" can no longer
+  silently un-pin a stop the user saved. Every sort carries a tiebreak on
+  the other axis, so three trips tied on journey time are led by the
+  cheapest of them rather than by whichever happened to come first.
+- **"Recommended" is defined and merit-first**: price rank plus duration
+  rank across the current result set, with the operator's paid subscription
+  priority breaking ties only between trips already equal on both. Paid
+  placement cannot overtake a cheaper or faster competitor. This is a
+  deliberate commercial decision (Ferjolt, 2026-08-01) and it is the answer
+  if anyone asks what the word means on this page. It replaces the previous
+  default, which was obtapi's departure-time order - that view is still one
+  click away as "earliest".
+- **Quick-pick cards** for cheapest / fastest / recommended, each naming
+  the winning fare, journey time and operator, and applying that ordering
+  on click. Computed from the filtered list, so a card never advertises a
+  trip the user's own filters have hidden.
+- **Faceted filters with live counts and a from-price per value** -
+  departure-time bucket, operator, direct-only, departure stop, arrival
+  stop, on-board amenities, and a maximum price. Counts recompute against
+  the *other* active filters, and values that would return nothing render
+  disabled rather than vanishing mid-interaction.
+- **Per-day prices on the date strip**, from obtapi's `from_price` /
+  `from_price_display`. The cheapest day is badged only when the cheap days
+  are a genuine minority - badging six days out of seven trains people to
+  ignore the badge.
+- **Result count and price range** above the list, which also makes it
+  visible when a filter is hiding results.
+- **Collapsed duplicate departures.** Trips from the same operator between
+  the same two stops at the same price and duration render as one card with
+  a departure-time picker instead of a wall of near-identical rows - the
+  shape hourly Albanian intercity service produces. Whatever time is picked
+  is what gets booked.
+- **Price clarity line** under every fare. It states the party size rather
+  than "per adult", because `price.value` is the total for the whole
+  passenger mix, not a per-person fare.
+
+The refinement lives in the URL, so a filtered result set survives a reload
+and can be shared. External-provider offers are never dropped by a facet
+they cannot report (stops, amenities) - a filter that deletes paid partner
+inventory is a revenue bug, not a UI detail.
+
+### Fixed
+
+- **`useGetDates` cache key ignored the search.** It was
+  `['step2-dates', { number }]`, so every city pair and passenger mix shared
+  one cache entry and the strip could show a previous trip's days. Harmless
+  while the strip held only booleans; with per-day prices on it, it would
+  have quoted one route's fares under another route's dates.
+
 ## [1.7.0] - 2026-07-30
 
 ### Added

package/Found/Dates/Dates.tsx

@@ -4,7 +4,7 @@ import { AiOutlineCaretLeft, AiOutlineCaretRight } from 'react-icons/ai';
 import { Button } from '@autobusal/common';
 import { createDate, getFormattedShort } from '@autobusal/utilities';
 import Loading from './Loading';
-import { Container, Inner, ButtonDay } from './styles';
+import { Container, Inner, ButtonDay, DayPrice, Cheapest } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundDay } from '../../types';
 import { useGetDates } from '../../services';
@@ -43,14 +43,50 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
 
   const today = new Date();
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * The cheapest fare in the visible window, so it can be called out.
+   *
+   * Two guards, both learned by looking at it: the badge is pointless when
+   * every day costs the same, and it is worse than pointless when most days
+   * tie at the minimum - badging six of seven days trains people to ignore
+   * the badge entirely. It only appears when the cheap days are genuinely
+   * the minority, which is when shifting a date is actually worth telling
+   * somebody about.
+   */
+  const prices = (data ?? [])
+    .filter(item => typeof item.from_price === 'number')
+    .map(item => item.from_price as number);
+
+  const lowest = prices.length > 0 ? Math.min(...prices) : null;
+
+  const atLowest = prices.filter(price => price === lowest).length;
+
+  const varies = prices.length > 1
+    && Math.max(...prices) > (lowest as number)
+    && atLowest * 2 <= prices.length;
+
   const items = data?.map(item => {
     const date = createDate(item.day);
 
     // if date in the future, and we have routes available
     const isAvailable = today.getTime() <= date.getTime() && item.routes;
 
+    const isCheapest = varies && lowest !== null && item.from_price === lowest;
+
     return (
-      <ButtonDay key={ item.id } $available={ isAvailable } $selected={ step1[type] === item.day } onClick={ () => onClick(item, isAvailable) }>{ getFormattedShort(date, t) }</ButtonDay>
+      <ButtonDay key={ item.id } $available={ isAvailable } $selected={ step1[type] === item.day } onClick={ () => onClick(item, isAvailable) }>
+        { getFormattedShort(date, t) }
+
+        { isAvailable && item.from_price_display && (
+          <DayPrice $cheapest={ isCheapest }>{ item.from_price_display }</DayPrice>
+        ) }
+
+        { isCheapest && isAvailable && (
+          <Cheapest $selected={ step1[type] === item.day }>{ t('routes_order.step2.dates.cheapest') }</Cheapest>
+        ) }
+      </ButtonDay>
     );
   })
 

package/Found/Dates/styles.ts

@@ -18,12 +18,17 @@ export const Inner = styled.div`
 
 export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean }>`
   flex: 1;
-  height: 26px;
-  line-height: 26px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 4px 0;
+  min-height: 26px;
   font-weight: 700;
   text-align: center;
   font-size: ${ props => props.theme.size.s };
-  border-radius: 100px;
+  border-radius: 12px;
   transition: all 0.3s ease;
 
   ${ props => !props.$available && css`
@@ -41,6 +46,35 @@ export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean
   ` }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Inherits colour from the selected/hovered day rather than setting its own,
+ * so the price stays readable once the parent flips to the primary fill.
+ */
+export const DayPrice = styled.span<{ $cheapest: boolean }>`
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: ${ props => props.$cheapest ? 700 : 400 };
+  opacity: .85;
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Success green reads well against the dark strip, but the SELECTED day
+ * fills with the brand primary - green on that yellow measured about 1.5:1,
+ * unreadable at 10px. On the selected day it inherits the button's own
+ * contrast colour and leans on weight instead of hue.
+ */
+export const Cheapest = styled.span<{ $selected: boolean }>`
+  display: block;
+  font-size: ${ props => props.theme.size.xxs };
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  font-weight: 700;
+  color: ${ props => props.$selected ? 'inherit' : props.theme.font.success };
+`;
+
 export const ContainerLoading = styled.div`
   height: 26px;
   text-align: center;

package/Found/Filters/Filters.tsx

@@ -0,0 +1,194 @@
+import { TFunction } from 'i18next';
+import { FaFilter } from 'react-icons/fa';
+import { AiOutlineCaretDown, AiOutlineCaretUp } from 'react-icons/ai';
+import { Container, Toggle, Count, Panel, Group, GroupTitle, Choice, ChoiceName, ChoiceMeta, ChoiceCount, ChoicePrice, Slider, Reset } from './styles';
+import { Refinement, Facets, FacetValue, BucketKey, EMPTY, isRefined } from '../refine';
+
+interface Props {
+  open: boolean
+  refinement: Refinement
+  facets: Facets
+  range: { min: number, max: number } | null
+  currency: string
+  t: TFunction<'common'>
+  onToggle: () => void
+  onChange: (refinement: Refinement) => void
+}
+
+type ListFacet = 'operators' | 'fromStops' | 'toStops' | 'features';
+
+/**
+ * Faceted filters for the results list.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Collapsed by default and rendered above the list rather than in a
+ * sidebar: the result cards are already a full-width layout that works on a
+ * phone, and carving a column out of it would have cost more than the
+ * filters are worth on the screen size most of our traffic arrives on.
+ *
+ * Counts come from `buildFacets`, which recomputes each facet against the
+ * OTHER active filters - so ticking one operator doesn't zero out every
+ * other operator's count and strand the user in a dead end.
+ */
+const Filters = ({ open, refinement, facets, range, currency, t, onToggle, onChange }: Props): JSX.Element => {
+  const active = [
+    refinement.operators.length,
+    refinement.buckets.length,
+    refinement.fromStops.length,
+    refinement.toStops.length,
+    refinement.features.length,
+    refinement.direct ? 1 : 0,
+    refinement.maxPrice === null ? 0 : 1
+  ].reduce((total, value) => total + value, 0);
+
+  const onList = (facet: ListFacet, value: number): void => {
+    const current = refinement[facet];
+
+    onChange({
+      ...refinement,
+      [facet]: current.includes(value) ? current.filter(item => item !== value) : [ ...current, value ]
+    });
+  };
+
+  const onBucket = (value: BucketKey): void => {
+    onChange({
+      ...refinement,
+      buckets: refinement.buckets.includes(value)
+        ? refinement.buckets.filter(item => item !== value)
+        : [ ...refinement.buckets, value ]
+    });
+  };
+
+  const list = (facet: ListFacet, title: string, values: FacetValue[]): JSX.Element | null => {
+    // a facet with a single value cannot narrow anything - showing it is
+    // just a checkbox that does nothing
+    if (values.length < 2) {
+      return null;
+    }
+
+    return (
+      <Group>
+        <GroupTitle>{ title }</GroupTitle>
+
+        { values.map(item => (
+          <Choice key={ item.value } $disabled={ item.count === 0 }>
+            <input
+              type="checkbox"
+              checked={ refinement[facet].includes(item.value) }
+              disabled={ item.count === 0 && !refinement[facet].includes(item.value) }
+              onChange={ () => onList(facet, item.value) }
+            />
+
+            <ChoiceName title={ item.label }>{ item.label }</ChoiceName>
+
+            <ChoiceMeta>
+              <ChoiceCount>{ item.count }</ChoiceCount>
+              { item.fromDisplay && <ChoicePrice>{ item.fromDisplay }</ChoicePrice> }
+            </ChoiceMeta>
+          </Choice>
+        )) }
+      </Group>
+    );
+  };
+
+  return (
+    <Container>
+      <Toggle type="button" $open={ open } aria-expanded={ open } onClick={ onToggle }>
+        <FaFilter />
+        { t('routes_order.step2.filters.title') }
+        { active > 0 && <Count>{ active }</Count> }
+        { open ? <AiOutlineCaretUp /> : <AiOutlineCaretDown /> }
+      </Toggle>
+
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+           Rendered unconditionally and hidden with CSS rather than gated on
+           `open`, because at sidebar widths there is no toggle to open it. */ }
+      <Panel className="box" $open={ open }>
+          { facets.buckets.length > 1 && (
+            <Group>
+              <GroupTitle>{ t('routes_order.step2.filters.times') }</GroupTitle>
+
+              { facets.buckets.map(bucket => (
+                <Choice key={ bucket.value } $disabled={ bucket.count === 0 }>
+                  <input
+                    type="checkbox"
+                    checked={ refinement.buckets.includes(String(bucket.value) as BucketKey) }
+                    disabled={ bucket.count === 0 && !refinement.buckets.includes(String(bucket.value) as BucketKey) }
+                    onChange={ () => onBucket(String(bucket.value) as BucketKey) }
+                  />
+
+                  <ChoiceName>{ bucket.label }</ChoiceName>
+
+                  <ChoiceMeta>
+                    <ChoiceCount>{ bucket.count }</ChoiceCount>
+                    { bucket.fromDisplay && <ChoicePrice>{ bucket.fromDisplay }</ChoicePrice> }
+                  </ChoiceMeta>
+                </Choice>
+              )) }
+            </Group>
+          ) }
+
+          { list('operators', t('routes_order.step2.filters.operators'), facets.operators) }
+
+          { facets.hasDirect && (
+            <Group>
+              <GroupTitle>{ t('routes_order.step2.filters.stops') }</GroupTitle>
+
+              <Choice $disabled={ facets.direct === 0 && !refinement.direct }>
+                <input
+                  type="checkbox"
+                  checked={ refinement.direct }
+                  disabled={ facets.direct === 0 && !refinement.direct }
+                  onChange={ () => onChange({ ...refinement, direct: !refinement.direct }) }
+                />
+
+                <ChoiceName>{ t('routes_order.step2.filters.direct') }</ChoiceName>
+
+                <ChoiceMeta>{ facets.direct }</ChoiceMeta>
+              </Choice>
+            </Group>
+          ) }
+
+          { list('fromStops', t('routes_order.step2.filters.from_stops'), facets.fromStops) }
+          { list('toStops', t('routes_order.step2.filters.to_stops'), facets.toStops) }
+          { list('features', t('routes_order.step2.filters.features'), facets.features) }
+
+          { range !== null && range.max > range.min && (
+            <Group>
+              <GroupTitle>{ t('routes_order.step2.filters.max_price') }</GroupTitle>
+
+              <ChoiceMeta>
+                { (refinement.maxPrice ?? range.max).toFixed(2) } { currency }
+              </ChoiceMeta>
+
+              <Slider
+                type="range"
+                min={ Math.floor(range.min) }
+                max={ Math.ceil(range.max) }
+                step={ 1 }
+                value={ refinement.maxPrice ?? Math.ceil(range.max) }
+                onChange={ event => {
+                  const value = Number(event.target.value);
+
+                  // dragging back to the top is the same as no filter at all,
+                  // so it clears rather than pinning a max nobody can exceed
+                  onChange({ ...refinement, maxPrice: value >= Math.ceil(range.max) ? null : value });
+                } }
+              />
+            </Group>
+          ) }
+
+          { isRefined(refinement) && (
+            <Group>
+              <Reset type="button" onClick={ () => onChange({ ...EMPTY, sort: refinement.sort }) }>
+                { t('routes_order.step2.filters.reset') }
+              </Reset>
+            </Group>
+          ) }
+      </Panel>
+    </Container>
+  );
+};
+
+export default Filters;

package/Found/Filters/styles.ts

@@ -0,0 +1,188 @@
+import styled, { css } from 'styled-components';
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Below 1280px the filters stay a collapsible panel above the list; at and
+ * above it they become a permanent sidebar. 1280 rather than 1024 on
+ * purpose: the result CARDS switch to their wide row layout at 1024px based
+ * on the viewport, not on their container, so carving a 280px column out of
+ * a 1024px window would leave the cards using a layout their remaining
+ * ~700px cannot carry.
+ */
+export const Container = styled.div`
+  margin-bottom: 15px;
+
+  @media (min-width: 1280px) {
+    margin-bottom: 0;
+  }
+`;
+
+export const Toggle = styled.button<{ $open: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  border-radius: 100px;
+  border: 1px solid ${ props => props.theme.inputs.border };
+  background: ${ props => props.theme.background.normal };
+  color: ${ props => props.theme.font.normal };
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: ${ props => props.theme.primary.normal };
+  }
+
+  ${ props => props.$open && css`
+    border-color: ${ props => props.theme.primary.normal };
+  ` }
+
+  // the sidebar is always open, so there is nothing left to toggle
+  @media (min-width: 1280px) {
+    display: none;
+  }
+`;
+
+export const Count = styled.span`
+  min-width: 20px;
+  padding: 1px 7px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.primary.contrast };
+  background: ${ props => props.theme.primary.normal };
+  border-radius: 100px;
+`;
+
+export const Panel = styled.div<{ $open: boolean }>`
+  display: ${ props => props.$open ? 'grid' : 'none' };
+  gap: 20px;
+  margin-top: 12px;
+  padding: 20px;
+  // minmax(0, 1fr) rather than 1fr: a grid track's implicit min-width is
+  // auto, so a long stop name like "Terminali Lindor Interurban dhe
+  // Nderkombetar i Autobusave (TEG)" pushed the whole panel wider than its
+  // column and pushed the counts and prices out of sight
+  grid-template-columns: minmax(0, 1fr);
+
+  @media (min-width: 640px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  // as a sidebar: always rendered, one column, and it follows the page down
+  // so the filters stay reachable while scrolling a long result list
+  @media (min-width: 1280px) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    margin-top: 0;
+    position: sticky;
+    top: 15px;
+    max-height: calc(100vh - 30px);
+    overflow-y: auto;
+  }
+`;
+
+export const Group = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+`;
+
+export const GroupTitle = styled.h6`
+  margin-bottom: 0;
+  font-size: ${ props => props.theme.size.xs };
+  text-transform: uppercase;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Choice = styled.label<{ $disabled: boolean }>`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  line-height: 1.35;
+  font-size: ${ props => props.theme.size.s };
+  cursor: pointer;
+
+  & > input {
+    cursor: pointer;
+    accent-color: ${ props => props.theme.primary.normal };
+  }
+
+  ${ props => props.$disabled && css`
+    cursor: default;
+    opacity: .45;
+
+    & > input {
+      cursor: default;
+    }
+  ` }
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Wraps rather than truncating. In the sidebar column an ellipsis turned
+ * "Terminali Lindor Interurban dhe Nderkombetar i Autobusave (TEG)" into
+ * "Terminali Lindor Inte..." - two stops at the same city are then
+ * indistinguishable, which is the one thing this filter exists to tell
+ * apart. A second line is cheaper than a useless label.
+ */
+export const ChoiceName = styled.span`
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+`;
+
+export const ChoiceMeta = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+  white-space: nowrap;
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * How many trips a facet value leaves, as a filled pill. It used to sit
+ * next to the price as "5 · 38.00 EUR" in one muted string, where the two
+ * numbers read as one and you had to work out which was which. A count and
+ * a fare are different kinds of thing and now look like it.
+ */
+export const ChoiceCount = styled.span`
+  min-width: 22px;
+  padding: 1px 6px;
+  text-align: center;
+  font-weight: 700;
+  color: ${ props => props.theme.font.normal };
+  background: ${ props => props.theme.background.neutral };
+  border-radius: 100px;
+`;
+
+export const ChoicePrice = styled.span`
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Slider = styled.input`
+  width: 100%;
+  accent-color: ${ props => props.theme.primary.normal };
+  cursor: pointer;
+`;
+
+export const Reset = styled.button`
+  align-self: flex-start;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  color: ${ props => props.theme.font.error };
+  transition: all 0.2s ease;
+
+  &:hover {
+    opacity: .8;
+  }
+`;