Manage ignored users (#814)

* Add options to display/ignore usersId's

* Update string

* Hide search icon in encrypted rooms (#763)

* Fix styles

diff --git a/src/app/hooks/useAccountData.js b/src/app/hooks/useAccountData.js
index 01c973e708d13da0e688fd7007357f40ab5b2ce8..ed654d977c96c4340bdd89db5625604311c86c20 100644 (file)
--- a/src/app/hooks/useAccountData.js
+++ b/src/app/hooks/useAccountData.js
@@ -5,12 +5,12 @@ import initMatrix from '../../client/initMatrix';
 
 export function useAccountData(eventType) {
   const mx = initMatrix.matrixClient;
-  const [event, setEvent] = useState(mx.getAccountData(eventType)?.getContent());
+  const [event, setEvent] = useState(mx.getAccountData(eventType));
 
   useEffect(() => {
     const handleChange = (mEvent) => {
       if (mEvent.getType() !== eventType) return;
-      setEvent(mEvent.getContent());
+      setEvent(mEvent);
     };
     mx.on('accountData', handleChange);
     return () => {

diff --git a/src/app/molecules/global-notification/GlobalNotification.jsx b/src/app/molecules/global-notification/GlobalNotification.jsx
index a28687ebe8bd3cd2be4fdae00a5a55dac2e910f5..865582ce918234e825756e5bbb2352df199b0ddc 100644 (file)
--- a/src/app/molecules/global-notification/GlobalNotification.jsx
+++ b/src/app/molecules/global-notification/GlobalNotification.jsx
@@ -53,7 +53,7 @@ export function getTypeActions(type, highlightValue = false) {
 
 function useGlobalNotif() {
   const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules');
+  const pushRules = useAccountData('m.push_rules')?.getContent();
   const underride = pushRules?.global?.underride ?? [];
   const rulesToType = {
     [DM]: notifType.ON,

diff --git a/src/app/molecules/global-notification/IgnoreUserList.jsx b/src/app/molecules/global-notification/IgnoreUserList.jsx
new file mode 100644 (file)
index 0000000..87ee627
--- /dev/null
+++ b/src/app/molecules/global-notification/IgnoreUserList.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import './IgnoreUserList.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import * as roomActions from '../../../client/action/room';
+
+import Text from '../../atoms/text/Text';
+import Chip from '../../atoms/chip/Chip';
+import Input from '../../atoms/input/Input';
+import Button from '../../atoms/button/Button';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import SettingTile from '../setting-tile/SettingTile';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+import { useAccountData } from '../../hooks/useAccountData';
+
+function IgnoreUserList() {
+  useAccountData('m.ignored_user_list');
+  const ignoredUsers = initMatrix.matrixClient.getIgnoredUsers();
+
+  const handleSubmit = (evt) => {
+    evt.preventDefault();
+    const { ignoreInput } = evt.target.elements;
+    const value = ignoreInput.value.trim();
+    const userIds = value.split(' ').filter((v) => v.match(/^@\S+:\S+$/));
+    if (userIds.length === 0) return;
+    ignoreInput.value = '';
+    roomActions.ignore(userIds);
+  };
+
+  return (
+    <div className="ignore-user-list">
+      <MenuHeader>Ignored users</MenuHeader>
+      <SettingTile
+        title="Ignore user"
+        content={(
+          <div className="ignore-user-list__users">
+            <Text variant="b3">Ignore userId if you do not want to receive their messages or invites.</Text>
+            <form onSubmit={handleSubmit}>
+              <Input name="ignoreInput" required />
+              <Button variant="primary" type="submit">Ignore</Button>
+            </form>
+            {ignoredUsers.length > 0 && (
+              <div>
+                {ignoredUsers.map((uId) => (
+                  <Chip
+                    iconSrc={CrossIC}
+                    key={uId}
+                    text={uId}
+                    iconColor={CrossIC}
+                    onClick={() => roomActions.unignore([uId])}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      />
+    </div>
+  );
+}
+
+export default IgnoreUserList;

diff --git a/src/app/molecules/global-notification/IgnoreUserList.scss b/src/app/molecules/global-notification/IgnoreUserList.scss
new file mode 100644 (file)
index 0000000..9283155
--- /dev/null
+++ b/src/app/molecules/global-notification/IgnoreUserList.scss
@@ -0,0 +1,17 @@
+.ignore-user-list {
+  &__users {
+    & form,
+    & > div:last-child {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--sp-tight);
+    }
+
+    & form {
+      margin: var(--sp-extra-tight) 0 var(--sp-normal);
+      .input-container {
+        flex-grow: 1;
+      }
+    }
+  }
+}
\ No newline at end of file

diff --git a/src/app/molecules/global-notification/KeywordNotification.jsx b/src/app/molecules/global-notification/KeywordNotification.jsx
index c44ffc469a0a1bdfa1df1fc3200f36f1e44b2441..8484d41d16e07ffa7cf995aef100af67590fad84 100644 (file)
--- a/src/app/molecules/global-notification/KeywordNotification.jsx
+++ b/src/app/molecules/global-notification/KeywordNotification.jsx
@@ -29,7 +29,7 @@ const KEYWORD = 'keyword';
 
 function useKeywordNotif() {
   const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules');
+  const pushRules = useAccountData('m.push_rules')?.getContent();
   const override = pushRules?.global?.override ?? [];
   const content = pushRules?.global?.content ?? [];
 

diff --git a/src/app/molecules/global-notification/KeywordNotification.scss b/src/app/molecules/global-notification/KeywordNotification.scss
index a58700200a55c74f03f47e961dfe3b86820e97b4..4d1bfd482b735da9f52b8f52f1a3b389fae25d7c 100644 (file)
--- a/src/app/molecules/global-notification/KeywordNotification.scss
+++ b/src/app/molecules/global-notification/KeywordNotification.scss
@@ -3,11 +3,12 @@
     & form,
     & > div:last-child {
       display: flex;
+      flex-wrap: wrap;
       gap: var(--sp-tight);
     }
 
     & form {
-      margin: var(--sp-ultra-tight) 0 var(--sp-normal);
+      margin: var(--sp-extra-tight) 0 var(--sp-normal);
       .input-container {
         flex-grow: 1;
       }

diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx
index 849ba14bdce3fa188a85aeee709de6eb3431e5e2..46a6ba0e318c8ad6cbdc528c987bad7a2ccec5e0 100644 (file)
--- a/src/app/organisms/room/RoomViewHeader.jsx
+++ b/src/app/organisms/room/RoomViewHeader.jsx
@@ -33,9 +33,10 @@ function RoomViewHeader({ roomId }) {
   const [, forceUpdate] = useForceUpdate();
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
-  let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
-  avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
-  const roomName = mx.getRoom(roomId).name;
+  const room = mx.getRoom(roomId);
+  let avatarSrc = room.getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
+  avatarSrc = isDM ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
+  const roomName = room.name;
 
   const roomHeaderBtnRef = useRef(null);
   useEffect(() => {
@@ -93,7 +94,7 @@ function RoomViewHeader({ roomId }) {
         </TitleWrapper>
         <RawIcon src={ChevronBottomIC} />
       </button>
-      <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />
+      {mx.isRoomEncrypted(roomId) === false && <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />}
       <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton className="room-header__members-btn" onClick={() => toggleRoomSettings(tabText.MEMBERS)} tooltip="Members" src={UserIC} />
       <IconButton

diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index 5f69fdb7409c26eccf77b40102cbbe06c175563c..2e0f64bda510f239639d7b0f22f020e57e06b786 100644 (file)
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -27,6 +27,7 @@ import ExportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/Expor
 import { ImagePackUser, ImagePackGlobal } from '../../molecules/image-pack/ImagePack';
 import GlobalNotification from '../../molecules/global-notification/GlobalNotification';
 import KeywordNotification from '../../molecules/global-notification/KeywordNotification';
+import IgnoreUserList from '../../molecules/global-notification/IgnoreUserList';
 
 import ProfileEditor from '../profile-editor/ProfileEditor';
 import CrossSigning from './CrossSigning';
@@ -173,6 +174,7 @@ function NotificationsSection() {
       </div>
       <GlobalNotification />
       <KeywordNotification />
+      <IgnoreUserList />
     </>
   );
 }

diff --git a/src/app/organisms/settings/Settings.scss b/src/app/organisms/settings/Settings.scss
index aa4557009076160d118f09c468fb7f2bceb12cf7..a9ddd4755d7b161120f6b68e19df1f03b075cfa7 100644 (file)
--- a/src/app/organisms/settings/Settings.scss
+++ b/src/app/organisms/settings/Settings.scss
@@ -40,6 +40,7 @@
 .settings-notifications,
 .global-notification,
 .keyword-notification,
+.ignore-user-list,
 .settings-security__card,
 .settings-security .device-manage,
 .settings-about__card,