@autobusal/common 1.17.0 → 1.19.0

package/CHANGELOG.md

@@ -6,6 +6,27 @@ All notable changes to `@autobusal/common` are documented here. This project fol
 > Note: 1.10.0 through 1.15.1 were published without changelog entries. The
 > gap is left as-is rather than reconstructed after the fact.
 
+## 1.19.0
+
+`extra` joins `create` and `search` as a top-of-table slot rather than a
+per-row action. Any table opting into the extra slot also rendered one empty,
+iconless, still-clickable button in every row's options cell — Icon has no
+case for `extra`, so it drew nothing while taking the click. The refund queue
+has been doing this all along; the new review queue would have too.
+
+## [1.18.0] - 2026-08-02
+
+### Added
+
+- **`SeoOverride`** - a per-language editor for the SEO title/description
+  overrides, shared by the label, country and city forms. One language is
+  shown at a time (a brand writes copy for one or two, and thirteen sets of
+  empty inputs invite nobody to fill any of them in) and the languages that
+  already have copy are marked, so it is obvious which are done. Controlled
+  and deliberately form-less: those pages submit every field in one request,
+  so an editor with its own save would either post a partial update or leave
+  two save buttons meaning different things on one screen.
+
 ## [1.17.0] - 2026-08-02
 
 ### Added

package/SeoOverride/SeoOverride.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { ContainerLocales, LocaleButton, Notice, Field, Label, Input, Textarea } from './styles';
+import { useGetSettings } from '@autobusal/providers/services';
+
+export interface SeoEntry {
+  title?: string
+  description?: string
+}
+
+export type SeoOverrides = Record<string, SeoEntry>;
+
+interface Props {
+  /**
+   * The stored map, keyed by locale. A language with no entry has no
+   * override, which is what returns that language's page to its own
+   * translated template.
+   */
+  value?: SeoOverrides
+  t: TFunction<'common'>
+  onChange: (next: SeoOverrides) => void
+}
+
+/**
+ * Per-language SEO override editor.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-02
+ *
+ * These overrides used to be one title and one description served to every
+ * language. That was merely a limitation while the whole site lived at one
+ * URL per page; once /{locale}/city/tirana existed and was announced to
+ * search engines as a distinct language version it became a contradiction -
+ * and because an override REPLACES the localised template the public pages
+ * build from live route and price data, filling one in actively made
+ * multilingual SEO worse than leaving it blank.
+ *
+ * CONTROLLED, and deliberately not a form of its own. The country and city
+ * pages submit every field in one request, so an editor with its own save
+ * button would either post a partial update and wipe the rest of the record,
+ * or leave two save buttons on one screen with different meanings. The
+ * parent owns the state and the submit; this owns the editing.
+ *
+ * One language is shown at a time rather than thirteen sets of fields down
+ * the page: a brand writes copy for one or two, and a wall of empty inputs
+ * invites nobody to fill in any of them. Languages that already have copy
+ * are marked, so it is obvious which ones are done without clicking through
+ * all of them.
+ */
+const SeoOverride = ({ value, t, onChange }: Props): JSX.Element => {
+  const { data } = useGetSettings();
+
+  const available = data.preferences.languages.available;
+
+  const [ locale, setLocale ] = useState<string>(data.preferences.languages.default);
+
+  const overrides = value ?? {};
+
+  const current = overrides[locale] ?? {};
+
+  const update = (field: keyof SeoEntry, next: string): void => {
+    onChange({
+      ...overrides,
+      [locale]: { ...current, [field]: next }
+    });
+  };
+
+  const written = (language: string): boolean => {
+    const entry = overrides[language];
+
+    return !!(entry?.title?.trim() || entry?.description?.trim());
+  };
+
+  return (
+    <>
+      <ContainerLocales>
+        { available.map(language => (
+          <LocaleButton
+            key={ language }
+            type="button"
+            $selected={ language === locale }
+            $written={ written(language) }
+            onClick={ () => setLocale(language) }
+          >
+            { t(`languages.${ language }`, { ns: 'common' }) }
+          </LocaleButton>
+        )) }
+      </ContainerLocales>
+
+      <Notice>{ t('seo_override.notice', { ns: 'common' }) }</Notice>
+
+      <Field>
+        <Label>{ t('seo_override.title', { ns: 'common' }) }</Label>
+
+        <Input
+          type="text"
+          maxLength={ 250 }
+          value={ current.title ?? '' }
+          onChange={ (event) => update('title', event.target.value) }
+        />
+      </Field>
+
+      <Field>
+        <Label>{ t('seo_override.description', { ns: 'common' }) }</Label>
+
+        <Textarea
+          maxLength={ 500 }
+          value={ current.description ?? '' }
+          onChange={ (event) => update('description', event.target.value) }
+        />
+      </Field>
+    </>
+  );
+};
+
+export default SeoOverride;

package/SeoOverride/styles.ts

@@ -0,0 +1,88 @@
+import styled, { css } from 'styled-components';
+
+export const ContainerLocales = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+`;
+
+/**
+ * One button per language.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-02
+ * `$written` marks the languages that actually have copy, so it is obvious
+ * at a glance which ones are done - without it, thirteen identical buttons
+ * say nothing about where the work stands, and the only way to find out is
+ * to click every one of them.
+ */
+export const LocaleButton = styled.button<{ $selected: boolean, $written: boolean }>`
+  padding: 4px 12px;
+  border: none;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => (props.$selected ? props.theme.background.neutral : 'transparent') };
+  color: ${ props => (props.$written ? props.theme.font.normal : props.theme.font.faded) };
+  font-size: ${ props => props.theme.size.s };
+  font-weight: ${ props => (props.$selected ? 700 : 400) };
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    background: ${ props => props.theme.background.neutral };
+  }
+
+  ${ props => props.$written && css`
+    &::after {
+      content: '•';
+      margin-left: 6px;
+      color: ${ props => props.theme.primary.normal };
+    }
+  ` }
+`;
+
+export const Notice = styled.p`
+  margin-bottom: 15px;
+  color: ${ props => props.theme.font.faded };
+  font-size: ${ props => props.theme.size.s };
+`;
+
+/**
+ * The editor's own fields, rather than Viewer rows.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-02
+ * Viewer's inputs are uncontrolled (defaultValue + a react-hook-form ref),
+ * which cannot hold thirteen languages' worth of state while showing one -
+ * switching language would discard whatever had just been typed. These are
+ * controlled, and styled to match the rows they sit among.
+ */
+export const Field = styled.div`
+  margin-bottom: 15px;
+`;
+
+export const Label = styled.label`
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 600;
+  font-size: ${ props => props.theme.size.m };
+`;
+
+const field = css`
+  width: 100%;
+  padding: 10px;
+  border: 1px solid ${ props => props.theme.primary.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+  background: transparent;
+  color: ${ props => props.theme.font.normal };
+  font-family: inherit;
+  font-size: ${ props => props.theme.size.m };
+`;
+
+export const Input = styled.input`
+  ${ field }
+`;
+
+export const Textarea = styled.textarea`
+  ${ field }
+  min-height: 90px;
+  resize: vertical;
+`;

package/Table/Actions/Get.tsx

@@ -14,7 +14,14 @@ interface Props {
 }
 
 const Get = ({ id, url, urlWith, type, t, handlers, navigate }: Props): (JSX.Element | null) => {
-  if (['create', 'search'].includes(type)) {
+  // Edited: Ferjolt Ozuni - Date: 2026-08-02
+  // 'extra' belongs with 'create' and 'search': all three are TOP-of-table
+  // slots, not per-row actions. Without it here, any table that opts into
+  // the extra slot (the refund queue does, the review queue now does too)
+  // also renders one empty, iconless, clickable button in every row's
+  // options cell - Icon has no case for 'extra', so it draws nothing at all
+  // while still taking the click.
+  if (['create', 'search', 'extra'].includes(type)) {
     return null;
   }
 

package/index.ts

@@ -31,6 +31,7 @@ import RouteFeature from './RouteFeature/RouteFeature';
 import Required from './Required/Required';
 import Road from './Road/Road';
 import LocaleGate from './Locale/LocaleGate';
+import SeoOverride from './SeoOverride/SeoOverride';
 import localiseRoutes from './Locale/routes';
 import { splitLocale, withLocale, localeFromPath } from './Locale/locale';
 import RouteItem from './RouteItem/RouteItem';
@@ -78,6 +79,7 @@ export {
   Required,
   Road,
   LocaleGate,
+  SeoOverride,
   localiseRoutes,
   splitLocale,
   withLocale,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.17.0",
+  "version": "1.19.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"