From bb58c91977a21e243adc966446ac52d4abab8a93 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 8 Mar 2025 11:20:40 -0600
Subject: [PATCH] Add tooltip to recipe button on desktop

---
 src/admin/ExifCaptureButton.tsx               |  2 +-
 src/admin/PhotoSyncButton.tsx                 |  2 +-
 .../primitives/TooltipPrimitive.tsx           | 12 ++--
 src/photo/PhotoLarge.tsx                      | 55 ++++++++++++-------
 4 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/src/admin/ExifCaptureButton.tsx b/src/admin/ExifCaptureButton.tsx
index cd867398..cdfc0f7d 100644
--- a/src/admin/ExifCaptureButton.tsx
+++ b/src/admin/ExifCaptureButton.tsx
@@ -21,7 +21,7 @@ export default function ExifCaptureButton({
   return (
     <Tooltip
       content="Refresh form with EXIF data from original file"
-      supportMobile={false}
+      desktopOnly
     >
       <LoaderButton
         isLoading={isLoading}
diff --git a/src/admin/PhotoSyncButton.tsx b/src/admin/PhotoSyncButton.tsx
index 03f77988..8632770c 100644
--- a/src/admin/PhotoSyncButton.tsx
+++ b/src/admin/PhotoSyncButton.tsx
@@ -36,7 +36,7 @@ export default function PhotoSyncButton({
   return (
     <Tooltip
       content="Regenerate photo data"
-      supportMobile={false}
+      desktopOnly
     >
       <LoaderButton
         className={className}
diff --git a/src/components/primitives/TooltipPrimitive.tsx b/src/components/primitives/TooltipPrimitive.tsx
index 6a3de66a..6282b9e7 100644
--- a/src/components/primitives/TooltipPrimitive.tsx
+++ b/src/components/primitives/TooltipPrimitive.tsx
@@ -12,14 +12,14 @@ export default function TooltipPrimitive({
   className,
   classNameTrigger: classNameTriggerProp,
   sideOffset = 10,
-  supportMobile = true,
+  desktopOnly,
   children,
 }: {
   content?: ReactNode
   className?: string
   classNameTrigger?: string
   sideOffset?: number
-  supportMobile?: boolean
+  desktopOnly?: boolean
   children: ReactNode
 }) {
   const refTrigger = useRef<HTMLButtonElement>(null);
@@ -29,7 +29,7 @@ export default function TooltipPrimitive({
 
   const supportsHover = useSupportsHover();
 
-  const includeButton = supportMobile && !supportsHover;
+  const includeButton = !desktopOnly && !supportsHover;
 
   useClickInsideOutside({
     htmlElements: [refTrigger, refContent],
@@ -39,19 +39,19 @@ export default function TooltipPrimitive({
   });
 
   const classNameTrigger = clsx(
-    'link cursor-default inline-block',
+    'cursor-default inline-block',
     classNameTriggerProp,
   );
 
   return (
     <Tooltip.Provider delayDuration={100}>
-      <Tooltip.Root open={!supportsHover ? isOpen : undefined}>
+      <Tooltip.Root open={includeButton ? isOpen : undefined}>
         <Tooltip.Trigger asChild>
           {includeButton
             ? <button
               ref={refTrigger}
               onClick={() => setIsOpen(!isOpen)}
-              className={classNameTrigger}
+              className={clsx('link', classNameTrigger)}
             >
               {children}
             </button>
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 2a624174..c77426bd 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -27,6 +27,7 @@ import {
   ALLOW_PUBLIC_DOWNLOADS,
   SHOW_TAKEN_AT_TIME,
   SHOW_RECIPES,
+  SHOW_FILM_SIMULATIONS,
 } from '@/app/config';
 import AdminPhotoMenuClient from '@/admin/AdminPhotoMenuClient';
 import { RevalidatePhoto } from './InfinitePhotoScroll';
@@ -325,33 +326,47 @@ export default function PhotoLarge({
                   <li>{photo.exposureCompensationFormatted ?? '0ev'}</li>
                 </ul>
                 {(
-                  (showSimulation && photo.filmSimulation) ||
-                  (SHOW_RECIPES && showRecipe && photo.recipeData)
+                  (
+                    SHOW_FILM_SIMULATIONS &&
+                    showSimulation &&
+                    photo.filmSimulation
+                  ) ||
+                  (SHOW_RECIPES && photo.recipeData)
                 ) &&
                   <div className="flex items-center gap-2 *:w-auto">
-                    {showSimulation && photo.filmSimulation &&
+                    {(
+                      SHOW_FILM_SIMULATIONS &&
+                      showSimulation &&
+                      photo.filmSimulation
+                    ) &&
                       <PhotoFilmSimulation
                         simulation={photo.filmSimulation}
                         prefetch={prefetchRelatedLinks}
                       />}
                     {SHOW_RECIPES && photo.recipeData &&
-                      <button
-                        ref={refRecipeButton}
-                        title="Fujifilm Recipe"
-                        onClick={toggleRecipe}
-                        className={clsx(
-                          'text-medium',
-                          'border-medium rounded-md',
-                          'px-[4px] py-[2.5px] my-[-2.5px]',
-                          'hover:bg-dim active:bg-main',
-                        )}>
-                        {shouldShowRecipe
-                          ? <IoCloseSharp size={15} />
-                          : <TbChecklist
-                            className="translate-x-[0.5px]"
-                            size={15}
-                          />}
-                      </button>} 
+                      <Tooltip
+                        content="Fujifilm Recipe"
+                        desktopOnly
+                      >
+                        <button
+                          ref={refRecipeButton}
+                          title="Fujifilm Recipe"
+                          onClick={toggleRecipe}
+                          className={clsx(
+                            'text-medium',
+                            'border-medium rounded-md',
+                            'px-[4px] py-[2.5px] my-[-3px]',
+                            'translate-y-[2px]',
+                            'hover:bg-dim active:bg-main',
+                          )}>
+                          {shouldShowRecipe
+                            ? <IoCloseSharp size={15} />
+                            : <TbChecklist
+                              className="translate-x-[0.5px]"
+                              size={15}
+                            />}
+                        </button>
+                      </Tooltip>} 
                   </div>}
               </>}
             <div className={clsx(