It's time for keyboard-layout-dependant shortcuts

Let's hope this works!

src/components/background-service.jsx

@@ -144,13 +144,22 @@ export default memo(function BackgroundService({ isLoggedIn }) {
   });
 
   // Global keyboard shortcuts "service"
-  useHotkeys('shift+alt+k', () => {
+  useHotkeys(
+    'shift+alt+k',
+    (e) => {
+      // Need modifers check due to useKey: true
+      if (!e.shiftKey || !e.altKey) return;
+
       const currentCloakMode = states.settings.cloakMode;
       states.settings.cloakMode = !currentCloakMode;
       showToast({
         text: currentCloakMode ? t`Cloak mode disabled` : t`Cloak mode enabled`,
       });
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
   return null;
 });

src/components/columns.jsx

@@ -68,9 +68,12 @@ function Columns() {
     }
   });
 
-  useHotkeys(['[', ']'], (e, handler) => {
+  useHotkeys(
+    ['[', ']'],
+    (e, handler) => {
       const key = handler.keys[0];
-    const currentFocusedColumn = document.activeElement.closest('#columns > *');
+      const currentFocusedColumn =
+        document.activeElement.closest('#columns > *');
 
       const rtl = isRTL();
       const prevColKey = rtl ? ']' : '[';
@@ -92,7 +95,11 @@ function Columns() {
         $column.focus();
         $column.scrollIntoView(scrollIntoViewOptions);
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
   return (
     <div

src/components/compose-button.jsx

@@ -70,12 +70,19 @@ export default function ComposeButton() {
     }
   }
 
-  useHotkeys('c, shift+c', handleButton, {
+  useHotkeys(
+    'c, shift+c',
+    handleButton,
+    {
       ignoreEventWhen: (e) => {
         const hasModal = !!document.querySelector('#modal-container > *');
         return hasModal;
       },
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
   // Setup longpress handler to open context menu
   const bindLongPress = useLongPress(

src/components/keyboard-shortcuts-help.jsx

@@ -19,12 +19,13 @@ export default memo(function KeyboardShortcutsHelp() {
   }
 
   useHotkeys(
-    '?, shift+?, shift+slash',
-    (e) => {
+    '?',
+    () => {
       console.log('help');
       states.showKeyboardShortcutsHelp = true;
     },
     {
+      useKey: true,
       ignoreEventWhen: (e) => {
         const isCatchUpPage = /\/catchup/i.test(location.hash);
         return isCatchUpPage;

src/components/search-command.jsx

@@ -20,6 +20,7 @@ export default memo(function SearchCommand({ onClose = () => {} }) {
       }, 0);
     },
     {
+      useKey: true,
       preventDefault: true,
       ignoreEventWhen: (e) => {
         const isSearchPage = /\/search/.test(location.hash);

src/components/status.jsx

@@ -1482,16 +1482,22 @@ function Status({
   const hotkeysEnabled = !readOnly && !previewMode && !quoted;
   const rRef = useHotkeys('r, shift+r', replyStatus, {
     enabled: hotkeysEnabled,
+    useKey: true,
   });
   const fRef = useHotkeys('f, l', favouriteStatusNotify, {
     enabled: hotkeysEnabled,
+    useKey: true,
   });
   const dRef = useHotkeys('d', bookmarkStatusNotify, {
     enabled: hotkeysEnabled,
+    useKey: true,
   });
   const bRef = useHotkeys(
     'shift+b',
-    () => {
+    (e) => {
+      // Need shiftKey check due to useKey: true
+      if (!e.shiftKey) return;
+
       (async () => {
         try {
           const done = await confirmBoostStatus();
@@ -1507,9 +1513,12 @@ function Status({
     },
     {
       enabled: hotkeysEnabled && canBoost,
+      useKey: true,
     },
   );
-  const xRef = useHotkeys('x', (e) => {
+  const xRef = useHotkeys(
+    'x',
+    (e) => {
       const activeStatus = document.activeElement.closest(
         '.status-link, .status-focus',
       );
@@ -1530,7 +1539,11 @@ function Status({
           }
         }
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
   const displayedMediaAttachments = mediaAttachments.slice(
     0,

src/components/timeline.jsx

@@ -143,7 +143,12 @@ function Timeline({
 
   const itemsSelector = '.timeline-item, .timeline-item-alt';
 
-  const jRef = useHotkeys('j, shift+j', (_, handler) => {
+  const jRef = useHotkeys(
+    'j, shift+j',
+    (e, handler) => {
+      // Fix bug: shift+j is fired even when j is pressed due to useKey: true
+      if (e.shiftKey !== handler.shift) return;
+
       // focus on next status after active item
       const activeItem = document.activeElement.closest(itemsSelector);
       const activeItemRect = activeItem?.getBoundingClientRect();
@@ -180,9 +185,18 @@ function Timeline({
           topmostItem.scrollIntoView(scrollIntoViewOptions);
         }
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
+
+  const kRef = useHotkeys(
+    'k, shift+k',
+    (e, handler) => {
+      // Fix bug: shift+k is fired even when k is pressed due to useKey: true
+      if (e.shiftKey !== handler.shift) return;
 
-  const kRef = useHotkeys('k, shift+k', (_, handler) => {
       // focus on previous status after active item
       const activeItem = document.activeElement.closest(itemsSelector);
       const activeItemRect = activeItem?.getBoundingClientRect();
@@ -219,15 +233,25 @@ function Timeline({
           topmostItem.scrollIntoView(scrollIntoViewOptions);
         }
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
-  const oRef = useHotkeys(['enter', 'o'], () => {
+  const oRef = useHotkeys(
+    ['enter', 'o'],
+    () => {
       // open active status
       const activeItem = document.activeElement;
       if (activeItem?.matches(itemsSelector)) {
         activeItem.click();
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
   const showNewPostsIndicator =
     items.length > 0 && uiState !== 'loading' && showNew;

src/pages/catchup.jsx

@@ -716,6 +716,7 @@ function Catchup() {
       }
     },
     {
+      useKey: true,
       preventDefault: true,
       ignoreModifiers: true,
     },
@@ -760,6 +761,7 @@ function Catchup() {
       }
     },
     {
+      useKey: true,
       preventDefault: true,
       ignoreModifiers: true,
     },
@@ -789,6 +791,7 @@ function Catchup() {
       }
     },
     {
+      useKey: true,
       preventDefault: true,
       ignoreModifiers: true,
       enableOnFormTags: ['input'],
@@ -817,6 +820,7 @@ function Catchup() {
       });
     },
     {
+      useKey: true,
       preventDefault: true,
       ignoreModifiers: true,
       enableOnFormTags: ['input'],

src/pages/notifications.jsx

@@ -451,7 +451,9 @@ function Notifications({ columnMode }) {
   }, []);
 
   const itemsSelector = '.notification';
-  const jRef = useHotkeys('j', () => {
+  const jRef = useHotkeys(
+    'j',
+    () => {
       const activeItem = document.activeElement.closest(itemsSelector);
       const activeItemRect = activeItem?.getBoundingClientRect();
       const allItems = Array.from(
@@ -478,9 +480,15 @@ function Notifications({ columnMode }) {
           topmostItem.scrollIntoView(scrollIntoViewOptions);
         }
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
-  const kRef = useHotkeys('k', () => {
+  const kRef = useHotkeys(
+    'k',
+    () => {
       // focus on previous status after active item
       const activeItem = document.activeElement.closest(itemsSelector);
       const activeItemRect = activeItem?.getBoundingClientRect();
@@ -508,15 +516,25 @@ function Notifications({ columnMode }) {
           topmostItem.scrollIntoView(scrollIntoViewOptions);
         }
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
-  const oRef = useHotkeys(['enter', 'o'], () => {
+  const oRef = useHotkeys(
+    ['enter', 'o'],
+    () => {
       const activeItem = document.activeElement.closest(itemsSelector);
       const statusLink = activeItem?.querySelector('.status-link');
       if (statusLink) {
         statusLink.click();
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
   const today = new Date();
   const todaySubHeading = useMemo(() => {

src/pages/search.jsx

@@ -198,18 +198,21 @@ function Search({ columnMode, ...props }) {
   }, [q, type, instance]);
 
   useHotkeys(
-    ['/', 'Slash'],
+    ['Slash', '/'],
     (e) => {
       searchFormRef.current?.focus?.();
       searchFormRef.current?.select?.();
     },
     {
+      useKey: true,
       preventDefault: true,
     },
   );
 
   const itemsSelector = '.timeline > li > a, .hashtag-list > li > a';
-  const jRef = useHotkeys('j', () => {
+  const jRef = useHotkeys(
+    'j',
+    () => {
       const activeItem = document.activeElement.closest(itemsSelector);
       const activeItemRect = activeItem?.getBoundingClientRect();
       const allItems = Array.from(
@@ -236,9 +239,15 @@ function Search({ columnMode, ...props }) {
           topmostItem.scrollIntoView(scrollIntoViewOptions);
         }
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
-  const kRef = useHotkeys('k', () => {
+  const kRef = useHotkeys(
+    'k',
+    () => {
       // focus on previous status after active item
       const activeItem = document.activeElement.closest(itemsSelector);
       const activeItemRect = activeItem?.getBoundingClientRect();
@@ -266,7 +275,11 @@ function Search({ columnMode, ...props }) {
           topmostItem.scrollIntoView(scrollIntoViewOptions);
         }
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
   const [filterBarParent] = useAutoAnimate();
 

src/pages/status.jsx

@@ -651,7 +651,9 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
     location.hash = closeLink;
   });
 
-  useHotkeys('j', () => {
+  useHotkeys(
+    'j',
+    () => {
       const activeStatus = document.activeElement.closest(
         '.status-link, .status-focus',
       );
@@ -682,9 +684,15 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
           topmostStatusLink.scrollIntoView(scrollIntoViewOptions);
         }
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
-  useHotkeys('k', () => {
+  useHotkeys(
+    'k',
+    () => {
       const activeStatus = document.activeElement.closest(
         '.status-link, .status-focus',
       );
@@ -714,11 +722,17 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
           topmostStatusLink.scrollIntoView(scrollIntoViewOptions);
         }
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
   // NOTE: I'm not sure if 'x' is the best shortcut for this, might change it later
   // IDEA: x is for expand
-  useHotkeys('x', () => {
+  useHotkeys(
+    'x',
+    () => {
       const activeStatus = document.activeElement.closest(
         '.status-link, .status-focus',
       );
@@ -728,7 +742,11 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
           details.open = !details.open;
         }
       }
-  });
+    },
+    {
+      useKey: true,
+    },
+  );
 
   const [reachTopPost, setReachTopPost] = useState(false);
   // const { nearReachStart } = useScroll({