@autobusal/routes-order 1.8.0 → 1.9.3

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;
   }
@@ -126,6 +166,13 @@ export const Price = styled.div`
   }
 `;
 
+export const PriceNotice = styled.span`
+  margin-top: -6px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+  text-align: center;
+`;
+
 export const LinkCompany = styled(Link)`
   display: block;
   max-width: 165px;

package/Found/Sort/Sort.tsx

@@ -0,0 +1,40 @@
+import { TFunction } from 'i18next';
+import { Container, Label, Options, Option } from './styles';
+import { SortKey, SORTS } from '../refine';
+
+interface Props {
+  value: SortKey
+  t: TFunction<'common'>
+  onChange: (value: SortKey) => void
+}
+
+/**
+ * Sort control for the results list.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Rendered as always-visible pills rather than a <select>: the options are
+ * few and short, and the point is that somebody who never opens a dropdown
+ * still sees that "cheapest" is one click away.
+ */
+const Sort = ({ value, t, onChange }: Props): JSX.Element => (
+  <Container>
+    <Label>{ t('routes_order.step2.sort.title') }</Label>
+
+    <Options>
+      { SORTS.map(sort => (
+        <Option
+          key={ sort }
+          type="button"
+          $active={ value === sort }
+          aria-pressed={ value === sort }
+          onClick={ () => onChange(sort) }
+        >
+          { t(`routes_order.step2.sort.${ sort }`) }
+        </Option>
+      )) }
+    </Options>
+  </Container>
+);
+
+export default Sort;

package/Found/Sort/styles.ts

@@ -0,0 +1,42 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+export const Label = styled.span`
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Options = styled.div`
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+`;
+
+export const Option = styled.button<{ $active: boolean }>`
+  padding: 6px 14px;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  white-space: nowrap;
+  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.$active && css`
+    color: ${ props => props.theme.primary.contrast };
+    background: ${ props => props.theme.primary.normal };
+    border-color: ${ props => props.theme.primary.normal };
+  ` }
+`;

package/Found/Summary/Summary.tsx

@@ -0,0 +1,49 @@
+import { TFunction } from 'i18next';
+import { Container, Result, Total, Range } from './styles';
+
+interface Props {
+  shown: number
+  total: number
+  range: { minDisplay: string, maxDisplay: string } | null
+  t: TFunction<'common'>
+  children?: React.ReactNode
+}
+
+/**
+ * "8 of 10 trips - from 38.00 EUR to 70.00 EUR".
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Cheap to render and it answers the two questions somebody has before they
+ * start reading rows: is there enough choice here, and what will this cost
+ * me. The shown/total split also makes it obvious when a filter is hiding
+ * results, which is otherwise easy to forget after scrolling.
+ */
+const Summary = ({ shown, total, range, t, children }: Props): JSX.Element => (
+  <Container className="box">
+    <Result>
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+           `total`, not `count` - i18next treats a `count` variable as a
+           request for plural resolution and would look for _one/_few/_other
+           suffixes we'd then owe in all fifteen languages, several of which
+           have more plural categories than English. */ }
+      <Total>
+        { shown === total
+          ? t('routes_order.step2.summary.count', { total })
+          : t('routes_order.step2.summary.filtered', { shown, total }) }
+      </Total>
+
+      { range !== null && (
+        <Range>
+          { range.minDisplay === range.maxDisplay
+            ? range.minDisplay
+            : t('routes_order.step2.summary.range', { min: range.minDisplay, max: range.maxDisplay }) }
+        </Range>
+      ) }
+    </Result>
+
+    { children }
+  </Container>
+);
+
+export default Summary;

package/Found/Summary/styles.ts

@@ -0,0 +1,42 @@
+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;
+    justify-content: space-between;
+  }
+`;
+
+export const Result = styled.div`
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+export const Total = styled.strong`
+  font-size: ${ props => props.theme.size.l };
+`;
+
+export const Range = styled.span`
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.faded };
+`;