Add option to disable keyboard shortcuts

fixes #226

.changeset/sour-trainers-confess.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add option to disable keyboard shortcuts

src/components/keyboard-shortcut.tsx

@@ -1,6 +1,8 @@
 import { Code, CodeProps } from "@chakra-ui/react";
 import { useRef } from "react";
 import { useKeyPressEvent } from "react-use";
+import useSubject from "../hooks/use-subject";
+import localSettings from "../services/local-settings";
 
 export default function KeyboardShortcut({
   letter,
@@ -12,10 +14,13 @@ export default function KeyboardShortcut({
   requireMeta?: boolean;
   onPress?: (e: KeyboardEvent) => void;
 } & Omit<CodeProps, "children">) {
+  const enableKeyboardShortcuts = useSubject(localSettings.enableKeyboardShortcuts);
   const ref = useRef<HTMLDivElement | null>(null);
   useKeyPressEvent(
     (e) => (requireMeta ? e.ctrlKey || e.metaKey : true) && e.key === letter,
     (e) => {
+      if (!enableKeyboardShortcuts) return;
+
       // ignore if the user is focused on an input
       if (document.activeElement instanceof HTMLInputElement || document.activeElement instanceof HTMLTextAreaElement) {
         return;
@@ -31,6 +36,8 @@ export default function KeyboardShortcut({
     },
   );
 
+  if (!enableKeyboardShortcuts) return null;
+
   return (
     <Code fontSize="md" mx="2" textDecoration="none" textTransform="capitalize" ref={ref} {...props}>
       {requireMeta ? (navigator.userAgent.includes("Macintosh") ? "⌘" : "^") : ""}

src/services/local-settings.ts

@@ -49,6 +49,7 @@ const addClientTag = new BooleanLocalStorageEntry("add-client-tag", false);
 
 // performance
 const verifyEventMethod = new LocalStorageEntry("verify-event-method", "wasm"); // wasm, internal, none
+const enableKeyboardShortcuts = new BooleanLocalStorageEntry("enable-keyboard-shortcuts", true);
 
 const localSettings = {
   idbMaxEvents,
@@ -60,6 +61,7 @@ const localSettings = {
   webRtcRecentConnections,
   addClientTag,
   verifyEventMethod,
+  enableKeyboardShortcuts,
 };
 
 if (import.meta.env.DEV) {

src/views/settings/performance/index.tsx

@@ -46,6 +46,7 @@ function VerifyEventSettings() {
 
 export default function PerformanceSettings() {
   const { register, submit, formState } = useSettingsForm();
+  const enableKeyboardShortcuts = useSubject(localSettings.enableKeyboardShortcuts);
 
   return (
     <VerticalPageLayout as="form" onSubmit={submit} flex={1}>
@@ -104,6 +105,18 @@ export default function PerformanceSettings() {
           </Flex>
           <FormHelperText>Enabled: Show reactions on notes</FormHelperText>
         </FormControl>
+        <FormControl>
+          <Flex alignItems="center">
+            <FormLabel htmlFor="enableKeyboardShortcuts" mb="0">
+              Enable keyboard shortcuts
+            </FormLabel>
+            <Switch
+              id="enableKeyboardShortcuts"
+              isChecked={enableKeyboardShortcuts}
+              onChange={(e) => localSettings.enableKeyboardShortcuts.next(e.currentTarget.checked)}
+            />
+          </Flex>
+        </FormControl>
         <FormControl>
           <Flex alignItems="center">
             <FormLabel htmlFor="autoDecryptDMs" mb="0">