Scoped keyboard shortcuts

src/pages/home.jsx

@@ -21,7 +21,6 @@ function Home({ hidden }) {
   useTitle('Home', '/');
   const { masto, instance } = api();
   const snapStates = useSnapshot(states);
-  const isHomeLocation = snapStates.currentLocation === '/';
   const [uiState, setUIState] = useState('default');
   const [showMore, setShowMore] = useState(false);
 
@@ -149,9 +148,7 @@ function Home({ hidden }) {
 
   const scrollableRef = useRef();
 
-  useHotkeys(
-    'j, shift+j',
-    (_, handler) => {
+  const jRef = useHotkeys('j, shift+j', (_, handler) => {
     // focus on next status after active status
     // Traverses .timeline li .status-link, focus on .status-link
     const activeStatus = document.activeElement.closest(
@@ -193,15 +190,9 @@ function Home({ hidden }) {
         topmostStatusLink.scrollIntoViewIfNeeded?.();
       }
     }
-    },
-    {
-      enabled: isHomeLocation,
-    },
-  );
+  });
 
-  useHotkeys(
-    'k, shift+k',
-    (_, handler) => {
+  const kRef = useHotkeys('k, shift+k', (_, handler) => {
     // focus on previous status after active status
     // Traverses .timeline li .status-link, focus on .status-link
     const activeStatus = document.activeElement.closest(
@@ -243,15 +234,9 @@ function Home({ hidden }) {
         topmostStatusLink.scrollIntoViewIfNeeded?.();
       }
     }
-    },
-    {
-      enabled: isHomeLocation,
-    },
-  );
+  });
 
-  useHotkeys(
-    ['enter', 'o'],
-    () => {
+  const oRef = useHotkeys(['enter', 'o'], () => {
     // open active status
     const activeStatus = document.activeElement.closest(
       '.status-link, .status-boost-link',
@@ -259,11 +244,7 @@ function Home({ hidden }) {
     if (activeStatus) {
       activeStatus.click();
     }
-    },
-    {
-      enabled: isHomeLocation,
-    },
-  );
+  });
 
   const {
     scrollDirection,
@@ -306,6 +287,12 @@ function Home({ hidden }) {
   const [showUpdatesButton, setShowUpdatesButton] = useState(false);
   useEffect(() => {
     const isNewAndTop = snapStates.homeNew.length > 0 && reachStart;
+    console.log(
+      'isNewAndTop',
+      isNewAndTop,
+      snapStates.homeNew.length,
+      reachStart,
+    );
     setShowUpdatesButton(isNewAndTop);
   }, [snapStates.homeNew.length]);
 
@@ -315,7 +302,12 @@ function Home({ hidden }) {
         id="home-page"
         class="deck-container"
         hidden={hidden}
-        ref={scrollableRef}
+        ref={(node) => {
+          scrollableRef.current = node;
+          jRef.current = node;
+          kRef.current = node;
+          oRef.current = node;
+        }}
         tabIndex="-1"
       >
         <div class="timeline-deck deck">