♿️(frontend) refocus reactions toolbar with shortcut when already open

Shortcut now opens it or moves focus to the first emoji button

src/frontend/src/features/reactions/components/ReactionsToggle.tsx

@@ -1,18 +1,36 @@
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiEmotionLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { REACTIONS_TOOLBAR_ID } from '../constants'
 import { useReactionsToolbar } from '../hooks/useReactionsToolbar'
+import { layoutStore } from '@/stores/layout'
+
+const focusReactionsToolbar = () => {
+  document
+    .getElementById(REACTIONS_TOOLBAR_ID)
+    ?.querySelector<HTMLElement>('button')
+    ?.focus()
+}
 
 export const ReactionsToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
 
   const { isOpen, toggle } = useReactionsToolbar()
 
+  const handleShortcut = useCallback(() => {
+    if (layoutStore.showReactionsToolbar) {
+      focusReactionsToolbar()
+    } else {
+      layoutStore.showReactionsToolbar = true
+    }
+  }, [])
+
   useRegisterKeyboardShortcut({
     id: 'reaction',
-    handler: toggle,
+    handler: handleShortcut,
   })
 
   return (

src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx

@@ -1,4 +1,5 @@
 import { FocusScope, useFocusManager } from '@react-aria/focus'
+import { REACTIONS_TOOLBAR_ID } from '../../constants'
 import { useReactionsToolbar } from '../../hooks/useReactionsToolbar'
 import { ReactionButton } from './ReactionButton'
 import { Emoji } from '../../types'
@@ -120,6 +121,7 @@ const KeyboardNavigation = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <div
+      id={REACTIONS_TOOLBAR_ID}
       role="toolbar"
       aria-label={t('toolbar')}
       onKeyDown={onKeyDown}

src/frontend/src/features/reactions/constants.ts

@@ -1,3 +1,4 @@
+export const REACTIONS_TOOLBAR_ID = 'reactions-toolbar'
 export const ANIMATION_DURATION = 3000
 export const ANIMATION_DISTANCE = 300
 export const FADE_OUT_THRESHOLD = 0.7