Add unverified session indicator in sidebar

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

src/app/organisms/navigation/SideBar.jsx

@@ -14,6 +14,7 @@ import {
 } from '../../../client/action/navigation';
 import { moveSpaceShortcut } from '../../../client/action/accountData';
 import { abbreviateNumber, getEventCords } from '../../../util/common';
+import { isCrossVerified } from '../../../util/matrixUtil';
 
 import Avatar from '../../atoms/avatar/Avatar';
 import NotificationBadge from '../../atoms/badge/NotificationBadge';
@@ -26,8 +27,12 @@ import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import AddPinIC from '../../../../public/res/ic/outlined/add-pin.svg';
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import InviteIC from '../../../../public/res/ic/outlined/invite.svg';
+import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
 
 import { useSelectedTab } from '../../hooks/useSelectedTab';
+import { useDeviceList } from '../../hooks/useDeviceList';
+
+import { tabText as settingTabText } from '../settings/Settings';
 
 function useNotificationUpdate() {
   const { notifications } = initMatrix;
@@ -85,6 +90,22 @@ function ProfileAvatarMenu() {
   );
 }
 
+function CrossSigninAlert() {
+  const deviceList = useDeviceList();
+  const unverified = deviceList?.filter((device) => !isCrossVerified(device.device_id));
+
+  if (!unverified?.length) return null;
+
+  return (
+    <SidebarAvatar
+      className="sidebar__cross-signin-alert"
+      tooltip={`${unverified.length} unverified sessions`}
+      onClick={() => openSettings(settingTabText.SECURITY)}
+      avatar={<Avatar iconSrc={ShieldUserIC} iconColor="var(--ic-danger-normal)" size="normal" />}
+    />
+  );
+}
+
 function FeaturedTab() {
   const { roomList, accountData, notifications } = initMatrix;
   const [selectedTab] = useSelectedTab();
@@ -358,6 +379,7 @@ function SideBar() {
               notificationBadge={<NotificationBadge alert content={totalInvites} />}
             />
           )}
+          <CrossSigninAlert />
           <ProfileAvatarMenu />
         </div>
       </div>

src/app/organisms/navigation/SideBar.scss

@@ -57,4 +57,21 @@
   width: 24px;
   height: 1px;
   background-color: var(--bg-surface-border);
+}
+
+.sidebar__cross-signin-alert .avatar-container {
+  box-shadow: var(--bs-danger-border);
+  animation-name: pushRight;
+  animation-duration: 400ms;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+@keyframes pushRight {
+  from {
+    transform: translateX(4px) scale(1);
+  }
+  to {
+    transform: translateX(0) scale(1);
+  }
 }

src/app/organisms/settings/Settings.jsx

@@ -167,16 +167,6 @@ function NotificationsSection() {
 function SecuritySection() {
   return (
     <div className="settings-security">
-      <div className="settings-security__card">
-        <MenuHeader>Session Info</MenuHeader>
-        <SettingTile
-          title={`Session ID: ${initMatrix.matrixClient.getDeviceId()}`}
-        />
-        <SettingTile
-          title={`Session key: ${initMatrix.matrixClient.getDeviceEd25519Key().match(/.{1,4}/g).join(' ')}`}
-          content={<Text variant="b3">Use this session ID-key combo to verify or manage this session.</Text>}
-        />
-      </div>
       <DeviceManage />
       <div className="settings-security__card">
         <MenuHeader>Encryption</MenuHeader>
@@ -247,7 +237,7 @@ function AboutSection() {
   );
 }
 
-const tabText = {
+export const tabText = {
   APPEARANCE: 'Appearance',
   NOTIFICATIONS: 'Notifications',
   SECURITY: 'Security',