From 722f18cc0fcec6ffd10d15bd76c41a5ff2a2d7f7 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 28 Jun 2025 12:53:01 -0500
Subject: [PATCH] Refine recipe overlay tooltips

---
 src/components/og/OGTooltip.tsx          | 10 +++++++---
 src/components/og/OGTooltipProvider.tsx  |  7 +++++--
 src/components/og/state.ts               |  4 +++-
 src/components/primitives/EntityLink.tsx |  4 +++-
 src/recipe/PhotoRecipeOverlay.tsx        |  3 ++-
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/og/OGTooltip.tsx b/src/components/og/OGTooltip.tsx
index 74a35e7b..481e8118 100644
--- a/src/components/og/OGTooltip.tsx
+++ b/src/components/og/OGTooltip.tsx
@@ -2,7 +2,7 @@ import { ComponentProps, ReactNode, useRef, useEffect } from 'react';
 import OGLoaderImage from './OGLoaderImage';
 import { IMAGE_OG_DIMENSION } from '@/image-response';
 import clsx from 'clsx/lite';
-import { useOGTooltipState } from './state';
+import { Tooltip, useOGTooltipState } from './state';
 import useSupportsHover from '@/utility/useSupportsHover';
 
 const { aspectRatio } = IMAGE_OG_DIMENSION;
@@ -15,10 +15,12 @@ const offsetBelow = -6;
 export default function OGTooltip({
   children,
   caption,
+  color,
   ...props
 }: {
   children :ReactNode
   caption?: ReactNode
+  color?: Tooltip['color']
 } & ComponentProps<typeof OGLoaderImage>) {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -40,7 +42,9 @@ export default function OGTooltip({
         {...props}
         className={clsx(
           'overflow-hidden rounded-[0.25rem]',
-          'outline-medium bg-extra-dim',
+          color === 'frosted'
+            ? 'outline outline-gray-400/25'
+            : 'outline-medium bg-extra-dim',
         )}
       />
       {caption && <div className={clsx(
@@ -61,7 +65,7 @@ export default function OGTooltip({
       onMouseEnter={() => supportsHover &&
         showTooltip?.(
           ref.current,
-          { content, width, height, offsetAbove, offsetBelow },
+          { content, width, height, offsetAbove, offsetBelow, color },
         )}
       onMouseLeave={() => supportsHover &&
         dismissTooltip?.(ref.current)}
diff --git a/src/components/og/OGTooltipProvider.tsx b/src/components/og/OGTooltipProvider.tsx
index e7bd2b19..ad295a33 100644
--- a/src/components/og/OGTooltipProvider.tsx
+++ b/src/components/og/OGTooltipProvider.tsx
@@ -107,7 +107,7 @@ export default function OGTooltipProvider({
 
   return (
     <OGTooltipContext.Provider value={{ showTooltip, dismissTooltip }}>
-      <div className="relative inset-0 z-50 pointer-events-none">
+      <div className="relative inset-0 z-100 pointer-events-none">
         <AnimatePresence>
           {currentTooltip &&
             <motion.div
@@ -119,7 +119,10 @@ export default function OGTooltipProvider({
               className="fixed"
               style={tooltipStyle}
             >
-              <MenuSurface className="max-w-none p-1!">
+              <MenuSurface
+                className="max-w-none p-1!"
+                color={currentTooltip.color}
+              >
                 {currentTooltip.content}
               </MenuSurface>
             </motion.div>}
diff --git a/src/components/og/state.ts b/src/components/og/state.ts
index 08b2a5c8..c45b7a08 100644
--- a/src/components/og/state.ts
+++ b/src/components/og/state.ts
@@ -1,4 +1,5 @@
-import { createContext, ReactNode, use } from 'react';
+import { ComponentProps, createContext, ReactNode, use } from 'react';
+import MenuSurface from '../primitives/MenuSurface';
 
 export type Tooltip = {
   content: ReactNode
@@ -6,6 +7,7 @@ export type Tooltip = {
   height: number
   offsetAbove: number
   offsetBelow: number
+  color?: ComponentProps<typeof MenuSurface>['color']
 }
 
 export type OGTooltipState = {
diff --git a/src/components/primitives/EntityLink.tsx b/src/components/primitives/EntityLink.tsx
index d5cbfaf8..ac9e013e 100644
--- a/src/components/primitives/EntityLink.tsx
+++ b/src/components/primitives/EntityLink.tsx
@@ -99,7 +99,8 @@ export default function EntityLink({
         'peer',
         'inline-flex items-center gap-2 max-w-full truncate',
         classForContrast(),
-        path && !badged && 'hover:text-gray-900 dark:hover:text-gray-100',
+        path && !badged && contrast !== 'frosted' &&
+          'hover:text-gray-900 dark:hover:text-gray-100',
         path && !badged && 'active:text-medium!',
       )}
       isLoading={isLoading}
@@ -156,6 +157,7 @@ export default function EntityLink({
           title={label}
           path={tooltipImagePath}
           caption={tooltipCaption}
+          color={contrast === 'frosted' ? 'frosted' : undefined}
         >
           {renderLink}
         </OGTooltip>
diff --git a/src/recipe/PhotoRecipeOverlay.tsx b/src/recipe/PhotoRecipeOverlay.tsx
index 8f748cb1..fd6db1ff 100644
--- a/src/recipe/PhotoRecipeOverlay.tsx
+++ b/src/recipe/PhotoRecipeOverlay.tsx
@@ -122,6 +122,7 @@ export default function PhotoRecipeOverlay({
           {title
             ? <PhotoRecipe
               recipe={title}
+              contrast="frosted"
               className={clsx(
                 'text-[15px]',
                 '[&>*>*>*>*]:text-black',
@@ -161,8 +162,8 @@ export default function PhotoRecipeOverlay({
           {renderDataSquare(
             <div className="flex items-center gap-1.5">
               <PhotoFilm
-                contrast="frosted"
                 film={film}
+                contrast="frosted"
                 className={clsx(
                   'translate-y-[-0.5px]',
                   '*:text-black! *:active:text-black!',