(chore) remove outdated code (#1765)

* optimize room typing members hook

* remove unused code - WIP

* remove old code from initMatrix

* remove twemojify function

* remove old sanitize util

* delete old markdown util

* delete Math atom component

* uninstall unused dependencies

* remove old notification system

* decrypt message in inbox notification center and fix refresh in background

* improve notification

---------

Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -0,0 +1,231 @@
+import { useAtomValue } from 'jotai';
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
+import { roomToUnreadAtom, unreadEqual, unreadInfoToUnread } from '../../state/room/roomToUnread';
+import LogoSVG from '../../../../public/res/svg/cinny.svg';
+import LogoUnreadSVG from '../../../../public/res/svg/cinny-unread.svg';
+import LogoHighlightSVG from '../../../../public/res/svg/cinny-highlight.svg';
+import { setFavicon } from '../../utils/dom';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { allInvitesAtom } from '../../state/room-list/inviteList';
+import { usePreviousValue } from '../../hooks/usePreviousValue';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getInboxInvitesPath, getInboxNotificationsPath } from '../pathUtils';
+import {
+  getMemberDisplayName,
+  getNotificationType,
+  getUnreadInfo,
+  isNotificationEvent,
+} from '../../utils/room';
+import { NotificationType, UnreadInfo } from '../../../types/matrix/room';
+import { getMxIdLocalPart } from '../../utils/matrix';
+import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
+import { useInboxNotificationsSelected } from '../../hooks/router/useInbox';
+
+function FaviconUpdater() {
+  const roomToUnread = useAtomValue(roomToUnreadAtom);
+
+  useEffect(() => {
+    if (roomToUnread.size === 0) {
+      setFavicon(LogoSVG);
+    } else {
+      const highlight = Array.from(roomToUnread.entries()).find(
+        ([, unread]) => unread.highlight > 0
+      );
+
+      setFavicon(highlight ? LogoHighlightSVG : LogoUnreadSVG);
+    }
+  }, [roomToUnread]);
+
+  return null;
+}
+
+function InviteNotifications() {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const invites = useAtomValue(allInvitesAtom);
+  const perviousInviteLen = usePreviousValue(invites.length, 0);
+  const mx = useMatrixClient();
+
+  const navigate = useNavigate();
+  const [notificationSound] = useSetting(settingsAtom, 'isNotificationSounds');
+
+  const notify = useCallback(
+    (count: number) => {
+      const noti = new window.Notification('Invitation', {
+        icon: LogoSVG,
+        badge: LogoSVG,
+        body: `You have ${count} new invitation request.`,
+        silent: true,
+      });
+
+      noti.onclick = () => {
+        if (!window.closed) navigate(getInboxInvitesPath());
+        noti.close();
+      };
+    },
+    [navigate]
+  );
+
+  const playSound = useCallback(() => {
+    const audioElement = audioRef.current;
+    audioElement?.play();
+  }, []);
+
+  useEffect(() => {
+    if (invites.length > perviousInviteLen && mx.getSyncState() === 'SYNCING') {
+      if (Notification.permission === 'granted') {
+        notify(invites.length - perviousInviteLen);
+      }
+
+      if (notificationSound) {
+        playSound();
+      }
+    }
+  }, [mx, invites, perviousInviteLen, notificationSound, notify, playSound]);
+
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    <audio ref={audioRef} style={{ display: 'none' }}>
+      <source src="../../../../public/sound/invite.ogg" type="audio/ogg" />
+    </audio>
+  );
+}
+
+function MessageNotifications() {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const notifRef = useRef<Notification>();
+  const unreadCacheRef = useRef<Map<string, UnreadInfo>>(new Map());
+  const mx = useMatrixClient();
+  const [showNotifications] = useSetting(settingsAtom, 'showNotifications');
+  const [notificationSound] = useSetting(settingsAtom, 'isNotificationSounds');
+
+  const navigate = useNavigate();
+  const notificationSelected = useInboxNotificationsSelected();
+  const selectedRoomId = useSelectedRoom();
+
+  const notify = useCallback(
+    ({
+      roomName,
+      roomAvatar,
+      username,
+    }: {
+      roomName: string;
+      roomAvatar?: string;
+      username: string;
+      roomId: string;
+      eventId: string;
+    }) => {
+      const noti = new window.Notification(roomName, {
+        icon: roomAvatar,
+        badge: roomAvatar,
+        body: `New inbox notification from ${username}`,
+        silent: true,
+      });
+
+      noti.onclick = () => {
+        if (!window.closed) navigate(getInboxNotificationsPath());
+        noti.close();
+        notifRef.current = undefined;
+      };
+
+      notifRef.current?.close();
+      notifRef.current = noti;
+    },
+    [navigate]
+  );
+
+  const playSound = useCallback(() => {
+    const audioElement = audioRef.current;
+    audioElement?.play();
+  }, []);
+
+  useEffect(() => {
+    const handleTimelineEvent: RoomEventHandlerMap[RoomEvent.Timeline] = (
+      mEvent,
+      room,
+      toStartOfTimeline,
+      removed,
+      data
+    ) => {
+      if (
+        mx.getSyncState() !== 'SYNCING' ||
+        selectedRoomId === room?.roomId ||
+        notificationSelected ||
+        !room ||
+        !data.liveEvent ||
+        room.isSpaceRoom() ||
+        !isNotificationEvent(mEvent) ||
+        getNotificationType(mx, room.roomId) === NotificationType.Mute
+      )
+        return;
+
+      const sender = mEvent.getSender();
+      const eventId = mEvent.getId();
+      if (!sender || !eventId || mEvent.getSender() === mx.getUserId()) return;
+      const unreadInfo = getUnreadInfo(room);
+      const cachedUnreadInfo = unreadCacheRef.current.get(room.roomId);
+      unreadCacheRef.current.set(room.roomId, unreadInfo);
+
+      if (
+        cachedUnreadInfo &&
+        unreadEqual(unreadInfoToUnread(cachedUnreadInfo), unreadInfoToUnread(unreadInfo))
+      ) {
+        return;
+      }
+
+      if (showNotifications && Notification.permission === 'granted') {
+        const avatarMxc =
+          room.getAvatarFallbackMember()?.getMxcAvatarUrl() ?? room.getMxcAvatarUrl();
+        notify({
+          roomName: room.name ?? 'Unknown',
+          roomAvatar: avatarMxc
+            ? mx.mxcUrlToHttp(avatarMxc, 96, 96, 'crop') ?? undefined
+            : undefined,
+          username: getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender,
+          roomId: room.roomId,
+          eventId,
+        });
+      }
+
+      if (notificationSound) {
+        playSound();
+      }
+    };
+    mx.on(RoomEvent.Timeline, handleTimelineEvent);
+    return () => {
+      mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
+    };
+  }, [
+    mx,
+    notificationSound,
+    notificationSelected,
+    showNotifications,
+    playSound,
+    notify,
+    selectedRoomId,
+  ]);
+
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    <audio ref={audioRef} style={{ display: 'none' }}>
+      <source src="../../../../public/sound/notification.ogg" type="audio/ogg" />
+    </audio>
+  );
+}
+
+type ClientNonUIFeaturesProps = {
+  children: ReactNode;
+};
+
+export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
+  return (
+    <>
+      <FaviconUpdater />
+      <InviteNotifications />
+      <MessageNotifications />
+      {children}
+    </>
+  );
+}