frontend: add Somali, Arabic (RTL) & German languages

Add three UI locales (so/ar/de) with full ~1,660-key translations alongside
en/fr, selectable in Settings → Profile. Arabic gets full right-to-left support:

- config.ts registers the locales and exports a `dirFor` helper; an inline
  <head> script in layout.tsx sets <html dir/lang> before first paint (no RTL
  flash), and i18n-provider keeps them in sync on language change.
- ~160 physical direction utilities converted to logical (ms/me/ps/pe/
  start/end/text-start/text-end); directional chevrons/arrows get rtl:rotate-180;
  chat-bubble align variants fixed to logical.
- IBM Plex Sans Arabic appended to the sans/heading font stacks for
  per-character Arabic fallback.
- Language persists to the backend user_settings and re-applies on sign-in so it
  roams across devices (localStorage stays the offline source of truth).
- New scripts/check-locales.mjs (npm run check-locales) enforces key/placeholder
  parity and Arabic CLDR plural completeness.

Bump to 0.3.0.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-07-02 23:03:13 +03:00
parent 46c32b432c
commit d237504af9
70 changed files with 6483 additions and 123 deletions
@@ -92,7 +92,7 @@ export function LabIntegrationCard({
{t("integrations.fhir.cardTitle")}
</h2>
<Badge
className="ml-auto"
className="ms-auto"
variant={
config.status === "connected"
? "secondary"
@@ -141,9 +141,9 @@ export function LabIntegrationCard({
) : (
<div className="flex flex-col gap-1.5">
<div className="relative">
<Search className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
<Search className="-translate-y-1/2 absolute top-1/2 start-3 size-4 text-muted-foreground" />
<Input
className="pl-9"
className="ps-9"
onChange={(e) => setQuery(e.target.value)}
placeholder={t("integrations.fhir.searchPlaceholder")}
value={query}
@@ -153,7 +153,7 @@ export function LabIntegrationCard({
<div className="flex flex-col gap-1">
{matches.map((p) => (
<button
className="flex items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors hover:bg-accent"
className="flex items-center gap-3 rounded-lg px-2 py-2 text-start transition-colors hover:bg-accent"
key={p.fileNumber}
onClick={() => setSelected(p)}
type="button"
+5 -5
View File
@@ -336,7 +336,7 @@ function AddResultDialog({
{t("lab.addResult.patient")}
</span>
<div className="relative">
<Search className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
<Search className="-translate-y-1/2 absolute top-1/2 start-3 size-4 text-muted-foreground" />
<Input
aria-activedescendant={
matches[activeIndex]
@@ -344,7 +344,7 @@ function AddResultDialog({
: undefined
}
autoFocus
className="pl-9"
className="ps-9"
onChange={(event) => {
setPatientQuery(event.target.value);
setActiveIndex(0);
@@ -359,7 +359,7 @@ function AddResultDialog({
{matches.map((p, index) => (
<button
className={cn(
"flex items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors",
"flex items-center gap-3 rounded-lg px-2 py-2 text-start transition-colors",
index === activeIndex
? "bg-accent"
: "hover:bg-accent",
@@ -650,7 +650,7 @@ export function LabView() {
}
onClick={() => toggle(task.id)}
/>
<CollapsibleTrigger className="group flex min-w-0 flex-1 items-center gap-3 text-left">
<CollapsibleTrigger className="group flex min-w-0 flex-1 items-center gap-3 text-start">
<div className="flex min-w-0 flex-1 flex-col">
<span
className={cn(
@@ -679,7 +679,7 @@ export function LabView() {
</CollapsibleTrigger>
</div>
<CollapsibleContent>
<div className="space-y-3 px-4 pb-4 pl-12 text-sm">
<div className="space-y-3 px-4 pb-4 ps-12 text-sm">
<p
className={cn(
"whitespace-pre-wrap",