Show all keybinds mapped to a key in keyboard view (#182)

WeirdRubberDuck · alexanderbock · web-flow · commit a22ca5269d87 · 2025-07-21T16:31:17.000+02:00
* Make the keybinds keyboard view show all mapped keybinds

And show the keybind in the view

* Make table text selectable and match style of other similar data table

* Use layout to make only the list of actions grow when there are multiple ones

* Fix alignment issue for multiple tables

* Make keyboard scrollable instead of entire window

* Fix some widths and margins

* Tiny alignment fix

* Apply suggestions from code review

Co-authored-by: Alexander Bock &lt;mail@alexanderbock.eu&gt;

---------

Co-authored-by: Alexander Bock &lt;mail@alexanderbock.eu&gt;
diff --git a/src/panels/KeybindsPanel/FullKeyboard/FullKeyboard.tsx b/src/panels/KeybindsPanel/FullKeyboard/FullKeyboard.tsx
@@ -1,8 +1,8 @@
 import Keyboard, { KeyboardButtonTheme } from 'react-simple-keyboard';
-import { Flex, Stack } from '@mantine/core';
+import { Flex, ScrollArea, Stack } from '@mantine/core';
 
 import { useAppSelector } from '@/redux/hooks';
-import { Action } from '@/types/types';
+import { KeybindInfoType } from '@/types/types';
 
 import {
   ArrowsLayout,
@@ -24,7 +24,7 @@ import 'react-simple-keyboard/build/css/index.css';
 import './FullKeyboard.css';
 
 interface Props {
-  setSelectedActions: (action: Action[]) => void;
+  setSelectedActions: (action: KeybindInfoType[]) => void;
   setActiveModifiers: (modifiers: string[]) => void;
   activeModifiers: string[];
   selectedKey: string;
@@ -51,19 +51,30 @@ export function FullKeyboard({
     }
   }
 
-  function getActionsForKey(key: string): Action[] {
+  function getActionsForKey(key: string): KeybindInfoType[] {
     // Find all action identifiers matching the given key and current modifiers
+    // If no modifiers are active, it will match all keybinds with the given key
     const currentKeybinds = keybinds.filter(
       (keybind) =>
         keybind.key &&
-        arraysEqual(activeModifiers, keybind.modifiers) &&
+        (activeModifiers.length > 0
+          ? arraysEqual(activeModifiers, keybind.modifiers)
+          : true) &&
         equals(keybind.key, key)
     );
 
     // Find the matching actions for the current keybind
-    const currentActions = currentKeybinds.map((keybind) =>
-      actions.find((actions) => actions.identifier === keybind.action)
-    );
+    const currentActions = currentKeybinds.map((keybind) => {
+      const action = actions.find((actions) => actions.identifier === keybind.action);
+      if (!action) {
+        return undefined; // If no action is found, return undefined
+      }
+      // Combine the keybind and action data into one object
+      return {
+        ...keybind,
+        ...action
+      };
+    });
     // Remove the undefined items that were created from false matches
     return currentActions.filter((action) => action !== undefined);
   }
@@ -129,48 +140,50 @@ export function FullKeyboard({
   }
 
   return (
-    <Flex className={'simple-keyboard-background'} my={'lg'}>
-      <Keyboard
-        baseClass={'simple-keyboard-main'}
-        layoutName={'default'}
-        buttonTheme={buttonHighlights()}
-        layout={{ default: KeyboardLayout }}
-        display={KeyboardDisplayNames}
-        onKeyPress={onKeyPress}
-        {...commonKeyboardOptions}
-      />
-      <Stack justify={'space-between'}>
-        <Keyboard
-          baseClass={'simple-keyboard-control'}
-          buttonTheme={buttonHighlights()}
-          layout={{ default: ControlPadLayout }}
-          onKeyPress={onKeyPress}
-          {...commonKeyboardOptions}
-        />
-        <Keyboard
-          baseClass={'simple-keyboard-arrows'}
-          buttonTheme={buttonHighlights()}
-          layout={{ default: ArrowsLayout }}
-          onKeyPress={onKeyPress}
-          {...commonKeyboardOptions}
-        />
-      </Stack>
-      <Flex align={'flex-end'}>
-        <Keyboard
-          baseClass={'simple-keyboard-numpad'}
-          buttonTheme={buttonHighlights()}
-          onKeyPress={onKeyPress}
-          layout={{ default: NumpadLayout }}
-          {...commonKeyboardOptions}
-        />
+    <ScrollArea>
+      <Flex className={'simple-keyboard-background'} my={'xs'}>
         <Keyboard
-          baseClass={'simple-keyboard-numpadEnd'}
+          baseClass={'simple-keyboard-main'}
+          layoutName={'default'}
           buttonTheme={buttonHighlights()}
-          layout={{ default: NumpadEndLayout }}
+          layout={{ default: KeyboardLayout }}
+          display={KeyboardDisplayNames}
           onKeyPress={onKeyPress}
           {...commonKeyboardOptions}
         />
+        <Stack justify={'space-between'}>
+          <Keyboard
+            baseClass={'simple-keyboard-control'}
+            buttonTheme={buttonHighlights()}
+            layout={{ default: ControlPadLayout }}
+            onKeyPress={onKeyPress}
+            {...commonKeyboardOptions}
+          />
+          <Keyboard
+            baseClass={'simple-keyboard-arrows'}
+            buttonTheme={buttonHighlights()}
+            layout={{ default: ArrowsLayout }}
+            onKeyPress={onKeyPress}
+            {...commonKeyboardOptions}
+          />
+        </Stack>
+        <Flex align={'flex-end'}>
+          <Keyboard
+            baseClass={'simple-keyboard-numpad'}
+            buttonTheme={buttonHighlights()}
+            onKeyPress={onKeyPress}
+            layout={{ default: NumpadLayout }}
+            {...commonKeyboardOptions}
+          />
+          <Keyboard
+            baseClass={'simple-keyboard-numpadEnd'}
+            buttonTheme={buttonHighlights()}
+            layout={{ default: NumpadEndLayout }}
+            onKeyPress={onKeyPress}
+            {...commonKeyboardOptions}
+          />
+        </Flex>
       </Flex>
-    </Flex>
+    </ScrollArea>
   );
 }
diff --git a/src/panels/KeybindsPanel/KeybindInfo.tsx b/src/panels/KeybindsPanel/KeybindInfo.tsx
@@ -2,37 +2,55 @@ import { useTranslation } from 'react-i18next';
 import { Badge, Code, Group, Paper, Table, Text } from '@mantine/core';
 
 import { CopyToClipboardButton } from '@/components/CopyToClipboardButton/CopyToClipboardButton';
-import { Action } from '@/types/types';
+import styles from '@/theme/global.module.css';
+import { KeybindInfoType } from '@/types/types';
+
+import { KeybindButtons } from './KeybindButtons';
 
 interface Props {
-  action: Action;
+  action: KeybindInfoType;
 }
 
 export function KeybindInfo({ action }: Props) {
   const { t } = useTranslation('panel-keybinds', { keyPrefix: 'keybind-info' });
 
   return (
     <Paper key={action.identifier} p={'sm'}>
-      <Text ml={'xs'} mb={2} fw={'bold'}>
-        {action.name}
-      </Text>
+      <Group justify={'space-between'} align={'center'} mb={'xs'} ml={'xs'}>
+        <Text mb={2} fw={'bold'} className={styles.selectable}>
+          {action.name}
+        </Text>
+        <KeybindButtons selectedKey={action.key} modifiers={action.modifiers} />
+      </Group>
       <Table
         data={{
           body: [
-            [`${t('info')}:`, action.documentation],
             [
-              `${t('is-local.title')}:`,
+              <Text size={'sm'}>{t('info')}:</Text>,
+              // Using a custom, large, width for the longest text to make the
+              // table look better, and multiple stacked tables align better
+              <Text size={'sm'} className={styles.selectable} miw={'300px'}>
+                {action.documentation}
+              </Text>
+            ],
+            [
+              <Text size={'sm'}>{t('is-local.title')}:</Text>,
               action.isLocal ? (
                 <Badge variant={'filled'}>{t('is-local.yes')}</Badge>
               ) : (
                 <Badge variant={'outline'}>{t('is-local.no')}</Badge>
               )
             ],
-            [`${t('gui-path')}:`, <Code>{action.guiPath}</Code>],
             [
-              `${t('identifier')}:`,
+              <Text size={'sm'}>{t('gui-path')}:</Text>,
+              <Code className={styles.selectable}>{action.guiPath}</Code>
+            ],
+            [
+              <Text size={'sm'}>{t('identifier')}:</Text>,
               <Group gap={'xs'} wrap={'nowrap'}>
-                <Code style={{ wordBreak: 'break-word' }}>{action.identifier}</Code>
+                <Code className={styles.selectable} style={{ wordBreak: 'break-word' }}>
+                  {action.identifier}
+                </Code>
                 <CopyToClipboardButton value={action.identifier} />
               </Group>
             ]
diff --git a/src/panels/KeybindsPanel/KeybindsPanel.tsx b/src/panels/KeybindsPanel/KeybindsPanel.tsx
@@ -13,17 +13,21 @@ export function KeybindsPanel() {
   const { height: windowHeight } = useWindowSize();
   const { ref, height: tabsHeight } = useElementSize();
 
+  // The size of the tabs list is not completely correct for some reason (likely the
+  // padding in the panel), so adjust the height so there is no overflow.
+  const panelHeight = windowHeight - tabsHeight - 20;
+
   return (
     <Tabs defaultValue={'keyboardLayout'}>
       <Tabs.List ref={ref}>
         <Tabs.Tab value={'keyboardLayout'}>{t('keyboard-view-tab-title')}</Tabs.Tab>
         <Tabs.Tab value={'listLayout'}>{t('list-view-tab-title')}</Tabs.Tab>
       </Tabs.List>
 
-      <Tabs.Panel value={'keyboardLayout'}>
+      <Tabs.Panel value={'keyboardLayout'} h={panelHeight}>
         <KeyboardLayout />
       </Tabs.Panel>
-      <Tabs.Panel value={'listLayout'} h={windowHeight - tabsHeight}>
+      <Tabs.Panel value={'listLayout'} h={panelHeight}>
         <ListLayout />
       </Tabs.Panel>
     </Tabs>
diff --git a/src/panels/KeybindsPanel/KeyboardLayout.tsx b/src/panels/KeybindsPanel/KeyboardLayout.tsx
@@ -1,51 +1,69 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Container, Divider, Grid, Group, Stack, Text, Title } from '@mantine/core';
+import { Container, Divider, Group, Stack, Text, Title } from '@mantine/core';
 
-import { Action } from '@/types/types';
+import { Layout } from '@/components/Layout/Layout';
+import { KeybindInfoType } from '@/types/types';
 
 import { FullKeyboard } from './FullKeyboard/FullKeyboard';
 import { KeybindButtons } from './KeybindButtons';
 import { KeybindInfo } from './KeybindInfo';
 
 export function KeyboardLayout() {
-  const [selectedActions, setSelectedActions] = useState<Action[]>([]);
+  const [selectedActions, setSelectedActions] = useState<KeybindInfoType[]>([]);
   const [activeModifiers, setActiveModifiers] = useState<string[]>([]);
   const [selectedKey, setSelectedKey] = useState<string>('');
 
   const { t } = useTranslation('panel-keybinds', { keyPrefix: 'keyboard-layout' });
 
   const hasSelectedKeys = selectedKey !== '' || activeModifiers.length > 0;
   return (
-    <Container maw={'none'}>
-      <FullKeyboard
-        setSelectedActions={setSelectedActions}
-        setActiveModifiers={setActiveModifiers}
-        setSelectedKey={setSelectedKey}
-        selectedKey={selectedKey}
-        activeModifiers={activeModifiers}
-      />
-      <Group align={'top'}>
-        <Stack>
-          <Title order={2}>{t('selected-keybind-title')}:</Title>
-          <KeybindButtons selectedKey={selectedKey} modifiers={activeModifiers} />
-        </Stack>
-        <Divider orientation={'vertical'} mx={'xs'} />
-        <Stack flex={1}>
-          <Title order={2}>{t('mapped-actions-title')}:</Title>
-          {selectedActions.length > 0 ? (
-            <Grid mx={'xs'}>
-              {selectedActions.map((selectedAction) => (
-                <KeybindInfo key={selectedAction.identifier} action={selectedAction} />
-              ))}
-            </Grid>
-          ) : (
-            <Text>
-              {hasSelectedKeys ? t('no-mapped-action-text') : t('no-key-selected-text')}
-            </Text>
-          )}
-        </Stack>
-      </Group>
+    <Container maw={'none'} h={'100%'}>
+      <Layout>
+        <Layout.FixedSection>
+          <FullKeyboard
+            setSelectedActions={setSelectedActions}
+            setActiveModifiers={setActiveModifiers}
+            setSelectedKey={setSelectedKey}
+            selectedKey={selectedKey}
+            activeModifiers={activeModifiers}
+          />
+        </Layout.FixedSection>
+
+        <Layout.GrowingSection>
+          <Group align={'top'} mt={'xs'}>
+            <Stack>
+              <Title order={2}>{t('selected-keybind-title')}:</Title>
+              <KeybindButtons selectedKey={selectedKey} modifiers={activeModifiers} />
+            </Stack>
+            <Divider orientation={'vertical'} mx={'xs'} />
+            <Stack flex={1} pr={'xs'}>
+              <Group justify={'space-between'} align={'center'}>
+                <Title order={2}>{t('mapped-actions-title')} :</Title>
+                <Text c={'dimmed'} size={'lg'}>
+                  ({selectedActions.length})
+                </Text>
+              </Group>
+              {selectedActions.length > 0 ? (
+                <Stack>
+                  {selectedActions.map((selectedAction) => (
+                    <KeybindInfo
+                      key={selectedAction.identifier}
+                      action={selectedAction}
+                    />
+                  ))}
+                </Stack>
+              ) : (
+                <Text>
+                  {hasSelectedKeys
+                    ? t('no-mapped-action-text')
+                    : t('no-key-selected-text')}
+                </Text>
+              )}
+            </Stack>
+          </Group>
+        </Layout.GrowingSection>
+      </Layout>
     </Container>
   );
 }
diff --git a/src/panels/KeybindsPanel/ListLayout.tsx b/src/panels/KeybindsPanel/ListLayout.tsx
@@ -7,13 +7,13 @@ import { useSearchKeySettings } from '@/components/FilterList/SearchSettingsMenu
 import { generateMatcherFunctionByKeys } from '@/components/FilterList/util';
 import { Layout } from '@/components/Layout/Layout';
 import { useAppSelector } from '@/redux/hooks';
-import { Action, KeybindInfoType, KeybindModifiers } from '@/types/types';
+import { KeybindInfoType, KeybindModifiers } from '@/types/types';
 
 import { KeybindInfo } from './KeybindInfo';
 import { KeybindListEntry } from './ListEntry';
 
 export function ListLayout() {
-  const [selectedAction, setSelectedAction] = useState<Action | null>(null);
+  const [selectedAction, setSelectedAction] = useState<KeybindInfoType | null>(null);
   const [modifiersFilter, setModifiersFilter] = useState<KeybindModifiers>([]);
   const keybinds = useAppSelector((state) => state.actions.keybinds);
   const actions = useAppSelector((state) => state.actions.actions);
@@ -47,7 +47,7 @@ export function ListLayout() {
     .filter((info) => !!info) // Filter any undefined objects
     .sort((a, b) => (a.key > b.key ? 1 : -1));
 
-  function onClick(action: Action): void {
+  function onClick(action: KeybindInfoType): void {
     if (action.identifier === selectedAction?.identifier) {
       setSelectedAction(null);
     } else {
@@ -57,7 +57,7 @@ export function ListLayout() {
 
   return (
     <Group align={'top'} px={'xs'} h={'100%'}>
-      <Layout pt={'xs'} flex={2}>
+      <Layout pt={'xs'} flex={1.5}>
         <FilterList>
           <Layout.FixedSection>
             <Group gap={'xs'}>
