feat: vitrine language/theme switching, missing features, disabled-signups handling

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
2026-07-18 10:55:06 +02:00
parent e71c978e52
commit 8dccd8898b
17 changed files with 191 additions and 26 deletions
@@ -0,0 +1,55 @@
+"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>
+  );
+}
@@ -5,6 +5,10 @@ import { auth } from "@/lib/auth/server";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { getMessages } from "@/lib/i18n/server";
+import { getEffectiveMarketingLocale } from "@/lib/marketing-locale";
+import { isSignupsDisabled } from "@/lib/site-settings";
+import { LanguageSwitcher } from "./language-switcher";
+import { ThemeToggle } from "./theme-toggle";

 const LINKS = [
  { href: "/features", key: "features" },
@@ -12,8 +16,12 @@ const LINKS = [
 ] as const;

 export async function MarketingNav() {
-  const session = await auth.api.getSession({ headers: await headers() }).catch(() => null);
-  const m = getMessages((session?.user as { locale?: string } | undefined)?.locale);
+  const [session, locale, signupsDisabled] = await Promise.all([
+    auth.api.getSession({ headers: await headers() }).catch(() => null),
+    getEffectiveMarketingLocale(),
+    isSignupsDisabled(),
+  ]);
+  const m = getMessages(locale);

  return (
    <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -30,6 +38,8 @@ export async function MarketingNav() {
          ))}
        </nav>
        <div className="ml-auto flex items-center gap-2">
+          <LanguageSwitcher current={locale} />
+          <ThemeToggle />
          {session ? (
            <Link href="/recipes" className={cn(buttonVariants({ size: "sm" }))}>
              {m.marketing.nav.openApp}
@@ -40,7 +50,7 @@ export async function MarketingNav() {
                {m.marketing.nav.login}
              </Link>
              <Link href="/signup" className={cn(buttonVariants({ size: "sm" }))}>
-                {m.marketing.nav.signup}
+                {signupsDisabled ? m.marketing.nav.signupClosed : m.marketing.nav.signup}
              </Link>
            </>
          )}
@@ -0,0 +1,23 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Sun, Moon } from "lucide-react";
+
+/** Simple light/dark toggle for the marketing header — the authenticated
+ * app's Nav has a fuller light/dark/system control buried in a dropdown;
+ * this is a one-click version for a page a visitor hasn't logged into yet. */
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+
+  return (
+    <button
+      type="button"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      className="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+    >
+      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+    </button>
+  );
+}