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
This commit is contained in:
Arnaud
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user