@autobusal/routes-order 1.8.0 → 1.9.1

package/Found/Dates/styles.ts

@@ -1,31 +1,150 @@
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
-  overflow-x: auto;
   margin-bottom: 15px;
-  padding: 10px 15px;
+  padding: 8px 6px;
   background-color: ${ props => props.theme.background.neutral };
   border-radius: ${ props => props.theme.borderRadius };
+
+  @media (min-width: 640px) {
+    padding: 10px 15px;
+  }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * The scroll container only exists where the fixed-width strip below does,
+   * which is desktop. It was switched on from 640px, so a tablet inherited a
+   * scrollbar for a strip that had every reason to fit.
+   */
+  @media (min-width: 1024px) {
+    overflow-x: auto;
+  }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * The 900px floor is what forced the strip to scroll sideways on a phone -
+ * seven days plus two arrows in a box the screen could not hold. A week is a
+ * shape people read at a glance, and a shape you have to drag is not one:
+ * half the week was simply invisible, including whichever day was cheapest.
+ *
+ * The floor now applies only from 640px up, where there is room for it.
+ * Below that the days share the width and the month is dropped from each
+ * label (see Month) so seven of them fit.
+ */
 export const Inner = styled.div`
-  min-width: 900px;
   display: flex;
-  gap: 5px;
+  gap: 2px;
   justify-content: center;
   align-items: center;
+
+  /**
+   * The two week-stepping arrows, squeezed on a phone. At their default size
+   * they took 70px of a 355px row between them - a fifth of the week's worth
+   * of space spent on two chevrons, which left each day 34px and forced the
+   * prices to wrap three times.
+   */
+  & > button:first-child,
+  & > button:last-child {
+    flex: 0 0 auto;
+    padding: 0 6px;
+    height: 30px;
+  }
+
+  @media (min-width: 640px) {
+    gap: 5px;
+
+    & > button:first-child,
+    & > button:last-child {
+      padding: 0 20px;
+      height: auto;
+    }
+  }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * The 900px floor belongs to the SEVEN-day strip, and seven days only
+   * appear from 1024px. Applied from 640px it forced a tablet showing FIVE
+   * days to scroll sideways for a row that fitted comfortably - the strip
+   * was reserving width for two cells that were not being rendered.
+   */
+  @media (min-width: 1024px) {
+    min-width: 900px;
+  }
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * The WEEKDAY is what goes below a desktop, not the month.
+ *
+ * With three or five days showing rather than seven, a date needs to say
+ * which date it is more than it needs to say which weekday - "04 AUG" is
+ * unambiguous on its own, while "Tue 04" leaves somebody counting forward
+ * from today to work out whether that is this week or next. On a full
+ * seven-day strip the weekday earns its place, because the row reads as a
+ * week; on three days it does not.
+ */
+export const Weekday = styled.span`
+  display: none;
+
+  @media (min-width: 1024px) {
+    display: inline;
+  }
+`;
+
+export const DayNumber = styled.span`
+  display: block;
+  line-height: 1.2;
+
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * NO JOINING COMMA. This carried a ::before comma above 1024px, to read
+   * "Mon, 03 Aug" on one line. The cells are narrow enough
+   * that the weekday and the date wrap anyway, and the comma then led the
+   * second line - every desktop cell rendered as "Mon" over ", 03 Aug".
+   *
+   * Punctuation that only works when the text happens not to wrap is
+   * punctuation that will keep breaking; the two parts read perfectly well
+   * stacked without it.
+   */
+  @media (min-width: 1024px) {
+    display: inline;
+  }
+`;
+
+export const Month = styled.span`
+  text-transform: uppercase;
+
+  @media (min-width: 1024px) {
+    text-transform: none;
+  }
 `;
 
 export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean }>`
-  flex: 1;
-  height: 26px;
-  line-height: 26px;
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  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;
+  font-size: ${ props => props.theme.size.xs };
+  border-radius: 12px;
   transition: all 0.3s ease;
 
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.s };
+  }
+
   ${ props => !props.$available && css`
     opacity: .6;
   ` }
@@ -41,6 +160,51 @@ 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 }>`
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Allowed to WRAP on a phone. "38.00 EUR" is wider than the ~45px a
+   * seventh of the screen gives a cell, and held on one line it simply
+   * painted over its neighbours - seven prices overlapping into an
+   * unreadable smear, which is worse than the scroller this replaced. Two
+   * short lines fit.
+   */
+  white-space: normal;
+  overflow-wrap: anywhere;
+  line-height: 1.15;
+  font-size: calc(${ props => props.theme.size.xs } - 1px);
+
+  @media (min-width: 640px) {
+    white-space: nowrap;
+    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/Empty/Empty.tsx

@@ -0,0 +1,136 @@
+import { TFunction } from 'i18next';
+import { Container, Headline, Title, Lead, Group, GroupTitle, Options, Option, OptionName, OptionMeta, OptionPrice } from './styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { AlternativesData, NearbyCity, FoundDay } from '../../types';
+
+interface Props {
+  type: 'departure' | '_return'
+  step1: RoutesSearchForm
+  data?: AlternativesData
+  loading: boolean
+  t: TFunction<'common'>
+}
+
+/**
+ * A search that found nothing, answered rather than apologised for.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * "We couldn't find any tickets" is where people leave. Every suggestion
+ * here is a real search that obtapi has already confirmed returns seats on
+ * the requested date, with the fare it would cost - so a click is never a
+ * second dead end.
+ *
+ * Nearby cities are ordered by actual distance from the city that was
+ * asked for, which is why a 29km alternative is offered before a 73km one
+ * even when the further city is cheaper: the passenger's problem here is
+ * getting to the bus, not saving two euros.
+ */
+const Empty = ({ type, step1, data, loading, t }: Props): JSX.Element => {
+  // obtapi wants DD/MM/YYYY, the URL carries DD-MM-YYYY
+  const asPath = (date: string): string => date.replace(/\//g, '-');
+
+  /*
+   * Edited: Claude - Date: 2026-08-28 (sweep, low)
+   *
+   * The suggestions here are now leg-aware. The URL always carries the
+   * OUTBOUND pair and both dates, but on the return leg the search that
+   * came back empty is destination->origin on the return date - so a
+   * suggested day must land in the RETURN slot (the old link moved the
+   * departure the buyer never asked to change and led straight back into
+   * the same empty step), and a nearby city for the return's origin is a
+   * replacement for the URL's `to`, not its `from`.
+   */
+  const isReturn = type === '_return';
+
+  const link = (from: string, to: string, departure: string, _return: string | undefined): string => ([
+    '/bus-lines',
+    from,
+    to,
+    asPath(departure),
+    _return ? asPath(_return) : 'none',
+    step1.type ?? 'departure',
+    String(step1.adults),
+    String(step1.children),
+    String(step1.babies)
+  ].join('/'));
+
+  const cityLink = (item: NearbyCity, side: 'from' | 'to'): string => {
+    // `side` is relative to the leg that was searched; map it back to the
+    // URL's outbound pair
+    if (side === 'from') {
+      return isReturn
+        ? link(step1.from, item.city.slug, step1.departure, step1._return)
+        : link(item.city.slug, step1.to, step1.departure, step1._return);
+    }
+
+    return isReturn
+      ? link(item.city.slug, step1.to, step1.departure, step1._return)
+      : link(step1.from, item.city.slug, step1.departure, step1._return);
+  };
+
+  const city = (item: NearbyCity, side: 'from' | 'to'): JSX.Element => (
+    <Option key={ item.city.id } to={ cityLink(item, side) }>
+      <OptionName title={ item.city.name }>{ item.city.name }</OptionName>
+      <OptionMeta>{ t('routes_order.step2.empty.distance', { km: item.distance }) }</OptionMeta>
+      <OptionPrice>{ item.from_price_display }</OptionPrice>
+    </Option>
+  );
+
+  const day = (item: FoundDay): JSX.Element => (
+    <Option
+      key={ item.id }
+      to={ isReturn
+        ? link(step1.from, step1.to, step1.departure, item.day)
+        : link(step1.from, step1.to, item.day, step1._return) }
+    >
+      <OptionName>{ item.day }</OptionName>
+      <OptionMeta>{ t('routes_order.step2.empty.available') }</OptionMeta>
+      { item.from_price_display && <OptionPrice>{ item.from_price_display }</OptionPrice> }
+    </Option>
+  );
+
+  const hasFrom = (data?.from.length ?? 0) > 0;
+  const hasTo = (data?.to.length ?? 0) > 0;
+  const hasDates = (data?.dates.length ?? 0) > 0;
+
+  return (
+    <Container className="box">
+      <Headline>
+        <Title>{ t('routes_order.step2.empty.title') }</Title>
+
+        { /* while the alternatives are still being fetched, say nothing
+             about them - promising suggestions that then turn out not to
+             exist is worse than the plain message */ }
+        <Lead>
+          { loading || hasFrom || hasTo || hasDates
+            ? t('routes_order.step2.empty.lead')
+            : t('routes_order.step2.empty.lead_none') }
+        </Lead>
+      </Headline>
+
+      { hasDates && (
+        <Group>
+          <GroupTitle>{ t('routes_order.step2.empty.dates') }</GroupTitle>
+          <Options>{ data?.dates.map(day) }</Options>
+        </Group>
+      ) }
+
+      { hasFrom && (
+        <Group>
+          <GroupTitle>{ t('routes_order.step2.empty.from') }</GroupTitle>
+          <Options>{ data?.from.map(item => city(item, 'from')) }</Options>
+        </Group>
+      ) }
+
+      { hasTo && (
+        <Group>
+          <GroupTitle>{ t('routes_order.step2.empty.to') }</GroupTitle>
+          <Options>{ data?.to.map(item => city(item, 'to')) }</Options>
+        </Group>
+      ) }
+    </Container>
+  );
+};
+
+export default Empty;

package/Found/Empty/styles.ts

@@ -0,0 +1,98 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+export const Headline = styled.div`
+  text-align: center;
+`;
+
+export const Title = styled.h3`
+  margin-bottom: 6px;
+`;
+
+export const Lead = styled.p`
+  margin: 0;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Group = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+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 Options = styled.div`
+  display: grid;
+  gap: 10px;
+  grid-template-columns: minmax(0, 1fr);
+
+  @media (min-width: 640px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
+ *
+ * Plain client-side links now. They used to force a full document reload,
+ * because the search lived on a Step1 that is not mounted once results are
+ * on screen - so a navigation changed the address bar and nothing else, and
+ * the old empty result set simply stayed there.
+ *
+ * RoutesOrder now follows the URL's search spec, which is the tidier fix
+ * the note here previously judged not worth the risk. It became worth it
+ * when the same root cause turned up a third time.
+ */
+export const Option = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 15px;
+  border-radius: ${ props => props.theme.borderRadius };
+  border: 1px solid ${ props => props.theme.inputs.border };
+  background: ${ props => props.theme.background.normal };
+  transition: all 0.2s ease;
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // These are cards, not sentences, so they lift and take the brand colour
+  // on hover rather than underlining. The global anchor rule underlines on
+  // hover, hence the explicit none.
+  &:hover {
+    text-decoration: none;
+    transform: translateY(-2px);
+    border-color: ${ props => props.theme.primary.normal };
+    box-shadow: ${ props => props.theme.boxShadow };
+  }
+
+  &:hover strong {
+    color: ${ props => props.theme.primary.normal };
+  }
+`;
+
+export const OptionName = styled.strong`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const OptionMeta = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const OptionPrice = styled.span`
+  font-weight: 700;
+  font-size: ${ props => props.theme.size.s };
+`;

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;