From f8bb9ebf8185d53b7edf39002109d9b35a5b145d Mon Sep 17 00:00:00 2001
From: "ajnart (aider)" <ajnart@pm.me>
Date: Tue, 12 Nov 2024 19:10:19 +0900
Subject: [PATCH] feat: Add hotkeys section with keyboard shortcuts in about
 page

feat: Update hotkeys in About page with new keyboard shortcuts

feat: Update hotkeys to Mod + E and Mod + J in about page
---
 .../src/app/[locale]/manage/about/page.tsx    | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/about/page.tsx b/apps/nextjs/src/app/[locale]/manage/about/page.tsx
index f500f604a..d0855db8e 100644
--- a/apps/nextjs/src/app/[locale]/manage/about/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/about/page.tsx
@@ -17,12 +17,19 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { IconLanguage, IconLibrary, IconUsers } from "@tabler/icons-react";
+import { IconKeyboard, IconLanguage, IconLibrary, IconUsers } from "@tabler/icons-react";
 
 import { getScopedI18n } from "@homarr/translation/server";
 
 import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { Table } from "@mantine/core";
+
+const HOMARR_HOTKEYS = [
+  { key: "Mod + E", description: "Toggle edit mode" },
+  { key: "Mod + J", description: "Toggle command palette" },
+] as const;
+
 import { createMetaTitle } from "~/metadata";
 import { getPackageAttributesAsync } from "~/versions/package-reader";
 import type githubContributorsJson from "../../../../../../../static-data/contributors.json";
@@ -149,6 +156,36 @@ export default async function AboutPage() {
             </List>
           </AccordionPanel>
         </AccordionItem>
+        <AccordionItem value="hotkeys">
+          <AccordionControl icon={<IconKeyboard size="1rem" />}>
+            <Stack gap={0}>
+              <Text>{t("accordion.hotkeys.title")}</Text>
+              <Text size="sm" c="dimmed">
+                {t("accordion.hotkeys.subtitle")}
+              </Text>
+            </Stack>
+          </AccordionControl>
+          <AccordionPanel>
+            <Table>
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>{t("accordion.hotkeys.table.shortcut")}</Table.Th>
+                  <Table.Th>{t("accordion.hotkeys.table.description")}</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {HOMARR_HOTKEYS.map((hotkey) => (
+                  <Table.Tr key={hotkey.key}>
+                    <Table.Td>
+                      <code>{hotkey.key}</code>
+                    </Table.Td>
+                    <Table.Td>{t(`accordion.hotkeys.shortcuts.${hotkey.key}`)}</Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </AccordionPanel>
+        </AccordionItem>
       </Accordion>
     </div>
   );