From 9bdc68f9c9ba22770488caacccc5a4b7ef254959 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 15 Dec 2025 04:30:24 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20create=20reusable=20short?=
 =?UTF-8?q?cut=20tooltip=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

extracted tooltip into a component to unify style and ease reuse across ui

Signed-off-by: Cyril <c.gromoff@gmail.com>
---
 .../components/KeyboardShortcutHint.tsx       | 32 +++++++++++++++++++
 .../livekit/components/ParticipantTile.tsx    | 18 ++---------
 2 files changed, 34 insertions(+), 16 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx b/src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx
new file mode 100644
index 00000000..50d4e075
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx
@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react'
+import { css } from '@/styled-system/css'
+
+export interface KeyboardShortcutHintProps {
+  children: ReactNode
+}
+
+/**
+ * Small reusable bubble used to display and announce keyboard shortcuts,
+ * typically when an element receives keyboard focus.
+ */
+export const KeyboardShortcutHint: React.FC<KeyboardShortcutHintProps> = ({
+  children,
+}) => {
+  return (
+    <div
+      className={css({
+        position: 'absolute',
+        top: '0.75rem',
+        right: '0.75rem',
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        color: 'white',
+        borderRadius: 'calc(var(--lk-border-radius) / 2)',
+        paddingInline: '0.5rem',
+        paddingBlock: '0.1rem',
+        fontSize: '0.875rem',
+      })}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index f37d0a2c..ea00dd77 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
@@ -31,7 +31,7 @@ import { FullScreenShareWarning } from './FullScreenShareWarning'
 import { ParticipantName } from './ParticipantName'
 import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useTranslation } from 'react-i18next'
-import { css } from '@/styled-system/css'
+import { KeyboardShortcutHint } from './KeyboardShortcutHint'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -228,21 +228,7 @@ export const ParticipantTile: (
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
       {hasKeyboardFocus && (
-        <div
-          className={css({
-            position: 'absolute',
-            top: '0.75rem',
-            right: '0.75rem',
-            backgroundColor: 'rgba(0,0,0,0.5)',
-            color: 'white',
-            borderRadius: 'calc(var(--lk-border-radius) / 2)',
-            paddingInline: '0.5rem',
-            paddingBlock: '0.1rem',
-            fontSize: '0.875rem',
-          })}
-        >
-          {t('toolbarHint')}
-        </div>
+        <KeyboardShortcutHint>{t('toolbarHint')}</KeyboardShortcutHint>
       )}
     </div>
   )