mobile nav, locale-preserving navigation, accent button contrast

2026-05-29 22:12:51 +02:00
parent bfc2194e24
commit f2a9637058
39 changed files with 255 additions and 127 deletions
--- a/src/app/[locale]/dashboard/page.tsx
+++ b/src/app/[locale]/dashboard/page.tsx
@@ -344,7 +344,7 @@ export default async function DashboardPage() {
        {canCreate && (
          <Link
            href="/dashboard/new"
-            className="shrink-0 inline-flex items-center gap-1.5 py-2 px-4 bg-accent text-white text-xs font-medium rounded-lg hover:bg-accent-dim transition-colors"
+            className="shrink-0 inline-flex items-center gap-1.5 py-2 px-4 bg-accent text-surface-0 text-xs font-medium rounded-lg hover:bg-accent-dim transition-colors"
          >
            <span>+</span> {t("createInstance")}
          </Link>
--- a/src/app/[locale]/login/page.tsx
+++ b/src/app/[locale]/login/page.tsx
@@ -1,11 +1,12 @@
 "use client";

 import { signIn } from "next-auth/react";
-import { useTranslations } from "next-intl";
-import Link from "next/link";
+import { useTranslations, useLocale } from "next-intl";
+import { Link, getPathname } from "@/i18n/navigation";

 export default function LoginPage() {
  const t = useTranslations("login");
+  const locale = useLocale();

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-surface-0">
@@ -39,7 +40,14 @@ export default function LoginPage() {
          </p>

          <button
-            onClick={() => signIn("zitadel", { callbackUrl: "/dashboard" })}
+            onClick={() =>
+              signIn("zitadel", {
+                // Preserve the active locale across the OIDC round-trip.
+                // A bare "/dashboard" would resolve to the default (de)
+                // locale on return; getPathname prefixes it as needed.
+                callbackUrl: getPathname({ href: "/dashboard", locale }),
+              })
+            }
            className="
              w-full py-3 px-4 rounded-lg font-medium text-sm
              bg-accent text-surface-0 cursor-pointer
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -1,5 +1,13 @@
-import { redirect } from "next/navigation";
+import { redirect } from "@/i18n/navigation";

-export default function RootPage() {
-  redirect("/dashboard");
+export default async function RootPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  // Locale-aware redirect: a bare next/navigation redirect("/dashboard")
+  // drops the prefix and lands non-default-locale users on the German
+  // dashboard. The i18n redirect prefixes per the active locale.
+  const { locale } = await params;
+  redirect({ href: "/dashboard", locale });
 }
--- a/src/app/[locale]/register/page.tsx
+++ b/src/app/[locale]/register/page.tsx
@@ -2,7 +2,7 @@

 import { useState } from "react";
 import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
+import { useRouter, Link } from "@/i18n/navigation";
 import { Card } from "@/components/ui/card";

 type FormState = "idle" | "submitting" | "success" | "error";
@@ -120,7 +120,7 @@ export default function RegisterPage() {
          </p>
          <button
            onClick={() => router.push("/login")}
-            className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
+            className="w-full py-2.5 px-4 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
          >
            {t("goToLogin")}
          </button>
@@ -270,7 +270,7 @@ export default function RegisterPage() {
              <button
                type="submit"
                disabled={state === "submitting"}
-                className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full py-2.5 px-4 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {state === "submitting" ? tCommon("loading") : t("submit")}
              </button>
@@ -278,12 +278,12 @@ export default function RegisterPage() {

            <p className="text-xs text-text-muted text-center mt-4">
              {t("hasAccount")}{" "}
-              <a
+              <Link
                href="/login"
                className="text-accent hover:text-accent-dim transition-colors"
              >
                {tCommon("login")}
-              </a>
+              </Link>
            </p>
          </Card>
        )}
--- a/src/app/[locale]/support/page.tsx
+++ b/src/app/[locale]/support/page.tsx
@@ -48,7 +48,7 @@ export default async function SupportListPage() {
        {!user.isPlatform && (
          <Link
            href="/support/new"
-            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors"
+            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors"
          >
            {t("newTicket")}
          </Link>
--- a/src/components/admin/admin-panel.tsx
+++ b/src/components/admin/admin-panel.tsx
@@ -246,7 +246,7 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
        >
          {t("requests")}
          {pendingCount > 0 && tab !== "requests" && (
-            <span className="ml-1.5 inline-flex items-center justify-center h-4 min-w-[16px] px-1 text-[10px] font-bold bg-accent text-white rounded-full">
+            <span className="ml-1.5 inline-flex items-center justify-center h-4 min-w-[16px] px-1 text-[10px] font-bold bg-accent text-surface-0 rounded-full">
              {pendingCount}
            </span>
          )}
@@ -308,7 +308,7 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                onClick={() => setFilter(f)}
                className={`px-3 py-1 text-xs rounded-full transition-colors ${
                  filter === f
-                    ? "bg-accent text-white"
+                    ? "bg-accent text-surface-0"
                    : "bg-surface-2 text-text-muted hover:text-text-secondary border border-border"
                }`}
              >
--- a/src/components/admin/billing/custom-invoice-editor.tsx
+++ b/src/components/admin/billing/custom-invoice-editor.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { useState, useMemo, useCallback } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { Card, CardHeader } from "@/components/ui/card";
 import type {
@@ -525,7 +525,7 @@ export function CustomInvoiceEditor({ draft, orgBilling }: Props) {
          <button
            onClick={issue}
            disabled={busy !== null || !canIssue}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
            type="button"
          >
            {busy === "issue" ? t("issuing") : t("editorIssueBtn")}
--- a/src/components/admin/billing/draft-list.tsx
+++ b/src/components/admin/billing/draft-list.tsx
@@ -57,7 +57,7 @@ export function DraftList({ drafts, orgNameMap }: Props) {
          <p className="text-text-secondary mb-4">{t("draftsEmpty")}</p>
          <Link
            href="/admin/billing/invoices/new"
-            className="inline-block px-4 py-2 rounded-md bg-accent text-white text-sm"
+            className="inline-block px-4 py-2 rounded-md bg-accent text-surface-0 text-sm"
          >
            {t("newInvoiceBtn")}
          </Link>
@@ -71,7 +71,7 @@ export function DraftList({ drafts, orgNameMap }: Props) {
      <div className="flex justify-end p-3 border-b border-border">
        <Link
          href="/admin/billing/invoices/new"
-          className="inline-block px-3 py-1.5 rounded-md bg-accent text-white text-sm"
+          className="inline-block px-3 py-1.5 rounded-md bg-accent text-surface-0 text-sm"
        >
          {t("newInvoiceBtn")}
        </Link>
--- a/src/components/admin/billing/generate-form.tsx
+++ b/src/components/admin/billing/generate-form.tsx
@@ -216,7 +216,7 @@ export function GenerateForm({ orgs }: Props) {
                <button
                  onClick={commit}
                  disabled={busy}
-                  className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+                  className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
                >
                  {busy ? t("saving") : t("commitBtn")}
                </button>
--- a/src/components/admin/billing/invoice-detail-view.tsx
+++ b/src/components/admin/billing/invoice-detail-view.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { useState, Fragment } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { Card, CardHeader } from "@/components/ui/card";
 import type { CreditNote, InvoiceDetail, InvoiceStatus } from "@/types";
@@ -247,7 +247,7 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
                <button
                  onClick={() => setNoteOpen(true)}
                  disabled={busyAction !== null}
-                  className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+                  className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
                >
                  {t("markPaidBtn")}
                </button>
@@ -264,7 +264,7 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
                  <button
                    onClick={markPaid}
                    disabled={busyAction !== null}
-                    className="px-3 py-1.5 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+                    className="px-3 py-1.5 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
                  >
                    {busyAction === "mark-paid" ? t("saving") : t("confirm")}
                  </button>
--- a/src/components/admin/billing/invoices-table.tsx
+++ b/src/components/admin/billing/invoices-table.tsx
@@ -112,7 +112,7 @@ export function InvoicesTable({ initialInvoices }: Props) {
            </Link>
            <Link
              href="/admin/billing/invoices/new"
-              className="px-3 py-1.5 rounded-md bg-accent text-white text-sm"
+              className="px-3 py-1.5 rounded-md bg-accent text-surface-0 text-sm"
            >
              + {t("newInvoiceBtn")}
            </Link>
--- a/src/components/admin/billing/new-invoice-form.tsx
+++ b/src/components/admin/billing/new-invoice-form.tsx
@@ -155,7 +155,7 @@ export function NewInvoiceForm({ orgs }: Props) {
          <button
            onClick={onSubmit}
            disabled={busy || !orgId || !selected?.hasBillingAddress}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
          >
            {busy ? t("creating") : t("newInvoiceContinueBtn")}
          </button>
--- a/src/components/admin/billing/pricing-editor.tsx
+++ b/src/components/admin/billing/pricing-editor.tsx
@@ -236,7 +236,7 @@ export function PricingEditor({
            <button
              type="submit"
              disabled={savingPricing}
-              className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+              className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
            >
              {savingPricing ? t("saving") : t("save")}
            </button>
@@ -401,7 +401,7 @@ export function PricingEditor({
          <button
            type="submit"
            disabled={addingSkill || !newSkillId}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
          >
            {addingSkill ? t("saving") : t("add")}
          </button>
@@ -473,7 +473,7 @@ function InlinePriceEditor({
          }
        }}
        disabled={busy}
-        className="text-xs px-2 py-1 bg-accent text-white rounded"
+        className="text-xs px-2 py-1 bg-accent text-surface-0 rounded"
      >
        {busy ? "…" : "✓"}
      </button>
--- a/src/components/admin/cron/cron-controls.tsx
+++ b/src/components/admin/cron/cron-controls.tsx
@@ -147,7 +147,7 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
          <button
            onClick={triggerIssue}
            disabled={busy !== null}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
          >
            {busy === "issue" ? t("running") : t("runIssueNow")}
          </button>
@@ -165,7 +165,7 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
          <button
            onClick={triggerReminders}
            disabled={busy !== null}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
          >
            {busy === "reminders" ? t("running") : t("runRemindersNow")}
          </button>
--- a/src/components/admin/openclaw-admin-panel.tsx
+++ b/src/components/admin/openclaw-admin-panel.tsx
@@ -107,7 +107,7 @@ export function OpenClawAdminPanel({ initialDefaults, tenants }: Props) {
              <button
                type="submit"
                disabled={savingDefault}
-                className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+                className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
              >
                {savingDefault ? tCommon("loading") : t("saveDefault")}
              </button>
@@ -265,7 +265,7 @@ function TenantOverrideRow({
              type="button"
              onClick={() => submit(false)}
              disabled={saving || !tag.trim()}
-              className="text-xs px-3 py-1.5 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+              className="text-xs px-3 py-1.5 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
            >
              {saving ? tCommon("loading") : t("saveOverride")}
            </button>
--- a/src/components/admin/skills/pending-skill-requests.tsx
+++ b/src/components/admin/skills/pending-skill-requests.tsx
@@ -146,7 +146,7 @@ export function PendingSkillRequests({ initialRows }: Props) {
                      <button
                        onClick={() => approve(row.id)}
                        disabled={busyId !== null}
-                        className="text-xs px-3 py-1.5 rounded-md bg-accent text-white disabled:opacity-50"
+                        className="text-xs px-3 py-1.5 rounded-md bg-accent text-surface-0 disabled:opacity-50"
                      >
                        {busyId === row.id ? t("working") : t("approveBtn")}
                      </button>
--- a/src/components/billing/pay-invoice-button.tsx
+++ b/src/components/billing/pay-invoice-button.tsx
@@ -50,7 +50,7 @@ export function PayInvoiceButton({ invoiceNumber }: Props) {
      <button
        onClick={onClick}
        disabled={busy}
-        className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
+        className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
      >
        {busy ? t("redirectingToStripe") : t("payWithCard")}
      </button>
--- a/src/components/billing/running-total-widget.tsx
+++ b/src/components/billing/running-total-widget.tsx
@@ -86,7 +86,7 @@ export function RunningTotalWidget({ isOwner }: Props) {
        {noConfig && isOwner && (
          <Link
            href="/settings/billing"
-            className="inline-block mt-2 px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors"
+            className="inline-block mt-2 px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors"
          >
            {t("configureBillingCta")}
          </Link>
--- a/src/components/channel-users/channel-users.tsx
+++ b/src/components/channel-users/channel-users.tsx
@@ -328,7 +328,7 @@ export function ChannelUsers({
                <button
                  onClick={() => handleAdd(channel)}
                  disabled={saving || !inputValues[channel]?.trim()}
-                  className="px-4 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-4 py-2 text-sm font-medium bg-accent text-surface-0 rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {saving ? "…" : t("add")}
                </button>
--- a/src/components/dashboard/budget-editable-card.tsx
+++ b/src/components/dashboard/budget-editable-card.tsx
@@ -263,7 +263,7 @@ export function BudgetEditableCard({
              <button
                type="submit"
                disabled={saving}
-                className="text-sm px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+                className="text-sm px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
              >
                {saving ? tCommon("loading") : tCommon("save")}
              </button>
--- a/src/components/layout/nav-shell.tsx
+++ b/src/components/layout/nav-shell.tsx
@@ -1,5 +1,6 @@
 "use client";

+import { useState, useEffect } from "react";
 import { useTranslations } from "next-intl";
 import { signOut, useSession } from "next-auth/react";
 import { usePathname } from "@/i18n/navigation";
@@ -13,6 +14,15 @@ function NavBar() {
  const pathname = usePathname();
  const user = (session as any)?.platformUser;

+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  // Close the mobile menu on any navigation. Without this the panel
+  // would stay open across route changes (the component doesn't
+  // unmount — it lives in the layout).
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [pathname]);
+
  // Hide the nav entirely on auth-only routes. These pages have no
  // session yet — showing "Dashboard" / "Sign Out" is misleading at
  // best (the buttons would 401 or redirect-loop). Keep this list
@@ -21,6 +31,47 @@ function NavBar() {
  const isAuthRoute = pathname === "/login" || pathname === "/register";
  if (isAuthRoute) return null;

+  // ------------------------------------------------------------------
+  // Visibility gates — computed once, shared by the desktop nav and the
+  // mobile panel so the two can never diverge.
+  //
+  //  - team:     owner+platform only AND not a personal account (Bug 8 —
+  //              personal accounts have no team). Matches `canMutate` /
+  //              `user.isPersonal === false` server-side.
+  //  - settings: anyone who can mutate org-level state (owners + platform).
+  //              `user`-role customers don't see it (canMutate is false).
+  //  - billing / support: any signed-in user (org-scoped server-side).
+  //  - admin:    platform only.
+  // ------------------------------------------------------------------
+  const isOwner =
+    user && Array.isArray(user.roles) && user.roles.includes("owner");
+  const showTeam = !!user && !user.isPersonal && (user.isPlatform || isOwner);
+  const showSettings = !!user && (user.isPlatform || isOwner);
+  const showBilling = !!user;
+  const showSupport = !!user;
+  const showAdmin = !!user?.isPlatform;
+
+  // Active-state helper. Dashboard/Admin previously used exact `===`,
+  // so sub-routes (/dashboard/new, /admin/billing, …) showed no active
+  // item. startsWith keeps the parent lit on its children too.
+  const isActive = (href: string) =>
+    pathname === href || pathname.startsWith(`${href}/`);
+
+  const links = [
+    { href: "/dashboard", label: t("dashboard"), show: !!user },
+    { href: "/team", label: t("team"), show: showTeam },
+    { href: "/settings", label: t("settings"), show: showSettings },
+    { href: "/billing", label: t("billing"), show: showBilling },
+    { href: "/support", label: t("support"), show: showSupport },
+    { href: "/admin", label: t("admin"), show: showAdmin },
+  ].filter((l) => l.show);
+
+  const displayName = user
+    ? user.isPersonal
+      ? user.name || (user.email ? user.email.split("@")[0] : user.orgName)
+      : user.orgName
+    : "";
+
  return (
    <header className="sticky top-0 z-50 border-b border-border bg-surface-1/80 backdrop-blur-md">
      <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-5">
@@ -40,98 +91,96 @@ function NavBar() {
            </span>
          </Link>

-          {/* Nav links */}
+          {/* Desktop nav links */}
          <nav className="hidden sm:flex items-center gap-1 ml-2">
-            <NavLink href="/dashboard" active={pathname === "/dashboard"}>
-              {t("dashboard")}
-            </NavLink>
-            {/* Slice 7: /team is owner+platform only AND personal
-                accounts are excluded — they have no team to manage
-                (Bug 8). Match server-side gates (`canMutate`,
-                `user.isPersonal === false`). The roles array carries
-                either "owner" or "user" for customer sessions;
-                isPlatform covers the platform side. */}
-            {user &&
-              !user.isPersonal &&
-              (user.isPlatform ||
-                (Array.isArray(user.roles) && user.roles.includes("owner"))) && (
-                <NavLink href="/team" active={pathname === "/team"}>
-                  {t("team")}
-                </NavLink>
-              )}
-            {/* Bug 35: /settings is shown to anyone who can mutate org-level
-                state — owners and platform admins. Personal accounts also
-                see it; their billing page is optional but the entry point
-                exists for consistency. `user`-role customers don't see it
-                (canMutate is false). */}
-            {user &&
-              (user.isPlatform ||
-                (Array.isArray(user.roles) && user.roles.includes("owner"))) && (
-                <NavLink
-                  href="/settings"
-                  active={pathname.startsWith("/settings")}
-                >
-                  {t("settings")}
-                </NavLink>
-              )}
-            {/* Phase 3: Billing visible to anyone signed in. The
-                page is org-scoped server-side — non-owner members
-                see the same invoice history their owner does, but
-                actions like "configure billing details" are gated
-                separately on the settings page. Personal accounts
-                see their own (single-tenant) invoices. */}
-            {user && (
-              <NavLink
-                href="/billing"
-                active={pathname.startsWith("/billing")}
-              >
-                {t("billing")}
+            {links.map((l) => (
+              <NavLink key={l.href} href={l.href} active={isActive(l.href)}>
+                {l.label}
              </NavLink>
-            )}
-            {/* Feature 5: Support is available to every signed-in
-                user. Customers see their own tickets only; platform
-                admins see the queue. */}
-            {user && (
-              <NavLink
-                href="/support"
-                active={pathname.startsWith("/support")}
-              >
-                {t("support")}
-              </NavLink>
-            )}
-            {user?.isPlatform && (
-              <NavLink href="/admin" active={pathname === "/admin"}>
-                {t("admin")}
-              </NavLink>
-            )}
+            ))}
          </nav>
        </div>

        {/* Right side */}
        <div className="flex items-center gap-4">
          {user && (
-            // For personal accounts the orgName is opaque
-            // ("personal-3f2a8b1c") or a synthetic legacy
-            // "Name (Personal)" — neither is what we want in the nav.
-            // Show the user's display name instead. The detection logic
-            // and fallback chain live in `lib/personal-org.ts`; keeping
-            // a thin inline branch here avoids importing a server-only
-            // helper into a client component.
            <span className="hidden md:inline text-xs text-text-secondary font-mono">
-              {user.isPersonal
-                ? user.name || (user.email ? user.email.split("@")[0] : user.orgName)
-                : user.orgName}
+              {displayName}
            </span>
          )}
          <LanguageSwitcher />
          <button
            onClick={() => signOut({ callbackUrl: "/login" })}
-            className="text-xs font-medium text-text-secondary hover:text-error transition-colors cursor-pointer"
+            className="hidden sm:inline text-xs font-medium text-text-secondary hover:text-error transition-colors cursor-pointer"
          >
            {t("logout")}
          </button>
+
+          {/* Mobile menu toggle — only shown below the `sm` breakpoint,
+              where the desktop nav and logout button are hidden. */}
+          {user && (
+            <button
+              type="button"
+              onClick={() => setMobileOpen((v) => !v)}
+              aria-expanded={mobileOpen}
+              aria-controls="mobile-nav"
+              aria-label={t("menu")}
+              className="sm:hidden inline-flex items-center justify-center h-8 w-8 -mr-1 rounded-md text-text-secondary hover:text-text-primary hover:bg-surface-2 transition-colors cursor-pointer"
+            >
+              <svg
+                className="h-5 w-5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.75"
+                strokeLinecap="round"
+              >
+                {mobileOpen ? (
+                  <path d="M6 6l12 12M18 6L6 18" />
+                ) : (
+                  <path d="M4 7h16M4 12h16M4 17h16" />
+                )}
+              </svg>
+            </button>
+          )}
        </div>
      </div>
+
+      {/* Mobile panel */}
+      {user && mobileOpen && (
+        <nav
+          id="mobile-nav"
+          className="sm:hidden border-t border-border bg-surface-1 px-3 py-3"
+        >
+          <div className="flex flex-col gap-1">
+            {links.map((l) => (
+              <Link
+                key={l.href}
+                href={l.href}
+                className={`px-3 py-2.5 rounded-md text-sm font-medium transition-colors ${
+                  isActive(l.href)
+                    ? "bg-surface-3 text-text-primary"
+                    : "text-text-secondary hover:text-text-primary hover:bg-surface-2"
+                }`}
+              >
+                {l.label}
+              </Link>
+            ))}
+          </div>
+
+          <div className="mt-3 pt-3 border-t border-border flex items-center justify-between px-3">
+            <span className="text-xs text-text-secondary font-mono truncate">
+              {displayName}
+            </span>
+            <button
+              onClick={() => signOut({ callbackUrl: "/login" })}
+              className="text-xs font-medium text-text-secondary hover:text-error transition-colors cursor-pointer shrink-0 ml-3"
+            >
+              {t("logout")}
+            </button>
+          </div>
+        </nav>
+      )}
    </header>
  );
 }
--- a/src/components/onboarding/onboarding-flow.tsx
+++ b/src/components/onboarding/onboarding-flow.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useRouter } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { OnboardingWizard } from "./wizard";
 import type { OrgBilling } from "@/types";

--- a/src/components/onboarding/provisioning-status.tsx
+++ b/src/components/onboarding/provisioning-status.tsx
@@ -489,7 +489,7 @@ export function ProvisioningStatus({ requestId, canAct }: Props) {
          </p>
          <button
            onClick={() => window.location.reload()}
-            className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
+            className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
          >
            {t("goToDashboard")}
          </button>
--- a/src/components/onboarding/wizard.tsx
+++ b/src/components/onboarding/wizard.tsx
@@ -606,7 +606,7 @@ export function OnboardingWizard({
          <div className="flex justify-end">
            <button
              onClick={goNext}
-              className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
+              className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
            >
              {t("getStarted")}
            </button>
@@ -994,7 +994,7 @@ export function OnboardingWizard({
            <button
              onClick={goNext}
              disabled={!packageCredentialsValid()}
-              className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {t("next")}
            </button>
@@ -1182,7 +1182,7 @@ export function OnboardingWizard({
            </button>
            <button
              onClick={goNext}
-              className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
+              className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
            >
              {t("next")}
            </button>
@@ -1397,7 +1397,7 @@ export function OnboardingWizard({
            <button
              onClick={handleSubmit}
              disabled={submitting}
-              className="py-2.5 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              className="py-2.5 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {submitting
                ? tCommon("loading")
--- a/src/components/packages/skill-cost-dialog.tsx
+++ b/src/components/packages/skill-cost-dialog.tsx
@@ -104,7 +104,7 @@ export function SkillCostDialog({
          <button
            onClick={onConfirm}
            disabled={busy}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
          >
            {busy ? t("confirming") : t("confirm")}
          </button>
--- a/src/components/settings/billing-form.tsx
+++ b/src/components/settings/billing-form.tsx
@@ -227,7 +227,7 @@ export function BillingSettingsForm({ initial, isPersonal }: Props) {
          <button
            onClick={submit}
            disabled={busy}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
          >
            {busy ? t("saving") : initial ? t("saveChanges") : t("createBilling")}
          </button>
--- a/src/components/settings/billing-settings-form.tsx
+++ b/src/components/settings/billing-settings-form.tsx
@@ -268,7 +268,7 @@ export function BillingSettingsForm({
          <button
            type="submit"
            disabled={submitting}
-            className="ml-auto text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+            className="ml-auto text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
          >
            {submitting ? tCommon("loading") : t("save")}
          </button>
--- a/src/components/settings/profile-form.tsx
+++ b/src/components/settings/profile-form.tsx
@@ -153,7 +153,7 @@ export function ProfileSettingsForm({ initial, isPersonal, orgName }: Props) {
          <button
            onClick={submit}
            disabled={busy}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
          >
            {busy ? t("saving") : t("saveChanges")}
          </button>
--- a/src/components/settings/saved-card-section.tsx
+++ b/src/components/settings/saved-card-section.tsx
@@ -1,7 +1,8 @@
 "use client";

 import { useState, useEffect } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { Card, CardHeader } from "@/components/ui/card";
 import type { OrgBillingConfig } from "@/types";
@@ -136,7 +137,7 @@ export function SavedCardSection({
          <button
            onClick={startSetup}
            disabled={busy !== null}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
          >
            {busy === "setup" ? t("savedCardRedirecting") : t("savedCardSetupBtn")}
          </button>
--- a/src/components/support/ticket-create-form.tsx
+++ b/src/components/support/ticket-create-form.tsx
@@ -119,7 +119,7 @@ export function TicketCreateForm() {
          <button
            type="submit"
            disabled={submitting}
-            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
          >
            {submitting ? tCommon("loading") : t("submitTicket")}
          </button>
--- a/src/components/support/ticket-thread.tsx
+++ b/src/components/support/ticket-thread.tsx
@@ -186,7 +186,7 @@ export function TicketThread({
            <button
              type="submit"
              disabled={submitting || closing || body.trim().length === 0}
-              className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+              className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
            >
              {submitting ? tCommon("loading") : t("sendReply")}
            </button>
--- a/src/components/team/invite-form.tsx
+++ b/src/components/team/invite-form.tsx
@@ -141,7 +141,7 @@ export function InviteForm() {
      <button
        type="submit"
        disabled={state === "submitting"}
-        className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        className="w-full py-2.5 px-4 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {state === "submitting" ? tCommon("loading") : t("inviteButton")}
      </button>
--- a/src/components/team/team-list.tsx
+++ b/src/components/team/team-list.tsx
@@ -179,7 +179,7 @@ export function TeamList({
                      type="button"
                      onClick={() => saveEdit(m)}
                      disabled={submitting || !m.authorizationId}
-                      className="text-xs px-2.5 py-1 rounded-md bg-accent text-white hover:bg-accent-dim transition-colors disabled:opacity-50"
+                      className="text-xs px-2.5 py-1 rounded-md bg-accent text-surface-0 hover:bg-accent-dim transition-colors disabled:opacity-50"
                    >
                      {t("save")}
                    </button>
--- a/src/components/tenants/assigned-users-panel.tsx
+++ b/src/components/tenants/assigned-users-panel.tsx
@@ -218,7 +218,7 @@ export function AssignedUsersPanel({ tenantName, canEdit }: Props) {
              <button
                onClick={handleAssign}
                disabled={busy || !pickedUserId}
-                className="px-4 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                className="px-4 py-2 text-sm font-medium bg-accent text-surface-0 rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {busy ? "…" : t("assign")}
              </button>
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import { forwardRef } from "react";
+
+/**
+ * Shared button primitive.
+ *
+ * Why this exists
+ * ---------------
+ * The accent fill (#00d4aa) is bright; white text on it measures ~1.9:1,
+ * which fails WCAG even for large/UI text. Dark text (surface-0) on the
+ * same accent is ~10:1. The codebase had ~40 hand-rolled accent buttons,
+ * most using `text-white`. This component centralises the correct token
+ * (`text-surface-0` on accent) so the contrast can't drift again — reach
+ * for `<Button>` instead of re-deriving the class string.
+ */
+
+type Variant = "primary" | "secondary" | "ghost" | "danger";
+type Size = "sm" | "md";
+
+const BASE =
+  "inline-flex items-center justify-center gap-1.5 font-medium rounded-lg " +
+  "transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 " +
+  "focus-visible:ring-accent/50 disabled:opacity-50 disabled:cursor-not-allowed";
+
+const VARIANTS: Record<Variant, string> = {
+  // surface-0 (dark) text — the contrast-correct pairing for the accent.
+  primary: "bg-accent text-surface-0 hover:bg-accent-dim shadow-sm shadow-accent/20",
+  secondary:
+    "bg-surface-2 text-text-primary border border-border hover:bg-surface-3 hover:border-border-active",
+  ghost: "text-text-secondary hover:text-text-primary hover:bg-surface-2",
+  danger: "bg-error text-surface-0 hover:opacity-90",
+};
+
+const SIZES: Record<Size, string> = {
+  sm: "text-xs px-3 py-1.5",
+  md: "text-sm px-4 py-2",
+};
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    { variant = "primary", size = "md", className = "", type = "button", ...rest },
+    ref
+  ) {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={`${BASE} ${VARIANTS[variant]} ${SIZES[size]} ${className}`}
+        {...rest}
+      />
+    );
+  }
+);
--- a/src/messages/de.json
+++ b/src/messages/de.json
@@ -4,6 +4,7 @@
    "tagline": "KI-Plattform",
    "login": "Anmelden",
    "logout": "Abmelden",
+    "menu": "Menü",
    "dashboard": "Dashboard",
    "admin": "Admin",
    "loading": "Laden…",
--- a/src/messages/en.json
+++ b/src/messages/en.json
@@ -4,6 +4,7 @@
    "tagline": "AI Platform",
    "login": "Sign In",
    "logout": "Sign Out",
+    "menu": "Menu",
    "dashboard": "Dashboard",
    "admin": "Admin",
    "loading": "Loading…",
--- a/src/messages/fr.json
+++ b/src/messages/fr.json
@@ -4,6 +4,7 @@
    "tagline": "Plateforme IA",
    "login": "Connexion",
    "logout": "Déconnexion",
+    "menu": "Menu",
    "dashboard": "Tableau de bord",
    "admin": "Admin",
    "loading": "Chargement…",
--- a/src/messages/it.json
+++ b/src/messages/it.json
@@ -4,6 +4,7 @@
    "tagline": "Piattaforma IA",
    "login": "Acceda",
    "logout": "Esci",
+    "menu": "Menu",
    "dashboard": "Dashboard",
    "admin": "Admin",
    "loading": "Caricamento…",