Merge pull request #775 from ajnart/about-keybinds

✨ Add a simple keybind viewer in about menu #751

public/locales/en/layout/modals/about.json

@@ -2,6 +2,10 @@
 	"description": "Homarr is a <strong>sleek</strong>, <strong>modern</strong> dashboard that puts all of your apps and services at your fingertips. With Homarr, you can access and control everything in one convenient location. Homarr seamlessly integrates with the apps you've added, providing you with valuable information and giving you complete control. Installation is a breeze, and Homarr supports a wide range of deployment methods.",
 	"contact": "Having trouble or questions? Connect with us!",
 	"addToDashboard": "Add to Dashboard",
+	"tip": "Mod refers to your modifier key, it is Ctrl and Command/Super/Windows key",
+	"key": "Shortcut key",
+	"action": "Action",
+	"keybinds": "Keybinds",
 	"metrics": {
 		"configurationSchemaVersion": "Configuration schema version",
 		"configurationsCount": "Available configurations",

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,23 @@ 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>
+        <Text>{element.shortcut}</Text>
+      </td>
+    </tr>
+  ));
+
   return (
     <Modal
       onClose={() => closeModal()}
@@ -76,7 +95,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 +119,26 @@ 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} />}>
+            {t('layout/modals/about:keybinds')}
+          </Accordion.Control>
+          <Accordion.Panel>
+            <Table mb={5}>
+              <thead>
+                <tr>
+                  <th>{t('layout/modals/about:key')}</th>
+                  <th>{t('layout/modals/about:action')}</th>
+                </tr>
+              </thead>
+              <tbody>{rows}</tbody>
+            </Table>
+            <Tip>{t('layout/modals/about:tip')}</Tip>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
 
-      <Divider variant="dashed" mb="md" />
       <Title order={6} mb="xs" align="center">
         {t('layout/modals/about:contact')}
       </Title>

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) {