From 5d85fbf862e974804c2dd254197e29adcdada101 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 16 Feb 2024 17:45:59 -0600
Subject: [PATCH] Add conditional admin menu to photo tiles

---
 src/components/MoreMenu.tsx | 10 +++++-----
 src/photo/PhotoGrid.tsx     |  2 +-
 src/photo/PhotoSmall.tsx    | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/MoreMenu.tsx b/src/components/MoreMenu.tsx
index f6c6316f..50857a4e 100644
--- a/src/components/MoreMenu.tsx
+++ b/src/components/MoreMenu.tsx
@@ -35,9 +35,9 @@ export default function MoreMenu({
         <button
           className={clsx(
             buttonClassName,
-            'p-1 py-1 min-h-0 border-none shadow-none outline-none',
-            'hover:bg-gray-50 active:bg-gray-100',
-            'hover:dark:bg-gray-900/75 active:dark:bg-gray-900',
+            'p-1 min-h-0 border-none shadow-none hover:outline-none',
+            'hover:bg-gray-100 active:bg-gray-100',
+            'hover:dark:bg-gray-800/75 active:dark:bg-gray-900',
             'text-dim',
           )}
           aria-label={`Choose an action for photo: ${'photo'}`}
@@ -54,7 +54,7 @@ export default function MoreMenu({
             'min-w-[8rem]',
             'ml-2.5',
             'p-1 rounded-md border',
-            'bg-content outline-none',
+            'bg-content',
             'shadow-lg dark:shadow-xl',
           )}
         >
@@ -65,7 +65,7 @@ export default function MoreMenu({
               className={clsx(
                 'block w-full',
                 'border-none min-h-0 bg-transparent',
-                'select-none outline-none',
+                'select-none hover:outline-none',
                 'text-sm text-main text-left',
                 'px-3 py-1.5 rounded-[3px]',
                 'hover:text-main',
diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx
index fefb0b4e..6e540bf8 100644
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@@ -60,7 +60,7 @@ export default function PhotoGrid({
                 'aspect-square',
                 'overflow-hidden',
                 '[&>*]:flex [&>*]:w-full [&>*]:h-full',
-                '[&>*>*]:object-cover [&>*>*]:min-h-full',
+                '[&>*>*]:object-cover',
               )
               : undefined}
             style={{
diff --git a/src/photo/PhotoSmall.tsx b/src/photo/PhotoSmall.tsx
index 810c3a32..b560de25 100644
--- a/src/photo/PhotoSmall.tsx
+++ b/src/photo/PhotoSmall.tsx
@@ -5,6 +5,8 @@ import { clsx } from 'clsx/lite';
 import { pathForPhoto } from '@/site/paths';
 import { Camera } from '@/camera';
 import { FilmSimulation } from '@/simulation';
+import AdminPhotoMenu from '@/admin/AdminPhotoMenu';
+import { Suspense } from 'react';
 
 export default function PhotoSmall({
   photo,
@@ -12,21 +14,34 @@ export default function PhotoSmall({
   camera,
   simulation,
   selected,
+  showAdminMenu,
 }: {
   photo: Photo
   tag?: string
   camera?: Camera
   simulation?: FilmSimulation
   selected?: boolean
+  showAdminMenu?: boolean
 }) {
   return (
     <Link
       href={pathForPhoto(photo, tag, camera, simulation)}
       className={clsx(
+        'relative group',
         'active:brightness-75',
         selected && 'brightness-50',
       )}
     >
+      <Suspense>
+        {showAdminMenu &&
+          <AdminPhotoMenu
+            buttonClassName={clsx(
+              'absolute top-1 right-1 opacity-0',
+              'group-hover:opacity-100 group-focus:opacity-100',
+            )}
+            photo={photo}
+          />}
+      </Suspense>
       <ImageSmall
         src={photo.url}
         aspectRatio={photo.aspectRatio}