Refine photo sync status text

src/admin/AdminPhotosSyncClient.tsx

@@ -6,7 +6,7 @@ import IconGrSync from '@/components/icons/IconGrSync';
 import Note from '@/components/Note';
 import AdminChildPage from '@/components/AdminChildPage';
 import { PATH_ADMIN_PHOTOS } from '@/app/paths';
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { syncPhotosAction } from '@/photo/actions';
 import { useRouter } from 'next/navigation';
 import ResponsiveText from '@/components/primitives/ResponsiveText';
@@ -14,6 +14,7 @@ import { LiaBroomSolid } from 'react-icons/lia';
 import ProgressButton from '@/components/primitives/ProgressButton';
 import ErrorNote from '@/components/ErrorNote';
 import { pluralize } from '@/utility/string';
+import { getPhotosSyncStatusText } from '@/photo/sync';
 
 const SYNC_BATCH_SIZE_MAX = 3;
 
@@ -37,6 +38,8 @@ export default function AdminPhotosSyncClient({
 
   const router = useRouter();
 
+  const statusText = useMemo(() => getPhotosSyncStatusText(photos), [photos]);
+
   return (
     <AdminChildPage
       backLabel="Photos"
@@ -113,15 +116,11 @@ export default function AdminPhotosSyncClient({
         >
           <div className="space-y-1.5">
             <div className="font-bold">
-              {photos.length}
-              {' '}
-              {photos.length === 1 ? 'photo' : 'photos'}
-              {' '}
-              found
+              Photos found: {statusText}
             </div>
             Sync to capture newer EXIF fields, improve blur data,
             {' '}
-            and use AI to generate missing text (if configured)
+            and use AI to generate missing text (if configured).
           </div>
         </Note>
         <div className="space-y-4">

src/admin/AdminPhotosTable.tsx

@@ -16,7 +16,7 @@ import DeletePhotoButton from './DeletePhotoButton';
 import { Timezone } from '@/utility/timezone';
 import IconHidden from '@/components/icons/IconHidden';
 import Tooltip from '@/components/Tooltip';
-import { photoNeedsToBeSynced, photoSyncStatusText } from '@/photo/sync';
+import { photoNeedsToBeSynced, getPhotoSyncStatusText } from '@/photo/sync';
 
 export default function AdminPhotosTable({
   photos,
@@ -98,7 +98,7 @@ export default function AdminPhotosTable({
                 <PhotoDate {...{ photo, dateType, timezone }} />
                 {photoNeedsToBeSynced(photo) &&
                   <Tooltip
-                    content={photoSyncStatusText(photo)}
+                    content={getPhotoSyncStatusText(photo)}
                     classNameTrigger={clsx(
                       'translate-y-1 ml-1.5',
                       'text-blue-600 dark:text-blue-400',

src/photo/sync.ts

@@ -53,7 +53,7 @@ export const photoNeedsToBeSynced = (photo: Photo) =>
   photo.syncStatus.isOutdated ||
   photo.syncStatus.missingAiTextFields.length > 0;
 
-export const photoSyncStatusText = (photo: Photo) => {
+export const getPhotoSyncStatusText = (photo: Photo) => {
   const { isOutdated, missingAiTextFields } = photo.syncStatus;
   const text: string[] = [];
   if (isOutdated) {
@@ -66,3 +66,22 @@ export const photoSyncStatusText = (photo: Photo) => {
   }
   return text.join(' and ');
 };
+
+export const getPhotosSyncStatusText = (photos: Photo[]) => {
+  const statusText = [] as string[];
+
+  const photosCountOutdated = photos.filter(
+    photo => photo.syncStatus.isOutdated,
+  ).length;
+  const photosCountMissingAiText = photos.filter(
+    photo => photo.syncStatus.missingAiTextFields.length > 0,
+  ).length;
+  
+  if (photosCountOutdated > 0) {
+    statusText.push(`${photosCountOutdated} outdated`);
+  }
+  if (photosCountMissingAiText > 0) {
+    statusText.push(`${photosCountMissingAiText} missing AI text`);
+  }
+  return statusText.join(', ');
+};