From 57f63bf89143ae965af06c5b6c9e87f93100e67d Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 28 Aug 2025 13:56:40 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20add=20visual=20pin=20i?=
 =?UTF-8?q?ndicator=20for=20pinned=20participant=20tracks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../Participants/ParticipantListItem.tsx      | 10 ++++++-
 .../controls/Participants/PinBadge.tsx        | 29 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/Participants/PinBadge.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
index e92eeb50..08237c2f 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
+++ b/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"
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/PinBadge.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/PinBadge.tsx
new file mode 100644
index 00000000..62d8acb3
--- /dev/null
+++ b/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>
+  )
+}