Incorporate server-side photo chooser data

src/about/AdminAboutEditPage.tsx

@@ -20,6 +20,9 @@ export default function AdminAboutEditPage({
   about,
   photoAvatar: _photoAvatar,
   photoHero: _photoHero,
+  photos,
+  photosCount,
+  photosHidden,
 }: {
   about?: About
   photoAvatar?: Photo
@@ -68,6 +71,9 @@ export default function AdminAboutEditPage({
             onChange={photoIdAvatar => setAboutForm(form =>
               ({ ...form, photoIdAvatar: convertUrlToPhotoId(photoIdAvatar) }))}
             photo={photoAvatar}
+            photos={photos}
+            photosCount={photosCount}
+            photosHidden={photosHidden}
           />
           <PhotoAvatar photo={photoAvatar} />
           <FieldsetWithStatus

src/photo/form/FieldsetPhotoChooser.tsx

@@ -5,17 +5,24 @@ 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';
 
 export default function FieldsetPhotoChooser({
   label,
   value,
   onChange,
   photo,
+  photos = [],
+  photosCount,
 }: {
   label: string
   value: string
   onChange: (value: string) => void
   photo?: Photo
+  photos?: Photo[]
+  photosCount?: number
+  photosHidden?: Photo[]
 }) {
   return (
     <>
@@ -44,17 +51,20 @@ export default function FieldsetPhotoChooser({
             onCloseAutoFocus={e => e.preventDefault()}
             align="start"
             sideOffset={10}
-            className={menuSurfaceStyles('z-20 px-1.5 py-1.5')}>
+            className={menuSurfaceStyles('z-20 px-1.5 py-1.5')}
+          >
             <div className={clsx(
+              GRID_SPACE_CLASSNAME,
               'w-[14rem] max-h-[20rem] rounded-[3px] overflow-y-auto',
-              'space-y-1',
             )}>
-              <PhotoGridInfinite
+              {photos.length > 0 &&
-                cacheKey="photo-chooser-menu"
+                <PhotoGrid {...{ photos, animate: false }} />}
-                initialOffset={0}
+              {(!photosCount || photosCount > photos.length) &&
-                sortBy="takenAt"
+                <PhotoGridInfinite {...{
-                animate={false}
+                  cacheKey: 'photo-chooser-menu',
-              />
+                  initialOffset: photos.length,
+                  animate: false,
+                }} />}
             </div>
           </DropdownMenu.Content>
         </DropdownMenu.Portal>