@autobusal/common 1.32.0 → 1.33.1

package/AiAssist/AiFieldAssist.tsx

@@ -39,18 +39,18 @@ const AiFieldAssist = ({ text, sourceText, targetLocale, onInsert, t }: Props):
     <>
       <Trigger>
         <button type="button" onClick={ () => setMode('generate') }>
-          { t('ai_assist.trigger.generate') }
+          { t('ai_assist.trigger.generate', { ns: 'common' }) }
         </button>
 
         { hasText && (
           <button type="button" onClick={ () => setMode('improve') }>
-            { t('ai_assist.trigger.improve') }
+            { t('ai_assist.trigger.improve', { ns: 'common' }) }
           </button>
         ) }
 
         { canTranslate && (
           <button type="button" onClick={ () => setMode('translate') }>
-            { t('ai_assist.trigger.translate') }
+            { t('ai_assist.trigger.translate', { ns: 'common' }) }
           </button>
         ) }
       </Trigger>

package/AiAssist/AiReviewModal.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { TFunction } from 'i18next';
 import Modal from '../Modal/Modal';
 import { useAiAvailable, useAiGenerate, useAiTranslate, useAiImprove } from './services';
-import { Row, Field, Compare, Pane, Draft, Actions, Error } from './styles';
+import { Row, Field, Compare, Pane, Draft, Actions } from './styles';
 
 interface Props {
   mode: 'generate' | 'improve' | 'translate'
@@ -25,6 +25,17 @@ interface Props {
  * Ferjolt Ozuni - Date: 2026-08-08
  */
 const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClose, t }: Props): JSX.Element => {
+  // Edited: Ferjolt Ozuni - Date: 2026-08-08
+  // Every ai_assist.* key lives in the 'common' namespace (obtapi's
+  // public/languages/{locale}/common.json), but the `t` this component
+  // receives is whatever namespace the CALLING page's own useTranslation()
+  // defaulted to (admin-pages/admin-label both default to 'normal') - a
+  // bare t('ai_assist.x') looked the key up in the wrong namespace, found
+  // nothing, and i18next's fallback is to render the raw key string. Every
+  // OTHER cross-namespace lookup in this codebase passes {ns:'common'}
+  // per call; this wrapper does it once instead of thirteen times.
+  const tc = (key: string): string => t(key, { ns: 'common' });
+
   const { data: available, isLoading: loadingAvailable } = useAiAvailable();
 
   const providers = Object.keys(available ?? {});
@@ -33,7 +44,6 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
   const [ model, setModel ] = useState<string>('');
   const [ instruction, setInstruction ] = useState<string>('');
   const [ draft, setDraft ] = useState<string | null>(null);
-  const [ error, setError ] = useState<string | null>(null);
 
   const activeProvider = provider || providers[0] || '';
   const activeModel = model || available?.[activeProvider]?.default_model || '';
@@ -44,10 +54,17 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
 
   const running = generating || translating || improving;
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-08
+  // No local onError/error state here - apiClient's own response
+  // interceptor already surfaces the real backend message as a toast on
+  // any 422 (obtapi's Ai\AdminController returns provider errors that
+  // way). A local onError reading a plain react-query Error's .message
+  // would only ever see axios's generic "Request failed with status code
+  // 422", never the actual "Incorrect API key provided..." the backend
+  // sent - found live, the modal showed exactly that generic text while
+  // the real message went to the toast every other form in this app
+  // already relies on.
   const onRun = (): void => {
-    setError(null);
-
-    const onError = (err: Error): void => setError(err.message);
     const onSuccess = (result: { content: string }): void => {
       setDraft(result.content);
       setInstruction('');
@@ -58,13 +75,13 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
     // endpoint that takes existing text + an instruction, which is exactly
     // what a revision is.
     if (draft !== null) {
-      Improve({ provider: activeProvider, model: activeModel, text: draft, instruction }, { onSuccess, onError });
+      Improve({ provider: activeProvider, model: activeModel, text: draft, instruction }, { onSuccess });
 
       return;
     }
 
     if (mode === 'generate') {
-      Generate({ provider: activeProvider, model: activeModel, prompt: instruction }, { onSuccess, onError });
+      Generate({ provider: activeProvider, model: activeModel, prompt: instruction }, { onSuccess });
 
       return;
     }
@@ -76,12 +93,12 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
         text: text ?? '',
         target_locale: targetLocale ?? '',
         source_locale: sourceLocale
-      }, { onSuccess, onError });
+      }, { onSuccess });
 
       return;
     }
 
-    Improve({ provider: activeProvider, model: activeModel, text: text ?? '', instruction }, { onSuccess, onError });
+    Improve({ provider: activeProvider, model: activeModel, text: text ?? '', instruction }, { onSuccess });
   };
 
   const onInsertClick = (): void => {
@@ -94,11 +111,9 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
 
   const content = (
     <>
-      { error && <Error>{ error }</Error> }
-
       <Row>
         <Field>
-          { t('ai_assist.provider') }
+          { tc('ai_assist.provider') }
 
           <select value={ activeProvider } onChange={ event => { setProvider(event.target.value); setModel(''); } }>
             { providers.map(key => <option key={ key } value={ key }>{ key }</option>) }
@@ -106,7 +121,7 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
         </Field>
 
         <Field>
-          { t('ai_assist.model') }
+          { tc('ai_assist.model') }
 
           <select value={ activeModel } onChange={ event => setModel(event.target.value) }>
             { (available?.[activeProvider]?.models ?? []).map(name => <option key={ name } value={ name }>{ name }</option>) }
@@ -118,14 +133,14 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
         <Row>
           <Field>
             { draft !== null
-              ? t('ai_assist.revise_instruction')
-              : (mode === 'generate' ? t('ai_assist.generate_prompt') : t('ai_assist.improve_instruction')) }
+              ? tc('ai_assist.revise_instruction')
+              : (mode === 'generate' ? tc('ai_assist.generate_prompt') : tc('ai_assist.improve_instruction')) }
 
             <input
               type="text"
               value={ instruction }
               onChange={ event => setInstruction(event.target.value) }
-              placeholder={ draft !== null ? t('ai_assist.revise_placeholder') : undefined }
+              placeholder={ draft !== null ? tc('ai_assist.revise_placeholder') : undefined }
             />
           </Field>
         </Row>
@@ -133,7 +148,7 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
 
       { draft === null && mode === 'translate' && (
         <Pane>
-          <h4>{ t('ai_assist.source') }</h4>
+          <h4>{ tc('ai_assist.source') }</h4>
 
           <div dangerouslySetInnerHTML={ { __html: text ?? '' } } />
         </Pane>
@@ -142,13 +157,13 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
       { draft !== null && mode === 'translate' && (
         <Compare>
           <Pane>
-            <h4>{ t('ai_assist.source') }</h4>
+            <h4>{ tc('ai_assist.source') }</h4>
 
             <div dangerouslySetInnerHTML={ { __html: text ?? '' } } />
           </Pane>
 
           <Pane>
-            <h4>{ t('ai_assist.draft') }</h4>
+            <h4>{ tc('ai_assist.draft') }</h4>
 
             <div dangerouslySetInnerHTML={ { __html: draft } } />
           </Pane>
@@ -161,16 +176,16 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
 
       <Actions>
         <button type="button" onClick={ onClose } disabled={ running }>
-          { t('ai_assist.cancel') }
+          { tc('ai_assist.cancel') }
         </button>
 
         <button type="button" onClick={ onRun } disabled={ running || !activeProvider || (mode !== 'translate' && draft === null && instruction.trim() === '') }>
-          { draft !== null ? t('ai_assist.revise') : t('ai_assist.run') }
+          { draft !== null ? tc('ai_assist.revise') : tc('ai_assist.run') }
         </button>
 
         { draft !== null && (
           <button type="button" onClick={ onInsertClick } disabled={ running }>
-            { t('ai_assist.insert') }
+            { tc('ai_assist.insert') }
           </button>
         ) }
       </Actions>
@@ -181,7 +196,7 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
     <Modal
       loading={ loadingAvailable }
       width={ 720 }
-      title={ t(`ai_assist.title.${ mode }`) }
+      title={ tc(`ai_assist.title.${ mode }`) }
       content={ content }
       onClose={ onClose }
     />

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Changelog
 
 
+## 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
+
+### Fixed
+
+- **`Viewer`'s `type: 'component'` rows never actually rendered, anywhere.** `Data.tsx` returned `null` for any item whose `name` was `undefined` before the switch statement that handled `'component'` ever ran - and a component row never HAS a name, it isn't a registered form field. Every SectionHeading divider, every `AiFieldAssist` Generate/Improve/Translate trigger, and every description paragraph moved inside a form's own box (SMS/Flex, this cycle) had silently never rendered, in any tab that used one, despite compiling clean and sitting right there in the bundle. Moved the `'component'` case to an early return above the name guard instead of weakening the guard's condition, which would have broken TypeScript's narrowing of `item.name` to `string` for every other case below it.
+- **AI trigger buttons and the review modal rendered raw i18n keys** (`ai_assist.trigger.generate`) instead of translated text. `ai_assist.*` lives in the `common` namespace, but the `t` passed into `AiFieldAssist`/`AiReviewModal` defaults to whatever namespace the calling page's own `useTranslation()` uses (`normal`/`whitelabel`) - every call now passes `{ ns: 'common' }`.
+- **`AiReviewModal` showed a generic "Request failed with status code 422"** instead of the real provider error on a failed generate/translate/improve. Removed its local error state/display entirely - `apiClient`'s existing global response interceptor already toasts `error.response.data.message` on any 422, the same mechanism every other form in the app already relies on; a local `onError` reading react-query's plain `Error.message` could only ever see Axios's generic text, never the backend's.
+
 ## 1.32.0
 
 ### Added

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/Viewer/Data.tsx

@@ -21,6 +21,29 @@ interface Props {
 }
 
 const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
+  // Edited: Ferjolt Ozuni - Date: 2026-08-08
+  // A 'component' row is not a registered form field - it never had a
+  // name to give, and the name-required guard below (meant to stop every
+  // OTHER type from registering with react-hook-form under an undefined
+  // key) was silently returning null for every one of them before ever
+  // reaching the 'component' case that used to sit in the switch further
+  // down. Found live: a whole category of content - SectionHeading
+  // dividers, AiFieldAssist's Generate/Improve/Translate triggers,
+  // description text moved inside a form's own box - had never actually
+  // rendered, in any of the tabs that used it, despite compiling clean
+  // and being right there in the production bundle. Handled here, before
+  // the name guard, rather than by weakening that guard's condition -
+  // TypeScript narrows item.name to a definite string for every case
+  // below FROM the guard, and a conditional guard cannot narrow it the
+  // same way.
+  if (item.type === 'component') {
+    return (
+      <div className="row-data">
+        { typeof item.value === 'function' ? item.value(onUpdate) : item.value }
+      </div>
+    );
+  }
+
   if (item.name === undefined) {
     return null;
   }
@@ -65,13 +88,6 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
         />
       );
 
-    case 'component':
-      return (
-        <div className="row-data">
-          { typeof item.value === 'function' ? item.value(onUpdate) : item.value }
-        </div>
-      );
-
     case 'display':
       return <Display className="row-data">{ value.string }</Display>;
 

package/package.json

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