✨(frontend) create reusable shortcut tooltip component

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

Signed-off-by: Cyril <c.gromoff@gmail.com>

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>
+  )
+}

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
+        <KeyboardShortcutHint>{t('toolbarHint')}</KeyboardShortcutHint>
-          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>
       )}
     </div>
   )