fix: settings mobile layout, silent failure on language save

- 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>
This commit is contained in:
Arnaud
2026-07-04 11:00:48 +02:00
parent ee7946316c
commit 67246c69e5
4 changed files with 34 additions and 14 deletions
+20 -8
View File
@@ -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 (