fix: persist user locale preference to database (#1547)

src/components/LocaleSwitcherSelect.tsx

@@ -12,6 +12,8 @@ import clsx from "clsx";
 import { useTransition } from "react";
 import { Locale } from "@/i18n/config";
 import { setUserLocale } from "@/services/locale";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 type Props = {
     defaultValue: string;
@@ -25,12 +27,17 @@ export default function LocaleSwitcherSelect({
     label
 }: Props) {
     const [isPending, startTransition] = useTransition();
+    const api = createApiClient(useEnvContext());
 
     function onChange(value: string) {
         const locale = value as Locale;
         startTransition(() => {
             setUserLocale(locale);
         });
+        // Persist locale to the database (fire-and-forget)
+        api.post("/user/locale", { locale }).catch(() => {
+            // Silently ignore errors — cookie is already set as fallback
+        });
     }
 
     const selected = items.find((item) => item.value === defaultValue);

src/services/locale.ts

@@ -2,10 +2,13 @@
 
 import { cookies, headers } from "next/headers";
 import { Locale, defaultLocale, locales } from "@/i18n/config";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
 
 // In this example the locale is read from a cookie. You could alternatively
 // also read it from a database, backend service, or any other source.
 const COOKIE_NAME = "NEXT_LOCALE";
+const COOKIE_MAX_AGE = 365 * 24 * 60 * 60; // 1 year in seconds
 
 export async function getUserLocale(): Promise<Locale> {
     const cookieLocale = (await cookies()).get(COOKIE_NAME)?.value;
@@ -14,6 +17,23 @@ export async function getUserLocale(): Promise<Locale> {
         return cookieLocale as Locale;
     }
 
+    // No cookie found — try to restore from user's saved locale in DB
+    try {
+        const res = await internal.get("/user", await authCookieHeader());
+        const userLocale = res.data?.data?.locale;
+        if (userLocale && locales.includes(userLocale as Locale)) {
+            // Set the cookie so subsequent requests don't need the API call
+            (await cookies()).set(COOKIE_NAME, userLocale, {
+                maxAge: COOKIE_MAX_AGE,
+                path: "/",
+                sameSite: "lax"
+            });
+            return userLocale as Locale;
+        }
+    } catch {
+        // User not logged in or API unavailable — fall through
+    }
+
     const headerList = await headers();
     const acceptLang = headerList.get("accept-language");
 
@@ -33,5 +53,9 @@ export async function getUserLocale(): Promise<Locale> {
 }
 
 export async function setUserLocale(locale: Locale) {
-    (await cookies()).set(COOKIE_NAME, locale);
+    (await cookies()).set(COOKIE_NAME, locale, {
+        maxAge: COOKIE_MAX_AGE,
+        path: "/",
+        sameSite: "lax"
+    });
 }