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/Tabs/Tabs.tsx

@@ -1,6 +1,7 @@
 import { useRef } from 'react';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useTranslation } from '@/components/locales';
 
 type TabsProps = {
   tabList: { value: string; label: string }[];
@@ -8,6 +9,7 @@ type TabsProps = {
   setActiveTab: (tab: string) => void;
 };
 const TabsComponent = (props: TabsProps) => {
+  const { t } = useTranslation();
   const { tabList, activeTab, setActiveTab } = props;
   const tabsListRef = useRef<HTMLDivElement>(null);
   return (
@@ -38,7 +40,7 @@ const TabsComponent = (props: TabsProps) => {
       <div className="block lg:hidden">
         <Select value={activeTab} onValueChange={(v) => setActiveTab(v)}>
           <SelectTrigger className="w-40">
-            <SelectValue placeholder="Filter" />
+            <SelectValue placeholder={t('tabs.filterPlaceholder')} />
           </SelectTrigger>
           <SelectContent>
             {tabList.map((f) => (