Improve responsive date handling

src/app/admin/photos/page.tsx

@@ -33,6 +33,7 @@ import { PRO_MODE_ENABLED } from '@/site/config';
 import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
 import IconGrSync from '@/site/IconGrSync';
 import { getStoragePhotoUrlsNoStore } from '@/services/storage/cache';
+import PhotoDate from '@/photo/PhotoDate';
 
 const DEBUG_PHOTO_BLOBS = false;
 
@@ -103,7 +104,7 @@ export default async function AdminPhotosPage({
                       'lg:w-[50%] uppercase',
                       'text-dim',
                     )}>
-                      {photo.takenAtNaive}
+                      <PhotoDate {...{ photo }} />
                     </div>
                   </div>
                   <div className={clsx(

src/components/ResponsiveDate.tsx

@@ -0,0 +1,20 @@
+import { formatDate } from '@/utility/date';
+
+export default function ResponsiveDate({
+  date,
+}: {
+  date: Date
+}) {
+  return (
+    <>
+      {/* Mobile */}
+      <span className="inline-block sm:hidden">
+        {formatDate(date, true)}
+      </span>
+      {/* Desktop */}
+      <span className="hidden sm:inline-block">
+        {formatDate(date)}
+      </span>
+    </>
+  );
+}

src/photo/PhotoDate.tsx

@@ -0,0 +1,17 @@
+import ResponsiveDate from '@/components/ResponsiveDate';
+import { Photo } from '.';
+import { useMemo } from 'react';
+
+export default function PhotoDate({
+  photo: { takenAtNaive },
+}: {
+  photo: Photo
+}) {
+  const date = useMemo(() => {
+    const date = new Date(takenAtNaive);
+    return isNaN(date.getTime()) ? new Date() : date;
+  }, [takenAtNaive]);
+  return (
+    <ResponsiveDate {...{ date }} />
+  );
+}

src/site/CommandK.tsx

@@ -21,7 +21,6 @@ import { authCached } from '@/auth/cache';
 import { getPhotos } from '@/services/vercel-postgres';
 import { getKeywordsForPhoto, photoQuantityText, titleForPhoto } from '@/photo';
 import PhotoTiny from '@/photo/PhotoTiny';
-import { formatDate } from '@/utility/date';
 import { formatCount, formatCountDescriptive } from '@/utility/string';
 import { BiLockAlt, BiSolidUser } from 'react-icons/bi';
 import { sortTagsObject } from '@/tag';
@@ -31,6 +30,7 @@ import { TbPhoto } from 'react-icons/tb';
 import { IoMdCamera } from 'react-icons/io';
 import { HiDocumentText } from 'react-icons/hi';
 import { signOutAction } from '@/auth/actions';
+import PhotoDate from '@/photo/PhotoDate';
 
 export default async function CommandK() {
   const [
@@ -147,14 +147,7 @@ export default async function CommandK() {
           items: photos.map(photo => ({
             label: titleForPhoto(photo),
             keywords: getKeywordsForPhoto(photo),
-            annotation: <>
+            annotation: <PhotoDate {...{ photo }} />,
-              <span className="hidden sm:inline-block">
-                {formatDate(photo.takenAt)}
-              </span>
-              <span className="inline-block sm:hidden">
-                {formatDate(photo.takenAt, true)}
-              </span>
-            </>,
             accessory: <PhotoTiny photo={photo} />,
             path: pathForPhoto(photo),
           })),