From b1c419e6f3293caa1e25593ddc7cd7997af79d34 Mon Sep 17 00:00:00 2001 From: Juan Cobo Betancourt Date: Sat, 13 Jun 2026 16:31:14 -0700 Subject: [PATCH] Move the WORKSHOP tool switcher to the institutional band Relocate the cross-tool switcher out of the plum WORKSHOP band into the white institutional band as the first nav item, so its dropdown opens at the top of the page with nothing below to clip it. The trigger reads "Workshop" and is styled like the lab-nav links; the dropdown panel keeps the dark current-tool banner over the switch-to list. The mobile sheet gains a switch-tool section since the institutional band collapses there on narrow screens. Also adopt the US "Paleography" spelling and the /paleography href in DEFAULT_TOOLS and the docs. Bump to 0.3.2. --- kit/README.md | 14 ++++---- kit/auth/index.ts | 10 +++--- kit/ui/ampl-header/AmplHeader.tsx | 14 +++++--- kit/ui/ampl-header/InstitutionalBand.tsx | 26 ++++++++++---- kit/ui/ampl-header/MobileSheet.tsx | 44 +++++++++++++++++++++--- kit/ui/ampl-header/ToolSwitcher.tsx | 30 ++++++++++------ kit/ui/ampl-header/WorkshopBand.tsx | 20 ++++------- kit/ui/ampl-header/tools.ts | 6 ++-- kit/ui/ampl-header/types.ts | 2 +- package.json | 2 +- tests/kit/AmplHeader.test.ts | 23 +++++++------ 11 files changed, 124 insertions(+), 67 deletions(-) diff --git a/kit/README.md b/kit/README.md index b42a274..01fde50 100644 --- a/kit/README.md +++ b/kit/README.md @@ -66,7 +66,7 @@ const returnTo = safeReturnTo(url.searchParams.get("return_to")); // Build absolute login URL (bypasses React Router basename prepend) const loginUrl = buildLoginRedirect(returnTo, url.origin); -// → "https://ampl.tools/auth/login?return_to=%2Fpalaeography" +// → "https://ampl.tools/auth/login?return_to=%2Fpaleography" ``` ### Non-refresh note @@ -118,26 +118,26 @@ import { AmplHeader, DEFAULT_TOOLS } from "@ampl/kit/ui"; // Compact signed-in header (standard in-app use) } account={{ name: user.name, avatarUrl: user.avatar_url }} nav={[ - { label: "Manuscripts", href: "/palaeography/manuscripts", active: true }, - { label: "Groups", href: "/palaeography/groups" }, + { label: "Manuscripts", href: "/paleography/manuscripts", active: true }, + { label: "Groups", href: "/paleography/groups" }, ]} /> // Full signed-out front door (size="full" only on the front door) } - signInHref="/auth/login?return_to=/palaeography" + signInHref="/auth/login?return_to=/paleography" /> ``` -The tool switcher defaults to `DEFAULT_TOOLS` (Palaeography + Scheduling); pass +The tool switcher defaults to `DEFAULT_TOOLS` (Paleography + Scheduling); pass a custom `tools` array to override. `SiteHeader` is deprecated as of v0.3.0 in favour of `AmplHeader`. See `CONSUMING.md` for the full prop reference and CSP requirements. diff --git a/kit/auth/index.ts b/kit/auth/index.ts index bfb7eb0..fb72e45 100644 --- a/kit/auth/index.ts +++ b/kit/auth/index.ts @@ -135,7 +135,7 @@ export async function validateSession( * - backslash (handles `\\evil` and `/path\\evil`) * - embedded schemes (javascript:, http://, etc.) via URL parser * - * NOTE: returns the full apex pathname (e.g. /palaeography/x) + * NOTE: returns the full apex pathname (e.g. /paleography/x) * — NOT basename-stripped. The callback's absolute-URL redirect handles * routing without double-prefix. */ @@ -158,8 +158,8 @@ export function safeReturnTo(value: string | null): string { * prepend. Consumer tools call this to redirect unauthenticated users. * * Example: - * buildLoginRedirect("/palaeography", "https://ampl.tools") - * // → "https://ampl.tools/auth/login?return_to=%2Fpalaeography" + * buildLoginRedirect("/paleography", "https://ampl.tools") + * // → "https://ampl.tools/auth/login?return_to=%2Fpaleography" * * The `returnTo` value should already be validated by `safeReturnTo`. */ @@ -184,8 +184,8 @@ export function buildLoginRedirect( * basename, same absolute URL output via `new URL(...)`. * * Example: - * buildLogoutHref("/palaeography", "https://ampl.tools") - * // → "https://ampl.tools/auth/logout?return_to=%2Fpalaeography" + * buildLogoutHref("/paleography", "https://ampl.tools") + * // → "https://ampl.tools/auth/logout?return_to=%2Fpaleography" * * The `returnTo` value should already be validated by `safeReturnTo`. */ diff --git a/kit/ui/ampl-header/AmplHeader.tsx b/kit/ui/ampl-header/AmplHeader.tsx index e0c5e83..6bbdcfe 100644 --- a/kit/ui/ampl-header/AmplHeader.tsx +++ b/kit/ui/ampl-header/AmplHeader.tsx @@ -5,7 +5,10 @@ * sheet; holds the single mobile-sheet open/close state. All tool variation * comes through props. The public entry point for the component. * - * @version v0.3.0 + * v0.3.2: the cross-tool switcher moved from the WORKSHOP band into the + * institutional band; the mobile sheet gains a "switch tool" section. + * + * @version v0.3.2 */ import { useState } from "react"; import { InstitutionalBand } from "./InstitutionalBand"; @@ -43,17 +46,17 @@ export function AmplHeader({ labHome={labHome} menuOpen={menuOpen} onMenuToggle={() => setMenuOpen((v) => !v)} - /> - + ); diff --git a/kit/ui/ampl-header/InstitutionalBand.tsx b/kit/ui/ampl-header/InstitutionalBand.tsx index e0cc1e1..acca129 100644 --- a/kit/ui/ampl-header/InstitutionalBand.tsx +++ b/kit/ui/ampl-header/InstitutionalBand.tsx @@ -1,25 +1,37 @@ /** * Institutional band — the white top band: AMPL logo lockup (links to the lab - * home) + lab-site nav, scaling between full and compact; plus the mobile - * hamburger that toggles the sheet. Owned by the kit (single AMPL identity). + * home) + the cross-tool WORKSHOP switcher + lab-site nav, scaling between full + * and compact; plus the mobile hamburger that toggles the sheet. Owned by the + * kit (single AMPL identity). * - * @version v0.3.0 + * v0.3.2: the WORKSHOP tool switcher moved here (first nav item) from the plum + * band, so its dropdown opens at page-top with nothing below to clip it. + * + * @version v0.3.2 */ import { useTranslation } from "react-i18next"; import amplLogo from "../../assets/ampl-logo.svg"; import { LAB_NAV } from "./lab-nav"; -import type { HeaderSize } from "./types"; +import { ToolSwitcher } from "./ToolSwitcher"; +import type { HeaderSize, ToolId, ToolLink } from "./types"; export function InstitutionalBand({ size, labHome, menuOpen, onMenuToggle, + tool, + toolName, + tools, }: { size: HeaderSize; labHome: string; menuOpen: boolean; onMenuToggle: () => void; + /** v0.3.2: the cross-tool switcher now lives here, as the first nav item. */ + tool: ToolId; + toolName: string; + tools: ToolLink[]; }) { const { t } = useTranslation("kit"); const full = size === "full"; @@ -39,13 +51,15 @@ export function InstitutionalBand({ - {/* Lab nav — desktop only; mobile uses the sheet. */} + {/* Switcher + lab nav — desktop only; mobile uses the sheet. The + WORKSHOP switcher is first (left of the lab links). */}