diff --git a/apps/web/src/components/public/public-frame.tsx b/apps/web/src/components/public/public-frame.tsx
index 7b1d710..2a76dbc 100644
--- a/apps/web/src/components/public/public-frame.tsx
+++ b/apps/web/src/components/public/public-frame.tsx
@@ -3,12 +3,13 @@ import type { ReactNode } from "react";
import { CustomCss } from "@/components/branding/custom-css";
import { ThemeSwitch } from "@/components/dashboard-kit/theme-switch";
-import { SignOut } from "@/components/icons";
import { DiscordMark } from "@/components/icons/brand-marks";
+import { accountCopy, dashboardLinks } from "@/components/site/account";
+import { AccountMenu } from "@/components/site/account-menu";
import { LanguagePicker } from "@/components/site/language-picker";
import { getCurrentUser } from "@/lib/auth";
-import { logoutAction } from "@/lib/auth-actions";
import { brandProps, logoUrl } from "@/lib/branding";
+import { requestHostname } from "@/lib/custom-domain";
import { getDict, getLocale } from "@/i18n";
import { PoweredBy } from "./powered-by";
@@ -25,7 +26,8 @@ export interface PublicGuild {
* controls, focus); the colour is the customer's, with a readable fallback
* per theme (lib/branding.ts). No msk-scripts.de navigation: the page belongs
* to the guild, and only a small "Powered by" line on the Free plan says who
- * runs it.
+ * runs it. A signed-in visitor gets the site's account menu, so the way into
+ * the dashboard is the same here as on the site pages.
*
* Three layers, each for a reason:
* - the outer wrapper carries the accent (`brandProps`), so the bar, the
@@ -51,7 +53,12 @@ export async function PublicFrame({
poweredBy?: boolean;
children: ReactNode;
}) {
- const [dict, locale, user] = await Promise.all([getDict(), getLocale(), getCurrentUser()]);
+ const [dict, locale, user, host] = await Promise.all([
+ getDict(),
+ getLocale(),
+ getCurrentUser(),
+ requestHostname(),
+ ]);
const logo = logoUrl(guild.id, guild.branding);
// Same-origin login link on every host. The login route is host-aware: on
// a custom domain with its own Discord OAuth app it runs the whole flow
@@ -90,35 +97,15 @@ export async function PublicFrame({
className="hidden sm:inline-flex"
/>
{user ? (
-
+
) : (
void;
+}) {
+ // Rendered twice on the site pages (header panel and menu), so the label
+ // ids must differ.
+ const id = useId();
+ const { user } = account;
+ return (
+
+ );
+}
+
+/**
+ * The account entry of a header: "Log in" or the Discord name, with the panel
+ * below. Used by the site header and by the header of a guild's public pages,
+ * so both offer the same way into the dashboard.
+ */
+export function AccountMenu({
+ account,
+ copy,
+ hideNameOnPhone = false,
+ className,
+}: {
+ account: HeaderAccount;
+ copy: AccountCopy;
+ /** Below 640 px show only the avatar, so a long name next to it keeps its room. */
+ hideNameOnPhone?: boolean;
+ className?: string;
+}) {
+ const [open, setOpen] = useState(false);
+ const ref = useRef(null);
+ const buttonRef = useRef(null);
+ const panelId = useId();
+ const close = useCallback((reason: "outside" | "escape") => {
+ setOpen(false);
+ if (reason === "escape") buttonRef.current?.focus();
+ }, []);
+ useDismiss(open, ref, close);
+ const { user } = account;
+
+ return (
+
+
+
+
+ setOpen(false)} />
+
+
+ );
+}
diff --git a/apps/web/src/components/site/account.ts b/apps/web/src/components/site/account.ts
new file mode 100644
index 0000000..1cad930
--- /dev/null
+++ b/apps/web/src/components/site/account.ts
@@ -0,0 +1,31 @@
+import type { Dictionary } from "@/i18n";
+import { isPrimaryHostname } from "@/lib/custom-domain";
+import { appBaseUrl } from "@/lib/url";
+
+import type { AccountCopy } from "./account-menu";
+
+/** The account entry's copy, the same in the site header and on a guild's public pages. */
+export function accountCopy(dict: Dictionary): AccountCopy {
+ return {
+ account: dict.site.account,
+ login: dict.header.login,
+ signIn: dict.hero.loginDiscord,
+ signedInAs: dict.site.signedInAs,
+ dashboard: dict.header.dashboard,
+ mySubmissions: dict.dashboard.mySubmissions,
+ logout: dict.header.logout,
+ theme: dict.kit.shell.theme,
+ };
+}
+
+/**
+ * The account entry's way into the dashboard. The dashboard lives only on the
+ * primary domain, so from a custom domain the links lead there.
+ */
+export function dashboardLinks(host: string | null): {
+ dashboardHref: string;
+ mySubmissionsHref: string;
+} {
+ const base = host && !isPrimaryHostname(host) ? appBaseUrl() : "";
+ return { dashboardHref: `${base}/dashboard`, mySubmissionsHref: `${base}/dashboard/me` };
+}
diff --git a/apps/web/src/components/site/header-bar.tsx b/apps/web/src/components/site/header-bar.tsx
index 5f6f93b..3d2dd0d 100644
--- a/apps/web/src/components/site/header-bar.tsx
+++ b/apps/web/src/components/site/header-bar.tsx
@@ -1,41 +1,23 @@
"use client";
import { usePathname } from "next/navigation";
-import { useCallback, useId, useRef, useState } from "react";
+import { useRef, useState } from "react";
import { useDismiss } from "@/components/dashboard-kit/use-dismiss";
-import { ThemeSwitch, type ThemeSwitchLabels } from "@/components/dashboard-kit/theme-switch";
-import { ArrowSquareOut, CaretDown, List, SignOut, User, X } from "@/components/icons";
-import { DiscordMark } from "@/components/icons/brand-marks";
-import { Button } from "@/components/ui/button";
+import { ArrowSquareOut, CaretDown, List, X } from "@/components/icons";
import type { Locale } from "@/i18n/dictionaries";
-import { logoutAction } from "@/lib/auth-actions";
import { cn } from "@/lib/utils";
+import { AccountMenu, AccountSections, type AccountCopy, type HeaderAccount } from "./account-menu";
import { LanguagePicker } from "./language-picker";
import type { NavLink, ProductLine } from "./navigation";
-export interface HeaderCopy {
+export interface HeaderCopy extends AccountCopy {
mainNav: string;
submenu: string;
newTab: string;
menu: string;
language: string;
- account: string;
- login: string;
- signIn: string;
- signedInAs: string;
- dashboard: string;
- mySubmissions: string;
- logout: string;
- theme: ThemeSwitchLabels;
-}
-
-export interface HeaderAccount {
- user: { username: string; avatar: string | null } | null;
- loginHref: string;
- dashboardHref: string;
- mySubmissionsHref: string;
}
const MENU_ID = "site-menu";
@@ -198,147 +180,6 @@ function MainNav({
);
}
-/**
- * What the account entry holds, in the header panel and in the menu: the
- * Discord sign-in, or who is signed in with the way to the dashboard, and the
- * appearance switch.
- */
-function AccountSections({
- account,
- copy,
- onNavigate,
-}: {
- account: HeaderAccount;
- copy: HeaderCopy;
- onNavigate?: () => void;
-}) {
- // Rendered twice (header panel and menu), so the label ids must differ.
- const id = useId();
- const { user } = account;
- return (
-