Add guidance around sync buttons

app/admin/photos/page.tsx

@@ -6,7 +6,10 @@ import { revalidatePath } from 'next/cache';
 import { cookies } from 'next/headers';
 import { TIMEZONE_COOKIE_NAME } from '@/utility/timezone';
 import { getOutdatedPhotosCount } from '@/photo/db/query';
-import { PRESERVE_ORIGINAL_UPLOADS } from '@/app/config';
+import {
+  AI_TEXT_GENERATION_ENABLED,
+  PRESERVE_ORIGINAL_UPLOADS,
+} from '@/app/config';
 
 export const maxDuration = 60;
 
@@ -45,6 +48,7 @@ export default async function AdminPhotosPage() {
       photosCount,
       photosCountOutdated,
       shouldResize: !PRESERVE_ORIGINAL_UPLOADS,
+      hasAiTextGeneration: AI_TEXT_GENERATION_ENABLED,
       onLastUpload: async () => {
         'use server';
         // Update upload count in admin nav

src/admin/AdminPhotosClient.tsx

@@ -2,9 +2,6 @@
 
 import { clsx } from 'clsx/lite';
 import SiteGrid from '@/components/SiteGrid';
-import {
-  AI_TEXT_GENERATION_ENABLED,
-} from '@/app/config';
 import AdminPhotosTable from '@/admin/AdminPhotosTable';
 import AdminPhotosTableInfinite from '@/admin/AdminPhotosTableInfinite';
 import PathLoaderButton from '@/components/primitives/PathLoaderButton';
@@ -23,6 +20,7 @@ export default function AdminPhotosClient({
   photosCountOutdated,
   blobPhotoUrls,
   shouldResize,
+  hasAiTextGeneration,
   onLastUpload,
   infiniteScrollInitial,
   infiniteScrollMultiple,
@@ -33,6 +31,7 @@ export default function AdminPhotosClient({
   photosCountOutdated: number
   blobPhotoUrls: StorageListResponse
   shouldResize: boolean
+  hasAiTextGeneration: boolean
   onLastUpload: () => Promise<void>
   infiniteScrollInitial: number
   infiniteScrollMultiple: number
@@ -89,14 +88,14 @@ export default function AdminPhotosClient({
           <div className="space-y-[6px] sm:space-y-[10px]">
             <AdminPhotosTable
               photos={photos}
-              hasAiTextGeneration={AI_TEXT_GENERATION_ENABLED}
+              hasAiTextGeneration={hasAiTextGeneration}
               timezone={timezone}
             />
             {photosCount > photos.length &&
               <AdminPhotosTableInfinite
                 initialOffset={infiniteScrollInitial}
                 itemsPerPage={infiniteScrollMultiple}
-                hasAiTextGeneration={AI_TEXT_GENERATION_ENABLED}
+                hasAiTextGeneration={hasAiTextGeneration}
                 timezone={timezone}
               />}
           </div>

src/admin/ExifCaptureButton.tsx

@@ -2,6 +2,7 @@
 
 import LoaderButton from '@/components/primitives/LoaderButton';
 import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
+import Tooltip from '@/components/Tooltip';
 import { getExifDataAction } from '@/photo/actions';
 import { PhotoFormData } from '@/photo/form';
 import { clsx } from 'clsx/lite';
@@ -18,8 +19,11 @@ export default function ExifCaptureButton({
   const [isLoading, setIsLoading] = useState(false);
 
   return (
+    <Tooltip
+      content="Refresh form with EXIF data from original file"
+      supportMobile={false}
+    >
       <LoaderButton
-      title="Update photo from original file"
         isLoading={isLoading}
         onClick={() => {
           setIsLoading(true);
@@ -36,5 +40,6 @@ export default function ExifCaptureButton({
       >
         EXIF
       </LoaderButton>
+    </Tooltip>
   );
 }

src/admin/PhotoSyncButton.tsx

@@ -3,6 +3,7 @@ import { syncPhotoAction } from '@/photo/actions';
 import IconGrSync from '@/app/IconGrSync';
 import { toastSuccess } from '@/toast';
 import { ComponentProps, useState } from 'react';
+import Tooltip from '@/components/Tooltip';
 
 export default function PhotoSyncButton({
   photoId,
@@ -33,8 +34,11 @@ export default function PhotoSyncButton({
   confirmText.push('This action cannot be undone.');
 
   return (
+    <Tooltip
+      content="Regenerate photo data"
+      supportMobile={false}
+    >
       <LoaderButton
-      title="Update photo from original file"
         className={className}
         icon={<IconGrSync
           className="translate-y-[0.5px] translate-x-[0.5px]"
@@ -57,5 +61,6 @@ export default function PhotoSyncButton({
         isLoading={isSyncing || isSyncingExternal}
         disabled={disabled}
       />
+    </Tooltip>
   );
 }

src/components/primitives/TooltipPrimitive.tsx

@@ -10,14 +10,16 @@ import useClickInsideOutside from '@/utility/useClickInsideOutside';
 export default function TooltipPrimitive({
   content,
   className,
-  classNameTrigger,
+  classNameTrigger: classNameTriggerProp,
   sideOffset = 10,
+  supportMobile = true,
   children,
 }: {
   content?: ReactNode
   className?: string
   classNameTrigger?: string
   sideOffset?: number
+  supportMobile?: boolean
   children: ReactNode
 }) {
   const refTrigger = useRef<HTMLButtonElement>(null);
@@ -27,6 +29,8 @@ export default function TooltipPrimitive({
 
   const supportsHover = useSupportsHover();
 
+  const includeButton = supportMobile && !supportsHover;
+
   useClickInsideOutside({
     htmlElements: [refTrigger, refContent],
     onClickOutside: () => {
@@ -34,17 +38,23 @@ export default function TooltipPrimitive({
     },
   });
 
+  const classNameTrigger = clsx('link cursor-default', classNameTriggerProp);
+
   return (
     <Tooltip.Provider delayDuration={100}>
       <Tooltip.Root open={!supportsHover ? isOpen : undefined}>
         <Tooltip.Trigger asChild>
-          <button
+          {includeButton
+            ? <button
               ref={refTrigger}
-            onClick={!supportsHover ? () => setIsOpen(!isOpen) : undefined}
+              onClick={() => setIsOpen(!isOpen)}
-            className={clsx('link cursor-default', classNameTrigger)}
+              className={classNameTrigger}
             >
               {children}
             </button>
+            : <span className={classNameTrigger}>
+              {children}
+            </span>}
         </Tooltip.Trigger>
         <Tooltip.Portal >
           <Tooltip.Content