Upgrade react-hotkeys-hooks

Not using useKey yet, let's see if this works first

package-lock.json

@@ -35,7 +35,7 @@
         "p-throttle": "~7.0.0",
         "preact": "10.26.5",
         "punycode": "~2.3.1",
-        "react-hotkeys-hook": "~4.6.1",
+        "react-hotkeys-hook": "~5.0.1",
         "react-intersection-observer": "~9.16.0",
         "react-quick-pinch-zoom": "~5.1.0",
         "react-router-dom": "6.6.2",
@@ -8596,12 +8596,16 @@
       }
     },
     "node_modules/react-hotkeys-hook": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.6.1.tgz",
-      "integrity": "sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-5.0.1.tgz",
+      "integrity": "sha512-TysTwXrUSj6QclMZIEoxCfvy/6EsoZcrfE970aUVa9fO3c3vcms+IVjv3ljbhUPM/oY1iEoun7O2W8v8INl5hw==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
       "peerDependencies": {
-        "react": ">=16.8.1",
-        "react-dom": ">=16.8.1"
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
       }
     },
     "node_modules/react-intersection-observer": {

package.json

@@ -43,7 +43,7 @@
     "p-throttle": "~7.0.0",
     "preact": "10.26.5",
     "punycode": "~2.3.1",
-    "react-hotkeys-hook": "~4.6.1",
+    "react-hotkeys-hook": "~5.0.1",
     "react-intersection-observer": "~9.16.0",
     "react-quick-pinch-zoom": "~5.1.0",
     "react-router-dom": "6.6.2",

src/components/modal.jsx

@@ -123,7 +123,7 @@ function Modal({ children, onClose, onClick, class: className, minimized }) {
     <div
       ref={(node) => {
         modalRef.current = node;
-        escRef(node?.querySelector?.('[tabindex="-1"]') || node);
+        escRef.current = node?.querySelector?.('[tabindex="-1"]') || node;
       }}
       className={className}
       onClick={(e) => {

src/components/status.jsx

@@ -1677,11 +1677,11 @@ function Status({
             node?.closest?.(
               '.timeline-item, .timeline-item-alt, .status-link, .status-focus',
             ) || node;
-          rRef(nodeRef);
-          fRef(nodeRef);
-          dRef(nodeRef);
-          bRef(nodeRef);
-          xRef(nodeRef);
+          rRef.current = nodeRef;
+          fRef.current = nodeRef;
+          dRef.current = nodeRef;
+          bRef.current = nodeRef;
+          xRef.current = nodeRef;
         }}
         tabindex="-1"
         class={`status ${

src/components/timeline.jsx

@@ -392,10 +392,10 @@ function Timeline({
         }`}
         ref={(node) => {
           scrollableRef.current = node;
-          jRef(node);
-          kRef(node);
-          oRef(node);
-          dotRef(node);
+          jRef.current = node;
+          kRef.current = node;
+          oRef.current = node;
+          dotRef.current = node;
         }}
         tabIndex="-1"
         onClick={(e) => {

src/pages/catchup.jsx

@@ -843,10 +843,10 @@ function Catchup() {
     <div
       ref={(node) => {
         scrollableRef.current = node;
-        jRef(node);
-        kRef(node);
-        hlRef(node);
-        escRef(node);
+        jRef.current = node;
+        kRef.current = node;
+        hlRef.current = node;
+        escRef.current = node;
       }}
       id="catchup-page"
       class="deck-container"

src/pages/notifications.jsx

@@ -533,9 +533,9 @@ function Notifications({ columnMode }) {
       class="deck-container"
       ref={(node) => {
         scrollableRef.current = node;
-        jRef(node);
-        kRef(node);
-        oRef(node);
+        jRef.current = node;
+        kRef.current = node;
+        oRef.current = node;
       }}
       tabIndex="-1"
     >

src/pages/search.jsx

@@ -277,8 +277,8 @@ function Search({ columnMode, ...props }) {
       tabIndex="-1"
       ref={(node) => {
         scrollableRef.current = node;
-        jRef(node);
-        kRef(node);
+        jRef.current = node;
+        kRef.current = node;
       }}
     >
       <div class="timeline-deck deck">