@autobusal/routes-order 1.9.0 → 1.11.1

package/Found/Empty/Empty.tsx

@@ -0,0 +1,109 @@
+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 {
+  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 = ({ 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, '-');
+
+  const link = (from: string, to: string, departure: string): string => ([
+    '/bus-lines',
+    from,
+    to,
+    asPath(departure),
+    step1._return ? asPath(step1._return) : 'none',
+    step1.type ?? 'departure',
+    String(step1.adults),
+    String(step1.children),
+    String(step1.babies)
+  ].join('/'));
+
+  const city = (item: NearbyCity, side: 'from' | 'to'): JSX.Element => (
+    <Option
+      key={ item.city.id }
+      reloadDocument
+      to={ side === 'from'
+        ? link(item.city.slug, step1.to, step1.departure)
+        : link(step1.from, item.city.slug, step1.departure) }
+    >
+      <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 } reloadDocument to={ link(step1.from, step1.to, item.day) }>
+      <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,99 @@
+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-01
+ *
+ * These links carry `reloadDocument` at the call site. RoutesOrder holds
+ * the search in component state and Step1 only kicks off a search when it
+ * has not already redirected, so a client-side navigation changes the URL
+ * and nothing else - the old, empty result set just stays on screen.
+ *
+ * A full load re-enters the flow from the URL exactly as arriving from a
+ * search engine does. Teaching RoutesOrder to resync its state from
+ * changing params would be the tidier fix, but that is the main booking
+ * flow and this is a dead-end page: not worth the risk for the gain.
+ */
+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

@@ -1,7 +1,7 @@
 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, Slider, Reset } from './styles';
+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 {
@@ -83,7 +83,8 @@ const Filters = ({ open, refinement, facets, range, currency, t, onToggle, onCha
             <ChoiceName title={ item.label }>{ item.label }</ChoiceName>
 
             <ChoiceMeta>
-              { item.count }{ item.fromDisplay ? ` · ${ item.fromDisplay }` : '' }
+              <ChoiceCount>{ item.count }</ChoiceCount>
+              { item.fromDisplay && <ChoicePrice>{ item.fromDisplay }</ChoicePrice> }
             </ChoiceMeta>
           </Choice>
         )) }
@@ -100,8 +101,10 @@ const Filters = ({ open, refinement, facets, range, currency, t, onToggle, onCha
         { open ? <AiOutlineCaretUp /> : <AiOutlineCaretDown /> }
       </Toggle>
 
-      { open && (
-        <Panel className="box">
+      { /* 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>
@@ -118,7 +121,8 @@ const Filters = ({ open, refinement, facets, range, currency, t, onToggle, onCha
                   <ChoiceName>{ bucket.label }</ChoiceName>
 
                   <ChoiceMeta>
-                    { bucket.count }{ bucket.fromDisplay ? ` · ${ bucket.fromDisplay }` : '' }
+                    <ChoiceCount>{ bucket.count }</ChoiceCount>
+                    { bucket.fromDisplay && <ChoicePrice>{ bucket.fromDisplay }</ChoicePrice> }
                   </ChoiceMeta>
                 </Choice>
               )) }
@@ -182,8 +186,7 @@ const Filters = ({ open, refinement, facets, range, currency, t, onToggle, onCha
               </Reset>
             </Group>
           ) }
-        </Panel>
-      ) }
+      </Panel>
     </Container>
   );
 };

package/Found/Filters/styles.ts

@@ -1,7 +1,21 @@
 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 }>`
@@ -24,6 +38,11 @@ export const Toggle = styled.button<{ $open: boolean }>`
   ${ 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`
@@ -35,18 +54,35 @@ export const Count = styled.span`
   border-radius: 100px;
 `;
 
-export const Panel = styled.div`
-  display: grid;
+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, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   @media (min-width: 1024px) {
-    grid-template-columns: repeat(3, 1fr);
+    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;
   }
 `;
 
@@ -54,6 +90,7 @@ export const Group = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
+  min-width: 0;
 `;
 
 export const GroupTitle = styled.h6`
@@ -65,8 +102,9 @@ export const GroupTitle = styled.h6`
 
 export const Choice = styled.label<{ $disabled: boolean }>`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
+  line-height: 1.35;
   font-size: ${ props => props.theme.size.s };
   cursor: pointer;
 
@@ -85,19 +123,52 @@ export const Choice = styled.label<{ $disabled: boolean }>`
   ` }
 `;
 
+/**
+ * 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;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  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 };

package/Found/Found.tsx

@@ -9,6 +9,8 @@ import Sort from './Sort/Sort';
 import Picks from './Picks/Picks';
 import Filters from './Filters/Filters';
 import Summary from './Summary/Summary';
+import { Results, Sidebar, Listing } from '../styles';
+import { useGetAlternatives } from '../services';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
 import { Refinement, BucketKey, fromParams, toParams, filterItems, buildFacets, priceRange, currencyOf, isRefined } from './refine';
@@ -72,6 +74,14 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
 
   const passengers = Number(step1.adults ?? 0) + Number(step1.children ?? 0) + Number(step1.babies ?? 0);
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // Only fetched once the search itself has finished and come back empty,
+  // so a search that found something never pays for the alternatives.
+  const { data: alternatives, isFetching: alternativesLoading } = useGetAlternatives(
+    step1,
+    !loading && items.length === 0
+  );
+
   // controls are pointless while there is nothing (or only one thing) to
   // refine, and they'd only add noise above an empty state
   const showControls = !loading && items.length > 1;
@@ -88,17 +98,6 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
             <Sort value={ refinement.sort } t={ t } onChange={ sort => onRefine({ ...refinement, sort }) } />
           </Summary>
 
-          <Filters
-            open={ open }
-            refinement={ refinement }
-            facets={ facets }
-            range={ bounds }
-            currency={ currency }
-            t={ t }
-            onToggle={ () => setOpen(!open) }
-            onChange={ onRefine }
-          />
-
           <Picks
             items={ refined }
             sort={ refinement.sort }
@@ -108,21 +107,43 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
         </>
       ) }
 
-      <Header t={ t } />
-
-      <Orders
-        loading={ loading }
-        data={ refined }
-        empty={ items.length === 0 }
-        refined={ isRefined(refinement) }
-        sort={ refinement.sort }
-        type={ type }
-        passengers={ passengers }
-        preferredStop={ Number(preferredStop) }
-        t={ t }
-        onReset={ () => onRefine({ ...refinement, ...{ operators: [], buckets: [], direct: false, fromStops: [], toStops: [], features: [], maxPrice: null } }) }
-        onSave={ onSave }
-      />
+      <Results>
+        { showControls && (
+          <Sidebar>
+            <Filters
+              open={ open }
+              refinement={ refinement }
+              facets={ facets }
+              range={ bounds }
+              currency={ currency }
+              t={ t }
+              onToggle={ () => setOpen(!open) }
+              onChange={ onRefine }
+            />
+          </Sidebar>
+        ) }
+
+        <Listing>
+          <Header t={ t } />
+
+          <Orders
+            loading={ loading }
+            data={ refined }
+            empty={ items.length === 0 }
+            step1={ step1 }
+            alternatives={ alternatives }
+            alternativesLoading={ alternativesLoading }
+            refined={ isRefined(refinement) }
+            sort={ refinement.sort }
+            type={ type }
+            passengers={ passengers }
+            preferredStop={ Number(preferredStop) }
+            t={ t }
+            onReset={ () => onRefine({ ...refinement, ...{ operators: [], buckets: [], direct: false, fromStops: [], toStops: [], features: [], maxPrice: null } }) }
+            onSave={ onSave }
+          />
+        </Listing>
+      </Results>
     </>
   );
 };

package/Found/Header/styles.ts

@@ -1,8 +1,21 @@
 import styled from 'styled-components';
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * This row only means anything if its labels sit over the columns they
+ * name, so its geometry has to match the result card's exactly: the same
+ * 15px horizontal padding and the same 15px gap between columns. It had
+ * 4px padding and no gap at all, which pushed every label right of the
+ * data it labelled - Duration was out by 34px.
+ *
+ * If Found/Route/styles.ts ever changes the card's padding or the Trip
+ * gap, this has to move with it.
+ */
 export const Container = styled.div`
   display: none;
-  padding: 8px 4px;
+  gap: 15px;
+  padding: 8px 15px;
   margin-bottom: 15px;
 
   @media (min-width: 1024px) {
@@ -23,18 +36,21 @@ const Item = styled.div`
   }
 `;
 
+// these five must stay identical to their counterparts in
+// Found/Route/styles.ts, or the labels stop sitting over their columns
 export const Company = styled(Item)`
-  flex-basis: 185px;
+  flex: 0 0 185px;
 `;
 
 export const Location = styled(Item)`
   flex: 1;
+  min-width: 0;
 `;
 
 export const Time = styled(Item)`
-  flex-basis: 120px;
+  flex: 0 0 120px;
 `;
 
 export const Price = styled(Item)`
-  flex-basis: 165px;
+  flex: 0 0 165px;
 `;

package/Found/Orders/Orders.tsx

@@ -2,10 +2,13 @@ import { TFunction } from 'i18next';
 import { Inline } from '@autobusal/common';
 import Route from '../Route/Route';
 import Group from '../Group/Group';
+import Empty from '../Empty/Empty';
 import { getFavorites, getNormal } from './utilities';
 import { sortItems, groupItems, SortKey } from '../refine';
 import { Container, ContainerNotFound, Reset } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { AlternativesData } from '../../types';
 
 interface Props {
   loading: boolean
@@ -16,12 +19,15 @@ interface Props {
   type: 'departure' | '_return'
   passengers: number
   preferredStop?: number
+  step1: RoutesSearchForm
+  alternatives?: AlternativesData
+  alternativesLoading: boolean
   t: TFunction<'common'>
   onReset: () => void
   onSave: (data: FoundData) => void
 }
 
-const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferredStop, t, onReset, onSave }: Props): JSX.Element => {
+const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferredStop, step1, alternatives, alternativesLoading, t, onReset, onSave }: Props): JSX.Element => {
   if (loading) {
     return (
       <div className="box">
@@ -30,11 +36,14 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
     );
   }
 
-  // no results at all - the search itself found nothing (or errored, e.g.
-  // same origin and destination) - show the not-found message
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // No results at all - the search itself found nothing (or errored, e.g.
+  // same origin and destination). Rather than a bare apology, offer the
+  // nearby origins, nearby destinations and other dates that obtapi has
+  // confirmed actually have seats.
   if (empty) {
     return (
-      <ContainerNotFound className="box">{ t('routes_order.step2.not_found') }</ContainerNotFound>
+      <Empty step1={ step1 } data={ alternatives } loading={ alternativesLoading } t={ t } />
     );
   }