✨(frontend) introduce an "unauthenticated" participant badge

Add a visual badge on participants who are not authenticated, so it
is immediately clear who could be an anonymous participant. This is
a small but explicit security signal in the participant list.

Beyond that, the badge also plays a functional role: since only
authenticated participants can be promoted or demoted, the badge
helps users see at a glance who is eligible for a role change.

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 - ✨(summary) report exception type in failure analytics
 - ✨(frontend) add configurable documentation menu item
 - ✨(frontend) allow promoting authenticated participants
+- ✨(frontend) introduce an "unauthenticated" participant badge
 
 ### Changed
 

src/frontend/src/features/participants/components/ParticipantRow.tsx

@@ -24,6 +24,7 @@ import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
 import { ParticipantMenuButton } from './menu/ParticipantMenuButton'
 import { PinBadge } from './PinBadge'
+import { UnauthenticatedBadge } from './UnauthenticatedBadge'
 import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
 
 type MicIndicatorProps = {
@@ -118,6 +119,7 @@ export const ParticipantRow = ({ participant }: ParticipantListItemProps) => {
         >
           <Avatar name={name} bgColor={getParticipantColor(participant)} />
           <PinBadge participant={participant} />
+          <UnauthenticatedBadge participant={participant} />
         </div>
         <VStack gap={0} alignItems="start">
           <Text

src/frontend/src/features/participants/components/UnauthenticatedBadge.tsx

@@ -0,0 +1,43 @@
+import { Participant } from 'livekit-client'
+import { css } from '@/styled-system/css'
+import { useParticipantAttribute } from '@livekit/components-react'
+import { RiErrorWarningFill } from '@remixicon/react'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
+import { useTranslation } from 'react-i18next'
+
+export const UnauthenticatedBadge = ({
+  participant,
+}: {
+  participant: Participant
+}) => {
+  const { t } = useTranslation('rooms', {
+    keyPrefix: 'participants.unauthenticated',
+  })
+  const is_authenticated = useParticipantAttribute('is_authenticated', {
+    participant,
+  })
+
+  if (is_authenticated == 'true') return
+
+  return (
+    <div
+      className={css({
+        height: '18px',
+        width: '18px',
+        borderRadius: '100%',
+        background: 'orange.200',
+        color: 'orange.800',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        bottom: '-2px',
+        right: '-4px',
+      })}
+    >
+      <VisualOnlyTooltip tooltip={t('badge')}>
+        <RiErrorWarningFill size={14} aria-hidden />
+      </VisualOnlyTooltip>
+    </div>
+  )
+}

src/frontend/src/locales/de/rooms.json

@@ -590,6 +590,9 @@
       "open": "{{name}}-Liste öffnen",
       "close": "{{name}}-Liste schließen"
     },
+    "unauthenticated": {
+      "badge": "Nicht authentifizierter Benutzer"
+    },
     "muteYourself": "Mikrofon ausschalten",
     "muteParticipant": "{{name}}’s Mikrofon ausschalten",
     "muteParticipantAlert": {

src/frontend/src/locales/en/rooms.json

@@ -589,6 +589,9 @@
       "open": "Open {{name}} list",
       "close": "Close {{name}} list"
     },
+    "unauthenticated": {
+      "badge": "User is not authenticated"
+    },
     "muteYourself": "Close your mic",
     "muteParticipant": "Close the mic of {{name}}",
     "muteParticipantAlert": {

src/frontend/src/locales/fr/rooms.json

@@ -589,6 +589,9 @@
       "open": "Ouvrir la liste {{name}}",
       "close": "Fermer la liste {{name}}"
     },
+    "unauthenticated": {
+      "badge": "Utilisateur non authentifié"
+    },
     "muteYourself": "Couper votre micro",
     "muteParticipant": "Couper le micro de {{name}}",
     "muteParticipantAlert": {

src/frontend/src/locales/nl/rooms.json

@@ -589,6 +589,9 @@
       "open": "Open {{name}} lijst",
       "close": "Sluit {{name}} lijst"
     },
+    "unauthenticated": {
+      "badge": "Niet authentifizierter Benutzer"
+    },
     "muteYourself": "Uw microfoon dempen",
     "muteParticipant": "Demp de microfoon van {{name}}",
     "muteParticipantAlert": {