💄(frontend) add visual pin indicator for pinned participant tracks

Introduce pin icon to visually notify users when a participant has
their track pinned in the interface.

Provides clear visual feedback for pin status, helping users understand
which participants are currently highlighted or prioritized in the
meeting view.

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx

@@ -20,6 +20,7 @@ import { MuteAlertDialog } from '../../MuteAlertDialog'
 import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
 import { ParticipantMenuButton } from '../../ParticipantMenu/ParticipantMenuButton'
+import { PinBadge } from './PinBadge'
 
 type MicIndicatorProps = {
   participant: Participant
@@ -106,7 +107,14 @@ export const ParticipantListItem = ({
       })}
     >
       <HStack>
-        <Avatar name={name} bgColor={getParticipantColor(participant)} />
+        <div
+          className={css({
+            position: 'relative',
+          })}
+        >
+          <Avatar name={name} bgColor={getParticipantColor(participant)} />
+          <PinBadge participant={participant} />
+        </div>
         <VStack gap={0} alignItems="start">
           <Text
             variant="sm"

src/frontend/src/features/rooms/livekit/components/controls/Participants/PinBadge.tsx

@@ -0,0 +1,29 @@
+import { useFocusToggleParticipant } from '@/features/rooms/livekit/hooks/useFocusToggleParticipant'
+import { Participant } from 'livekit-client'
+import { RiPushpin2Fill } from '@remixicon/react'
+import { css } from '@/styled-system/css'
+
+export const PinBadge = ({ participant }: { participant: Participant }) => {
+  const { inFocus } = useFocusToggleParticipant(participant)
+
+  if (!inFocus) return
+
+  return (
+    <div
+      className={css({
+        height: '18px',
+        width: '18px',
+        borderRadius: '100%',
+        background: 'white',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        bottom: '-2px',
+        right: '-4px',
+      })}
+    >
+      <RiPushpin2Fill size={14} aria-hidden />
+    </div>
+  )
+}