Give the landing the app's theme and language switches

The blueprint page was dark-only and English-only. It now carries the same
two controls the workspace TopBar has, in the nav's top-right cluster: ◐ flips
light/dark (a paper palette for the same funnel — surfaces and ink flip, the
amber/red accents stay) and VI/EN flips the language, with the whole page of
copy, the FAQ, the pricing tables and the VIP badge all following it. Amber
text switches to a darker #a16207 on the light theme so it keeps ~4.9:1 on
white.

The register account is back as the old landing had it: a "ĐĂNG KÝ" button
pointing at /app?auth=1, and that URL now actually opens the auth dialog on
its sign-up tab (AuthModal takes an initialMode). The nav also collapses to
the hamburger below 1160px now, and the logo/tools shrink below 680px, so the
row still fits a 360px phone.
This commit is contained in:
2026-09-17 18:40:05 +07:00
parent 340f0374fc
commit f2e5e9abc9
4 changed files with 262 additions and 154 deletions
+10 -6
View File
@@ -120,7 +120,10 @@ export function Workspace() {
const [exporting, setExporting] = useState(false);
const [user, setUser] = useState<User | null>(null);
const [saved, setSaved] = useState<SavedRecipe[]>([]);
const [authOpen, setAuthOpen] = useState(false);
// null = closed. The landing's register link is /app?auth=1, so it opens the
// dialog straight on the sign-up tab.
const [authMode, setAuthMode] = useState<'login' | 'signup' | null>(() =>
(new URLSearchParams(window.location.search).has('auth') ? 'signup' : null));
const renderToken = useRef(0);
@@ -282,7 +285,7 @@ export function Workspace() {
const saveRecipe = useCallback(async () => {
if (!user) {
setAuthOpen(true);
setAuthMode('login');
return;
}
const name = window.prompt(t('save.name'), recipe.name);
@@ -688,7 +691,7 @@ export function Workspace() {
onReset={reset}
onExport={exportPhoto}
onSave={saveRecipe}
onAuth={() => setAuthOpen(true)}
onAuth={() => setAuthMode('login')}
onLogout={async () => {
await api.logout().catch(() => undefined);
setUser(null);
@@ -791,11 +794,12 @@ export function Workspace() {
/>
</div>
{authOpen ? (
{authMode ? (
<AuthModal
onClose={() => setAuthOpen(false)}
initialMode={authMode}
onClose={() => setAuthMode(null)}
onDone={async () => {
setAuthOpen(false);
setAuthMode(null);
const me = await api.me().catch(() => null);
if (me) setUser(me.user);
}}