@autobusal/common 1.33.0 → 1.33.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.33.2
+
+### Added
+
+- **`Meta` now defaults `og:image`/`twitter:image` to the label's own homepage hero photo** (`{settings.url}/home/background-light.jpg`) when a page doesn't pass its own `image`. Most of the ~136 call sites never had a share-preview image at all, so a link pasted into a chat assistant or social post previewed with nothing. A page with something more specific (an operator's logo, a blog post's own photo) still passes its own `image` and wins - this only fills the gap.
+
+## 1.33.1
+
+### Added
+
+- **`Table` accepts an optional `onReorder(draggedId, targetId)` prop.** When set, every row becomes an HTML5 drag source/drop target (dims to 40% opacity while being dragged) and a completed drag reports the dragged row's id and the row it was dropped on - the caller decides what "reorder" means for its own data. Omitted by every existing table, so this is purely additive; first consumer is `@autobusal/admin-menu` 1.1.2.
 
 ## 1.33.0
 

package/Meta.tsx

@@ -237,11 +237,38 @@ const useAlternates = (noIndex: boolean, explicitUrl?: string): { locale: string
   ];
 };
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-11
+ *
+ * A default og:image/twitter:image for whichever of Meta's ~136 call
+ * sites never passes one - route detail, Help, blog index, and most
+ * static pages had NO share-preview image at all, so a link pasted into
+ * a chat assistant or social post previewed with nothing. Rather than
+ * hunt down every call site individually, the fallback lives here: the
+ * same hero photo the homepage itself uses (`home/background-light.jpg`,
+ * already uploaded per-label - see RoutesOrder.tsx's identical asset
+ * path), which every label already has. The DARK variant is deliberately
+ * not used here regardless of the visitor's own theme - a share preview
+ * is generated by whatever unpacks the URL server-side, not by this
+ * visitor's browser, so there is no "current theme" to match; picking
+ * one consistently is more correct than guessing.
+ *
+ * A page with something more specific to show (an operator's logo, a
+ * blog post's own photo) still passes its own `image` and wins - this
+ * only fills the gap when nothing more specific exists.
+ */
+const useDefaultImage = (explicit?: string): (string | undefined) => {
+  const { data: settings } = useGetSettings();
+
+  return explicit ?? (settings ? `${ settings.url }/home/background-light.jpg` : undefined);
+};
+
 const Meta = ({ title, keywords, description, image, url, type = 'website', noIndex = false, children }: Props): JSX.Element => {
   const fullTitle = withBrand(title);
   const canonicalUrl = useCanonicalUrl(url);
   const location = useLocation();
   const robots = noIndex ? 'noindex, nofollow' : 'index, follow';
+  const resolvedImage = useDefaultImage(image);
 
   const alternates = useAlternates(noIndex, url);
 
@@ -255,13 +282,13 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
     { selector: 'meta[property="og:type"]', attr: 'content', value: type },
     { selector: 'meta[property="og:title"]', attr: 'content', value: fullTitle },
     { selector: 'meta[property="og:description"]', attr: 'content', value: description },
-    { selector: 'meta[property="og:image"]', attr: 'content', value: image },
+    { selector: 'meta[property="og:image"]', attr: 'content', value: resolvedImage },
     { selector: 'meta[property="og:url"]', attr: 'content', value: canonicalUrl },
     { selector: 'meta[property="og:site_name"]', attr: 'content', value: brand },
     { selector: 'meta[name="twitter:card"]', attr: 'content', value: 'summary_large_image' },
     { selector: 'meta[name="twitter:title"]', attr: 'content', value: fullTitle },
     { selector: 'meta[name="twitter:description"]', attr: 'content', value: description },
-    { selector: 'meta[name="twitter:image"]', attr: 'content', value: image }
+    { selector: 'meta[name="twitter:image"]', attr: 'content', value: resolvedImage }
   ]);
   usePageviewTracking(location.pathname + location.search, fullTitle);
 
@@ -284,7 +311,7 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
       <meta property="og:type" content={ type } />
       <meta property="og:title" content={ fullTitle } />
       { description && <meta property="og:description" content={ description } /> }
-      { image && <meta property="og:image" content={ image } /> }
+      { resolvedImage && <meta property="og:image" content={ resolvedImage } /> }
       <meta property="og:url" content={ canonicalUrl } />
       { brand && <meta property="og:site_name" content={ brand } /> }
 
@@ -292,7 +319,7 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:title" content={ fullTitle } />
       { description && <meta name="twitter:description" content={ description } /> }
-      { image && <meta name="twitter:image" content={ image } /> }
+      { resolvedImage && <meta name="twitter:image" content={ resolvedImage } /> }
 
       { children }
     </>

package/Table/Rows/Rows.tsx

@@ -1,4 +1,5 @@
 import { TFunction } from 'i18next';
+import { useState } from 'react';
 import { NavigateFunction } from 'react-router-dom';
 import Loading from './Loading';
 import NotFound from './NotFound';
@@ -18,9 +19,11 @@ interface Props {
   actions?: string[]
   handlers?: any
   navigate: NavigateFunction
+  onReorder?: (draggedId: number, targetId: number) => void
 }
 
-const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, actions, handlers, navigate }: Props): JSX.Element => {
+const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, actions, handlers, navigate, onReorder }: Props): JSX.Element => {
+  const [ draggedId, setDraggedId ] = useState<number | null>(null);
   if (loading) {
     return <Loading length={ colLength } t={ t } />;
   }
@@ -43,8 +46,28 @@ const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, acti
     // table's list, which is what every existing caller relies on.
     const available = item.props.actions ?? actions;
 
+    const id = item.props.id;
+
     return (
-    <Tr key={ index } $viewable={ isViewable } onClick={ () => onClick(item.props.id) }>
+    <Tr
+      key={ index }
+      $viewable={ isViewable }
+      $dragging={ onReorder !== undefined && draggedId === id }
+      draggable={ onReorder !== undefined }
+      onClick={ () => onClick(id) }
+      onDragStart={ onReorder && (() => setDraggedId(id)) }
+      onDragOver={ onReorder && (event => event.preventDefault()) }
+      onDragEnd={ onReorder && (() => setDraggedId(null)) }
+      onDrop={ onReorder && (event => {
+        event.preventDefault();
+
+        if (draggedId !== null && draggedId !== id) {
+          onReorder(draggedId, id);
+        }
+
+        setDraggedId(null);
+      }) }
+    >
       { item }
 
       { rowActions(available).length > 0 && (

package/Table/Rows/styles.ts

@@ -19,11 +19,15 @@ export const Tbody = styled.tbody<{ $fetching: boolean }>`
   ` }
 `;
 
-export const Tr = styled.tr<{ $viewable?: boolean }>`
+export const Tr = styled.tr<{ $viewable?: boolean, $dragging?: boolean }>`
   ${ props => props.$viewable && css`
     cursor: pointer;
   ` }
 
+  ${ props => props.$dragging && css`
+    opacity: .4;
+  ` }
+
   text-align: center;
 
   & > td:first-of-type {

package/Table/Table.tsx

@@ -33,9 +33,18 @@ interface Props {
    */
   empty?: string
   handlers?: any
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-10
+   * Turns every row into an HTML5 drag source/drop target and reports a
+   * completed drag as (the dragged row's id, the row it was dropped on).
+   * The caller decides what "reorder" means for its own data (e.g.
+   * recomputing a full id list to persist) - Table only reports the drag.
+   * Omitted by every other table, so this is purely additive.
+   */
+  onReorder?: (draggedId: number, targetId: number) => void
 }
 
-const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, empty, handlers }: Props): JSX.Element => {
+const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, empty, handlers, onReorder }: Props): JSX.Element => {
   const navigate = useNavigate();
 
   const colLength = columns.length + 1;
@@ -75,6 +84,7 @@ const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, f
               actions={ actions }
               handlers={ handlers }
               navigate={ navigate }
+              onReorder={ onReorder }
             />
 
             <Paginate data={ pages } colLength={ colLength } t={ t } />

package/package.json

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