inputs and data views keyed: search, select, tabs, state blocks, data table

The DataTable's pagination carries the only interpolated strings in this area
('Showing page {{current}} of {{total}}', '{{size}} / page'). No plural forms:
nothing here is a count-varying noun, so inventing one would only add a key
nobody uses.

DataTable.test.tsx now renders inside an I18nProvider with the real en-GB
catalog, so it still asserts the English a user sees rather than a dot-path.

Left/right utilities became logical (ms-/me-/ps-/pe-/start-) per D3.

src/workspaces/components/DataTable/DataTable.tsx

@@ -6,8 +6,10 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { useDataControl, type UseDataControlReturn } from 'hooks/useDataControl';
 import { PaginationBar } from './PaginationBar';
 import { cn } from 'helpers/cn';
+import { useTranslation } from '@/components/locales';
 
 export const DataTable = <T,>(props: DataTableProps<T>) => {
+  const { t } = useTranslation();
   const [columns, setColumns] = useState<Column<T>[]>([]);
   const { dataController, uniqueKey, noDataCTA, noDataMessage } = props;
   const theUniqueKey = uniqueKey || 'id';
@@ -58,7 +60,7 @@ export const DataTable = <T,>(props: DataTableProps<T>) => {
   if (rawData.length === 0) {
     return (
       <div className="py-12 text-center">
-        <div className="text-muted-foreground">{noDataMessage || 'No Data Found.'}</div>
+        <div className="text-muted-foreground">{noDataMessage || t('dataTable.empty')}</div>
         {noDataCTA && <>{noDataCTA}</>}
       </div>
     );
@@ -94,7 +96,7 @@ export const DataTable = <T,>(props: DataTableProps<T>) => {
                               <span className="min-[500px]:hidden">
                                 {String(labelMobile || label || field || '')} {tooltip ? <sup>ⓘ</sup> : ''}
                               </span>
-                              {sortKey && <ArrowUpDown className={cn('ml-2 h-4 w-4')} />}
+                              {sortKey && <ArrowUpDown className={cn('ms-2 h-4 w-4')} />}
                             </div>
                           </TooltipTrigger>
                           {tooltip && (