Skip to content

Fix the channel switcher on localized pages and keep your place when switching #810

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ptrlrd wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix the channel switcher on localized pages and keep your place when switching #810

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions frontend/app/components/SiteSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { usePathname } from "next/navigation";
import Link from "next/link";
import { cachedFetch } from "@/lib/fetch-cache";
import { setBetaRenderVersion } from "@/lib/image-url";
import { useChannel } from "@/lib/use-lang-prefix";
import { LANG_PREFIXES } from "@/lib/languages";

const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";

Expand All @@ -25,7 +27,23 @@ export default function SiteSwitcher() {
const buttonRef = useRef<HTMLButtonElement>(null);
const menuRef = useRef<HTMLDivElement>(null);

const onBeta = pathname === "/beta" || pathname.startsWith("/beta/");
// useChannel also catches localized beta paths (/jpn/beta/...), which the
// old startsWith("/beta") check missed: there the pill claimed "main" and
// the menu offered a beta link that led right back into beta, so the
// switch looked like it did nothing.
const onBeta = useChannel() === "beta";

// Path-preserving counterparts, keeping the language prefix: /jpn/cards/x
// <-> /jpn/beta/cards/x. The middleware serves any /beta/<page> via
// rewrite, and entity pages missing on the other channel already bounce
// to their hub, so switching never has to dump the visitor on the root.
const parts = pathname.split("/");
const langSeg = LANG_PREFIXES.has(parts[1]) ? parts[1] : "";
const restStart = (langSeg ? 2 : 1) + (onBeta ? 1 : 0);
const rest = parts.slice(restStart).filter(Boolean).join("/");
const langPrefix = langSeg ? `/${langSeg}` : "";
const mainHref = `${langPrefix}${rest ? `/${rest}` : ""}` || "/";
const betaHref = `${langPrefix}/beta${rest ? `/${rest}` : ""}`;

useEffect(() => {
cachedFetch<{ beta_version: string | null; render_version?: string | null }>(`${API}/api/beta/version`)
Expand Down Expand Up @@ -94,15 +112,15 @@ export default function SiteSwitcher() {
<div className="py-1">
{onBeta ? (
<Link
href="/"
href={mainHref}
onClick={() => setOpen(false)}
className="flex items-center justify-between gap-3 px-4 py-2 text-sm font-medium text-[var(--accent-gold)] transition-colors hover:bg-[var(--bg-card)]"
>
<span>main</span>
</Link>
) : (
<Link
href="/beta"
href={betaHref}
onClick={() => setOpen(false)}
className="flex items-center justify-between gap-3 px-4 py-2 text-sm font-medium text-emerald-400 transition-colors hover:bg-[var(--bg-card)] hover:text-emerald-300"
>
Expand Down
Loading