implement localization

app/Http/Controllers/LanguageController.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\UpdateLanguageRequest;
+use Illuminate\Http\RedirectResponse;
+
+class LanguageController extends Controller
+{
+    /**
+     * Handle the incoming request.
+     */
+    public function __invoke(UpdateLanguageRequest $request): RedirectResponse
+    {
+        $validated = $request->validated();
+
+        return back()->withCookie(cookie(
+            (string) config('localization.cookie', 'locale'),
+            (string) $validated['locale'],
+            60 * 24 * 365,
+            (string) config('session.path', '/'),
+            config('session.domain'),
+            config('session.secure'),
+            true,
+            false,
+            config('session.same_site', 'lax'),
+        ));
+    }
+}

app/Http/Middleware/HandleInertiaRequests.php

@@ -35,19 +35,58 @@ class HandleInertiaRequests extends Middleware
      */
     public function share(Request $request): array
     {
+        $fallbackLocale = (string) config('app.fallback_locale');
+        $locale = app()->getLocale();
+        $locales = $this->locales();
+        $direction = $locales[$locale]['direction'] ?? 'ltr';
+
         return [
             ...parent::share($request),
             'name' => config('app.name'),
             'auth' => [
                 'user' => $request->user(),
             ],
-            'fallbackLocale' => (string) config('app.fallback_locale'),
+            'fallbackLocale' => $fallbackLocale,
-            'locale' => app()->getLocale(),
+            'locale' => $locale,
+            'localization' => [
+                'locale' => $locale,
+                'fallbackLocale' => $fallbackLocale,
+                'direction' => $direction,
+                'isRtl' => $direction === 'rtl',
+                'locales' => $this->localeOptions($locales),
+            ],
             'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
             'translations' => fn () => $this->translations(),
         ];
     }
 
+    /**
+     * @return array<string, array{name: string, native_name: string, direction: string}>
+     */
+    private function locales(): array
+    {
+        $locales = config('localization.locales', []);
+
+        return is_array($locales) ? $locales : [];
+    }
+
+    /**
+     * @param  array<string, array{name: string, native_name: string, direction: string}>  $locales
+     * @return array<int, array{code: string, name: string, nativeName: string, direction: string}>
+     */
+    private function localeOptions(array $locales): array
+    {
+        return collect($locales)
+            ->map(fn (array $locale, string $code): array => [
+                'code' => $code,
+                'name' => $locale['name'],
+                'nativeName' => $locale['native_name'],
+                'direction' => $locale['direction'],
+            ])
+            ->values()
+            ->all();
+    }
+
     /**
      * @return array<string, string>
      */

app/Http/Middleware/SetLocale.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\App;
+use Illuminate\Support\Facades\Cookie;
+use Symfony\Component\HttpFoundation\Response;
+
+class SetLocale
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  Closure(Request): (Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        $cookieName = (string) config('localization.cookie', 'locale');
+        $supportedLocales = array_keys((array) config('localization.locales', []));
+        $cookieLocale = $request->cookie($cookieName);
+        $configuredLocale = (string) config('app.locale', 'en');
+
+        $locale = $this->validLocale($cookieLocale, $supportedLocales)
+            ?? $this->validLocale($configuredLocale, $supportedLocales)
+            ?? $this->validLocale((string) config('app.fallback_locale', 'en'), $supportedLocales)
+            ?? 'en';
+
+        App::setLocale($locale);
+
+        $response = $next($request);
+
+        if ($request->hasCookie($cookieName) && $this->validLocale($cookieLocale, $supportedLocales) === null) {
+            $response->headers->setCookie(Cookie::forget(
+                $cookieName,
+                (string) config('session.path', '/'),
+                config('session.domain'),
+            ));
+        }
+
+        return $response;
+    }
+
+    /**
+     * @param  array<int, string>  $supportedLocales
+     */
+    private function validLocale(mixed $locale, array $supportedLocales): ?string
+    {
+        if (! is_string($locale)) {
+            return null;
+        }
+
+        return in_array($locale, $supportedLocales, true) ? $locale : null;
+    }
+}

app/Http/Requests/UpdateLanguageRequest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class UpdateLanguageRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'locale' => ['required', 'string', Rule::in(array_keys((array) config('localization.locales', [])))],
+        ];
+    }
+}

bootstrap/app.php

@@ -3,6 +3,7 @@
 use App\Http\Middleware\EnsureUserIsAdmin;
 use App\Http\Middleware\HandleAppearance;
 use App\Http\Middleware\HandleInertiaRequests;
+use App\Http\Middleware\SetLocale;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
@@ -24,6 +25,7 @@ return Application::configure(basePath: dirname(__DIR__))
         ]);
 
         $middleware->web(append: [
+            SetLocale::class,
             HandleAppearance::class,
             HandleInertiaRequests::class,
             AddLinkHeadersForPreloadedAssets::class,

config/localization.php

@@ -0,0 +1,50 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Locale Preference Cookie
+    |--------------------------------------------------------------------------
+    |
+    | This cookie stores the visitor's selected interface language. When it is
+    | missing or invalid, the application falls back to the default locale
+    | configured in config/app.php via APP_LOCALE.
+    |
+    */
+
+    'cookie' => 'locale',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Supported Interface Locales
+    |--------------------------------------------------------------------------
+    |
+    | These locales are available in the language switcher and are validated
+    | before being stored in the locale cookie. The direction value controls
+    | the document dir attribute, RTL layout variants, and RTL font selection.
+    |
+    */
+
+    'locales' => [
+        'en' => [
+            'name' => 'English',
+            'native_name' => 'English',
+            'direction' => 'ltr',
+        ],
+        'es' => [
+            'name' => 'Spanish',
+            'native_name' => 'Español',
+            'direction' => 'ltr',
+        ],
+        'fa' => [
+            'name' => 'Persian',
+            'native_name' => 'فارسی',
+            'direction' => 'rtl',
+        ],
+        'ar' => [
+            'name' => 'Arabic',
+            'native_name' => 'العربية',
+            'direction' => 'rtl',
+        ],
+    ],
+];

lang/ar.json

@@ -321,5 +321,13 @@
     "or, enter the code manually": "أو أدخل الرمز يدويًا",
     "pending": "معلّق",
     "recording": "جارٍ التسجيل",
+    "Arabic": "العربية",
+    "Change language": "تغيير اللغة",
+    "Choose the language used across Nyone.": "اختر اللغة المستخدمة في Nyone.",
+    "English": "الإنجليزية",
+    "Interface language": "لغة الواجهة",
+    "Language": "اللغة",
+    "Persian": "الفارسية",
+    "Spanish": "الإسبانية",
     "unknown": "غير معروف"
 }

lang/en.json

@@ -321,5 +321,13 @@
     "or, enter the code manually": "or, enter the code manually",
     "pending": "pending",
     "recording": "recording",
+    "Arabic": "Arabic",
+    "Change language": "Change language",
+    "Choose the language used across Nyone.": "Choose the language used across Nyone.",
+    "English": "English",
+    "Interface language": "Interface language",
+    "Language": "Language",
+    "Persian": "Persian",
+    "Spanish": "Spanish",
     "unknown": "unknown"
 }

lang/es.json

@@ -321,5 +321,13 @@
     "or, enter the code manually": "o introduce el código manualmente",
     "pending": "pendiente",
     "recording": "grabando",
+    "Arabic": "Árabe",
+    "Change language": "Cambiar idioma",
+    "Choose the language used across Nyone.": "Elige el idioma usado en Nyone.",
+    "English": "Inglés",
+    "Interface language": "Idioma de la interfaz",
+    "Language": "Idioma",
+    "Persian": "Persa",
+    "Spanish": "Español",
     "unknown": "desconocido"
 }

lang/fa.json

@@ -321,5 +321,13 @@
     "or, enter the code manually": "یا کد را دستی وارد کنید",
     "pending": "در انتظار",
     "recording": "در حال ضبط",
+    "Arabic": "عربی",
+    "Change language": "تغییر زبان",
+    "Choose the language used across Nyone.": "زبان استفاده‌شده در Nyone را انتخاب کنید.",
+    "English": "انگلیسی",
+    "Interface language": "زبان رابط کاربری",
+    "Language": "زبان",
+    "Persian": "فارسی",
+    "Spanish": "اسپانیایی",
     "unknown": "نامشخص"
 }

resources/css/app.css

@@ -7,6 +7,17 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@font-face {
+    font-family: 'IRANSansWeb';
+    src:
+        url('/fonts/IRANSansWeb/IRANSansWeb.woff2') format('woff2'),
+        url('/fonts/IRANSansWeb/IRANSansWeb.woff') format('woff'),
+        url('/fonts/IRANSansWeb/IRANSansWeb.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
 @theme {
     --font-sans:
         'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
@@ -61,6 +72,13 @@
     --color-sidebar-ring: var(--sidebar-ring);
 }
 
+html[dir='rtl'] {
+    --font-sans:
+        'IRANSansWeb', ui-sans-serif, system-ui, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        'Noto Color Emoji';
+}
+
 :root {
     --background: oklch(0.982 0.012 315);
     --foreground: oklch(0.18 0.045 312);

resources/js/app.tsx

@@ -1,10 +1,12 @@
-import { createInertiaApp } from '@inertiajs/react';
+import { createInertiaApp, router } from '@inertiajs/react';
 import { Toaster } from '@/components/ui/sonner';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { initializeTheme } from '@/hooks/use-appearance';
 import AppLayout from '@/layouts/app-layout';
 import AuthLayout from '@/layouts/auth-layout';
 import SettingsLayout from '@/layouts/settings/layout';
+import { applyDocumentLocalization } from '@/lib/localization';
+import type { Localization } from '@/types';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Nyone';
 
@@ -38,3 +40,15 @@ createInertiaApp({
 
 // This will set light / dark mode on load...
 initializeTheme();
+
+router.on('navigate', (event) => {
+    applyDocumentLocalization(
+        event.detail.page.props.localization as Localization | undefined,
+    );
+});
+
+router.on('success', (event) => {
+    applyDocumentLocalization(
+        event.detail.page.props.localization as Localization | undefined,
+    );
+});

resources/js/components/app-header.tsx

@@ -10,6 +10,7 @@ import {
 import AppLogo from '@/components/app-logo';
 import AppLogoIcon from '@/components/app-logo-icon';
 import { Breadcrumbs } from '@/components/breadcrumbs';
+import { LanguageSwitcher } from '@/components/language-switcher';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
@@ -54,7 +55,7 @@ const activeItemStyles = 'bg-accent text-accent-foreground';
 
 export function AppHeader({ breadcrumbs = [] }: Props) {
     const page = usePage();
-    const { auth } = page.props;
+    const { auth, localization } = page.props;
     const getInitials = useInitials();
     const { isCurrentUrl, whenCurrentUrl } = useCurrentUrl();
     const { t } = useTranslation();
@@ -100,19 +101,19 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
                                 <Button
                                     variant="ghost"
                                     size="icon"
-                                    className="mr-2 h-[34px] w-[34px]"
+                                    className="me-2 h-[34px] w-[34px]"
                                 >
                                     <Menu className="h-5 w-5" />
                                 </Button>
                             </SheetTrigger>
                             <SheetContent
-                                side="left"
+                                side={localization.isRtl ? 'right' : 'left'}
                                 className="flex h-full w-64 flex-col items-stretch justify-between bg-sidebar"
                             >
                                 <SheetTitle className="sr-only">
                                     {t('Navigation menu')}
                                 </SheetTitle>
-                                <SheetHeader className="flex justify-start text-left">
+                                <SheetHeader className="flex justify-start text-start">
                                     <AppLogoIcon className="h-6 w-6 fill-current text-black dark:text-white" />
                                 </SheetHeader>
                                 <div className="flex h-full flex-1 flex-col space-y-4 p-4">
@@ -122,7 +123,7 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
                                                 <Link
                                                     key={item.title}
                                                     href={item.href}
-                                                    className="flex items-center space-x-2 font-medium"
+                                                    className="flex items-center gap-2 font-medium"
                                                 >
                                                     {item.icon && (
                                                         <item.icon className="h-5 w-5" />
@@ -142,15 +143,15 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
                     <Link
                         href={home()}
                         prefetch
-                        className="flex items-center space-x-2"
+                        className="flex items-center gap-2"
                     >
                         <AppLogo />
                     </Link>
 
                     {/* Desktop Navigation */}
-                    <div className="ml-6 hidden h-full items-center space-x-6 lg:flex">
+                    <div className="ms-6 hidden h-full items-center gap-6 lg:flex">
                         <NavigationMenu className="flex h-full items-stretch">
-                            <NavigationMenuList className="flex h-full items-stretch space-x-2">
+                            <NavigationMenuList className="flex h-full items-stretch gap-2">
                                 {mainNavItems.map((item, index) => (
                                     <NavigationMenuItem
                                         key={index}
@@ -168,7 +169,7 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
                                             )}
                                         >
                                             {item.icon && (
-                                                <item.icon className="mr-2 h-4 w-4" />
+                                                <item.icon className="me-2 h-4 w-4" />
                                             )}
                                             {t(item.title)}
                                         </Link>
@@ -181,8 +182,9 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
                         </NavigationMenu>
                     </div>
 
-                    <div className="ml-auto flex items-center space-x-2">
+                    <div className="ms-auto flex items-center gap-2">
-                        <div className="relative flex items-center space-x-1">
+                        <LanguageSwitcher className="hidden sm:inline-flex" />
+                        <div className="relative flex items-center gap-1">
                             <Button
                                 asChild
                                 variant="ghost"
@@ -193,7 +195,7 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
                                     <Search className="!size-5 opacity-80 group-hover:opacity-100" />
                                 </Link>
                             </Button>
-                            <div className="ml-1 hidden gap-1 lg:flex">
+                            <div className="ms-1 hidden gap-1 lg:flex">
                                 <Tooltip>
                                     <TooltipTrigger asChild>
                                         <Link

resources/js/components/app-logo.tsx

@@ -6,7 +6,7 @@ export default function AppLogo() {
             <div className="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground shadow-sm">
                 <AppLogoIcon className="size-5 fill-current" />
             </div>
-            <div className="ml-1 grid flex-1 text-left text-sm">
+            <div className="ms-1 grid flex-1 text-start text-sm">
                 <span className="mb-0.5 truncate leading-tight font-semibold">
                     Nyone
                 </span>

resources/js/components/app-sidebar-header.tsx

@@ -10,7 +10,7 @@ export function AppSidebarHeader({
     return (
         <header className="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/50 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
             <div className="flex items-center gap-2">
-                <SidebarTrigger className="-ml-1" />
+                <SidebarTrigger className="-ms-1" />
                 <Breadcrumbs breadcrumbs={breadcrumbs} />
             </div>
         </header>

resources/js/components/app-sidebar.tsx

@@ -1,6 +1,7 @@
 import { Link, usePage } from '@inertiajs/react';
 import { LayoutGrid, LifeBuoy, Radio, Shield } from 'lucide-react';
 import AppLogo from '@/components/app-logo';
+import { LanguageSwitcher } from '@/components/language-switcher';
 import { NavMain } from '@/components/nav-main';
 import { NavUser } from '@/components/nav-user';
 import {
@@ -19,7 +20,7 @@ import { index as supportIndex } from '@/routes/support';
 import type { NavItem } from '@/types';
 
 export function AppSidebar() {
-    const { auth } = usePage().props;
+    const { auth, localization } = usePage().props;
     const mainNavItems: NavItem[] = [
         {
             title: 'Live',
@@ -52,7 +53,11 @@ export function AppSidebar() {
     }
 
     return (
-        <Sidebar collapsible="icon" variant="inset">
+        <Sidebar
+            collapsible="icon"
+            side={localization.isRtl ? 'right' : 'left'}
+            variant="inset"
+        >
             <SidebarHeader>
                 <SidebarMenu>
                     <SidebarMenuItem>
@@ -70,6 +75,7 @@ export function AppSidebar() {
             </SidebarContent>
 
             <SidebarFooter>
+                <LanguageSwitcher variant="sidebar" align="start" />
                 <NavUser />
             </SidebarFooter>
         </Sidebar>

resources/js/components/appearance-tabs.tsx

@@ -38,8 +38,8 @@ export default function AppearanceToggleTab({
                             : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
                     )}
                 >
-                    <Icon className="-ml-1 h-4 w-4" />
+                    <Icon className="-ms-1 h-4 w-4" />
-                    <span className="ml-1.5 text-sm">{t(label)}</span>
+                    <span className="ms-1.5 text-sm">{t(label)}</span>
                 </button>
             ))}
         </div>

resources/js/components/language-switcher.tsx

@@ -0,0 +1,224 @@
+import { router, usePage } from '@inertiajs/react';
+import { Check, Globe2, Languages } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { applyDocumentLocalization } from '@/lib/localization';
+import { useTranslation } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+import { update as updateLanguage } from '@/routes/language';
+import type { Localization, LocaleOption } from '@/types';
+
+type LanguageSwitcherProps = {
+    align?: 'center' | 'end' | 'start';
+    className?: string;
+    variant?: 'compact' | 'settings' | 'sidebar';
+};
+
+export function LanguageSwitcher({
+    align = 'end',
+    className,
+    variant = 'compact',
+}: LanguageSwitcherProps) {
+    const { localization } = usePage().props;
+    const { t } = useTranslation();
+    const [pendingLocale, setPendingLocale] = useState<string | null>(null);
+    const currentLocale =
+        localization.locales.find(
+            (locale) => locale.code === localization.locale,
+        ) ?? localization.locales[0];
+
+    if (!currentLocale) {
+        return null;
+    }
+
+    const updateLocale = (locale: string): void => {
+        if (locale === localization.locale || pendingLocale) {
+            return;
+        }
+
+        const nextLocale = localization.locales.find(
+            (option) => option.code === locale,
+        );
+
+        if (!nextLocale) {
+            return;
+        }
+
+        setPendingLocale(locale);
+        applyDocumentLocalization({
+            direction: nextLocale.direction,
+            locale: nextLocale.code,
+        });
+
+        router
+            .optimistic((props) => ({
+                locale: nextLocale.code,
+                localization: {
+                    ...(props as { localization: Localization }).localization,
+                    direction: nextLocale.direction,
+                    isRtl: nextLocale.direction === 'rtl',
+                    locale: nextLocale.code,
+                },
+            }))
+            .post(
+                updateLanguage.url(),
+                { locale },
+                {
+                    preserveScroll: true,
+                    preserveState: false,
+                    onCancel: () => applyDocumentLocalization(localization),
+                    onError: () => applyDocumentLocalization(localization),
+                    onFinish: () => setPendingLocale(null),
+                    onNetworkError: () =>
+                        applyDocumentLocalization(localization),
+                    onSuccess: (page) =>
+                        applyDocumentLocalization(
+                            page.props.localization as Localization | undefined,
+                        ),
+                },
+            );
+    };
+
+    if (variant === 'settings') {
+        return (
+            <section className={cn('space-y-4', className)}>
+                <div className="flex items-start gap-3">
+                    <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                        <Languages className="size-5" />
+                    </span>
+                    <div className="space-y-1">
+                        <h2 className="text-base font-semibold">
+                            {t('Interface language')}
+                        </h2>
+                        <p className="text-sm text-muted-foreground">
+                            {t('Choose the language used across Nyone.')}
+                        </p>
+                    </div>
+                </div>
+
+                <div className="grid gap-2 sm:grid-cols-2">
+                    {localization.locales.map((locale) => (
+                        <LanguageOptionButton
+                            key={locale.code}
+                            locale={locale}
+                            isActive={locale.code === localization.locale}
+                            isPending={pendingLocale === locale.code}
+                            onSelect={updateLocale}
+                        />
+                    ))}
+                </div>
+            </section>
+        );
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant={variant === 'sidebar' ? 'ghost' : 'outline'}
+                    size="sm"
+                    className={cn(
+                        'h-9 gap-2 px-2.5',
+                        variant === 'sidebar' &&
+                            'w-full justify-start border-transparent bg-transparent text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                        className,
+                    )}
+                    aria-label={t('Change language')}
+                >
+                    <Globe2 className="size-4" />
+                    <span className="text-xs font-semibold tracking-normal">
+                        {currentLocale.code.toUpperCase()}
+                    </span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align={align} className="w-56">
+                <DropdownMenuLabel className="flex items-center gap-2">
+                    <Globe2 className="size-4 text-muted-foreground" />
+                    {t('Language')}
+                </DropdownMenuLabel>
+
+                {localization.locales.map((locale) => (
+                    <DropdownMenuItem
+                        key={locale.code}
+                        className="items-center gap-3 p-2"
+                        disabled={pendingLocale !== null}
+                        onSelect={() => updateLocale(locale.code)}
+                    >
+                        <LocaleBadge locale={locale} />
+                        <span
+                            className="min-w-0 flex-1 text-start"
+                            dir={locale.direction}
+                        >
+                            <span className="block truncate text-sm font-medium">
+                                {locale.nativeName}
+                            </span>
+                            <span className="block truncate text-xs text-muted-foreground">
+                                {t(locale.name)}
+                            </span>
+                        </span>
+                        {locale.code === localization.locale && (
+                            <Check className="size-4 text-primary" />
+                        )}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
+
+type LanguageOptionButtonProps = {
+    isActive: boolean;
+    isPending: boolean;
+    locale: LocaleOption;
+    onSelect: (locale: string) => void;
+};
+
+function LanguageOptionButton({
+    isActive,
+    isPending,
+    locale,
+    onSelect,
+}: LanguageOptionButtonProps) {
+    const { t } = useTranslation();
+
+    return (
+        <button
+            type="button"
+            className={cn(
+                'flex min-h-20 items-center gap-3 rounded-md border p-3 text-start transition-colors',
+                isActive
+                    ? 'border-primary bg-primary/10 text-foreground shadow-sm'
+                    : 'border-border bg-background hover:border-primary/50 hover:bg-accent',
+            )}
+            dir={locale.direction}
+            disabled={isPending}
+            onClick={() => onSelect(locale.code)}
+        >
+            <LocaleBadge locale={locale} />
+            <span className="min-w-0 flex-1">
+                <span className="block truncate text-sm font-semibold">
+                    {locale.nativeName}
+                </span>
+                <span className="block truncate text-xs text-muted-foreground">
+                    {t(locale.name)}
+                </span>
+            </span>
+            {isActive && <Check className="size-4 shrink-0 text-primary" />}
+        </button>
+    );
+}
+
+function LocaleBadge({ locale }: { locale: LocaleOption }) {
+    return (
+        <span className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-muted-foreground uppercase">
+            {locale.code}
+        </span>
+    );
+}

resources/js/components/nav-user.tsx

@@ -35,7 +35,7 @@ export function NavUser() {
                             data-test="sidebar-menu-button"
                         >
                             <UserInfo user={auth.user} />
-                            <ChevronsUpDown className="ml-auto size-4" />
+                            <ChevronsUpDown className="ms-auto size-4" />
                         </SidebarMenuButton>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent

resources/js/components/password-input.tsx

@@ -17,14 +17,14 @@ export default function PasswordInput({
         <div className="relative">
             <Input
                 type={showPassword ? 'text' : 'password'}
-                className={cn('pr-10', className)}
+                className={cn('pe-10', className)}
                 ref={ref}
                 {...props}
             />
             <button
                 type="button"
                 onClick={() => setShowPassword((prev) => !prev)}
-                className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-3 text-muted-foreground hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-none"
+                className="absolute inset-y-0 end-0 flex items-center rounded-e-md px-3 text-muted-foreground hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-none"
                 aria-label={t(showPassword ? 'Hide password' : 'Show password')}
                 tabIndex={-1}
             >

resources/js/components/two-factor-setup-modal.tsx

@@ -32,7 +32,7 @@ function GridScanIcon() {
                     {Array.from({ length: 5 }, (_, i) => (
                         <div
                             key={`col-${i + 1}`}
-                            className="border-r border-border last:border-r-0"
+                            className="border-e border-border last:border-e-0"
                         />
                     ))}
                 </div>
@@ -97,7 +97,7 @@ function TwoFactorSetupStep({
                         </div>
                     </div>
 
-                    <div className="flex w-full space-x-5">
+                    <div className="flex w-full gap-5">
                         <Button className="w-full" onClick={onNextStep}>
                             {buttonText}
                         </Button>
@@ -110,7 +110,7 @@ function TwoFactorSetupStep({
                         </span>
                     </div>
 
-                    <div className="flex w-full space-x-2">
+                    <div className="flex w-full gap-2">
                         <div className="flex w-full items-stretch overflow-hidden rounded-xl border border-border">
                             {!manualSetupKey ? (
                                 <div className="flex h-full w-full items-center justify-center bg-muted p-3">
@@ -126,7 +126,7 @@ function TwoFactorSetupStep({
                                     />
                                     <button
                                         onClick={() => copy(manualSetupKey)}
-                                        className="border-l border-border px-3 hover:bg-muted"
+                                        className="border-s border-border px-3 hover:bg-muted"
                                     >
                                         <IconComponent className="w-4" />
                                     </button>
@@ -205,7 +205,7 @@ function TwoFactorVerificationStep({
                             />
                         </div>
 
-                        <div className="flex w-full space-x-5">
+                        <div className="flex w-full gap-5">
                             <Button
                                 type="button"
                                 variant="outline"

resources/js/components/ui/dialog.tsx

@@ -64,7 +64,7 @@ function DialogContent({
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 end-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
           <XIcon />
           <span className="sr-only">{t("Close")}</span>
         </DialogPrimitive.Close>
@@ -77,7 +77,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn("flex flex-col gap-2 text-center sm:text-start", className)}
       {...props}
     />
   )

resources/js/components/ui/dropdown-menu.tsx

@@ -72,7 +72,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -90,13 +90,13 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pe-2 ps-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
       {...props}
     >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <span className="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
           <CheckIcon className="size-4" />
         </DropdownMenuPrimitive.ItemIndicator>
@@ -126,12 +126,12 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pe-2 ps-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <span className="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
           <CircleIcon className="size-2 fill-current" />
         </DropdownMenuPrimitive.ItemIndicator>
@@ -153,7 +153,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        "px-2 py-1.5 text-sm font-medium data-[inset]:ps-8",
         className
       )}
       {...props}
@@ -182,7 +182,7 @@ function DropdownMenuShortcut({
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "text-muted-foreground ms-auto text-xs tracking-widest",
         className
       )}
       {...props}
@@ -209,13 +209,13 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:ps-8",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto size-4" />
+      <ChevronRightIcon className="ms-auto size-4 rtl:rotate-180" />
     </DropdownMenuPrimitive.SubTrigger>
   )
 }

resources/js/components/ui/input-otp.tsx

@@ -39,7 +39,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        "relative flex h-9 w-9 items-center justify-center border-y border-e border-input text-sm shadow-sm transition-all first:rounded-s-md first:border-s last:rounded-e-md",
         isActive && "z-10 ring-1 ring-ring",
         className
       )}

resources/js/components/ui/navigation-menu.tsx

@@ -75,7 +75,7 @@ function NavigationMenuTrigger({
     >
       {children}{" "}
       <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        className="relative top-[1px] ms-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>

resources/js/components/ui/select.tsx

@@ -112,14 +112,14 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
     >
       <span
         data-slot="select-item-indicator"
-        className="absolute right-2 flex size-3.5 items-center justify-center"
+        className="absolute end-2 flex size-3.5 items-center justify-center"
       >
         <SelectPrimitive.ItemIndicator>
           <CheckIcon className="size-4" />

resources/js/components/ui/sheet.tsx

@@ -73,7 +73,7 @@ function SheetContent({
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 end-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="size-4" />
           <span className="sr-only">{t("Close")}</span>
         </SheetPrimitive.Close>

resources/js/components/ui/sidebar.tsx

@@ -309,7 +309,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
       data-slot="sidebar-inset"
       className={cn(
         "bg-background relative flex max-w-full min-h-svh flex-1 flex-col",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0",
         className
       )}
       {...props}
@@ -425,7 +425,7 @@ function SidebarGroupAction({
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 end-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 md:after:hidden",
         "group-data-[collapsible=icon]:hidden",
@@ -473,7 +473,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -560,7 +560,7 @@ function SidebarMenuAction({
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 end-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 md:after:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
@@ -585,7 +585,7 @@ function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "text-sidebar-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
         "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
         "peer-data-[size=sm]/menu-button:top-1",
         "peer-data-[size=default]/menu-button:top-1.5",
@@ -642,7 +642,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s px-2.5 py-0.5",
         "group-data-[collapsible=icon]:hidden",
         className
       )}

resources/js/components/ui/toggle-group.tsx

@@ -58,7 +58,7 @@ function ToggleGroupItem({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-s-0 data-[variant=outline]:first:border-s",
         className
       )}
       {...props}

resources/js/components/user-info.tsx

@@ -19,7 +19,7 @@ export function UserInfo({
                     {getInitials(user.name)}
                 </AvatarFallback>
             </Avatar>
-            <div className="grid flex-1 text-left text-sm leading-tight">
+            <div className="grid flex-1 text-start text-sm leading-tight">
                 <span className="truncate font-medium">{user.name}</span>
                 {showEmail && (
                     <span className="truncate text-xs text-muted-foreground">

resources/js/components/user-menu-content.tsx

@@ -29,7 +29,7 @@ export function UserMenuContent({ user }: Props) {
     return (
         <>
             <DropdownMenuLabel className="p-0 font-normal">
-                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
                     <UserInfo user={user} showEmail={true} />
                 </div>
             </DropdownMenuLabel>
@@ -42,7 +42,7 @@ export function UserMenuContent({ user }: Props) {
                         prefetch
                         onClick={cleanup}
                     >
-                        <Settings className="mr-2" />
+                        <Settings className="me-2" />
                         {t('Settings')}
                     </Link>
                 </DropdownMenuItem>
@@ -56,7 +56,7 @@ export function UserMenuContent({ user }: Props) {
                     onClick={handleLogout}
                     data-test="logout-button"
                 >
-                    <LogOut className="mr-2" />
+                    <LogOut className="me-2" />
                     {t('Log out')}
                 </Link>
             </DropdownMenuItem>

resources/js/layouts/auth/auth-simple-layout.tsx

@@ -1,5 +1,6 @@
 import { Link } from '@inertiajs/react';
 import AppLogoIcon from '@/components/app-logo-icon';
+import { LanguageSwitcher } from '@/components/language-switcher';
 import { useTranslation } from '@/lib/translations';
 import { home } from '@/routes';
 import type { AuthLayoutProps } from '@/types';
@@ -12,7 +13,8 @@ export default function AuthSimpleLayout({
     const { t } = useTranslation();
 
     return (
-        <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+        <div className="relative flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+            <LanguageSwitcher className="absolute end-4 top-4" />
             <div className="w-full max-w-sm rounded-md border bg-card p-6 shadow-sm">
                 <div className="flex flex-col gap-8">
                     <div className="flex flex-col items-center gap-4">

resources/js/layouts/auth/auth-split-layout.tsx

@@ -14,13 +14,13 @@ export default function AuthSplitLayout({
 
     return (
         <div className="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
-            <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
+            <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-e">
                 <div className="absolute inset-0 bg-zinc-900" />
                 <Link
                     href={home()}
                     className="relative z-20 flex items-center text-lg font-medium"
                 >
-                    <AppLogoIcon className="mr-2 size-8 fill-current text-white" />
+                    <AppLogoIcon className="me-2 size-8 fill-current text-white" />
                     {name}
                 </Link>
             </div>
@@ -32,7 +32,7 @@ export default function AuthSplitLayout({
                     >
                         <AppLogoIcon className="h-10 fill-current text-black sm:h-12" />
                     </Link>
-                    <div className="flex flex-col items-start gap-2 text-left sm:items-center sm:text-center">
+                    <div className="flex flex-col items-start gap-2 text-start sm:items-center sm:text-center">
                         <h1 className="text-xl font-medium">
                             {t(title ?? '')}
                         </h1>

resources/js/layouts/settings/layout.tsx

@@ -44,7 +44,7 @@ export default function SettingsLayout({ children }: PropsWithChildren) {
             <div className="flex flex-col gap-6 lg:flex-row">
                 <aside className="w-full max-w-xl lg:w-48">
                     <nav
-                        className="flex flex-col space-y-1 space-x-0"
+                        className="flex flex-col gap-1"
                         aria-label={t('Settings')}
                     >
                         {sidebarNavItems.map((item, index) => (

resources/js/lib/localization.ts

@@ -0,0 +1,17 @@
+import type { Localization, LocaleDirection } from '@/types';
+
+type DocumentLocalization = {
+    direction: LocaleDirection;
+    locale: string;
+};
+
+export function applyDocumentLocalization(
+    localization?: DocumentLocalization | Localization | null,
+): void {
+    if (!localization || typeof document === 'undefined') {
+        return;
+    }
+
+    document.documentElement.lang = localization.locale.replaceAll('_', '-');
+    document.documentElement.dir = localization.direction;
+}

resources/js/pages/auth/forgot-password.tsx

@@ -57,7 +57,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
                     )}
                 </Form>
 
-                <div className="space-x-1 text-center text-sm text-muted-foreground">
+                <div className="space-x-1 text-center text-sm text-muted-foreground rtl:space-x-reverse">
                     <span>{t('Or, return to')}</span>
                     <TextLink href={login()}>{t('log in')}</TextLink>
                 </div>

resources/js/pages/auth/login.tsx

@@ -58,7 +58,7 @@ export default function Login({
                                     {canResetPassword && (
                                         <TextLink
                                             href={request()}
-                                            className="ml-auto text-sm"
+                                            className="ms-auto text-sm"
                                             tabIndex={5}
                                         >
                                             {t('Forgot password?')}
@@ -76,7 +76,7 @@ export default function Login({
                                 <InputError message={errors.password} />
                             </div>
 
-                            <div className="flex items-center space-x-3">
+                            <div className="flex items-center gap-3">
                                 <Checkbox
                                     id="remember"
                                     name="remember"

resources/js/pages/channels/show.tsx

@@ -275,7 +275,7 @@ export default function ChannelShow({
                     </section>
                 </main>
 
-                <aside className="hidden min-h-[480px] border-l bg-card xl:flex">
+                <aside className="hidden min-h-[480px] border-s bg-card xl:flex">
                     <ChatPanel
                         channel={channel}
                         authUser={Boolean(auth.user)}
@@ -474,7 +474,7 @@ function ChatPanel({
                                                     message.created_at,
                                                 )}
                                                 className={cn(
-                                                    'ml-auto shrink-0 text-[11px] text-muted-foreground',
+                                                    'ms-auto shrink-0 text-[11px] text-muted-foreground',
                                                     isChannelOwner &&
                                                         'text-primary/80',
                                                 )}
@@ -549,7 +549,7 @@ function ChatPanel({
                                     <SmilePlus className="size-4" />
                                 </Button>
                                 {emojiPickerOpen && channel.is_live && (
-                                    <div className="absolute right-0 bottom-full z-10 mb-2 grid w-52 grid-cols-4 gap-1 rounded-md border bg-popover p-2 text-popover-foreground shadow-md">
+                                    <div className="absolute end-0 bottom-full z-10 mb-2 grid w-52 grid-cols-4 gap-1 rounded-md border bg-popover p-2 text-popover-foreground shadow-md">
                                         {chatEmojis.map((emoji) => (
                                             <button
                                                 key={emoji}

resources/js/pages/settings/appearance.tsx

@@ -1,6 +1,7 @@
 import { Head } from '@inertiajs/react';
 import AppearanceTabs from '@/components/appearance-tabs';
 import Heading from '@/components/heading';
+import { LanguageSwitcher } from '@/components/language-switcher';
 import { useTranslation } from '@/lib/translations';
 import { edit as editAppearance } from '@/routes/appearance';
 
@@ -20,6 +21,7 @@ export default function Appearance() {
                     description="Update your account's appearance settings"
                 />
                 <AppearanceTabs />
+                <LanguageSwitcher variant="settings" />
             </div>
         </>
     );

resources/js/pages/welcome.tsx

@@ -11,6 +11,7 @@ import {
     Video,
 } from 'lucide-react';
 import { useMemo, useState } from 'react';
+import { LanguageSwitcher } from '@/components/language-switcher';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { useTranslation } from '@/lib/translations';
@@ -96,7 +97,8 @@ export default function Welcome({
                             )}
                         </nav>
 
-                        <div className="ml-auto flex items-center gap-2">
+                        <div className="ms-auto flex items-center gap-2">
+                            <LanguageSwitcher />
                             {auth.user ? (
                                 <>
                                     <Button asChild size="sm">
@@ -182,9 +184,9 @@ export default function Welcome({
                                                     count: featuredChannel.viewer_count,
                                                 })}
                                             </span>
-                                            <span className="inline-flex shrink-0 items-center gap-1 text-primary sm:ml-auto">
+                                            <span className="inline-flex shrink-0 items-center gap-1 text-primary sm:ms-auto">
                                                 {t('Watch')}
-                                                <ArrowRight className="size-4" />
+                                                <ArrowRight className="size-4 rtl:rotate-180" />
                                             </span>
                                         </div>
                                     </div>
@@ -269,14 +271,14 @@ export default function Welcome({
                             </div>
                             <div className="flex flex-col gap-2 sm:flex-row">
                                 <div className="relative">
-                                    <Search className="absolute top-2.5 left-3 size-4 text-muted-foreground" />
+                                    <Search className="absolute start-3 top-2.5 size-4 text-muted-foreground" />
                                     <Input
                                         value={query}
                                         onChange={(event) =>
                                             setQuery(event.target.value)
                                         }
                                         placeholder={t('Search live channels')}
-                                        className="pl-9 sm:w-72"
+                                        className="ps-9 sm:w-72"
                                     />
                                 </div>
                                 <select
@@ -399,7 +401,7 @@ function Thumbnail({
                     </div>
                 </div>
             )}
-            <div className="absolute top-3 left-3">
+            <div className="absolute start-3 top-3">
                 <LiveBadge compact />
             </div>
         </div>

resources/js/types/global.d.ts

@@ -1,5 +1,5 @@
 import type { Auth } from '@/types/auth';
-import type { Translations } from '@/types/localization';
+import type { Localization, Translations } from '@/types/localization';
 
 declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -15,6 +15,7 @@ declare module '@inertiajs/core' {
             auth: Auth;
             fallbackLocale: string;
             locale: string;
+            localization: Localization;
             sidebarOpen: boolean;
             translations: Translations;
             [key: string]: unknown;

resources/js/types/localization.ts

@@ -4,3 +4,20 @@ export type TranslationReplacements = Record<
     string,
     boolean | null | number | string | undefined
 >;
+
+export type LocaleDirection = 'ltr' | 'rtl';
+
+export type LocaleOption = {
+    code: string;
+    name: string;
+    nativeName: string;
+    direction: LocaleDirection;
+};
+
+export type Localization = {
+    locale: string;
+    fallbackLocale: string;
+    direction: LocaleDirection;
+    isRtl: boolean;
+    locales: LocaleOption[];
+};

resources/views/app.blade.php

@@ -1,5 +1,10 @@
+@php
+    $locale = app()->getLocale();
+    $direction = data_get(config("localization.locales.{$locale}"), 'direction', 'ltr');
+@endphp
+
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])>
+<html lang="{{ str_replace('_', '-', $locale) }}" dir="{{ $direction }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])>
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">

routes/web.php

@@ -9,12 +9,14 @@ use App\Http\Controllers\ChatMessageController;
 use App\Http\Controllers\CreatorDashboardController;
 use App\Http\Controllers\FollowController;
 use App\Http\Controllers\HomeController;
+use App\Http\Controllers\LanguageController;
 use App\Http\Controllers\MediaMtxController;
 use App\Http\Controllers\SupportAttachmentController;
 use App\Http\Controllers\SupportConversationController;
 use Illuminate\Support\Facades\Route;
 
 Route::get('/', HomeController::class)->name('home');
+Route::post('language', LanguageController::class)->name('language.update');
 Route::get('channels/{channel:slug}', [ChannelController::class, 'show'])->name('channels.show');
 
 Route::prefix('internal/mediamtx')->name('internal.mediamtx.')->group(function () {

tests/Feature/LocalizationTest.php

@@ -10,99 +10,113 @@ class LocalizationTest extends TestCase
 {
     use RefreshDatabase;
 
-    public function test_inertia_responses_share_locale_and_translations(): void
+    public function test_inertia_responses_use_configured_default_locale_when_cookie_is_missing(): void
     {
-        $this->get(route('home'))
+        config(['app.locale' => 'fa']);
-            ->assertOk()
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('welcome')
-                ->where('locale', app()->getLocale())
-                ->where('fallbackLocale', config('app.fallback_locale'))
-                ->where('translations.Live', __('Live'))
-                ->where('translations.Password', __('Password'))
-                ->where('translations.Closed', __('Closed'))
-                ->where('translations', fn ($translations) => $translations->get('Browse active channels by category or title.') === __('Browse active channels by category or title.'))
-            );
-    }
-
-    public function test_inertia_responses_share_spanish_translations(): void
-    {
-        app()->setLocale('es');
-
-        $this->get(route('home'))
-            ->assertOk()
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('welcome')
-                ->where('locale', 'es')
-                ->where('fallbackLocale', config('app.fallback_locale'))
-                ->where('translations.Live', 'En vivo')
-                ->where('translations.Password', 'Contraseña')
-                ->where('translations.Closed', 'Cerrado')
-                ->where('translations', fn ($translations) => $translations->get('Browse active channels by category or title.') === 'Explora canales activos por categoría o título.')
-            );
-    }
-
-    public function test_inertia_responses_share_persian_translations(): void
-    {
-        app()->setLocale('fa');
 
         $this->get(route('home'))
             ->assertOk()
+            ->assertSee('dir="rtl"', false)
             ->assertInertia(fn (Assert $page) => $page
                 ->component('welcome')
                 ->where('locale', 'fa')
                 ->where('fallbackLocale', config('app.fallback_locale'))
-                ->where('translations.Live', 'زنده')
+                ->where('localization.locale', 'fa')
-                ->where('translations.Password', 'رمز عبور')
+                ->where('localization.direction', 'rtl')
-                ->where('translations.Closed', 'بسته')
+                ->where('localization.isRtl', true)
-                ->where('translations', fn ($translations) => $translations->get('Browse active channels by category or title.') === 'کانال‌های فعال را بر اساس دسته‌بندی یا عنوان مرور کنید.')
+                ->has('localization.locales', 4)
+                ->where('translations.Live', __('Live', [], 'fa'))
+                ->where('translations.Password', __('Password', [], 'fa'))
+                ->where('translations.Language', __('Language', [], 'fa'))
+                ->where('translations', fn ($translations) => $translations->get('Browse active channels by category or title.') === __('Browse active channels by category or title.', [], 'fa'))
             );
     }
 
-    public function test_inertia_responses_share_arabic_translations(): void
+    public function test_inertia_responses_use_valid_language_cookie(): void
     {
-        app()->setLocale('ar');
+        config(['app.locale' => 'fa']);
 
-        $this->get(route('home'))
+        $this->withCookie('locale', 'es')
+            ->get(route('home'))
             ->assertOk()
+            ->assertSee('dir="ltr"', false)
+            ->assertInertia(fn (Assert $page) => $page
+                ->component('welcome')
+                ->where('locale', 'es')
+                ->where('localization.locale', 'es')
+                ->where('localization.direction', 'ltr')
+                ->where('localization.isRtl', false)
+                ->where('translations.Live', __('Live', [], 'es'))
+                ->where('translations.Password', __('Password', [], 'es'))
+                ->where('translations.Language', __('Language', [], 'es'))
+                ->where('translations', fn ($translations) => $translations->get('Browse active channels by category or title.') === __('Browse active channels by category or title.', [], 'es'))
+            );
+    }
+
+    public function test_rtl_language_cookie_shares_rtl_metadata(): void
+    {
+        config(['app.locale' => 'en']);
+
+        $this->withCookie('locale', 'ar')
+            ->get(route('home'))
+            ->assertOk()
+            ->assertSee('lang="ar"', false)
+            ->assertSee('dir="rtl"', false)
             ->assertInertia(fn (Assert $page) => $page
                 ->component('welcome')
                 ->where('locale', 'ar')
-                ->where('fallbackLocale', config('app.fallback_locale'))
+                ->where('localization.locale', 'ar')
-                ->where('translations.Live', 'مباشر')
+                ->where('localization.direction', 'rtl')
-                ->where('translations.Password', 'كلمة المرور')
+                ->where('localization.isRtl', true)
-                ->where('translations.Closed', 'مغلق')
+                ->where('translations.Live', __('Live', [], 'ar'))
-                ->where('translations', fn ($translations) => $translations->get('Browse active channels by category or title.') === 'تصفح القنوات النشطة حسب الفئة أو العنوان.')
+                ->where('translations.Password', __('Password', [], 'ar'))
+                ->where('translations.Language', __('Language', [], 'ar'))
             );
     }
 
-    public function test_spanish_backend_translations_are_available(): void
+    public function test_invalid_language_cookie_falls_back_to_configured_locale_and_expires_cookie(): void
     {
-        app()->setLocale('es');
+        config(['app.locale' => 'fa']);
 
-        $this->assertSame('Estas credenciales no coinciden con nuestros registros.', __('auth.failed'));
+        $this->withCookie('locale', 'invalid')
-        $this->assertSame('Tu contraseña ha sido restablecida.', __('passwords.reset'));
+            ->get(route('home'))
-        $this->assertSame('« Anterior', __('pagination.previous'));
+            ->assertOk()
-        $this->assertSame('El campo email es obligatorio.', __('validation.required', ['attribute' => 'email']));
+            ->assertCookieExpired('locale')
+            ->assertInertia(fn (Assert $page) => $page
+                ->component('welcome')
+                ->where('locale', 'fa')
+                ->where('localization.locale', 'fa')
+                ->where('localization.direction', 'rtl')
+                ->where('localization.isRtl', true)
+            );
     }
 
-    public function test_persian_backend_translations_are_available(): void
+    public function test_user_can_change_language_preference(): void
     {
-        app()->setLocale('fa');
+        $this->from(route('home'))
-
+            ->post(route('language.update'), ['locale' => 'es'])
-        $this->assertSame('این اطلاعات با سوابق ما مطابقت ندارد.', __('auth.failed'));
+            ->assertRedirect(route('home'))
-        $this->assertSame('رمز عبور شما بازنشانی شد.', __('passwords.reset'));
+            ->assertCookie('locale', 'es');
-        $this->assertSame('« قبلی', __('pagination.previous'));
-        $this->assertSame('فیلد email الزامی است.', __('validation.required', ['attribute' => 'email']));
     }
 
-    public function test_arabic_backend_translations_are_available(): void
+    public function test_language_preference_must_be_supported(): void
     {
-        app()->setLocale('ar');
+        $this->from(route('home'))
+            ->post(route('language.update'), ['locale' => 'invalid'])
+            ->assertRedirect(route('home'))
+            ->assertSessionHasErrors('locale')
+            ->assertCookieMissing('locale');
+    }
 
-        $this->assertSame('بيانات الاعتماد هذه لا تطابق سجلاتنا.', __('auth.failed'));
+    public function test_backend_translation_files_are_available(): void
-        $this->assertSame('تمت إعادة تعيين كلمة المرور.', __('passwords.reset'));
+    {
-        $this->assertSame('« السابق', __('pagination.previous'));
+        foreach (['en', 'es', 'fa', 'ar'] as $locale) {
-        $this->assertSame('حقل email مطلوب.', __('validation.required', ['attribute' => 'email']));
+            app()->setLocale($locale);
+
+            $this->assertNotSame('auth.failed', __('auth.failed'));
+            $this->assertNotSame('passwords.reset', __('passwords.reset'));
+            $this->assertNotSame('pagination.previous', __('pagination.previous'));
+            $this->assertNotSame('validation.required', __('validation.required', ['attribute' => 'email']));
+        }
     }
 }