From 67246c69e5a289c583925e9e14d15450ef897e32 Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Sat, 4 Jul 2026 11:00:48 +0200
Subject: [PATCH] fix: settings mobile layout, silent failure on language save
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Settings sidebar was a fixed-width vertical list with no responsive
  breakpoint, squeezing the form into a sliver on mobile. Turn it into
  a horizontal scrollable tab bar under md, vertical sidebar above.
- setLocale() fired the PATCH and swallowed the result with
  .catch(() => {}) — never checked res.ok, no success/failure feedback.
  A failed save (expired session, network blip) looked identical to a
  successful one. Now returns a boolean, reverts local state on
  failure, and the settings form toasts success/failure.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/web/app/(app)/settings/layout.tsx        |  2 +-
 .../web/components/settings/settings-form.tsx | 10 ++++++-
 .../components/settings/settings-sidebar.tsx  |  8 +++---
 apps/web/lib/i18n/provider.tsx                | 28 +++++++++++++------
 4 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/apps/web/app/(app)/settings/layout.tsx b/apps/web/app/(app)/settings/layout.tsx
index 2446339..270fe00 100644
--- a/apps/web/app/(app)/settings/layout.tsx
+++ b/apps/web/app/(app)/settings/layout.tsx
@@ -13,7 +13,7 @@ export default async function SettingsLayout({ children }: { children: React.Rea
         <h1 className="text-3xl font-bold tracking-tight">{m.settings.title}</h1>
         <p className="text-muted-foreground mt-1">{m.settings.subtitle}</p>
       </div>
-      <div className="flex gap-8 items-start">
+      <div className="flex flex-col md:flex-row gap-4 md:gap-8 md:items-start">
         <SettingsSidebar />
         <main className="flex-1 min-w-0 space-y-6">{children}</main>
       </div>
diff --git a/apps/web/components/settings/settings-form.tsx b/apps/web/components/settings/settings-form.tsx
index b90b517..cb0b777 100644
--- a/apps/web/components/settings/settings-form.tsx
+++ b/apps/web/components/settings/settings-form.tsx
@@ -118,7 +118,15 @@ export function SettingsForm({ user }: { user: UserProps }) {
       <section className="rounded-xl border p-6 space-y-4">
         <h2 className="font-semibold text-lg">{t("language")}</h2>
         <p className="text-sm text-muted-foreground">{t("languageDescription")}</p>
-        <Select defaultValue={user.locale} onValueChange={(v) => setLocale(v as Locale)}>
+        <Select
+          defaultValue={user.locale}
+          onValueChange={(v) => {
+            void setLocale(v as Locale).then((ok) => {
+              if (ok) toast.success(t_common("saved"));
+              else toast.error(t_common("saveFailed"));
+            });
+          }}
+        >
           <SelectTrigger className="w-48">
             <SelectValue />
           </SelectTrigger>
diff --git a/apps/web/components/settings/settings-sidebar.tsx b/apps/web/components/settings/settings-sidebar.tsx
index 17b4d0a..7fdfb48 100644
--- a/apps/web/components/settings/settings-sidebar.tsx
+++ b/apps/web/components/settings/settings-sidebar.tsx
@@ -21,16 +21,16 @@ export function SettingsSidebar() {
   const t = useTranslations("settings");
 
   return (
-    <nav className="w-48 shrink-0 sticky top-6">
-      <ul className="space-y-0.5">
+    <nav className="w-full md:w-48 md:shrink-0 md:sticky md:top-6">
+      <ul className="flex overflow-x-auto gap-1 pb-2 -mx-4 px-4 md:mx-0 md:px-0 md:flex-col md:overflow-visible md:gap-0.5 md:pb-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
         {NAV_ITEMS.map(({ href, key, icon: Icon, exact }) => {
           const active = exact ? pathname === href : pathname.startsWith(href);
           return (
-            <li key={href}>
+            <li key={href} className="shrink-0 md:shrink">
               <Link
                 href={href}
                 className={cn(
-                  "flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-colors",
+                  "flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition-colors",
                   active
                     ? "bg-accent text-accent-foreground font-medium"
                     : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
diff --git a/apps/web/lib/i18n/provider.tsx b/apps/web/lib/i18n/provider.tsx
index 09ff6e7..b695251 100644
--- a/apps/web/lib/i18n/provider.tsx
+++ b/apps/web/lib/i18n/provider.tsx
@@ -14,8 +14,8 @@ const STORAGE_KEY = "epicure-locale";
 
 const LocaleContext = createContext<{
   locale: Locale;
-  setLocale: (locale: Locale) => void;
-}>({ locale: "en", setLocale: () => {} });
+  setLocale: (locale: Locale) => Promise<boolean>;
+}>({ locale: "en", setLocale: async () => false });
 
 export function useLocale() {
   return useContext(LocaleContext);
@@ -45,15 +45,27 @@ export function I18nProvider({
     }
   }, [messages, initialLocale]);
 
-  function setLocale(next: Locale) {
+  async function setLocale(next: Locale): Promise<boolean> {
+    const previous = locale;
+    const previousMessages = currentMessages;
     setLocaleState(next);
     setCurrentMessages(messages[next]!);
     localStorage.setItem(STORAGE_KEY, next);
-    fetch("/api/v1/users/me", {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ locale: next }),
-    }).catch(() => {});
+    try {
+      const res = await fetch("/api/v1/users/me", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ locale: next }),
+      });
+      if (!res.ok) throw new Error("Failed to save locale");
+      return true;
+    } catch {
+      // Revert on failure so the UI doesn't claim a language that never saved.
+      setLocaleState(previous);
+      setCurrentMessages(previousMessages);
+      localStorage.setItem(STORAGE_KEY, previous);
+      return false;
+    }
   }
 
   return (