💄(frontend) show OS-specific shortcut in participant tile hint

Participant tile hint uses formatShortcutLabel so Mac users see ⌘ not Ctrl.

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to
 - 💄(custom-background) add upload indicator with preview #1183
 - ♿️(backend) improve logo accessibility in recording email notification #1092
 - ♿️(summary) improve accessibility of transcription download link #1187
+- 💄(frontend) show OS-specific shortcut in participant tile hint #1193
 
 ### Fixed
 

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -31,6 +31,8 @@ import { FullScreenShareWarning } from './FullScreenShareWarning'
 import { ParticipantName } from './ParticipantName'
 import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useTranslation } from 'react-i18next'
+import { getShortcutDescriptorById } from '@/features/shortcuts/catalog'
+import { formatShortcutLabel } from '@/features/shortcuts/formatLabels'
 import { KeyboardShortcutHint } from './KeyboardShortcutHint'
 
 export function TrackRefContextIfNeeded(
@@ -237,7 +239,13 @@ export const ParticipantTile: (
           )}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
-      <KeyboardShortcutHint>{t('toolbarHint')}</KeyboardShortcutHint>
+      <KeyboardShortcutHint>
+        {t('toolbarHint', {
+          shortcut: formatShortcutLabel(
+            getShortcutDescriptorById('open-shortcuts')?.shortcut
+          ),
+        })}
+      </KeyboardShortcutHint>
     </div>
   )
 })

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

@@ -620,7 +620,7 @@
   },
   "participantTileFocus": {
     "containerLabel": "Optionen für {{name}}",
-    "toolbarHint": "Ctrl+Shift+/: Direkt auf die Tastenkürzel zugreifen.",
+    "toolbarHint": "{{shortcut}}: Direkt auf die Tastenkürzel zugreifen.",
     "pin": {
       "enable": "Anheften",
       "disable": "Lösen"

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

@@ -619,7 +619,7 @@
   },
   "participantTileFocus": {
     "containerLabel": "Options for {{name}}",
-    "toolbarHint": "Ctrl+Shift+/: access shortcuts directly.",
+    "toolbarHint": "{{shortcut}}: access shortcuts directly.",
     "pin": {
       "enable": "Pin",
       "disable": "Unpin"

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

@@ -619,7 +619,7 @@
   },
   "participantTileFocus": {
     "containerLabel": "Options pour {{name}}",
-    "toolbarHint": "Ctrl+Shift+/ : accéder directement aux raccourcis.",
+    "toolbarHint": "{{shortcut}} : accéder directement aux raccourcis.",
     "pin": {
       "enable": "Épingler",
       "disable": "Annuler l'épinglage"

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

@@ -619,7 +619,7 @@
   },
   "participantTileFocus": {
     "containerLabel": "Opties voor {{name}}",
-    "toolbarHint": "Ctrl+Shift+/: direct toegang tot de sneltoetsen.",
+    "toolbarHint": "{{shortcut}}: direct toegang tot de sneltoetsen.",
     "pin": {
       "enable": "Pinnen",
       "disable": "Losmaken"