Refine upload error status text

src/admin/upload/AdminUploadPanel.tsx

@@ -28,7 +28,7 @@ export default function AdminUploadPanel({
   return (
     <AppGrid
       className={clsx(
-        ((!isUploading || uploadError) || hideUploadPanel) && 'hidden',
+        ((!isUploading && !uploadError) || hideUploadPanel) && 'hidden',
       )}
       contentMain={
         <Container

src/photo/PhotoUploadWithStatus.tsx

@@ -132,7 +132,7 @@ export default function PhotoUploadWithStatus({
                   console.error(error);
                   setUploadState?.({
                     isUploading: false,
-                    uploadError: `Upload Error: ${error.message}`,
+                    uploadError: error.message,
                   });
                 });
             }
@@ -142,8 +142,7 @@ export default function PhotoUploadWithStatus({
         />
       </div>
       {showStatusText && <div className={clsx(
-        'flex items-center gap-4',
-        'truncate',
+        'flex items-center gap-4 overflow-hidden',
       )}>
         {isUploading && !showButton &&
           <Spinner
@@ -151,7 +150,11 @@ export default function PhotoUploadWithStatus({
             color="text"
             size={14}
           />}
-        <span className="truncate">
+        {uploadError
+          ? <span className="text-error">
+            {uploadError}
+          </span>
+          : <span className="truncate">
             {isUploading
               ? isFinishing
                 ? <>
@@ -171,11 +174,7 @@ export default function PhotoUploadWithStatus({
                     </ResponsiveText>}
                 </>
               : !showButton && <>Initializing</>}
-        </span>
-      </div>}
-      {uploadError &&
-        <div className="text-error">
-          {uploadError}
+          </span>}
       </div>}
       {debug && debugDownload &&
         <a

src/state/AppState.ts

@@ -24,12 +24,6 @@ export type AppStateContext = {
   clearNextPhotoAnimation?: () => void
   shouldRespondToKeyboardCommands?: boolean
   setShouldRespondToKeyboardCommands?: Dispatch<SetStateAction<boolean>>
-  // UPLOAD
-  startUpload?: (onStart?: () => void) => void
-  uploadInputRef?: RefObject<HTMLInputElement | null>
-  uploadState: UploadState
-  setUploadState?: (uploadState: Partial<UploadState>) => void
-  resetUploadState?: () => void
   // MODAL
   isCommandKOpen?: boolean
   setIsCommandKOpen?: Dispatch<SetStateAction<boolean>>
@@ -54,6 +48,12 @@ export type AppStateContext = {
   isPerformingSelectEdit?: boolean
   setIsPerformingSelectEdit?: Dispatch<SetStateAction<boolean>>
   insightsIndicatorStatus?: InsightsIndicatorStatus
+  // UPLOAD
+  startUpload?: (onStart?: () => void) => void
+  uploadInputRef?: RefObject<HTMLInputElement | null>
+  uploadState: UploadState
+  setUploadState?: (uploadState: Partial<UploadState>) => void
+  resetUploadState?: () => void
   // DEBUG
   isGridHighDensity?: boolean
   setIsGridHighDensity?: Dispatch<SetStateAction<boolean>>

src/state/AppStateProvider.tsx

@@ -45,10 +45,6 @@ export default function AppStateProvider({
     useState<AnimationConfig>();
   const [shouldRespondToKeyboardCommands, setShouldRespondToKeyboardCommands] =
     useState(true);
-  // UPLOAD
-  const uploadInputRef = useRef<HTMLInputElement>(null);
-  const [uploadState, _setUploadState] =
-    useState(INITIAL_UPLOAD_STATE);
   // MODAL
   const [isCommandKOpen, setIsCommandKOpen] =
     useState(false);
@@ -68,6 +64,9 @@ export default function AppStateProvider({
     useState<string[] | undefined>();
   const [isPerformingSelectEdit, setIsPerformingSelectEdit] =
     useState(false);
+  // UPLOAD
+  const uploadInputRef = useRef<HTMLInputElement>(null);
+  const [uploadState, _setUploadState] = useState(INITIAL_UPLOAD_STATE);
   // DEBUG
   const [isGridHighDensity, setIsGridHighDensity] =
     useState(HIGH_DENSITY_GRID);
@@ -135,7 +134,7 @@ export default function AppStateProvider({
     if (isPathAdmin(pathname)) { router.push(PATH_SIGN_IN); }
   }, [router, pathname]);
 
-  // Returns false when an upload is cancelled
+  // Returns false when upload is cancelled
   const startUpload = useCallback(() => new Promise<boolean>(resolve => {
     if (uploadInputRef.current) {
       uploadInputRef.current.value = '';
@@ -168,12 +167,6 @@ export default function AppStateProvider({
         clearNextPhotoAnimation: () => setNextPhotoAnimation?.(undefined),
         shouldRespondToKeyboardCommands,
         setShouldRespondToKeyboardCommands,
-        // UPLOAD
-        uploadInputRef,
-        startUpload,
-        uploadState,
-        setUploadState,
-        resetUploadState,
         // MODAL
         isCommandKOpen,
         setIsCommandKOpen,
@@ -198,6 +191,12 @@ export default function AppStateProvider({
         setSelectedPhotoIds,
         isPerformingSelectEdit,
         setIsPerformingSelectEdit,
+        // UPLOAD
+        uploadInputRef,
+        startUpload,
+        uploadState,
+        setUploadState,
+        resetUploadState,
         // DEBUG
         isGridHighDensity,
         setIsGridHighDensity,