wip entry

src/frontend/src/features/notifications/components/WaitingParticipantNotification.tsx

@@ -12,19 +12,105 @@ import { useWaitingParticipants } from '@/features/rooms/hooks/useWaitingPartici
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useNotificationSound } from '../hooks/useSoundNotification'
 import { NotificationType } from '@/features/notifications'
-import { EncryptionBadge } from '@/features/encryption'
+import { EncryptionBadge, EncryptionIdentityDialog } from '@/features/encryption'
-import { useParticipantTrustLevel } from '@/features/encryption/useParticipantTrustLevel'
+import { useParticipantTrustLevel, formatFingerprint } from '@/features/encryption/useParticipantTrustLevel'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
 import { isEncryptedRoom } from '@/features/rooms/api/ApiRoom'
 
-const WaitingBadge = ({ participant }: { participant: WaitingParticipant }) => {
+const WaitingParticipantIdentity = ({ participant }: { participant: WaitingParticipant }) => {
+  const { t: tBadge } = useTranslation('rooms', { keyPrefix: 'encryption.badge' })
   const roomData = useRoomData()
+  const [isIdentityOpen, setIsIdentityOpen] = useState(false)
   const attrs = {
     is_authenticated: participant.is_authenticated ? 'true' : 'false',
     suite_user_id: participant.suite_user_id || '',
   }
-  const { trustLevel } = useParticipantTrustLevel(attrs, roomData?.encryption_mode)
+  const { trustLevel, fingerprintStatus, fingerprint } = useParticipantTrustLevel(attrs, roomData?.encryption_mode)
-  return <EncryptionBadge isEncrypted={true} trustLevel={trustLevel} />
+  const badgeTooltip = tBadge(trustLevel)
+
+  return (
+    <>
+      <VStack gap="0" alignItems="start">
+        <Button
+          variant="greyscale"
+          size="sm"
+          tooltip={badgeTooltip}
+          aria-label={badgeTooltip}
+          onPress={() => setIsIdentityOpen(true)}
+          className={css({
+            padding: '0.1rem 0.25rem !important',
+            minWidth: 'auto !important',
+            height: 'auto !important',
+            gap: '0.15rem !important',
+            borderRadius: '0.25rem !important',
+            backgroundColor: 'transparent !important',
+            color: 'white !important',
+            cursor: 'pointer',
+            '&[data-hovered]': {
+              backgroundColor: 'rgba(255, 255, 255, 0.15) !important',
+            },
+          })}
+        >
+          <EncryptionBadge isEncrypted={true} trustLevel={trustLevel} />
+          <Text
+            variant="sm"
+            margin={false}
+            className={css({
+              maxWidth: '8rem',
+              wordBreak: 'break-word',
+              overflowWrap: 'break-word',
+              whiteSpace: 'normal',
+            })}
+          >
+            {participant.username}
+          </Text>
+        </Button>
+        {fingerprint && (
+          <Text
+            variant="sm"
+            margin={false}
+            className={css({
+              fontFamily: 'monospace',
+              fontSize: '0.6rem',
+              color: 'greyscale.100',
+              letterSpacing: '0.03em',
+              paddingLeft: '0.25rem',
+            })}
+          >
+            {formatFingerprint(fingerprint)}
+          </Text>
+        )}
+        <Text
+          variant="sm"
+          margin={false}
+          className={css({
+            fontSize: '0.7rem',
+            color: 'greyscale.200',
+            paddingLeft: '0.25rem',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            maxWidth: '10rem',
+          })}
+        >
+          {participant.is_authenticated && participant.email
+            ? participant.email
+            : tBadge('anonymous')}
+        </Text>
+      </VStack>
+      <EncryptionIdentityDialog
+        isOpen={isIdentityOpen}
+        onOpenChange={setIsIdentityOpen}
+        participantName={participant.username}
+        participantEmail={participant.email}
+        suiteUserId={participant.suite_user_id}
+        isAuthenticated={participant.is_authenticated}
+        encryptionMode={roomData?.encryption_mode}
+        preloadedFingerprint={fingerprint}
+        preloadedFingerprintStatus={fingerprintStatus}
+      />
+    </>
+  )
 }
 
 export const NOTIFICATION_DISPLAY_DURATION = 10000
@@ -123,19 +209,22 @@ export const WaitingParticipantNotification = () => {
                 context="list"
                 notification
               />
-              {encrypted && <WaitingBadge participant={waitingParticipants[0]} />}
+              {encrypted ? (
-              <Text
+                <WaitingParticipantIdentity participant={waitingParticipants[0]} />
-                variant="sm"
+              ) : (
-                margin={false}
+                <Text
-                className={css({
+                  variant="sm"
-                  maxWidth: '10rem',
+                  margin={false}
-                  wordBreak: 'break-word',
+                  className={css({
-                  overflowWrap: 'break-word',
+                    maxWidth: '10rem',
-                  whiteSpace: 'normal',
+                    wordBreak: 'break-word',
-                })}
+                    overflowWrap: 'break-word',
-              >
+                    whiteSpace: 'normal',
-                {waitingParticipants[0].username}
+                  })}
-              </Text>
+                >
+                  {waitingParticipants[0].username}
+                </Text>
+              )}
             </HStack>
             <HStack gap="0.25rem" marginLeft="auto">
               <Button