Create custom photo chooser grid

app/admin/components/page.tsx

@@ -1,10 +1,16 @@
 import AdminComponentPageClient from '@/admin/AdminComponentPageClient';
-import { getPhotosCached } from '@/photo/cache';
+import { getPhotosCached, getPhotosMetaCached } from '@/photo/cache';
 
 export default async function ComponentsPage() {
-  const photos = await getPhotosCached({ limit: 1});
+  const photos = await getPhotosCached();
+  const photosCount = await getPhotosMetaCached()
+    .then(({ count }) => count);
 
   return (
-    <AdminComponentPageClient photo={photos[0]} />
+    <AdminComponentPageClient
+      photo={photos[0]}
+      photos={photos}
+      photosCount={photosCount}
+    />
   );
 }

src/admin/AdminComponentPageClient.tsx

@@ -15,8 +15,12 @@ import FieldsetPhotoChooser from '@/photo/form/FieldsetPhotoChooser';
 
 export default function ComponentsPageClient({
   photo,
+  photos,
+  photosCount,
 }: {
   photo: Photo
+  photos: Photo[]
+  photosCount: number
 }) {
   const [valuePhoto, setValuePhoto] = useState(photo?.id ?? '');
   const [valuePhotoChooser, setValuePhotoChooser] = useState(photo?.id ?? '');
@@ -39,6 +43,8 @@ export default function ComponentsPageClient({
           <FieldsetPhotoChooser
             label="Photo"
             photo={photo}
+            photos={photos}
+            photosCount={photosCount}
             value={valuePhotoChooser}
             onChange={setValuePhotoChooser}
           />

src/photo/form/FieldsetPhotoChooser.tsx

@@ -3,10 +3,11 @@ import { altTextForPhoto, doesPhotoNeedBlurCompatibility, Photo } from '..';
 import clsx from 'clsx/lite';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import ImageMedium from '@/components/image/ImageMedium';
-import PhotoGridInfinite from '../PhotoGridInfinite';
 import { menuSurfaceStyles } from '@/components/primitives/surface';
 import { GRID_SPACE_CLASSNAME } from '@/components';
-import PhotoGrid from '../PhotoGrid';
+import useDynamicPhoto from '../useDynamicPhoto';
+import { IoSearch } from 'react-icons/io5';
+import { useState } from 'react';
 
 export default function FieldsetPhotoChooser({
   label,
@@ -14,7 +15,6 @@ export default function FieldsetPhotoChooser({
   onChange,
   photo,
   photos = [],
-  photosCount,
 }: {
   label: string
   value: string
@@ -24,26 +24,37 @@ export default function FieldsetPhotoChooser({
   photosCount?: number
   photosHidden?: Photo[]
 }) {
+  const [query, setQuery] = useState('');
+
+  const {
+    photo: photoAvatar,
+    isLoading: isLoadingPhotoAvatar,
+  } = useDynamicPhoto({
+    initialPhoto: photo,
+    photoId: value,
+  });
+
   return (
     <>
       <FieldsetWithStatus {...{ label, value, onChange, type: 'hidden' }} />
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
           <button type="button" className="p-1.5">
-            {photo && 
             <span className={clsx(
               'flex size-[6rem]',
               'border border-medium rounded-[4px]',
               'overflow-hidden select-none active:opacity-75',
             )}>
-                <ImageMedium
-                  src={photo.url}
-                  alt={altTextForPhoto(photo)}
-                  aspectRatio={photo.aspectRatio}
-                  blurDataURL={photo.blurData}
-                  blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
-                />
-              </span>}
+              {photoAvatar && <ImageMedium
+                src={photoAvatar.url}
+                alt={altTextForPhoto(photoAvatar)}
+                aspectRatio={photoAvatar.aspectRatio}
+                blurDataURL={photoAvatar.blurData}
+                blurCompatibilityMode={
+                  doesPhotoNeedBlurCompatibility(photoAvatar)}
+                className={clsx(isLoadingPhotoAvatar && 'opacity-50')}
+              />}
+            </span>
           </button>
         </DropdownMenu.Trigger>
         <DropdownMenu.Portal>
@@ -55,16 +66,46 @@ export default function FieldsetPhotoChooser({
           >
             <div className={clsx(
               GRID_SPACE_CLASSNAME,
-              'w-[14rem] max-h-[20rem] rounded-[3px] overflow-y-auto',
+              'w-[18rem] max-h-[20rem] rounded-[3px] overflow-y-auto',
             )}>
-              {photos.length > 0 &&
-                <PhotoGrid {...{ photos, animate: false }} />}
-              {(!photosCount || photosCount > photos.length) &&
-                <PhotoGridInfinite {...{
-                  cacheKey: 'photo-chooser-menu',
-                  initialOffset: photos.length,
-                  animate: false,
-                }} />}
+              <div className={clsx(
+                'flex items-center gap-1',
+                'text-medium text-xs font-medium uppercase tracking-wider',
+                'pt-1 pb-2 px-1.5',
+              )}>
+                <div className="grow">
+                  Choose photo
+                </div>
+                <IoSearch size={16} />
+              </div>
+              <input
+                type="text"
+                placeholder="Search for a photo"
+                className="w-full mb-2"
+                value={query}
+                onChange={e => setQuery(e.target.value)}
+              />
+              <div className="grid grid-cols-3 gap-0.5">
+                {photos.map(photo => (
+                  <span
+                    key={photo.id}
+                    className={clsx(
+                      'flex w-full aspect-square object-cover',
+                      'overflow-hidden select-none active:opacity-75',
+                    )}
+                  >
+                    <ImageMedium
+                      src={photo.url}
+                      alt={altTextForPhoto(photo)}
+                      aspectRatio={photo.aspectRatio}
+                      blurDataURL={photo.blurData}
+                      // eslint-disable-next-line max-len
+                      blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
+                      onClick={() => onChange(photo.id)}
+                    />
+                  </span>
+                ))}
+              </div>
             </div>
           </DropdownMenu.Content>
         </DropdownMenu.Portal>

src/photo/useDynamicPhoto.ts

@@ -14,7 +14,7 @@ export default function useDynamicPhoto({
 
   const [isLoading, setIsLoading] = useState(false);
 
-  const [photoIdDebounced] = useDebounce(photoId, 500);
+  const [photoIdDebounced] = useDebounce(photoId, 500, { leading: true });
 
   useEffect(() => {
     if (photoIdDebounced) {