Notification settings (#807)

* Add account data hook

* Add options to change global notification

* Add options to add keywords

* Fix wrong notification count

* Show unread badge in favicon (#251)

* Fix favicon badge

* Fix bug

* Fix favicon not updating

* Add favicon svg's

* remove dead code

src/app/organisms/navigation/Drawer.jsx

@@ -56,7 +56,9 @@ function Drawer() {
 
   useEffect(() => {
     requestAnimationFrame(() => {
-      scrollRef.current.scrollTop = 0;
+      if (scrollRef.current) {
+        scrollRef.current.scrollTop = 0;
+      }
     });
   }, [selectedTab]);
 

src/app/organisms/search/Search.jsx

@@ -168,7 +168,7 @@ function Search() {
     }
   };
 
-  const notifs = initMatrix.notifications;
+  const noti = initMatrix.notifications;
   const renderRoomSelector = (item) => {
     let imageSrc = null;
     let iconSrc = null;
@@ -178,9 +178,6 @@ function Search() {
       iconSrc = joinRuleToIconSrc(item.room.getJoinRule(), item.type === 'space');
     }
 
-    const isUnread = notifs.hasNoti(item.roomId);
-    const noti = notifs.getNoti(item.roomId);
-
     return (
       <RoomSelector
         key={item.roomId}
@@ -189,9 +186,9 @@ function Search() {
         roomId={item.roomId}
         imageSrc={imageSrc}
         iconSrc={iconSrc}
-        isUnread={isUnread}
-        notificationCount={noti.total}
-        isAlert={noti.highlight > 0}
+        isUnread={noti.hasNoti(item.roomId)}
+        notificationCount={noti.getTotalNoti(item.roomId)}
+        isAlert={noti.getHighlightNoti(item.roomId) > 0}
         onClick={() => openItem(item.roomId, item.type)}
       />
     );
@@ -207,7 +204,7 @@ function Search() {
       size="small"
     >
       <div className="search-dialog">
-        <form className="search-dialog__input" onSubmit={(e) => { e.preventDefault(); openFirstResult()}}>
+        <form className="search-dialog__input" onSubmit={(e) => { e.preventDefault(); openFirstResult(); }}>
           <RawIcon src={SearchIC} size="small" />
           <Input
             onChange={handleOnChange}

src/app/organisms/settings/Settings.jsx

@@ -25,6 +25,8 @@ import SettingTile from '../../molecules/setting-tile/SettingTile';
 import ImportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ImportE2ERoomKeys';
 import ExportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ExportE2ERoomKeys';
 import { ImagePackUser, ImagePackGlobal } from '../../molecules/image-pack/ImagePack';
+import GlobalNotification from '../../molecules/global-notification/GlobalNotification';
+import KeywordNotification from '../../molecules/global-notification/KeywordNotification';
 
 import ProfileEditor from '../profile-editor/ProfileEditor';
 import CrossSigning from './CrossSigning';
@@ -150,24 +152,28 @@ function NotificationsSection() {
   };
 
   return (
-    <div className="settings-notifications">
-      <MenuHeader>Notification & Sound</MenuHeader>
-      <SettingTile
-        title="Desktop notification"
-        options={renderOptions()}
-        content={<Text variant="b3">Show desktop notification when new messages arrive.</Text>}
-      />
-      <SettingTile
-        title="Notification Sound"
-        options={(
-          <Toggle
-            isActive={settings.isNotificationSounds}
-            onToggle={() => { toggleNotificationSounds(); updateState({}); }}
-          />
-          )}
-        content={<Text variant="b3">Play sound when new messages arrive.</Text>}
-      />
-    </div>
+    <>
+      <div className="settings-notifications">
+        <MenuHeader>Notification & Sound</MenuHeader>
+        <SettingTile
+          title="Desktop notification"
+          options={renderOptions()}
+          content={<Text variant="b3">Show desktop notification when new messages arrive.</Text>}
+        />
+        <SettingTile
+          title="Notification Sound"
+          options={(
+            <Toggle
+              isActive={settings.isNotificationSounds}
+              onToggle={() => { toggleNotificationSounds(); updateState({}); }}
+            />
+            )}
+          content={<Text variant="b3">Play sound when new messages arrive.</Text>}
+        />
+      </div>
+      <GlobalNotification />
+      <KeywordNotification />
+    </>
   );
 }
 

src/app/organisms/settings/Settings.scss

@@ -38,6 +38,8 @@
 }
 .settings-appearance__card,
 .settings-notifications,
+.global-notification,
+.keyword-notification,
 .settings-security__card,
 .settings-security .device-manage,
 .settings-about__card,