fix: was not possible to click notification, make error routing more …

…strict & obvious

src/core/progressReporter.ts

@@ -13,12 +13,14 @@ export interface ProgressReporter {
 
   setMessage (message: string): void
 
-  end (): void
+  end(): void
+  error(message: string): void
 }
 
 interface ReporterDisplayImplementation {
   setMessage (message: string): void
   end (): void
+  error(message: string): void
 }
 
 interface StageInfo {
@@ -124,6 +126,10 @@ const createProgressReporter = (implementation: ReporterDisplayImplementation):
 
     get currentMessage () {
       return currentMessage
+    },
+
+    error (message: string): void {
+      implementation.error(message)
     }
   }
 
@@ -145,6 +151,11 @@ export const createFullScreenProgressReporter = (): ProgressReporter => {
       } else {
         setLoadingScreenStatus(fullScreenReporters.at(-1)!.currentMessage)
       }
+    },
+
+    error (message: string): void {
+      if (appStatusState.isError) return
+      setLoadingScreenStatus(message, true)
     }
   })
   fullScreenReporters.push(reporter)
@@ -162,6 +173,10 @@ export const createNotificationProgressReporter = (endMessage?: string): Progres
       } else {
         hideNotification()
       }
+    },
+
+    error (message: string): void {
+      showNotification(message, '', true, '', undefined, true)
     }
   })
 }
@@ -173,6 +188,10 @@ export const createConsoleLogProgressReporter = (): ProgressReporter => {
     },
     end () {
       console.log('done')
+    },
+
+    error (message: string): void {
+      console.error(message)
     }
   })
 }
@@ -191,6 +210,10 @@ export const createWrappedProgressReporter = (reporter: ProgressReporter, messag
       if (message) {
         reporter.endStage(stage)
       }
+    },
+
+    error (message: string): void {
+      reporter.error(message)
     }
   })
 }

src/react/NotificationProvider.tsx

@@ -60,10 +60,13 @@ export default () => {
   // }, [])
   const scale = useAppScale()
 
-  return <div style={{
-    transform: `scale(${scale})`,
-    transformOrigin: 'top right',
-  }}>
+  return <div
+    className='notification-container'
+    style={{
+      // transform: `scale(${scale})`,
+      // transformOrigin: 'top right',
+    }}
+  >
     <Notification
       action={action}
       type={type}

src/reactUi.tsx

@@ -207,14 +207,14 @@ const App = () => {
             <SignInMessageProvider />
             <NoModalFoundProvider />
             <PacketsReplayProvider />
+            <NotificationProvider />
           </RobustPortal>
           <RobustPortal to={document.body}>
             <div className='overlay-top-scaled'>
               <GamepadUiCursor />
             </div>
             <div />
             <DebugEdges />
-            <NotificationProvider />
           </RobustPortal>
         </ButtonAppProvider>
       </div>

src/resourcePack.ts

@@ -392,7 +392,7 @@ const downloadAndUseResourcePack = async (url: string, progressReporter: Progres
     const response = await fetch(url).catch((err) => {
       console.log(`Ensure server on ${url} support CORS which is not required for regular client, but is required for the web client`)
       console.error(err)
-      showNotification('Failed to download resource pack: ' + err.message)
+      progressReporter.error('Failed to download resource pack: ' + err.message)
     })
     console.timeEnd('downloadServerResourcePack')
     if (!response) return
@@ -425,6 +425,8 @@ const downloadAndUseResourcePack = async (url: string, progressReporter: Progres
       console.error(err)
       showNotification('Failed to install resource pack: ' + err.message)
     })
+  } catch (err) {
+    progressReporter.error('Could not install resource pack: ' + err.message)
   } finally {
     progressReporter.endStage('download-resource-pack')
     resourcePackState.isServerInstalling = false