From f1b90b55e93e8c7eaaf44eb792b546724c7d02c5 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 27 Feb 2025 23:27:30 -0600
Subject: [PATCH] Finesse upload panel visibility

---
 src/admin/upload/AdminUploadPanel.tsx | 10 ++--------
 src/admin/upload/index.ts             |  2 ++
 src/photo/PhotoUploadWithStatus.tsx   |  8 ++++++++
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/admin/upload/AdminUploadPanel.tsx b/src/admin/upload/AdminUploadPanel.tsx
index 66ca9655..7be0a887 100644
--- a/src/admin/upload/AdminUploadPanel.tsx
+++ b/src/admin/upload/AdminUploadPanel.tsx
@@ -1,13 +1,11 @@
 'use client';
 
-import { isPathAdminPhotos } from '@/app/paths';
 import Container from '@/components/Container';
 import LoaderButton from '@/components/primitives/LoaderButton';
 import SiteGrid from '@/components/SiteGrid';
 import PhotoUploadWithStatus from '@/photo/PhotoUploadWithStatus';
 import { useAppState } from '@/state/AppState';
 import clsx from 'clsx';
-import { usePathname } from 'next/navigation';
 import { IoCloseSharp } from 'react-icons/io5';
 
 export default function AdminUploadPanel({
@@ -17,22 +15,18 @@ export default function AdminUploadPanel({
   shouldResize: boolean
   onLastUpload: () => Promise<void>
 }) {
-  const pathname = usePathname();
-
   const {
     uploadInputRef,
     uploadState: {
       isUploading,
+      hideUploadPanel,
     },
     resetUploadState,
   } = useAppState();
 
   return (
     <SiteGrid
-      className={clsx((
-        !isUploading ||
-        isPathAdminPhotos(pathname)
-      ) && 'hidden')}
+      className={clsx((!isUploading || hideUploadPanel) && 'hidden')}
       contentMain={
         <Container
           color="gray"
diff --git a/src/admin/upload/index.ts b/src/admin/upload/index.ts
index ec187579..c083e22e 100644
--- a/src/admin/upload/index.ts
+++ b/src/admin/upload/index.ts
@@ -3,6 +3,7 @@ export interface UploadState {
   uploadError: string
   debugDownload?: { href: string, fileName: string }
   image?: HTMLImageElement
+  hideUploadPanel?: boolean
   fileUploadName: string
   fileUploadIndex: number
   filesLength: number
@@ -11,6 +12,7 @@ export interface UploadState {
 export const INITIAL_UPLOAD_STATE: UploadState = {
   isUploading: false,
   uploadError: '',
+  hideUploadPanel: false,
   fileUploadName: '',
   fileUploadIndex: 0,
   filesLength: 0,
diff --git a/src/photo/PhotoUploadWithStatus.tsx b/src/photo/PhotoUploadWithStatus.tsx
index c48df144..2ea6b83c 100644
--- a/src/photo/PhotoUploadWithStatus.tsx
+++ b/src/photo/PhotoUploadWithStatus.tsx
@@ -45,6 +45,14 @@ export default function PhotoUploadWithStatus({
 
   const router = useRouter();
 
+  useEffect(() => {
+    // Hide upload panel while button is shown
+    if (showButton) {
+      setUploadState?.({ hideUploadPanel: true });
+      return () => { setUploadState?.({ hideUploadPanel: false }); };
+    }
+  }, [setUploadState, showButton]);
+
   const shouldResetUploadStateAfterPending = useRef(false);
   const [isPending, startTransition] = useTransition();
   useEffect(() => {