Add ability to manage room history visibility

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/molecules/room-aliases/RoomAliases.jsx

@@ -12,8 +12,8 @@ import Button from '../../atoms/button/Button';
 import Input from '../../atoms/input/Input';
 import Checkbox from '../../atoms/button/Checkbox';
 import Toggle from '../../atoms/button/Toggle';
-import { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../../molecules/setting-tile/SettingTile';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import SettingTile from '../setting-tile/SettingTile';
 
 import { useStore } from '../../hooks/useStore';
 

src/app/molecules/room-history-visibility/RoomHistoryVisibility.jsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import './RoomHistoryVisibility.scss';
+
+import initMatrix from '../../../client/initMatrix';
+
+import Text from '../../atoms/text/Text';
+import RadioButton from '../../atoms/button/RadioButton';
+import { MenuItem } from '../../atoms/context-menu/ContextMenu';
+
+const visibility = {
+  WORLD_READABLE: 'world_readable',
+  SHARED: 'shared',
+  INVITED: 'invited',
+  JOINED: 'joined',
+};
+
+const items = [{
+  iconSrc: null,
+  text: 'World readable (anyone can read)',
+  type: visibility.WORLD_READABLE,
+}, {
+  iconSrc: null,
+  text: 'Member shared (since the point in time of selecting this option)',
+  type: visibility.SHARED,
+}, {
+  iconSrc: null,
+  text: 'Member invited (since they were invited)',
+  type: visibility.INVITED,
+}, {
+  iconSrc: null,
+  text: 'Member joined (since they joined)',
+  type: visibility.JOINED,
+}];
+
+function setHistoryVisibility(roomId, type) {
+  const mx = initMatrix.matrixClient;
+
+  return mx.sendStateEvent(
+    roomId, 'm.room.history_visibility',
+    {
+      history_visibility: type,
+    },
+  );
+}
+
+function useVisibility(roomId) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+
+  const [activeType, setActiveType] = useState(room.getHistoryVisibility());
+  useEffect(() => setActiveType(room.getHistoryVisibility()), [roomId]);
+
+  const setVisibility = useCallback((item) => {
+    if (item.type === activeType.type) return;
+    setActiveType(item.type);
+    setHistoryVisibility(roomId, item.type);
+  }, [activeType, roomId]);
+
+  return [activeType, setVisibility];
+}
+
+function RoomHistoryVisibility({ roomId }) {
+  const [activeType, setVisibility] = useVisibility(roomId);
+  const mx = initMatrix.matrixClient;
+  const userId = mx.getUserId();
+  const room = mx.getRoom(roomId);
+  const { currentState } = room;
+
+  const canChange = currentState.maySendStateEvent('m.room.history_visibility', userId);
+
+  return (
+    <div className="room-history-visibility">
+      {
+        items.map((item) => (
+          <MenuItem
+            variant={activeType === item.type ? 'positive' : 'surface'}
+            key={item.type}
+            iconSrc={item.iconSrc}
+            onClick={() => setVisibility(item)}
+            disabled={(!canChange)}
+          >
+            <Text varient="b1">
+              <span>{item.text}</span>
+              <RadioButton isActive={activeType === item.type} />
+            </Text>
+          </MenuItem>
+        ))
+      }
+      <Text variant="b3">Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.</Text>
+    </div>
+  );
+}
+
+RoomHistoryVisibility.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomHistoryVisibility;

src/app/molecules/room-history-visibility/RoomHistoryVisibility.scss

@@ -0,0 +1,25 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+@use '../../partials/text';
+
+.room-history-visibility {
+  & .context-menu__item .text {
+    margin: 0 !important;
+    @extend .cp-fx__item-one;
+    @extend .cp-fx__row--s-c;
+    
+    & span:first-child {
+      @extend .cp-fx__item-one;
+      @extend .cp-txt__ellipsis;
+    }
+    
+    & .radio-btn {
+      @include dir.side(margin, var(--sp-tight), 0);
+    }
+  }
+
+  & > .text {
+    margin: var(--sp-normal);
+    margin-top: var(--sp-ultra-tight);
+  }
+}