Create upload status panel

app/layout.tsx

@@ -19,6 +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 '../tailwind.css';
 
@@ -88,6 +89,7 @@ export default function RootLayout({
                   'mb-12',
                   'space-y-5',
                 )}>
+                  <AdminUploadPanel />
                   <AdminBatchEditPanel />
                   {children}
                 </div>

src/admin/AdminAppMenu.tsx

@@ -20,6 +20,7 @@ import { PiSignOutBold } from 'react-icons/pi';
 import { signOutAction } from '@/auth/actions';
 import { ComponentProps } from 'react';
 import { FaRegFolderOpen } from 'react-icons/fa';
+import { FiUploadCloud } from 'react-icons/fi';
 
 export default function AdminAppMenu({
   className,
@@ -41,6 +42,12 @@ export default function AdminAppMenu({
   const isSelecting = selectedPhotoIds !== undefined;
 
   const items: ComponentProps<typeof MoreMenu>['items'] = [{
+    label: 'Upload Photos …',
+    icon: <FiUploadCloud
+      size={15}
+      className="translate-x-[0.5px] translate-y-[0.5px]"
+    />,
+  }, {
     label: 'Manage Photos',
     ...photosCount !== undefined && {
       annotation: `${photosCount}`,

src/admin/AdminUploadPanel.tsx

@@ -0,0 +1,34 @@
+import Container from '@/components/Container';
+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
+        padding="tight"
+        className="px-4 py-4"
+      >
+        <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>
+          <IoCloseSharp
+            size={19}
+            className="translate-y-[0.5px]"
+          />
+        </div>
+      </Container>}
+    />
+  );
+}