Finesse upload panel visibility

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"

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,

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(() => {