From a045d6c5588eb1c30f8b812bb34d3df7dc29150b Mon Sep 17 00:00:00 2001 From: Ryan Salazar Date: Fri, 29 May 2026 15:34:54 +0000 Subject: [PATCH] manufacturer hover popup + smart back link MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Content Partners (and any other) company-hover preview previously used text-ink / bg-ink / brand-primary utilities that aren't defined in our Tailwind config, so the popup rendered as white background with no text color (inheriting near-white text from the dark theme parent). Replaced every undefined utility with concrete dark-theme colors matching the rest of the site: #111827 panel, #2a3a50 borders, #e8e8e8 body text, #60a5fa links, real semi-transparent chip badges. Manufacturer profile back-link now uses BackLink, a client component that calls router.back() when we have same-origin history — so clicking the breadcrumb from the homepage Content Partners hover returns the user to the homepage instead of dumping them at /manufacturers. Falls through to the directory link for new-tab opens, search-engine entries, and no-JS. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/app/manufacturers/[slug]/BackLink.tsx | 36 +++++++++++++++++++++++ src/app/manufacturers/[slug]/page.tsx | 5 ++-- src/components/CompanyMentionsHover.tsx | 36 +++++++++++------------ 3 files changed, 56 insertions(+), 21 deletions(-) create mode 100644 src/app/manufacturers/[slug]/BackLink.tsx diff --git a/src/app/manufacturers/[slug]/BackLink.tsx b/src/app/manufacturers/[slug]/BackLink.tsx new file mode 100644 index 0000000..bc6e733 --- /dev/null +++ b/src/app/manufacturers/[slug]/BackLink.tsx @@ -0,0 +1,36 @@ +"use client"; + +/** + * Smart back link for the manufacturer profile page. + * + * Renders as a server-rendered linking to the directory so search + * engines and no-JS users still get a sensible href. Client-side it + * intercepts the click and calls `router.back()` — if the user arrived + * here from anywhere on the BB site (homepage Content Partners hover, + * an article body link, the directory itself) we'll return them there. + * Falls through to the directory only when there is no in-app history. + */ +import Link from "next/link"; +import { useRouter } from "next/navigation"; +import type { MouseEvent } from "react"; + +export default function BackLink() { + const router = useRouter(); + function onClick(e: MouseEvent) { + if (typeof window === "undefined") return; + // Same-origin Referer means we have somewhere to go back to. The + // browser history length > 1 check catches the case where the user + // opened the profile in a new tab — in that case we leave the default + // navigation (to /manufacturers) alone. + const sameOrigin = !!document.referrer && new URL(document.referrer).origin === window.location.origin; + if (sameOrigin && window.history.length > 1) { + e.preventDefault(); + router.back(); + } + } + return ( + + ← Back + + ); +} diff --git a/src/app/manufacturers/[slug]/page.tsx b/src/app/manufacturers/[slug]/page.tsx index e0a93a8..e9f9052 100644 --- a/src/app/manufacturers/[slug]/page.tsx +++ b/src/app/manufacturers/[slug]/page.tsx @@ -4,6 +4,7 @@ import Link from "next/link"; import Header from "@/components/Header"; import Footer from "@/components/Footer"; import { createClient } from "@/lib/supabase/server"; +import BackLink from "./BackLink"; export const revalidate = 1800; @@ -166,9 +167,7 @@ export default async function ManufacturerProfile({ />
diff --git a/src/components/CompanyMentionsHover.tsx b/src/components/CompanyMentionsHover.tsx index f08c82b..46e2f18 100644 --- a/src/components/CompanyMentionsHover.tsx +++ b/src/components/CompanyMentionsHover.tsx @@ -99,68 +99,68 @@ export default function CompanyMentionsHover() { role="dialog" aria-label={preview?.name ? `${preview.name} preview` : "Company preview"} style={{ position: "absolute", top: pos.top, left: pos.left, width: 360, zIndex: 999 }} - className="bg-white text-ink border border-ink/10 rounded-xl shadow-2xl p-4 text-sm" + className="bg-[#111827] text-[#e8e8e8] border border-[#2a3a50] rounded-xl shadow-2xl p-4 text-sm backdrop-blur-sm" onMouseEnter={() => { if (hideTimer.current) { window.clearTimeout(hideTimer.current); hideTimer.current = null; } }} onMouseLeave={() => { hideTimer.current = window.setTimeout(() => { setAnchor(null); setPreview(null); setPos(null); }, 180); }} > {loading || !preview ? ( -
Loading…
+
Loading…
) : ( <>
{preview.logoUrl ? ( /* eslint-disable-next-line @next/next/no-img-element */ - + ) : ( -