show unverified tab indicator on sidebar (#1862)

src/app/pages/client/SidebarNav.tsx

@@ -10,7 +10,15 @@ import {
   SidebarItemTooltip,
   SidebarItem,
 } from '../../components/sidebar';
-import { DirectTab, HomeTab, SpaceTabs, InboxTab, ExploreTab, UserTab } from './sidebar';
+import {
+  DirectTab,
+  HomeTab,
+  SpaceTabs,
+  InboxTab,
+  ExploreTab,
+  UserTab,
+  UnverifiedTab,
+} from './sidebar';
 import { openCreateRoom, openSearch } from '../../../client/action/navigation';
 
 export function SidebarNav() {
@@ -65,6 +73,8 @@ export function SidebarNav() {
                 </SidebarItemTooltip>
               </SidebarItem>
 
+              <UnverifiedTab />
+
               <InboxTab />
               <UserTab />
             </SidebarStack>

src/app/pages/client/sidebar/UnverifiedTab.css.ts

@@ -0,0 +1,24 @@
+import { keyframes, style } from '@vanilla-extract/css';
+import { color, toRem } from 'folds';
+
+const pushRight = keyframes({
+  from: {
+    transform: `translateX(${toRem(2)}) scale(1)`,
+  },
+  to: {
+    transform: 'translateX(0) scale(1)',
+  },
+});
+
+export const UnverifiedTab = style({
+  animationName: pushRight,
+  animationDuration: '400ms',
+  animationIterationCount: 30,
+  animationDirection: 'alternate',
+});
+
+export const UnverifiedAvatar = style({
+  backgroundColor: color.Critical.Container,
+  color: color.Critical.OnContainer,
+  borderColor: color.Critical.ContainerLine,
+});

src/app/pages/client/sidebar/UnverifiedTab.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Badge, color, Icon, Icons, Text } from 'folds';
+import { openSettings } from '../../../../client/action/navigation';
+import { isCrossVerified } from '../../../../util/matrixUtil';
+import {
+  SidebarAvatar,
+  SidebarItem,
+  SidebarItemBadge,
+  SidebarItemTooltip,
+} from '../../../components/sidebar';
+import { useDeviceList } from '../../../hooks/useDeviceList';
+import { tabText } from '../../../organisms/settings/Settings';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import * as css from './UnverifiedTab.css';
+
+export function UnverifiedTab() {
+  const mx = useMatrixClient();
+  const deviceList = useDeviceList();
+  console.log(deviceList);
+  const unverified = deviceList?.filter(
+    (device) => isCrossVerified(mx, device.device_id) === false
+  );
+  console.log(unverified);
+
+  if (!unverified?.length) return null;
+
+  return (
+    <SidebarItem className={css.UnverifiedTab}>
+      <SidebarItemTooltip tooltip="Unverified Sessions">
+        {(triggerRef) => (
+          <SidebarAvatar
+            className={css.UnverifiedAvatar}
+            as="button"
+            ref={triggerRef}
+            outlined
+            onClick={() => openSettings(tabText.SECURITY)}
+          >
+            <Icon style={{ color: color.Critical.Main }} src={Icons.ShieldUser} />
+          </SidebarAvatar>
+        )}
+      </SidebarItemTooltip>
+      <SidebarItemBadge hasCount>
+        <Badge variant="Critical" size="400" fill="Solid" radii="Pill" outlined={false}>
+          <Text as="span" size="L400">
+            {unverified.length}
+          </Text>
+        </Badge>
+      </SidebarItemBadge>
+    </SidebarItem>
+  );
+}

src/app/pages/client/sidebar/index.ts

@@ -4,3 +4,4 @@ export * from './SpaceTabs';
 export * from './InboxTab';
 export * from './ExploreTab';
 export * from './UserTab';
+export * from './UnverifiedTab';