chore: show sync error in footer corner instead of toast notification [skip e2e]

packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx

@@ -1,13 +1,6 @@
 import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { getPlatformString } from '@/Utils'
-import {
-  ApplicationEvent,
-  Challenge,
-  getErrorMessageFromErrorResponseBody,
-  HttpErrorResponseBody,
-  removeFromArray,
-  WebAppEvent,
-} from '@standardnotes/snjs'
+import { ApplicationEvent, Challenge, removeFromArray, WebAppEvent } from '@standardnotes/snjs'
 import { alertDialog, isIOS, RouteType } from '@standardnotes/ui-services'
 import { WebApplication } from '@/Application/WebApplication'
 import Footer from '@/Components/Footer/Footer'
@@ -124,7 +117,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
       onAppLaunch()
     }
 
-    const removeAppObserver = application.addEventObserver(async (eventName, data?: unknown) => {
+    const removeAppObserver = application.addEventObserver(async (eventName) => {
       if (eventName === ApplicationEvent.Started) {
         onAppStart()
       } else if (eventName === ApplicationEvent.Launched) {
@@ -154,14 +147,6 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
           type: ToastType.Error,
           message: 'Too many requests. Please try again later.',
         })
-      } else if (eventName === ApplicationEvent.FailedSync) {
-        addToast({
-          type: ToastType.Error,
-          message: getErrorMessageFromErrorResponseBody(
-            data as HttpErrorResponseBody,
-            'Sync error. Please try again later.',
-          ),
-        })
       }
     })
 

packages/web/src/javascripts/Components/Footer/Footer.tsx

@@ -2,7 +2,14 @@ import { WebApplication } from '@/Application/WebApplication'
 import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { AbstractComponent } from '@/Components/Abstract/PureComponent'
 import { destroyAllObjectProperties, preventRefreshing } from '@/Utils'
-import { ApplicationEvent, ApplicationDescriptor, WebAppEvent, StatusServiceEvent } from '@standardnotes/snjs'
+import {
+  ApplicationEvent,
+  ApplicationDescriptor,
+  WebAppEvent,
+  StatusServiceEvent,
+  HttpErrorResponseBody,
+  getErrorMessageFromErrorResponseBody,
+} from '@standardnotes/snjs'
 import {
   STRING_NEW_UPDATE_READY,
   STRING_CONFIRM_APP_QUIT_DURING_UPGRADE,
@@ -39,6 +46,7 @@ type State = {
   offline: boolean
   hasError: boolean
   arbitraryStatusMessage?: string
+  failedSyncError?: string
 }
 
 class Footer extends AbstractComponent<Props, State> {
@@ -158,7 +166,7 @@ class Footer extends AbstractComponent<Props, State> {
     this.reloadPasscodeStatus().catch(console.error)
   }
 
-  override onAppEvent(eventName: ApplicationEvent) {
+  override onAppEvent(eventName: ApplicationEvent, data?: unknown) {
     switch (eventName) {
       case ApplicationEvent.KeyStatusChanged:
         this.reloadUpgradeStatus()
@@ -186,6 +194,9 @@ class Footer extends AbstractComponent<Props, State> {
         }
         this.findErrors()
         this.updateOfflineStatus()
+        this.setState({
+          failedSyncError: undefined,
+        })
         break
       case ApplicationEvent.SyncStatusChanged:
         this.updateSyncStatus()
@@ -194,6 +205,12 @@ class Footer extends AbstractComponent<Props, State> {
         this.updateSyncStatus()
         this.findErrors()
         this.updateOfflineStatus()
+        this.setState({
+          failedSyncError: getErrorMessageFromErrorResponseBody(
+            data as HttpErrorResponseBody,
+            'Sync error. Please try again later.',
+          ),
+        })
         break
       case ApplicationEvent.LocalDataIncrementalLoad:
       case ApplicationEvent.LocalDataLoaded:
@@ -384,6 +401,11 @@ class Footer extends AbstractComponent<Props, State> {
             )}
           </div>
           <div className="right flex h-full flex-shrink-0">
+            {this.state.failedSyncError && (
+              <div className="relative z-footer-bar-item flex select-none items-center text-xs font-bold text-neutral">
+                Sync error: {this.state.failedSyncError}
+              </div>
+            )}
             {this.state.dataUpgradeAvailable && (
               <div
                 onClick={this.securityUpdateClickHandler}