fix: app notification (#18476)

* fix(notification): enable multiple notifications, add option to display them in the detatched window

* refactor(AppNotification): cleanup

* fix: multi window patch (draft)

* feat: introduce sonner lib

* feat: adjust other notifications

* chore: cleanup

* refactor(AppNotification): add comments

* refactor(AppNotification): docs

* feat: replace amplify events with native ones

* chore: update deps

* fix: lint

package.json

@@ -13,7 +13,7 @@
     "@wireapp/react-ui-kit": "9.28.0",
     "@wireapp/store-engine-dexie": "2.1.15",
     "@wireapp/telemetry": "0.1.4",
-    "@wireapp/webapp-events": "0.24.3",
+    "@wireapp/webapp-events": "0.25.0",
     "amplify": "https://github.com/wireapp/amplify#head=master",
     "beautiful-react-hooks": "5.0.2",
     "classnames": "2.5.1",
@@ -50,6 +50,7 @@
     "redux": "5.0.1",
     "redux-logdown": "1.0.4",
     "redux-thunk": "3.1.0",
+    "sonner": "^1.7.1",
     "speakingurl": "14.0.1",
     "switch-path": "1.2.0",
     "tsyringe": "4.8.0",

src/script/calling/CallingRepository.ts

@@ -55,7 +55,6 @@ import {AvsDebugger} from '@wireapp/avs-debugger';
 import {Runtime} from '@wireapp/commons';
 import {WebAppEvents} from '@wireapp/webapp-events';
 
-import {showAppNotification} from 'Components/AppNotification';
 import {useCallAlertState} from 'Components/calling/useCallAlertState';
 import {CALL_QUALITY_FEEDBACK_KEY} from 'Components/Modals/QualityFeedbackModal/constants';
 import {flatten} from 'Util/ArrayUtil';
@@ -866,7 +865,13 @@ export class CallingRepository {
           ? t('videoCallParticipantRaisedSelfHandUp')
           : t('videoCallParticipantRaisedTheirHandUp', {name});
 
-        showAppNotification(handUpMessage);
+        window.dispatchEvent(
+          new CustomEvent(WebAppEvents.CALL.HAND_RAISED, {
+            detail: {
+              notificationMessage: handUpMessage,
+            },
+          }),
+        );
 
         break;
       }
@@ -1132,9 +1137,9 @@ export class CallingRepository {
     const isScreenSharingSourceFromDetachedWindow = this.callState.isScreenSharingSourceFromDetachedWindow();
 
     if (joinedCall && isSharingScreen && isScreenSharingSourceFromDetachedWindow) {
+      window.dispatchEvent(new CustomEvent(WebAppEvents.CALL.SCREEN_SHARING_ENDED));
       this.callState.isScreenSharingSourceFromDetachedWindow(false);
       void this.toggleScreenshare(joinedCall);
-      showAppNotification(t('videoCallScreenShareEnded'));
     }
   };