fix: gamepad navigation from search to account dropdown on Library page

Author: iabubakardev

src/frontend/components/UI/AccountDropdown/index.tsx

@@ -46,11 +46,14 @@ const WalletDropdown: React.FC = observer(() => {
   const showMetaMaskExtensionLinks =
     walletState.isConnected &&
     walletState.provider === PROVIDERS.METAMASK_EXTENSION
+  const [opened, setOpened] = React.useState(false)
 
   return (
     <Menu
       position="bottom-end"
       trigger="hover"
+      opened={opened}
+      onChange={setOpened}
       zIndex={100001}
       classNames={{
         dropdown: styles.menuDropdown,
@@ -64,6 +67,7 @@ const WalletDropdown: React.FC = observer(() => {
             onClick={() => {
               console.log('wallet clicked')
             }}
+            onFocus={() => setOpened(true)}
           />
         </div>
       </Menu.Target>

src/frontend/components/UI/TopNavBar/index.tsx

@@ -58,10 +58,33 @@ const TopNavBar = observer(() => {
           }
         }
       }
+
+      // Right arrow navigation on /library page
+      if (e.key === 'ArrowRight' && pathname === '/library') {
+        const activeEl = document.activeElement as HTMLElement | null
+
+        // From MetaMask button -> Account dropdown
+        if (activeEl?.closest('#topbarMetaMaskButton')) {
+          const accountBtn = document.getElementById('accountWalletContainer')
+          if (accountBtn) {
+            accountBtn.focus()
+            e.preventDefault()
+            e.stopPropagation()
+          }
+          return
+        }
+
+        // From Account dropdown -> stay there
+        if (activeEl?.closest('#accountWalletContainer')) {
+          e.preventDefault()
+          e.stopPropagation()
+          return
+        }
+      }
     }
     nav.addEventListener('keydown', onKeyDown)
     return () => nav.removeEventListener('keydown', onKeyDown)
-  }, [])
+  }, [pathname])
 
   function getStoreTextStyle(viewURL: string) {
     const { currentUrl } = webviewNavigationStore

src/frontend/components/UI/Wallet/index.tsx

@@ -8,6 +8,7 @@ import walletState from '../../../state/WalletState'
 
 interface WalletProps {
   onClick: () => void
+  onFocus?: () => void
 }
 
 const WalletProviderIcons: Record<PROVIDERS, ReactNode> = {
@@ -23,6 +24,7 @@ const Wallet: React.FC<WalletProps> = observer((props) => {
   return (
     <button
       onClick={props.onClick}
+      onFocus={props.onFocus}
       className={styles.walletButton}
       id="accountWalletContainer"
     >