@autobusal/common 1.31.0 → 1.33.0

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,24 @@
 # Changelog
 
 
+## 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
+
+- **Drag & drop on `File`**, the shared upload control used everywhere in the app - drop a file directly onto it instead of always going through the native picker. The control's own footprint (a single 38px-tall inline button) is unchanged everywhere it is already used; only a border/background highlight appears while dragging. A dropped file is handed to the same hidden `<input>` react-hook-form already registered, via a real dispatched `change` event, so every existing caller's validation/onChange keeps working with no changes on their end.
+
+### Fixed
+
+- **A checkbox row with a long notice no longer stretches sideways.** `.row-checkbox`'s label+input are laid out `flex-direction: row-reverse`, and the row's own notice/error text (a plain div) was sharing that same row - a short notice fit fine, but a longer one (two sentences, easily) stretched the row's WIDTH to fit on one line, visibly pushing the checkbox by however long the text happened to be. Every div child of a checkbox row now gets `flex-basis: 100%`, dropping straight onto its own full-width line; the label and input are unaffected.
+
 ## 1.31.0
 
 ### Added

package/File/File.tsx

@@ -19,6 +19,7 @@ interface Props {
 const File = ({ name, value, validation, multiple, t, refs }: Props): JSX.Element => {
   const [ uploaded, setUploaded ] = useState<boolean>(false);
   const [ preview, setPreview ] = useState<boolean>(false);
+  const [ dragging, setDragging ] = useState<boolean>(false);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -46,11 +47,53 @@ const File = ({ name, value, validation, multiple, t, refs }: Props): JSX.Elemen
     }
   };
 
+  /**
+   * Ferjolt Ozuni - Date: 2026-08-08
+   *
+   * A dropped file has to land on the actual hidden <input> - it is the
+   * one react-hook-form registered via refs(name, rules), and that
+   * registration is what onSave ultimately reads. The DataTransfer/
+   * dispatchEvent pair is the standard way to hand a File to a native
+   * file input programmatically: assigning to `.files` directly is
+   * read-only on the input itself, but an input accepts a `FileList`
+   * built via DataTransfer, and dispatching a real 'change' event (not
+   * calling the onChange prop directly) is what makes React's own
+   * synthetic-event system - and therefore RHF's registration - see it,
+   * exactly as if the browser's own file picker had fired it.
+   */
+  const onDrop = (event: React.DragEvent<HTMLDivElement>): void => {
+    event.preventDefault();
+    setDragging(false);
+
+    const dropped = event.dataTransfer.files;
+
+    if (!inputRef.current || dropped.length === 0) {
+      return;
+    }
+
+    const transfer = new DataTransfer();
+
+    Array.from(multiple ? dropped : [ dropped[0] ]).forEach(file => transfer.items.add(file));
+
+    inputRef.current.files = transfer.files;
+    inputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  const onDragOver = (event: React.DragEvent<HTMLDivElement>): void => {
+    event.preventDefault();
+    setDragging(true);
+  };
+
   const type = multiple ? 'multiple' : 'single';
 
   return (
     <>
-      <Container>
+      <Container
+        $dragging={ dragging }
+        onDragOver={ onDragOver }
+        onDragLeave={ () => setDragging(false) }
+        onDrop={ onDrop }
+      >
         <input
           { ...rest }
           type="file"

package/File/styles.ts

@@ -1,11 +1,27 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Container = styled.div`
+/**
+ * Ferjolt Ozuni - Date: 2026-08-08
+ * `$dragging` only changes the border/background while a file is being
+ * dragged over it - the box itself stays the same 38px-tall inline
+ * control everywhere this component is already used (tables, dense
+ * forms), rather than growing into a big dropzone that would only fit
+ * some of its callers.
+ */
+export const Container = styled.div<{ $dragging?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   height: 38px;
+  border-radius: ${ props => props.theme.borderRadius };
+  transition: background 0.15s ease;
+
+  ${ props => props.$dragging && css`
+    background: ${ props.theme.primary.neutral };
+    outline: 2px dashed ${ props.theme.primary.normal };
+    outline-offset: 2px;
+  ` }
 `;
 
 export const ImgView = styled.img`

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/Viewer/styles.ts

@@ -3,8 +3,25 @@ import styled from 'styled-components';
 export const Container = styled.div`
   & > div.row-checkbox {
     flex-direction: row-reverse;
+    flex-wrap: wrap;
     justify-content: left;
-    height: 20px;
+    min-height: 20px;
+
+    /*
+     * Edited: Ferjolt Ozuni - Date: 2026-08-08
+     * A checkbox row's own notice/error text is a DIV (Notice, Item's
+     * error Display) sharing this row's flex layout with the label
+     * (a span) and the checkbox input - row-reverse was fine for just
+     * those two, but any row with a real notice attached (Construction's
+     * "enabled" checkbox is two full sentences) stretched the row's WIDTH
+     * to fit the text on one line instead of wrapping it, visibly pushing
+     * the checkbox sideways by however long the notice happened to be.
+     * Forcing every div child onto its own full-width line - the label
+     * and the input stay row-reversed exactly as before.
+     */
+    & > div {
+      flex-basis: 100%;
+    }
   }
 
   @media (min-width: 540px) {

package/package.json

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