From 9aebcf0c698c12756c3d6b08fa1c097db97b62a3 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Mon, 20 Mar 2023 10:54:46 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20a=20simple=20keybind=20viewer?=
 =?UTF-8?q?=20in=20about=20menu=20#751?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Modals/AboutModal/AboutModal.tsx          | 39 +++++++++++++++++--
 .../Actions/ToggleEditMode/ToggleEditMode.tsx |  2 +-
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx
index 8f366fd9f..952018c0f 100644
--- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx
+++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx
@@ -1,13 +1,14 @@
 import {
+  Accordion,
   ActionIcon,
   Anchor,
   Badge,
   Button,
   createStyles,
-  Divider,
   Grid,
   Group,
   HoverCard,
+  Kbd,
   Modal,
   Stack,
   Table,
@@ -35,6 +36,7 @@ import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation';
 import { usePackageAttributesStore } from '../../../../tools/client/zustands/usePackageAttributesStore';
+import Tip from '../../../layout/Tip';
 import { usePrimaryGradient } from '../../../layout/useGradient';
 import Credits from '../../../Settings/Common/Credits';
 
@@ -50,6 +52,21 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
   const informations = useInformationTableItems(newVersionAvailable);
   const { t } = useTranslation(['common', 'layout/modals/about']);
 
+  const keybinds = [
+    { key: 'Mod + J', shortcut: 'Toggle light/dark mode' },
+    { key: 'Mod + K', shortcut: 'Focus on search bar' },
+    { key: 'Mod + B', shortcut: 'Open docker widget' },
+    { key: 'Mod + E', shortcut: 'Toggle Edit mode' },
+  ];
+  const rows = keybinds.map((element) => (
+    <tr key={element.key}>
+      <td>
+        <Kbd>{element.key}</Kbd>
+      </td>
+      <td>{element.shortcut}</td>
+    </tr>
+  ));
+
   return (
     <Modal
       onClose={() => closeModal()}
@@ -76,7 +93,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
         <Trans i18nKey="layout/modals/about:description" />
       </Text>
 
-      <Table mb="lg" striped highlightOnHover withBorder>
+      <Table mb="lg" highlightOnHover withBorder>
         <tbody>
           {informations.map((item, index) => (
             <tr key={index}>
@@ -100,8 +117,24 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
           ))}
         </tbody>
       </Table>
+      <Accordion mb={5} variant="contained" radius="md">
+        <Accordion.Item value="keybinds">
+          <Accordion.Control icon={<IconKey size={20} />}>Keybinds</Accordion.Control>
+          <Accordion.Panel>
+            <Table mb={5}>
+              <thead>
+                <tr>
+                  <th>Key</th>
+                  <th>Shortcut</th>
+                </tr>
+              </thead>
+              <tbody>{rows}</tbody>
+            </Table>
+            <Tip>Mod refers to your modifier key, it is Ctrl and Command/Super/Windows key</Tip>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
 
-      <Divider variant="dashed" mb="md" />
       <Title order={6} mb="xs" align="center">
         {t('layout/modals/about:contact')}
       </Title>
diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
index 365431379..c1f4445ff 100644
--- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
+++ b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
@@ -29,7 +29,7 @@ export const ToggleEditModeAction = () => {
   const { config } = useConfigContext();
   const { classes } = useCardStyles(true);
 
-  useHotkeys([['ctrl+E', toggleEditMode]]);
+  useHotkeys([['mod+E', toggleEditMode]]);
 
   useWindowEvent('beforeunload', (event: BeforeUnloadEvent) => {
     if (enabled) {