Animate query menu, add favs to chooser

app/about/edit/page.tsx

@@ -7,6 +7,7 @@ import {
   getPhotosMetaCached,
 } from '@/photo/cache';
 import { getPhoto } from '@/photo/query';
+import { TAG_FAVS } from '@/tag';
 
 const PHOTO_CHOOSER_QUERY_OPTIONS = feedQueryOptions({
   isGrid: true,
@@ -22,7 +23,7 @@ export default async function AboutEditPage() {
     },
     photos,
     photosCount,
-    photosHidden,
+    photosFavs,
   ] = await Promise.all([
     getAbout()
       .then(async about => {
@@ -52,7 +53,7 @@ export default async function AboutEditPage() {
     getPhotosMetaCached(PHOTO_CHOOSER_QUERY_OPTIONS)
       .then(({ count }) => count)
       .catch(() => 0),
-    getPhotosCached({ hidden: 'only', limit: 1000 })
+    getPhotosCached({ tag: TAG_FAVS })
       .catch(() => []),
   ]);
 
@@ -63,7 +64,7 @@ export default async function AboutEditPage() {
       photoHero,
       photos,
       photosCount,
-      photosHidden,
+      photosFavs,
       shouldResizeImages: !PRESERVE_ORIGINAL_UPLOADS,
     }} />
   );

app/admin/components/page.tsx

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

src/about/AdminAboutEditPage.tsx

@@ -22,12 +22,14 @@ export default function AdminAboutEditPage({
   photoHero: _photoHero,
   photos,
   photosCount,
+  photosFavs,
 }: {
   about?: About
   photoAvatar?: Photo
   photoHero?: Photo
   photos: Photo[]
   photosCount: number
+  photosFavs: Photo[]
   shouldResizeImages?: boolean
 }) {
   const appText = useAppText();
@@ -71,6 +73,7 @@ export default function AdminAboutEditPage({
             photo={photoAvatar}
             photos={photos}
             photosCount={photosCount}
+            photosFavs={photosFavs}
           />
           <PhotoAvatar photo={photoAvatar} />
           <FieldsetWithStatus

src/admin/AdminComponentPageClient.tsx

@@ -16,10 +16,12 @@ export default function AdminComponentPageClient({
   photo,
   photos,
   photosCount,
+  photosFavs,
 }: {
   photo: Photo
   photos: Photo[]
   photosCount: number
+  photosFavs: Photo[]
 }) {
   const [valuePhoto, setValuePhoto] = useState(photo?.id ?? '');
 
@@ -43,6 +45,7 @@ export default function AdminComponentPageClient({
             photo={photo}
             photos={photos}
             photosCount={photosCount}
+            photosFavs={photosFavs}
             value={valuePhoto}
             onChange={setValuePhoto}
           />

src/photo/form/FieldsetPhotoChooser.tsx

@@ -38,6 +38,7 @@ export default function FieldsetPhotoChooser({
   photo: _photo,
   photos = [],
   photosCount,
+  photosFavs,
 }: {
   label: string
   value: string
@@ -45,6 +46,7 @@ export default function FieldsetPhotoChooser({
   photo?: Photo
   photos: Photo[]
   photosCount: number
+  photosFavs: Photo[]
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -154,10 +156,10 @@ export default function FieldsetPhotoChooser({
               }}
             />
             <div className={clsx(
-              'border-t border-medium',
-              'p-1',
-              !showQuery && 'hidden',
+              'flex items-center transition-all overflow-hidden',
+              showQuery ? 'h-12 opacity-100' : 'h-0 opacity-0',
             )}>
+              <div className="p-1 border-t border-medium w-full">
                 <input
                   id="query"
                   ref={inputRef}
@@ -168,15 +170,22 @@ export default function FieldsetPhotoChooser({
                   onChange={e => setQuery(e.target.value)}
                 />
               </div>
+            </div>
             <div className={clsx(
               'w-[18rem] max-h-[20rem] overflow-y-auto',
               'space-y-0.5',
             )}>
               <div className={CLASSNAME_GRID}>
-                {(showQuery && query ? photosQuery : photos)
+                {(showQuery && query
+                  ? photosQuery
+                  : mode === 'favs'
+                    ? photosFavs : photos)
                   .map(photo => renderPhotoButton(photo))}
               </div>
-              {!(showQuery && query) && photosCount > photos.length &&
+              {
+                !(showQuery && query) &&
+                photosCount > photos.length &&
+                mode !== 'favs' &&
                   <InfinitePhotoScroll
                     cacheKey="photo-chooser"
                     initialOffset={photos.length}