Added Keybindings tab. (#3204)

* Added Keybindings tab.

* Minor Refactoring

packages/bruno-app/src/components/Preferences/Keybindings/StyledWrapper.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+
+    thead,
+    td {
+      border: 2px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 1rem;
+      user-select: none;
+    }
+
+    td {
+      padding: 4px 8px;
+    }
+
+    thead th {
+      font-weight: 600;
+      padding: 10px;
+      text-align: left;
+    }
+  }
+
+  .table-container {
+    max-height: 400px;
+    overflow-y: scroll;
+  }
+
+  .key-button {
+    display: inline-block;
+    color: ${(props) => props.theme.colors.text.white};
+    border-radius: 4px;
+    padding: 1px 5px;
+    font-family: monospace;
+    margin-right: 8px;
+    border: 1px solid #ccc;
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Preferences/Keybindings/index.js

@@ -0,0 +1,45 @@
+import StyledWrapper from './StyledWrapper';
+import React from 'react';
+import { getKeyBindingsForOS } from 'providers/Hotkeys/keyMappings';
+import { isMacOS } from 'utils/common/platform';
+
+const Keybindings = ({ close }) => {
+  const keyMapping = getKeyBindingsForOS(isMacOS() ? 'mac' : 'windows');
+
+  return (
+    <StyledWrapper className="w-full">
+      <div className="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Command</th>
+              <th>Keybinding</th>
+            </tr>
+          </thead>
+          <tbody>
+            {keyMapping ? (
+              Object.entries(keyMapping).map(([action, { name, keys }], index) => (
+                <tr key={index}>
+                  <td>{name}</td>
+                  <td>
+                    {keys.split('+').map((key, i) => (
+                      <div className="key-button" key={i}>
+                        {key}
+                      </div>
+                    ))}
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan="2">No key bindings available</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Keybindings;

packages/bruno-app/src/components/Preferences/index.js

@@ -1,11 +1,14 @@
 import Modal from 'components/Modal/index';
 import classnames from 'classnames';
 import React, { useState } from 'react';
+
 import Support from './Support';
 import General from './General';
 import Proxy from './ProxySettings';
+import Display from './Display';
+import Keybindings from './Keybindings';
+
 import StyledWrapper from './StyledWrapper';
-import Display from './Display/index';
 
 const Preferences = ({ onClose }) => {
   const [tab, setTab] = useState('general');
@@ -30,6 +33,10 @@ const Preferences = ({ onClose }) => {
         return <Display close={onClose} />;
       }
 
+      case 'keybindings': {
+        return <Keybindings close={onClose} />;
+      }
+
       case 'support': {
         return <Support />;
       }
@@ -50,6 +57,9 @@ const Preferences = ({ onClose }) => {
             <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
               Proxy
             </div>
+            <div className={getTabClassname('keybindings')} role="tab" onClick={() => setTab('keybindings')}>
+              Keybindings
+            </div>
             <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
               Support
             </div>