Hide existing messages from ignored users (#2236)

* add ignored users hook

* remove messages from timeline for ignored users

src/app/features/room/RoomTimeline.tsx

@@ -117,6 +117,7 @@ import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -434,6 +435,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
   const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+
+  const ignoredUsersList = useIgnoredUsers();
+  const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
+
   const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
   const powerLevels = usePowerLevelsContext();
   const { canDoAction, canSendEvent, canSendStateEvent, getPowerLevel } =
@@ -1488,6 +1493,11 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
 
     if (!mEvent || !mEventId) return null;
 
+    const eventSender = mEvent.getSender();
+    if (eventSender && ignoredUsersSet.has(eventSender)) {
+      return null;
+    }
+
     if (!newDivider && readUptoEventIdRef.current) {
       newDivider = prevEvent?.getId() === readUptoEventIdRef.current;
     }
@@ -1498,9 +1508,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     const collapsed =
       isPrevRendered &&
       !dayDivider &&
-      (!newDivider || mEvent.getSender() === mx.getUserId()) &&
+      (!newDivider || eventSender === mx.getUserId()) &&
       prevEvent !== undefined &&
-      prevEvent.getSender() === mEvent.getSender() &&
+      prevEvent.getSender() === eventSender &&
       prevEvent.getType() === mEvent.getType() &&
       minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 2;
 
@@ -1519,7 +1529,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     isPrevRendered = !!eventJSX;
 
     const newDividerJSX =
-      newDivider && eventJSX && mEvent.getSender() !== mx.getUserId() ? (
+      newDivider && eventJSX && eventSender !== mx.getUserId() ? (
         <MessageBase space={messageSpacing}>
           <TimelineDivider style={{ color: color.Success.Main }} variant="Inherit">
             <Badge as="span" size="500" variant="Success" fill="Solid" radii="300">

src/app/features/settings/notifications/IgnoredUserList.tsx

@@ -1,17 +1,12 @@
-import React, { ChangeEventHandler, FormEventHandler, useCallback, useMemo, useState } from 'react';
+import React, { ChangeEventHandler, FormEventHandler, useCallback, useState } from 'react';
 import { Box, Button, Chip, Icon, IconButton, Icons, Input, Spinner, Text, config } from 'folds';
-import { useAccountData } from '../../../hooks/useAccountData';
-import { AccountDataEvent } from '../../../../types/matrix/accountData';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { isUserId } from '../../../utils/matrix';
-
+import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
-type IgnoredUserListContent = {
-  ignored_users?: Record<string, object>;
-};
 
 function IgnoreUserInput({ userList }: { userList: string[] }) {
   const mx = useMatrixClient();
@@ -129,12 +124,7 @@ function IgnoredUserChip({ userId, userList }: { userId: string; userList: strin
 }
 
 export function IgnoredUserList() {
-  const ignoredUserListEvt = useAccountData(AccountDataEvent.IgnoredUserList);
+  const ignoredUsers = useIgnoredUsers();
-  const ignoredUsers = useMemo(() => {
-    const ignoredUsersRecord =
-      ignoredUserListEvt?.getContent<IgnoredUserListContent>().ignored_users ?? {};
-    return Object.keys(ignoredUsersRecord);
-  }, [ignoredUserListEvt]);
 
   return (
     <Box direction="Column" gap="100">

src/app/hooks/useIgnoredUsers.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { useAccountData } from './useAccountData';
+import { AccountDataEvent } from '../../types/matrix/accountData';
+
+export type IgnoredUserListContent = {
+  ignored_users?: Record<string, object>;
+};
+
+export const useIgnoredUsers = (): string[] => {
+  const ignoredUserListEvt = useAccountData(AccountDataEvent.IgnoredUserList);
+  const ignoredUsers = useMemo(() => {
+    const ignoredUsersRecord =
+      ignoredUserListEvt?.getContent<IgnoredUserListContent>().ignored_users ?? {};
+    return Object.keys(ignoredUsersRecord);
+  }, [ignoredUserListEvt]);
+
+  return ignoredUsers;
+};