From 0ea89d7858d10de1768c88a3244786aea1c9ca6f Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 12 Mar 2025 09:22:44 -0500
Subject: [PATCH] Add tooltip to recipe copy

---
 src/admin/ExifCaptureButton.tsx                |  5 +----
 src/admin/PhotoSyncButton.tsx                  |  5 +----
 src/admin/insights/AdminAppInsightsClient.tsx  |  1 +
 src/components/CopyButton.tsx                  | 18 +++++++++++++++---
 src/components/primitives/TooltipPrimitive.tsx |  6 +++---
 src/photo/PhotoLarge.tsx                       | 11 ++++++-----
 src/recipe/PhotoRecipeOverlay.tsx              |  5 ++++-
 7 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/admin/ExifCaptureButton.tsx b/src/admin/ExifCaptureButton.tsx
index cdfc0f7d..b3cb7722 100644
--- a/src/admin/ExifCaptureButton.tsx
+++ b/src/admin/ExifCaptureButton.tsx
@@ -19,10 +19,7 @@ export default function ExifCaptureButton({
   const [isLoading, setIsLoading] = useState(false);
 
   return (
-    <Tooltip
-      content="Refresh form with EXIF data from original file"
-      desktopOnly
-    >
+    <Tooltip content="Refresh form with EXIF data from original file">
       <LoaderButton
         isLoading={isLoading}
         onClick={() => {
diff --git a/src/admin/PhotoSyncButton.tsx b/src/admin/PhotoSyncButton.tsx
index 8632770c..96c6e7f3 100644
--- a/src/admin/PhotoSyncButton.tsx
+++ b/src/admin/PhotoSyncButton.tsx
@@ -34,10 +34,7 @@ export default function PhotoSyncButton({
   confirmText.push('This action cannot be undone.');
 
   return (
-    <Tooltip
-      content="Regenerate photo data"
-      desktopOnly
-    >
+    <Tooltip content="Regenerate photo data">
       <LoaderButton
         className={className}
         icon={<IconGrSync
diff --git a/src/admin/insights/AdminAppInsightsClient.tsx b/src/admin/insights/AdminAppInsightsClient.tsx
index ee76bcec..f87e55c9 100644
--- a/src/admin/insights/AdminAppInsightsClient.tsx
+++ b/src/admin/insights/AdminAppInsightsClient.tsx
@@ -140,6 +140,7 @@ export default function AdminAppInsightsClient({
                 <Tooltip
                   content="Could not connect to GitHub API. Try refreshing."
                   classNameTrigger="translate-y-[-1.5px] ml-2 h-3"
+                  supportMobile
                 />
               </>}
             />}
diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
index 5ba6bacd..4c8a4fd8 100644
--- a/src/components/CopyButton.tsx
+++ b/src/components/CopyButton.tsx
@@ -2,21 +2,26 @@ import { BiCopy } from 'react-icons/bi';
 import LoaderButton from './primitives/LoaderButton';
 import clsx from 'clsx/lite';
 import { toastSuccess } from '@/toast';
+import Tooltip from './Tooltip';
 
 export default function CopyButton({
   label,
   text,
   subtle,
+  iconSize = 15,
+  tooltip,
   className,
 }: {
   label: string
   text?: string,
   subtle?: boolean
+  iconSize?: number
+  tooltip?: string
   className?: string
 }) {
-  return (
+  const button = 
     <LoaderButton
-      icon={<BiCopy size={15} />}
+      icon={<BiCopy size={iconSize} />}
       className={clsx(
         subtle && 'text-gray-300 dark:text-gray-700',
         className,
@@ -29,6 +34,13 @@ export default function CopyButton({
         : undefined}
       styleAs="link"
       disabled={!text}
-    />
+    />;
+
+  return (
+    tooltip
+      ? <Tooltip content={tooltip}>
+        {button}
+      </Tooltip>
+      : button
   );
 }
diff --git a/src/components/primitives/TooltipPrimitive.tsx b/src/components/primitives/TooltipPrimitive.tsx
index 6282b9e7..7c709e4b 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,
-  desktopOnly,
+  supportMobile,
   children,
 }: {
   content?: ReactNode
   className?: string
   classNameTrigger?: string
   sideOffset?: number
-  desktopOnly?: boolean
+  supportMobile?: boolean
   children: ReactNode
 }) {
   const refTrigger = useRef<HTMLButtonElement>(null);
@@ -29,7 +29,7 @@ export default function TooltipPrimitive({
 
   const supportsHover = useSupportsHover();
 
-  const includeButton = !desktopOnly && !supportsHover;
+  const includeButton = !supportsHover && supportMobile;
 
   useClickInsideOutside({
     htmlElements: [refTrigger, refContent],
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 769178c6..2aa203e0 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -323,7 +323,11 @@ export default function PhotoLarge({
                     ) &&
                       <>
                         {' '}
-                        <Tooltip content="35mm equivalent" sideOffset={3}>
+                        <Tooltip
+                          content="35mm equivalent"
+                          sideOffset={3}
+                          supportMobile
+                        >
                           <span
                             className={clsx(
                               'text-extra-dim',
@@ -349,10 +353,7 @@ export default function PhotoLarge({
                         prefetch={prefetchRelatedLinks}
                       />}
                     {shouldRenderRecipe &&
-                      <Tooltip
-                        content="Fujifilm Recipe"
-                        desktopOnly
-                      >
+                      <Tooltip content="Fujifilm Recipe">
                         <button
                           ref={refRecipeButton}
                           title="Fujifilm Recipe"
diff --git a/src/recipe/PhotoRecipeOverlay.tsx b/src/recipe/PhotoRecipeOverlay.tsx
index 388bd37a..54efd096 100644
--- a/src/recipe/PhotoRecipeOverlay.tsx
+++ b/src/recipe/PhotoRecipeOverlay.tsx
@@ -122,10 +122,13 @@ export default function PhotoRecipeOverlay({
             ? `${formatRecipe(title).toLocaleUpperCase()} recipe`
             : 'Recipe'}`}
           text={generateRecipeText({ recipe, simulation }).join('\n')}
+          iconSize={17}
           className={clsx(
             'translate-y-[1.5px]',
-            'hover:text-black/50 active:text-black/75',
+            'text-black/40 active:text-black/75',
+            'hover:text-black/40',
           )}
+          tooltip="Copy recipe text"
         />
         <LoaderButton
           icon={<IoCloseCircle size={20} />}