Add upload status to app-level panel

app/layout.tsx

@@ -19,7 +19,7 @@ import CommandK from '@/app/CommandK';
 import SwrConfigClient from '@/state/SwrConfigClient';
 import AdminBatchEditPanel from '@/admin/AdminBatchEditPanel';
 import ShareModals from '@/share/ShareModals';
-import AdminUploadPanel from '@/admin/AdminUploadPanel';
+import AdminUploadPanel from '@/admin/upload/AdminUploadPanel';
 
 import '../tailwind.css';
 

src/admin/AdminUploadPanel.tsx

@@ -1,38 +0,0 @@
-import Container from '@/components/Container';
-import LoaderButton from '@/components/primitives/LoaderButton';
-import SiteGrid from '@/components/SiteGrid';
-import Spinner from '@/components/Spinner';
-import clsx from 'clsx';
-import { IoCloseSharp } from 'react-icons/io5';
-
-export default function AdminUploadPanel() {
-  return (
-    <SiteGrid contentMain={
-      <Container
-        color="gray"
-        padding="tight"
-        className="p-2! pl-4! text-main!"
-      >
-        <div className="flex w-full">
-          <div className={clsx(
-            'flex items-center gap-4',
-            'grow',
-          )}>
-            <Spinner
-              className="text-dim translate-y-[1px]"
-              color="text"
-              size={14}
-            />
-            1 of 4: Uploading DSC-4353.jpg
-          </div>
-          <LoaderButton 
-            icon={<IoCloseSharp
-              size={18}
-              className="translate-y-[0.5px]"
-            />}
-          />
-        </div>
-      </Container>}
-    />
-  );
-}

src/admin/upload/AdminUploadPanel.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import Container from '@/components/Container';
+import LoaderButton from '@/components/primitives/LoaderButton';
+import SiteGrid from '@/components/SiteGrid';
+import Spinner from '@/components/Spinner';
+import { useAppState } from '@/state/AppState';
+import clsx from 'clsx';
+import { IoCloseSharp } from 'react-icons/io5';
+
+export default function AdminUploadPanel() {
+  const { uploadState: {
+    isUploading,
+    filesLength,
+    fileUploadIndex,
+    fileUploadName,
+  } } = useAppState();
+
+  return (
+    <SiteGrid contentMain={
+      <Container
+        color="gray"
+        padding="tight"
+        className="p-2! pl-4! text-main!"
+      >
+        <div className="flex w-full items-center gap-2">
+          <div className="grow">
+            {isUploading
+              ? <div className={clsx('flex items-center gap-4')}>
+                <span className="inline-block truncate">
+                  {/* eslint-disable-next-line max-len */}
+                  Uploading {fileUploadIndex + 1} of {filesLength}: {fileUploadName}
+                </span>
+                <Spinner
+                  className="text-dim translate-y-[1px]"
+                  color="text"
+                  size={14}
+                />
+              </div>
+              : 'Upload Photos'}
+          </div>
+          <LoaderButton 
+            icon={<IoCloseSharp
+              size={18}
+              className="translate-y-[0.5px]"
+            />}
+          />
+        </div>
+      </Container>}
+    />
+  );
+}

src/photo/PhotoUpload.tsx

@@ -25,6 +25,7 @@ export default function PhotoUpload({
       debugDownload,
     },
     setUploadState,
+    resetUploadState,
   } = useAppState();
 
   const router = useRouter();
@@ -67,6 +68,7 @@ export default function PhotoUpload({
                   .then(async url => {
                     if (isLastBlob) {
                       await onLastUpload?.();
+                      resetUploadState?.();
                       if (hasMultipleUploads) {
                         // Redirect to view multiple uploads
                         router.push(PATH_ADMIN_UPLOADS);

src/state/AppState.ts

@@ -19,6 +19,7 @@ export interface AppStateContext {
   // UPLOADS
   uploadState: UploadState
   setUploadState?: (uploadState: Partial<UploadState>) => void
+  resetUploadState?: () => void
   // MODAL
   isCommandKOpen?: boolean
   setIsCommandKOpen?: Dispatch<SetStateAction<boolean>>

src/state/AppStateProvider.tsx

@@ -91,6 +91,9 @@ export default function AppStateProvider({
   const setUploadState = useCallback((uploadState: Partial<UploadState>) => {
     _setUploadState(prev => ({ ...prev, ...uploadState }));
   }, []);
+  const resetUploadState = useCallback(() => {
+    _setUploadState(INITIAL_UPLOAD_STATE);
+  }, []);
 
   const invalidateSwr = useCallback(() => setSwrTimestamp(Date.now()), []);
 
@@ -165,6 +168,7 @@ export default function AppStateProvider({
         // UPLOADS
         uploadState,
         setUploadState,
+        resetUploadState,
         // MODAL
         isCommandKOpen,
         setIsCommandKOpen,