Add basic key commands

app/layout.tsx

@@ -24,6 +24,7 @@ import AdminUploadPanel from '@/admin/upload/AdminUploadPanel';
 import { revalidatePath } from 'next/cache';
 import RecipeModal from '@/recipe/RecipeModal';
 import ThemeColors from '@/app/ThemeColors';
+import AppKeyListener from '@/app/AppKeyListener';
 
 import '../tailwind.css';
 
@@ -114,6 +115,7 @@ export default function RootLayout({
             </SwrConfigClient>
             <Analytics debug={false} />
             <SpeedInsights debug={false}  />
+            <AppKeyListener />
             <PhotoEscapeHandler />
             <ToasterWithThemes />
           </ThemeProvider>

src/app/AppKeyListener.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import useKeydownHandler from '@/utility/useKeydownHandler';
+import { PATH_FEED_INFERRED, PATH_GRID_INFERRED } from './paths';
+import { useCallback } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+
+const PATH_MAPS = {
+  G: PATH_GRID_INFERRED,
+  F: PATH_FEED_INFERRED,
+};
+
+export default function AppKeyListener() {
+  const pathname = usePathname();
+
+  const router = useRouter();
+
+  const onKeyDown = useCallback((e: KeyboardEvent) => {
+    const path = PATH_MAPS[e.key.toLocaleUpperCase() as keyof typeof PATH_MAPS];
+    if (path && pathname !== path) {
+      router.push(path);
+    }
+  }, [router, pathname]);
+
+  useKeydownHandler({ onKeyDown });
+
+  return null;
+}

src/components/image/useImageZoomControls.ts

@@ -47,10 +47,10 @@ export default function useImageZoomControls({
   }, []);
 
   // On 'F' keydown, toggle fullscreen
-  const handleKeyDown = useCallback(() => {
+  const onKeyDown = useCallback(() => {
     if (shouldZoomOnFKeydown) { open(); }
   }, [shouldZoomOnFKeydown, open]);
-  useKeydownHandler(handleKeyDown, ['F']);
+  useKeydownHandler({ onKeyDown, keys: ['F'] });
 
   useEffect(() => {
     if (isEnabled) {

src/utility/useEscapeHandler.ts

@@ -1,12 +1,12 @@
 import useKeydownHandler from '@/utility/useKeydownHandler';
 
 export default function useEscapeHandler(
-  onEscape?: () => void,
+  onKeyDown?: (e: KeyboardEvent) => void,
   ignoreShouldRespondToKeyboardCommands?: boolean,
 ) {
-  useKeydownHandler(
-    onEscape,
-    ['ESCAPE'],
+  useKeydownHandler({
+    onKeyDown,
+    keys: ['ESCAPE'],
     ignoreShouldRespondToKeyboardCommands,
-  );
+  });
 }

src/utility/useKeydownHandler.ts

@@ -3,30 +3,34 @@ import { useCallback, useEffect } from 'react';
 
 const LISTENER_KEYDOWN = 'keydown';
 
-export default function useKeydownHandler(
-  onKeydown?: (e: KeyboardEvent) => void,
-  keys: string[] = [],
-  ignoreShouldRespondToKeyboardCommands?: boolean,
-) {
+export default function useKeydownHandler({
+  onKeyDown: onKeyDownArg,
+  keys,
+  ignoreShouldRespondToKeyboardCommands = false,
+}: {
+  onKeyDown?: (e: KeyboardEvent) => void
+  keys?: string[]
+  ignoreShouldRespondToKeyboardCommands?: boolean
+}) {
   const { shouldRespondToKeyboardCommands } = useAppState();
 
-  const onKeyUp = useCallback((e: KeyboardEvent) => {
-    if (keys.some(key => key.toUpperCase() === e.key?.toUpperCase())) {
-      onKeydown?.(e);
+  const onKeyDown = useCallback((e: KeyboardEvent) => {
+    if (!keys || keys.some(key => key.toUpperCase() === e.key?.toUpperCase())) {
+      onKeyDownArg?.(e);
     }
-  }, [onKeydown, keys]);
+  }, [onKeyDownArg, keys]);
 
   useEffect(() => {
     if (
       shouldRespondToKeyboardCommands ||
       ignoreShouldRespondToKeyboardCommands
     ) {
-      window.addEventListener(LISTENER_KEYDOWN, onKeyUp);
-      return () => window.removeEventListener(LISTENER_KEYDOWN, onKeyUp);
+      window.addEventListener(LISTENER_KEYDOWN, onKeyDown);
+      return () => window.removeEventListener(LISTENER_KEYDOWN, onKeyDown);
     }
   }, [
     shouldRespondToKeyboardCommands,
     ignoreShouldRespondToKeyboardCommands,
-    onKeyUp,
+    onKeyDown,
   ]);
 }