Arnaud
8dccd8898b
Language switcher (flag toggle) and dark-mode toggle in the marketing header, both usable by logged-out visitors -- the marketing pages previously hardcoded English (getMessages(undefined)) regardless of any preference, and had no theme control since the authenticated Nav's toggle isn't rendered there. New cookie-based locale resolution (lib/marketing-locale.ts) separate from the authenticated app's useLocale/setLocale, which persists via an authenticated PATCH that would just 401 and revert for an anonymous visitor. Root layout now falls back to that cookie for <html lang> when there's no session. Features/Home now cover cook mode, recipe variations, personalized recommendations, and ingredient substitution -- all real, shipped features that were missing from the page copy. Signup CTAs check isSignupsDisabled() and swap to "Signups closed" instead of "Get started free" -- still linking to /signup, since that page already handles the invite-token exception correctly. Fixed along the way: importing the cookie-name constant from marketing-locale.ts in the client-side LanguageSwitcher pulled that file's server-only imports (lib/auth/server -> the DB client -> `postgres`) into the client bundle, breaking the build on Node built-ins. Split the constant into its own client-safe file (marketing-locale-cookie.ts). Caught by `pnpm build`, not typecheck. Verified with typecheck, lint, and a full production build (clean compile) -- no DB in this sandbox to click through a real dev server. v0.48.1
56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { MARKETING_LOCALE_COOKIE } from "@/lib/marketing-locale-cookie";
|
|
import type { Locale } from "@/lib/i18n/provider";
|
|
|
|
const OPTIONS: { code: Locale; flag: string; label: string }[] = [
|
|
{ code: "en", flag: "🇬🇧", label: "English" },
|
|
{ code: "fr", flag: "🇫🇷", label: "Français" },
|
|
];
|
|
|
|
// Plain module-level function, not part of the component body — setting a
|
|
// cookie is a real side effect (fine inside an event handler), but the
|
|
// React Compiler's purity lint flags any direct `document.cookie =`
|
|
// assignment written inline in a component/hook.
|
|
function setMarketingLocaleCookie(code: Locale) {
|
|
document.cookie = `${MARKETING_LOCALE_COOKIE}=${code}; path=/; max-age=31536000; samesite=lax`;
|
|
}
|
|
|
|
/**
|
|
* Cookie-based language switcher for the public marketing pages — sets
|
|
* `marketing_locale` (read server-side by `getMarketingLocale`) and
|
|
* refreshes, rather than reusing the authenticated app's `useLocale`/
|
|
* `setLocale` (that persists to `users.locale` via a PATCH that would just
|
|
* 401 for a logged-out visitor and revert the change).
|
|
*/
|
|
export function LanguageSwitcher({ current }: { current: Locale }) {
|
|
const router = useRouter();
|
|
|
|
function select(code: Locale) {
|
|
if (code === current) return;
|
|
setMarketingLocaleCookie(code);
|
|
router.refresh();
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-0.5" role="group" aria-label="Language">
|
|
{OPTIONS.map(({ code, flag, label }) => (
|
|
<button
|
|
key={code}
|
|
type="button"
|
|
onClick={() => select(code)}
|
|
aria-label={label}
|
|
aria-pressed={current === code}
|
|
title={label}
|
|
className={`text-base leading-none p-1.5 rounded-md transition-opacity ${
|
|
current === code ? "opacity-100" : "opacity-40 hover:opacity-70"
|
|
}`}
|
|
>
|
|
{flag}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|