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
@@ -314,9 +314,9 @@ export function AppointmentsView() {
</div>
<div className="flex items-center gap-2">
<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="w-full pl-9 sm:w-64"
className="w-full ps-9 sm:w-64"
onChange={(event) => setQuery(event.target.value)}
placeholder={t("appointments.searchPlaceholder")}
value={query}
@@ -145,7 +145,7 @@ export function CalendarDialog({
type="button"
variant="ghost"
>
<ChevronLeft />
<ChevronLeft className="rtl:rotate-180" />
</Button>
<Button
aria-label="Next month"
@@ -154,7 +154,7 @@ export function CalendarDialog({
type="button"
variant="ghost"
>
<ChevronRight />
<ChevronRight className="rtl:rotate-180" />
</Button>
</div>
</div>
@@ -182,7 +182,7 @@ export function CalendarDialog({
return (
<button
className={cn(
"flex min-h-22 flex-col gap-1 rounded-lg border p-1.5 text-left align-top transition-colors hover:bg-accent/50",
"flex min-h-22 flex-col gap-1 rounded-lg border p-1.5 text-start align-top transition-colors hover:bg-accent/50",
inMonth
? "bg-card/30"
: "bg-transparent text-muted-foreground/40",