@autobusal/routes-order 1.9.0 → 1.9.3

package/CHANGELOG.md

@@ -6,6 +6,60 @@ All notable changes to this package are documented here. This project follows
 > 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

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,7 @@ 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 { 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';
@@ -88,17 +89,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 +98,40 @@ 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 }
+            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/Route/Route.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { HiOutlineArrowNarrowRight, HiOutlineDocumentText } from 'react-icons/hi';
+import { BiHourglass } from 'react-icons/bi';
 import { RiBus2Line } from 'react-icons/ri';
+import { formatDuration } from '../refine';
 import { Button, RouteFeature, Policy } from '@autobusal/common';
-import { Container, SpecialOffer, FavoriteStop, Trip, Company, Location, Time, Price, PriceNotice, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, Features, TitleFeatures, FeaturesItems } from './styles';
+import { Container, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, PriceNotice, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, Features, TitleFeatures, FeaturesItems } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 // neutral placeholder so a missing/broken operator logo doesn't render the
@@ -54,18 +56,33 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
         </Company>
 
         <Location>
-          <h2>{ data.locations.from.city.name } ({ data.locations.from.city.country?.iso_code }) { data.locations.from.departure }</h2>
-          <span>{ data.locations.from.stop?.name }</span>
+          <h2>
+            { data.locations.from.city.name }
+            <Iso>({ data.locations.from.city.country?.iso_code })</Iso>
+            { data.locations.from.departure }
+          </h2>
+
+          <Stop>{ data.locations.from.stop?.name }</Stop>
         </Location>
 
         <Time>
           <HiOutlineArrowNarrowRight />
-          <span>{ data.duration }</span>
+
+          { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+               The clock is the point: this number sits between two real
+               departure times, and "08:30" gave nothing to distinguish a
+               trip length from a time of day. */ }
+          <span><BiHourglass />{ formatDuration(data.duration, t) }</span>
         </Time>
 
         <Location>
-          <h2>{ data.locations.to.city.name } ({ data.locations.to.city.country?.iso_code }) { data.locations.to.arrival }</h2>
-          <span>{ data.locations.to.stop?.name }</span>
+          <h2>
+            { data.locations.to.city.name }
+            <Iso>({ data.locations.to.city.country?.iso_code })</Iso>
+            { data.locations.to.arrival }
+          </h2>
+
+          <Stop>{ data.locations.to.stop?.name }</Stop>
         </Location>
 
         <Price>

package/Found/Route/styles.ts

@@ -73,17 +73,46 @@ export const Location = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 5px;
+  gap: 3px;
   text-align: center;
 
   & > h2 {
     margin-bottom: 0;
   }
+`;
 
-  & > span {
-    font-weight: 700;
-    color: ${ props => props.theme.font.faded };
-  }
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The stop name is supporting detail, not a heading. At the same 16px as
+ * body copy it competed with the city above it; a step down lets the eye
+ * land on the city first and read the stop only when it needs to.
+ */
+export const Stop = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  line-height: 1.3;
+  color: ${ props => props.theme.font.faded };
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The country code comes out of the database lowercase ("alb", "grc").
+ * An ISO country code is by definition upper case, so it is cased here at
+ * render time rather than left to the data - every consumer would otherwise
+ * have to remember to do it. Set smaller and muted so it qualifies the city
+ * without competing with it.
+ */
+export const Iso = styled.span`
+  // JSX drops the literal spaces around this element, so the gap on either
+  // side of "(ALB)" is this margin's job, not whitespace's
+  margin: 0 5px;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  color: ${ props => props.theme.font.faded };
 `;
 
 export const Time = styled.div`
@@ -98,13 +127,24 @@ export const Time = styled.div`
   }
 
   & > span {
-    display: block;
-    padding: 3px 10px;
-    font-size: ${ props => props.theme.size.l };
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 12px;
+    white-space: nowrap;
+    font-size: ${ props => props.theme.size.m };
     background: ${ props => props.theme.background.neutral };
     border-radius: 100px;
   }
 
+  // the hourglass is a hint, not a heading - the big arrow above already
+  // owns the visual weight in this column
+  & > span > svg {
+    flex-shrink: 0;
+    font-size: ${ props => props.theme.size.m };
+    opacity: .7;
+  }
+
   @media (min-width: 640px) {
     flex-basis: 120px;
   }

package/Found/Summary/Summary.tsx

@@ -20,7 +20,7 @@ interface Props {
  * results, which is otherwise easy to forget after scrolling.
  */
 const Summary = ({ shown, total, range, t, children }: Props): JSX.Element => (
-  <Container>
+  <Container className="box">
     <Result>
       { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
            `total`, not `count` - i18next treats a `count` variable as a

package/Found/Summary/styles.ts

@@ -1,11 +1,23 @@
 import styled from 'styled-components';
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Carries the `box` surface (padding is overridden to something tighter -
+ * this is a bar, not a panel) so the count and the sort control sit on the
+ * same card background as everything else on the page rather than floating
+ * loose on the page background.
+ */
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-bottom: 15px;
 
+  &.box {
+    padding: 12px 15px;
+  }
+
   @media (min-width: 1024px) {
     flex-direction: row;
     align-items: center;

package/Found/refine.ts

@@ -1,3 +1,4 @@
+import { TFunction } from 'i18next';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 /**
@@ -97,6 +98,48 @@ export const durationOf = (item: FoundData): number | null => {
   return minutesOf(item.duration);
 };
 
+/**
+ * Turn obtapi's "HH:MM" trip length into something that reads as a
+ * duration rather than a clock time.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * "08:30" sitting between two departure times is genuinely ambiguous -
+ * nothing about it says "eight and a half hours" rather than "half past
+ * eight", and on this card it sits directly between 09:00 and 16:30. The
+ * unit labels come from the translation files because "h"/"m" are not
+ * universal; Greek and the Cyrillic locales carry their own.
+ *
+ * The "-" sentinel (obtapi could not compute a duration) passes straight
+ * through - it must not become "0h 0m", which would read as a real answer.
+ */
+export const formatDuration = (duration: string, t: TFunction<'common'>): string => {
+  if (!duration || duration === '-') {
+    return duration;
+  }
+
+  const total = minutesOf(duration);
+
+  const hours = Math.floor(total / 60);
+  const minutes = total % 60;
+
+  const pad = (value: number): string => (value <= 9 ? `0${ value }` : String(value));
+
+  const parts: string[] = [];
+
+  if (hours > 0) {
+    parts.push(t('routes_order.step2.route.duration.hours', { value: pad(hours) }));
+  }
+
+  // a trip under an hour still needs a number, and so does an exact
+  // number of hours - but "08h 00m" is noise, so zero minutes are dropped
+  if (minutes > 0 || hours === 0) {
+    parts.push(t('routes_order.step2.route.duration.minutes', { value: pad(minutes) }));
+  }
+
+  return parts.join(' ');
+};
+
 export const bucketOf = (item: FoundData): BucketKey => {
   const hour = Math.floor(departureOf(item) / 60);
 

package/package.json

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

package/styles.ts

@@ -21,4 +21,40 @@ export const Actions = styled.div`
   justify-content: center;
   gap: 20px;
   margin-top: 25px;
+`;
+
+/**
+ * Results layout: filters beside the list, not above it.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Below 1280px this is a plain column and the filters stay a collapsible
+ * panel. At and above it the filters take a fixed column and the results
+ * take the rest. See Found/Filters/styles.ts for why the breakpoint is
+ * 1280 rather than 1024.
+ */
+export const Results = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 1280px) {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 20px;
+  }
+`;
+
+export const Sidebar = styled.aside`
+  min-width: 0;
+
+  @media (min-width: 1280px) {
+    flex: 0 0 290px;
+  }
+`;
+
+export const Listing = styled.div`
+  // min-width:0 stops a long stop name inside a card from forcing this
+  // column wider than its share of the row
+  flex: 1;
+  min-width: 0;
 `;