diff --git a/src/app/organisms/profile-viewer/ProfileViewer.jsx b/src/app/organisms/profile-viewer/ProfileViewer.jsx
index 6eb370d..fc33b6d 100644
--- a/src/app/organisms/profile-viewer/ProfileViewer.jsx
+++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx
@@ -20,11 +20,13 @@ import IconButton from '../../atoms/button/IconButton';
import Input from '../../atoms/input/Input';
import Avatar from '../../atoms/avatar/Avatar';
import Button from '../../atoms/button/Button';
+import { MenuItem } from '../../atoms/context-menu/ContextMenu';
import PowerLevelSelector from '../../molecules/power-level-selector/PowerLevelSelector';
import Dialog from '../../molecules/dialog/Dialog';
import SettingTile from '../../molecules/setting-tile/SettingTile';
import ShieldEmptyIC from '../../../../public/res/ic/outlined/shield-empty.svg';
+import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
@@ -86,6 +88,7 @@ ModerationTools.propTypes = {
function SessionInfo({ userId }) {
const [devices, setDevices] = useState(null);
+ const [isVisible, setIsVisible] = useState(false);
const mx = initMatrix.matrixClient;
useEffect(() => {
@@ -110,10 +113,11 @@ function SessionInfo({ userId }) {
}, [userId]);
function renderSessionChips() {
+ if (!isVisible) return null;
return (
- {devices === null && Loading sessions...}
- {devices?.length === 0 && No session found.}
+ {devices === null && Loading sessions...}
+ {devices?.length === 0 && No session found.}
{devices !== null && (devices.map((device) => (
-
+
+ {renderSessionChips()}
);
}
@@ -340,14 +347,9 @@ function ProfileViewer() {
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
- let [roomMember, username] = [null, null];
-
- if (roomId) {
- roomMember = room.getMember(userId);
- username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(userId);
- }
-
const renderProfile = () => {
+ const roomMember = room.getMember(userId);
+ const username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(userId);
const avatarMxc = roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId).avatarUrl;
const avatarUrl = (avatarMxc && avatarMxc !== 'null') ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop') : null;
@@ -417,7 +419,7 @@ function ProfileViewer() {
}
diff --git a/src/app/organisms/profile-viewer/ProfileViewer.scss b/src/app/organisms/profile-viewer/ProfileViewer.scss
index b8c4642..35119b9 100644
--- a/src/app/organisms/profile-viewer/ProfileViewer.scss
+++ b/src/app/organisms/profile-viewer/ProfileViewer.scss
@@ -16,7 +16,6 @@
&__user {
display: flex;
padding-bottom: var(--sp-normal);
- border-bottom: 1px solid var(--bg-surface-border);
&__info {
align-self: flex-end;
@@ -84,11 +83,18 @@
}
.session-info {
- & .setting-tile__title .text {
- color: var(--tc-surface-high);
- }
+ box-shadow: var(--bs-surface-border);
+ border-radius: var(--bo-radius);
+ overflow: hidden;
+
&__chips {
+ border-top: 1px solid var(--bg-surface-border);
+ padding: var(--sp-tight);
padding-top: var(--sp-ultra-tight);
+
+ & > .text {
+ margin-top: var(--sp-extra-tight);
+ }
& .chip {
margin-top: var(--sp-extra-tight);
@include dir.side(margin, 0, var(--sp-extra-tight));