From 017869fda9ea9643c337b58ca7692f1b636df7c4 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 1 Mar 2026 13:50:01 -0600
Subject: [PATCH] Animate query menu, add favs to chooser

---
 app/about/edit/page.tsx                 |  7 +--
 app/admin/components/page.tsx           |  3 ++
 src/about/AdminAboutEditPage.tsx        |  3 ++
 src/admin/AdminComponentPageClient.tsx  |  3 ++
 src/photo/form/FieldsetPhotoChooser.tsx | 61 ++++++++++++++-----------
 5 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/app/about/edit/page.tsx b/app/about/edit/page.tsx
index a0d1e9c2..c02bbdd6 100644
--- a/app/about/edit/page.tsx
+++ b/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,
     }} />
   );
diff --git a/app/admin/components/page.tsx b/app/admin/components/page.tsx
index 55d79bad..a395c543 100644
--- a/app/admin/components/page.tsx
+++ b/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}
     />
   );
 }
diff --git a/src/about/AdminAboutEditPage.tsx b/src/about/AdminAboutEditPage.tsx
index eded8785..739c3f3f 100644
--- a/src/about/AdminAboutEditPage.tsx
+++ b/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
diff --git a/src/admin/AdminComponentPageClient.tsx b/src/admin/AdminComponentPageClient.tsx
index 507008d0..0081b635 100644
--- a/src/admin/AdminComponentPageClient.tsx
+++ b/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}
           />
diff --git a/src/photo/form/FieldsetPhotoChooser.tsx b/src/photo/form/FieldsetPhotoChooser.tsx
index 08012186..b96b699d 100644
--- a/src/photo/form/FieldsetPhotoChooser.tsx
+++ b/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,41 +156,48 @@ 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',
             )}>
-              <input
-                id="query"
-                ref={inputRef}
-                type="text"
-                placeholder="Search for a photo"
-                className="block w-full m-0 border-none outline-none"
-                value={query}
-                onChange={e => setQuery(e.target.value)}
-              />
+              <div className="p-1 border-t border-medium w-full">
+                <input
+                  id="query"
+                  ref={inputRef}
+                  type="text"
+                  placeholder="Search for a photo"
+                  className="block w-full m-0 border-none outline-none"
+                  value={query}
+                  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 &&
-                <InfinitePhotoScroll
-                  cacheKey="photo-chooser"
-                  initialOffset={photos.length}
-                  itemsPerPage={INFINITE_SCROLL_GRID_MULTIPLE}
-                  moreButtonClassName="mt-2"
-                >
-                  {({ key, photos }) => (
-                    <div key={key} className={CLASSNAME_GRID}>
-                      {photos.map(photo => renderPhotoButton(photo))}
-                    </div>
-                  )}
-                </InfinitePhotoScroll>}
+              {
+                !(showQuery && query) &&
+                photosCount > photos.length &&
+                mode !== 'favs' &&
+                  <InfinitePhotoScroll
+                    cacheKey="photo-chooser"
+                    initialOffset={photos.length}
+                    itemsPerPage={INFINITE_SCROLL_GRID_MULTIPLE}
+                    moreButtonClassName="mt-2"
+                  >
+                    {({ key, photos }) => (
+                      <div key={key} className={CLASSNAME_GRID}>
+                        {photos.map(photo => renderPhotoButton(photo))}
+                      </div>
+                    )}
+                  </InfinitePhotoScroll>}
             </div>
           </DropdownMenu.Content>
         </DropdownMenu.Portal>