@autobusal/routes-order 1.9.0 → 1.9.1

package/Found/Route/styles.ts

@@ -6,8 +6,20 @@ export const Container = styled.div<{ $type: 'favorite' | 'normal' }>`
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 15px;
-  padding: 15px;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Tighter on a phone. Every result carried 15px of padding and 15px
+   * between each of its bands, which is most of a thumb of screen spent on
+   * gaps before anything is read.
+   */
+  gap: 8px;
+  padding: 10px;
+
+  @media (min-width: 640px) {
+    gap: 15px;
+    padding: 15px;
+  }
 
   ${ props => props.$type === 'favorite' && css`
     border: 1px solid ${ props => props.theme.font.success }; 
@@ -45,92 +57,363 @@ export const FavoriteStop = styled.div`
   border-bottom-right-radius: ${ props => props.theme.borderRadius };
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * VERTICAL on a phone, side by side from 640px up.
+ *
+ * Side by side was tried first and does not survive the content: each end
+ * gets about 96px at 375px, while "Thessaloniki (GRC) 16:30" measures 215px
+ * - it painted 50px outside the card, and the page never scrolled sideways
+ * so nothing looked broken until it was measured against the box it was
+ * supposed to be in. Stacked, each end has the full width, so nothing is
+ * truncated and nothing escapes.
+ *
+ * Compact is bought back a different way: tight gaps, a short arrow turned
+ * to point down the column, and the price on one row instead of a centred
+ * stack. Same information, roughly a third less height than before.
+ */
 export const Trip = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 6px;
 
   @media (min-width: 640px) {
     flex-direction: row;
     flex-wrap: wrap;
+    align-items: center;
+    gap: 15px;
   }
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * A tighter gap once every cell shares one row: four gaps at 15px spent
+   * 60px of the widest layout on whitespace, while the arrival column was
+   * overflowing by 50px.
+   */
   @media (min-width: 1024px) {
     flex-wrap: nowrap;
+    gap: 10px;
   }
 `;
 
 export const Company = styled.div`
   flex-basis: 100%;
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * A column now, because the operator's rating sits under the logo. Left
+   * as a bare block it would have laid the stars out beside the logo and
+   * eaten the 185px this cell gets on desktop.
+   */
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Centred at EVERY width, not just on desktop. LinkCompany carries an
+   * auto horizontal margin, so the logo is centred in this cell whatever the
+   * screen - leaving the rating and the route code at flex-start put them
+   * under the left edge of a box whose logo sat in the middle of it. On a
+   * 768px card that was a 300px gap between the two.
+   */
+  align-items: center;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * 185px down to 120px. The logo is an identifier, not the product - it
+   * only has to be recognisable - and the 65px it gives back goes to the two
+   * location columns, which were the cells actually running out of room.
+   *
+   */
   @media (min-width: 1024px) {
-    flex-basis: 185px;
+    flex: 0 0 120px;
   }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * min-width: 0 is what makes `flex: 1` mean "an equal share". Without it
+ * the default min-width:auto stops a column shrinking below its content,
+ * so the arrival column (long city plus a long stop name) grew to 215px
+ * while the departure column got 155px - the two halves of the same row
+ * were different widths, and no fixed header could ever line up with
+ * both. It also stops one long stop name stealing width from the other
+ * side of the card.
+ */
 export const Location = styled.div`
   flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 5px;
-  text-align: center;
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Left-aligned while the ends are stacked - centred text in a full-width
+   * column leaves the two times floating in the middle of the card with
+   * nothing to line them up against. Centred again from 640px, where the
+   * two ends sit either side of the arrow and the symmetry is the point.
+   */
+  align-items: flex-start;
+  gap: 1px;
+  text-align: left;
+
+  @media (min-width: 640px) {
+    align-items: center;
+    gap: 3px;
+    text-align: center;
+  }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * The heading has to be allowed to WRAP now that the two ends share a
+   * row. The min-width:0 above lets this column shrink, but the heading
+   * inside kept its intrinsic single-line width and simply painted outside
+   * the card - "Thessaloniki (GRC) 16:30" measured 215px inside a 96px
+   * column and ran 50px past the card's right edge. The page never scrolled
+   * sideways, so nothing looked broken until the text was measured against
+   * the box it was supposed to be in.
+   *
+   * A step down in size as well, because three columns of a 375px screen do
+   * not have room for a headline at body-copy scale.
+   */
   & > h2 {
     margin-bottom: 0;
+    max-width: 100%;
+    line-height: 1.25;
+    overflow-wrap: anywhere;
   }
 
-  & > span {
-    font-weight: 700;
-    color: ${ props => props.theme.font.faded };
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * break-word, not normal. Real spaces now let the heading wrap between
+   * city, country and time, which covers almost every width - but at exactly
+   * 1024px, where the card first lays out in one row and the columns are at
+   * their narrowest, "Thessaloniki" on its own still exceeds its column and
+   * a heading that cannot break simply paints over the price.
+   *
+   * break-word only splits a word when it has a line to itself and still
+   * does not fit, so the ordinary case is untouched. The phone layout's
+   * anywhere would break words it did not have to.
+   */
+  @media (min-width: 640px) {
+    & > h2 {
+      overflow-wrap: break-word;
+    }
   }
 `;
 
+/**
+ * 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.
+ */
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Clamped to two lines on a phone. Now that the two ends of the journey
+ * share a row, each gets about 96px - and a name like "Terminali Lindor
+ * Interurban dhe Nderkombetar i Autobusave (TEG)" ran to five lines and
+ * stretched the whole row to match, so one terminal with a long name made
+ * every card taller than the screen. Two lines and an ellipsis, which is
+ * what the reference layouts do with the same problem.
+ */
+export const Stop = styled.span`
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  line-height: 1.3;
+  color: ${ props => props.theme.font.faded };
+
+  @media (min-width: 1024px) {
+    display: block;
+    overflow: visible;
+  }
+`;
+
+/**
+ * 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`
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 6px;
   align-items: center;
   font-weight: 700;
 
+  @media (min-width: 640px) {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * The arrow sat between two stacked blocks at 1.5x the largest type in
+   * the theme. Now that the two ends of the journey share a row with it,
+   * that size would take the width the city names need - it is a
+   * separator, not a headline.
+   */
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Turned to point DOWN while the two ends are stacked - an arrow pointing
+   * right between two things sitting one above the other says the wrong
+   * thing about which way the journey goes.
+   */
   & > svg {
-    font-size: calc(1.5 * ${ props => props.theme.size.xxl });
+    font-size: ${ props => props.theme.size.l };
+    transform: rotate(90deg);
+  }
+
+  @media (min-width: 640px) {
+    & > svg {
+      font-size: calc(1.5 * ${ props => props.theme.size.xxl });
+      transform: none;
+    }
   }
 
   & > 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;
+    flex: 0 0 120px;
   }
 `;
 
 export const Price = styled.div`
   flex-basis: 100%;
   display: flex;
-  flex-direction: column;
-  gap: 10px;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * On a phone: the fare and the button share one row, and the tax note sits
+   * under them.
+   *
+   * Reordered in CSS rather than in the markup, because the source order -
+   * fare, note, button - is the right one to read aloud and the right one
+   * for a crawler: the note explains the number it follows. Only the
+   * PAINTING needs to differ, and the order property says exactly that
+   * without moving the note away from the price it qualifies.
+   */
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
+  gap: 4px 8px;
 
-  & > strong {
-    font-size: ${ props => props.theme.size.xxl };
-  }
+  & > *:nth-child(1) { order: 1; }
+
+  /* the note drops to its own line under both */
+  & > *:nth-child(2) { order: 3; flex-basis: 100%; }
+
+  & > *:nth-child(3) { order: 2; }
 
   @media (min-width: 768px) {
-    flex-basis: 165px;
+    flex: 0 0 165px;
+    flex-direction: column;
+    justify-content: initial;
+    gap: 8px;
+
+    & > *:nth-child(1),
+    & > *:nth-child(2),
+    & > *:nth-child(3) {
+      order: initial;
+      flex-basis: auto;
+    }
   }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The decimals ride as superscript rather than at full size. On a fare
+ * board the cents are almost never what anyone is comparing, and at the
+ * headline size they were taking a third of the width of the widest thing
+ * on the card. The line-height is pinned to 1 so the shrunk decimals do
+ * not leave a gap under the row.
+ */
+export const Amount = styled.strong`
+  display: flex;
+  align-items: flex-start;
+  line-height: 1;
+  font-size: ${ props => props.theme.size.xxl };
+`;
+
+export const Decimals = styled.span`
+  margin-left: 1px;
+  font-size: ${ props => props.theme.size.s };
+  line-height: 1;
+`;
+
+export const Currency = styled.span`
+  margin-left: 4px;
+  align-self: center;
+  font-size: ${ props => props.theme.size.m };
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Tucked up against the price it qualifies, which reads as one unit and
+ * frees the vertical space the Select button needs.
+ */
 export const PriceNotice = styled.span`
-  margin-top: -6px;
-  font-size: ${ props => props.theme.size.xs };
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Left-aligned under the fare on a phone, where it is a full-width line
+   * beneath a price and a button rather than the middle of a centred stack.
+   */
+  font-size: ${ props => props.theme.size.xxs };
+  line-height: 1.25;
   color: ${ props => props.theme.font.faded };
-  text-align: center;
+  text-align: left;
+
+  @media (min-width: 768px) {
+    margin-top: -4px;
+    text-align: center;
+  }
 `;
 
 export const LinkCompany = styled(Link)`
@@ -143,26 +426,125 @@ export const LinkCompany = styled(Link)`
 
     border-radius: 8px;
   }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Smaller from the width where the card lays out in one row, since that is
+   * the only place the space was contested.
+   */
+  @media (min-width: 1024px) {
+    max-width: 120px;
+
+    & > img {
+      ${ logoBox('100%', '44px') }
+    }
+  }
 `;
 
-export const Details = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
+/**
+ * The route code, under the logo.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ * Moved out of the collapsed details and up beside the operator it belongs
+ * to. It is an identifier of the same kind as the logo, and putting it here
+ * frees a slot in the details row for things that genuinely need explaining.
+ */
+export const CodeCompany = styled(Link)`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  padding: 2px 8px;
+  border: 1px solid ${ props => props.theme.background.neutral };
+  border-radius: 100px;
+  background: ${ props => props.theme.background.neutral };
+  color: ${ props => props.theme.font.faded };
+  font-size: ${ props => props.theme.size.xxs };
+  font-weight: 700;
+  line-height: 1.4;
+  letter-spacing: .3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all .3s ease;
+
+  /*
+   * A route symbol rather than a bus or a ticket. The code identifies which
+   * LINE this is - the same job a flight number does - and a bus icon would
+   * say the thing the whole card already says. Slightly larger than the text
+   * beside it, because at this size the glyph is what carries the meaning
+   * and the letters are only the value.
+   */
+  & > svg {
+    flex-shrink: 0;
+    font-size: ${ props => props.theme.size.s };
+    opacity: .8;
+  }
+
+  &:hover {
+    border-color: ${ props => props.theme.primary.normal };
+    color: ${ props => props.theme.primary.normal };
+  }
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Collapsible, and inline at every width including phones.
+ *
+ * Hidden with CSS rather than unmounted, deliberately. These cards are on a
+ * page the prerender crawl snapshots for every route pair in the sitemap, so
+ * amenities, the route code, transit countries and the policy link have to
+ * be IN the DOM whether or not a reader has opened them - unmounting would
+ * take real per-pair content out of exactly the pages Tier 3 exists to
+ * fatten.
+ *
+ * Wrapping instead of stacking on a phone turns four bands of vertical space
+ * into one or two, which is the space the results themselves wanted.
+ */
+export const Details = styled.div<{ $open: boolean }>`
+  display: ${ props => (props.$open ? 'flex' : 'none') };
+  flex-wrap: wrap;
+  gap: 6px;
 
   @media (min-width: 640px) {
-    flex-direction: row;
-    flex-wrap: wrap;
+    gap: 15px;
   }
 `;
 
-export const Detail = styled.div`
-  padding: 8px 10px;
+/**
+ * The disclosure. Small and quiet - it is a way to get at supporting detail,
+ * not an action competing with "select".
+ */
+export const ButtonDetails = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  align-self: flex-start;
+  padding: 4px 0;
   font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.faded };
+
+  &:hover {
+    color: ${ props => props.theme.font.normal };
+  }
+
+  svg {
+    transition: transform 0.2s ease;
+  }
+`;
+
+export const Detail = styled.div`
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 5px 8px;
+  font-size: calc(${ props => props.theme.size.s } - 1px);
   background: ${ props => props.theme.background.neutral };
   border-radius: ${ props => props.theme.borderRadius };
 
   @media (min-width: 480px) {
+    padding: 8px 10px;
+    font-size: ${ props => props.theme.size.s };
     flex-basis: calc(50% - 7.5px);
   }
   @media (min-width: 768px) {
@@ -178,10 +560,6 @@ export const TitleDetail = styled.h6`
   font-size: ${ props => props.theme.size.xs };
 `;
 
-export const LinkRoute = styled(Link)`
-  font-weight: 700;
-`;
-
 export const ButtonPolicy = styled.button`
   display: flex;
   align-items: center;
@@ -195,20 +573,80 @@ export const ButtonPolicy = styled.button`
   }
 `;
 
-export const Features = styled.div`
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Left-aligned now that this sits inside a Detail column alongside route,
+ * transit and policies, rather than centred in a full-width band of its
+ * own under the card.
+ */
+export const FeaturesItems = styled.div`
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
 `;
 
-export const TitleFeatures = styled.h6`
-  font-size: ${ props => props.theme.size.s };
-  margin-bottom: 8px;
+/**
+ * "Leaves in 40 minutes", on today's departures only.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Same-day seats are sellable now, and a time alone does not tell somebody
+ * whether they can make it - "14:00" reads very differently at nine in the
+ * morning and at half past one. Under an hour it turns urgent, because that
+ * is the point where the answer stops being "yes" and starts being "only if
+ * you leave now".
+ */
+export const Leaves = styled.div<{ $soon: boolean }>`
+  align-self: flex-start;
+  padding: 3px 10px;
+  border-radius: 100px;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+
+  color: ${ props => (props.$soon ? '#FFF' : props.theme.font.normal) };
+  background: ${ props => (props.$soon ? props.theme.font.error : props.theme.primary.neutral) };
 `;
 
-export const FeaturesItems = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
-`;
+/**
+ * The +1 on an overnight arrival.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
+ *
+ * Sits INSIDE the h2, right against the clock time it qualifies, because
+ * that is the number it changes the meaning of. Raised and shrunk rather
+ * than boxed: it reads as an annotation on the time, the way a footnote
+ * marker does, and a second pill on a card that already carries an offer
+ * badge and a countdown would compete with both.
+ *
+ * The title attribute carries the sentence - "arrives the next day" - so
+ * the meaning is available to anyone for whom "+1" is not self-evident,
+ * which on a first visit is most people.
+ */
+export const NextDay = styled.sup`
+  margin-left: 4px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+  vertical-align: super;
+  cursor: help;
+  color: ${ props => props.theme.font.normal };
+  background: ${ props => props.theme.primary.neutral };
+`;
+
+/**
+ * The calendar day under one end of an overnight trip.
+ *
+ * Rendered on BOTH ends or neither: a date shown only over the arrival
+ * leaves the reader working out what day the departure was, which is the
+ * question the whole thing exists to answer.
+ */
+export const Day = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+  color: ${ props => props.theme.primary.normal };
+`;

package/Found/SameDay/SameDay.tsx

@@ -0,0 +1,35 @@
+import { TFunction } from 'i18next';
+import { HiOutlineExclamationCircle } from 'react-icons/hi';
+import { Container } from './styles';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+/**
+ * The caution that comes with selling today's seats.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Same-day departures are sellable now, and two things about them are worth
+ * saying plainly before somebody pays.
+ *
+ * A coach that has already left is filtered out server-side
+ * (Search\Departed), and since countries carry a timezone that filter is now
+ * judged against the DEPARTURE STOP's own clock rather than ours - so the
+ * warning is no longer about doubt on our side.
+ *
+ * What remains is the honest thing to say when the margin is minutes: every
+ * time on the page is local to its stop, the seat is real, the coach is
+ * about to go, and whether somebody can reach the terminal in time is not
+ * something we can know for them.
+ */
+const SameDay = ({ t }: Props): JSX.Element => (
+  <Container>
+    <HiOutlineExclamationCircle />
+
+    <span>{ t('routes_order.step2.same_day') }</span>
+  </Container>
+);
+
+export default SameDay;

package/Found/SameDay/styles.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Shown only on a same-day search. A caution, not an alarm - the whole point
+ * of selling today is that these seats are worth selling, and a red banner
+ * over every one of them would say the opposite.
+ */
+export const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  margin-bottom: 15px;
+  padding: 10px 12px;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => props.theme.primary.neutral };
+  color: ${ props => props.theme.font.normal };
+  font-size: ${ props => props.theme.size.s };
+  line-height: 1.4;
+
+  & > svg {
+    flex: 0 0 auto;
+    margin-top: 2px;
+    font-size: ${ props => props.theme.size.l };
+  }
+`;