From 1b36f0cbf5bc7357677bc6e636f9a51585d99cef Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 2 Oct 2025 06:27:28 -0600
Subject: [PATCH] Make keyboard shortcuts consistent

---
 .../guides/training_a_classification_model.py |  0
 web/src/pages/Exports.tsx                     | 47 ++++++++-
 web/src/pages/FaceLibrary.tsx                 | 52 +++++++++-
 .../classification/ModelTrainingView.tsx      | 95 ++++++++++++++-----
 web/src/views/events/EventView.tsx            | 83 +++++++++-------
 web/src/views/search/SearchView.tsx           | 25 ++++-
 6 files changed, 233 insertions(+), 69 deletions(-)
 create mode 100644 docs/docs/guides/training_a_classification_model.py

diff --git a/docs/docs/guides/training_a_classification_model.py b/docs/docs/guides/training_a_classification_model.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index e2e834243..5c7b4f5c1 100644
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -13,12 +13,13 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Toaster } from "@/components/ui/sonner";
+import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { useSearchEffect } from "@/hooks/use-overlay-state";
 import { cn } from "@/lib/utils";
 import { DeleteClipType, Export } from "@/types/export";
 import axios from "axios";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 
@@ -109,6 +110,45 @@ function Exports() {
     [mutate, t],
   );
 
+  // Keyboard Listener
+
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  useKeyboardListener(
+    ["ArrowDown", "ArrowUp", "PageDown", "PageUp"],
+    (key, modifiers) => {
+      if (!modifiers.down) {
+        return;
+      }
+
+      switch (key) {
+        case "ArrowDown":
+          contentRef.current?.scrollBy({
+            top: 100,
+            behavior: "smooth",
+          });
+          break;
+        case "ArrowUp":
+          contentRef.current?.scrollBy({
+            top: -100,
+            behavior: "smooth",
+          });
+          break;
+        case "PageDown":
+          contentRef.current?.scrollBy({
+            top: contentRef.current.clientHeight / 2,
+            behavior: "smooth",
+          });
+          break;
+        case "PageUp":
+          contentRef.current?.scrollBy({
+            top: -contentRef.current.clientHeight / 2,
+            behavior: "smooth",
+          });
+          break;
+      }
+    },
+  );
+
   return (
     <div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
       <Toaster closeButton={true} />
@@ -194,7 +234,10 @@ function Exports() {
 
       <div className="w-full overflow-hidden">
         {exports && filteredExports && filteredExports.length > 0 ? (
-          <div className="scrollbar-container grid size-full gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          <div
+            ref={contentRef}
+            className="scrollbar-container grid size-full gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+          >
             {Object.values(exports).map((item) => (
               <ExportCard
                 key={item.name}
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index 919d26c86..38fbd105f 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -46,7 +46,14 @@ import { FaceLibraryData, RecognizedFaceData } from "@/types/face";
 import { FaceRecognitionConfig, FrigateConfig } from "@/types/frigateConfig";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import axios from "axios";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { isDesktop, isMobile } from "react-device-detect";
 import { Trans, useTranslation } from "react-i18next";
 import {
@@ -263,16 +270,17 @@ export default function FaceLibrary() {
 
   // keyboard
 
+  const contentRef = useRef<HTMLDivElement | null>(null);
   useKeyboardListener(
-    ["a", "Escape"],
+    ["a", "Escape", "ArrowDown", "ArrowUp", "PageDown", "PageUp"],
     (key, modifiers) => {
-      if (modifiers.repeat || !modifiers.down) {
+      if (!modifiers.down) {
         return;
       }
 
       switch (key) {
         case "a":
-          if (modifiers.ctrl) {
+          if (modifiers.ctrl && !modifiers.repeat) {
             if (selectedFaces.length) {
               setSelectedFaces([]);
             } else {
@@ -285,6 +293,30 @@ export default function FaceLibrary() {
         case "Escape":
           setSelectedFaces([]);
           break;
+        case "ArrowDown":
+          contentRef.current?.scrollBy({
+            top: 100,
+            behavior: "smooth",
+          });
+          break;
+        case "ArrowUp":
+          contentRef.current?.scrollBy({
+            top: -100,
+            behavior: "smooth",
+          });
+          break;
+        case "PageDown":
+          contentRef.current?.scrollBy({
+            top: contentRef.current.clientHeight / 2,
+            behavior: "smooth",
+          });
+          break;
+        case "PageUp":
+          contentRef.current?.scrollBy({
+            top: -contentRef.current.clientHeight / 2,
+            behavior: "smooth",
+          });
+          break;
       }
     },
     !inputFocused,
@@ -408,6 +440,7 @@ export default function FaceLibrary() {
         (pageToggle == "train" ? (
           <TrainingGrid
             config={config}
+            contentRef={contentRef}
             attemptImages={trainImages}
             faceNames={faces}
             selectedFaces={selectedFaces}
@@ -417,6 +450,7 @@ export default function FaceLibrary() {
           />
         ) : (
           <FaceGrid
+            contentRef={contentRef}
             faceImages={faceImages}
             pageToggle={pageToggle}
             selectedFaces={selectedFaces}
@@ -609,6 +643,7 @@ function LibrarySelector({
 
 type TrainingGridProps = {
   config: FrigateConfig;
+  contentRef: MutableRefObject<HTMLDivElement | null>;
   attemptImages: string[];
   faceNames: string[];
   selectedFaces: string[];
@@ -618,6 +653,7 @@ type TrainingGridProps = {
 };
 function TrainingGrid({
   config,
+  contentRef,
   attemptImages,
   faceNames,
   selectedFaces,
@@ -701,7 +737,10 @@ function TrainingGrid({
         setInputFocused={setInputFocused}
       />
 
-      <div className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1">
+      <div
+        ref={contentRef}
+        className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1"
+      >
         {Object.entries(faceGroups).map(([key, group]) => {
           const event = events?.find((ev) => ev.id == key);
           return (
@@ -1039,6 +1078,7 @@ function FaceAttempt({
 }
 
 type FaceGridProps = {
+  contentRef: MutableRefObject<HTMLDivElement | null>;
   faceImages: string[];
   pageToggle: string;
   selectedFaces: string[];
@@ -1046,6 +1086,7 @@ type FaceGridProps = {
   onDelete: (name: string, ids: string[]) => void;
 };
 function FaceGrid({
+  contentRef,
   faceImages,
   pageToggle,
   selectedFaces,
@@ -1070,6 +1111,7 @@ function FaceGrid({
 
   return (
     <div
+      ref={contentRef}
       className={cn(
         "scrollbar-container gap-2 overflow-y-scroll p-1",
         isDesktop ? "flex flex-wrap" : "grid grid-cols-2 md:grid-cols-4",
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index 5d5296576..6fe3a38f6 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -37,7 +37,14 @@ import { cn } from "@/lib/utils";
 import { CustomClassificationModelConfig } from "@/types/frigateConfig";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import axios from "axios";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { isDesktop, isMobile } from "react-device-detect";
 import { Trans, useTranslation } from "react-i18next";
 import { LuPencil, LuTrash2 } from "react-icons/lu";
@@ -226,30 +233,58 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
 
   // keyboard
 
-  useKeyboardListener(["a", "Escape"], (key, modifiers) => {
-    if (modifiers.repeat || !modifiers.down) {
-      return;
-    }
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  useKeyboardListener(
+    ["a", "Escape", "ArrowDown", "ArrowUp", "PageDown", "PageUp"],
+    (key, modifiers) => {
+      if (modifiers.repeat || !modifiers.down) {
+        return;
+      }
 
-    switch (key) {
-      case "a":
-        if (modifiers.ctrl) {
-          if (selectedImages.length) {
-            setSelectedImages([]);
-          } else {
-            setSelectedImages([
-              ...(pageToggle === "train"
-                ? trainImages || []
-                : dataset?.[pageToggle] || []),
-            ]);
+      switch (key) {
+        case "a":
+          if (modifiers.ctrl) {
+            if (selectedImages.length) {
+              setSelectedImages([]);
+            } else {
+              setSelectedImages([
+                ...(pageToggle === "train"
+                  ? trainImages || []
+                  : dataset?.[pageToggle] || []),
+              ]);
+            }
           }
-        }
-        break;
-      case "Escape":
-        setSelectedImages([]);
-        break;
-    }
-  });
+          break;
+        case "Escape":
+          setSelectedImages([]);
+          break;
+        case "ArrowDown":
+          contentRef.current?.scrollBy({
+            top: 100,
+            behavior: "smooth",
+          });
+          break;
+        case "ArrowUp":
+          contentRef.current?.scrollBy({
+            top: -100,
+            behavior: "smooth",
+          });
+          break;
+        case "PageDown":
+          contentRef.current?.scrollBy({
+            top: contentRef.current.clientHeight / 2,
+            behavior: "smooth",
+          });
+          break;
+        case "PageUp":
+          contentRef.current?.scrollBy({
+            top: -contentRef.current.clientHeight / 2,
+            behavior: "smooth",
+          });
+          break;
+      }
+    },
+  );
 
   useEffect(() => {
     setSelectedImages([]);
@@ -370,6 +405,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
       {pageToggle == "train" ? (
         <TrainGrid
           model={model}
+          contentRef={contentRef}
           classes={Object.keys(dataset || {})}
           trainImages={trainImages || []}
           trainFilter={trainFilter}
@@ -380,6 +416,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
         />
       ) : (
         <DatasetGrid
+          contentRef={contentRef}
           modelName={model.name}
           categoryName={pageToggle}
           images={dataset?.[pageToggle] || []}
@@ -579,6 +616,7 @@ function LibrarySelector({
 }
 
 type DatasetGridProps = {
+  contentRef: MutableRefObject<HTMLDivElement | null>;
   modelName: string;
   categoryName: string;
   images: string[];
@@ -587,6 +625,7 @@ type DatasetGridProps = {
   onDelete: (ids: string[]) => void;
 };
 function DatasetGrid({
+  contentRef,
   modelName,
   categoryName,
   images,
@@ -602,7 +641,10 @@ function DatasetGrid({
   );
 
   return (
-    <div className="flex flex-wrap gap-2 overflow-y-auto p-2">
+    <div
+      ref={contentRef}
+      className="scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2"
+    >
       {classData.map((image) => (
         <div
           className={cn(
@@ -658,6 +700,7 @@ function DatasetGrid({
 
 type TrainGridProps = {
   model: CustomClassificationModelConfig;
+  contentRef: MutableRefObject<HTMLDivElement | null>;
   classes: string[];
   trainImages: string[];
   trainFilter?: TrainFilter;
@@ -668,6 +711,7 @@ type TrainGridProps = {
 };
 function TrainGrid({
   model,
+  contentRef,
   classes,
   trainImages,
   trainFilter,
@@ -726,8 +770,9 @@ function TrainGrid({
 
   return (
     <div
+      ref={contentRef}
       className={cn(
-        "flex flex-wrap gap-2 overflow-y-auto p-2",
+        "scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2",
         isMobile && "justify-center",
       )}
     >
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 4ce7fcad4..c2e8ee88a 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -650,42 +650,57 @@ function DetectionReview({
 
   // keyboard
 
-  useKeyboardListener(["a", "r", "PageDown", "PageUp"], (key, modifiers) => {
-    if (modifiers.repeat || !modifiers.down) {
-      return;
-    }
+  useKeyboardListener(
+    ["a", "r", "ArrowDown", "ArrowUp", "PageDown", "PageUp"],
+    (key, modifiers) => {
+      if (!modifiers.down) {
+        return;
+      }
 
-    switch (key) {
-      case "a":
-        if (modifiers.ctrl) {
-          onSelectAllReviews();
-        }
-        break;
-      case "r":
-        if (selectedReviews.length > 0) {
-          currentItems?.forEach((item) => {
-            if (selectedReviews.includes(item.id)) {
-              item.has_been_reviewed = true;
-              markItemAsReviewed(item);
-            }
+      switch (key) {
+        case "a":
+          if (modifiers.ctrl && !modifiers.repeat) {
+            onSelectAllReviews();
+          }
+          break;
+        case "r":
+          if (selectedReviews.length > 0 && !modifiers.repeat) {
+            currentItems?.forEach((item) => {
+              if (selectedReviews.includes(item.id)) {
+                item.has_been_reviewed = true;
+                markItemAsReviewed(item);
+              }
+            });
+            setSelectedReviews([]);
+          }
+          break;
+        case "ArrowDown":
+          contentRef.current?.scrollBy({
+            top: 100,
+            behavior: "smooth",
           });
-          setSelectedReviews([]);
-        }
-        break;
-      case "PageDown":
-        contentRef.current?.scrollBy({
-          top: contentRef.current.clientHeight / 2,
-          behavior: "smooth",
-        });
-        break;
-      case "PageUp":
-        contentRef.current?.scrollBy({
-          top: -contentRef.current.clientHeight / 2,
-          behavior: "smooth",
-        });
-        break;
-    }
-  });
+          break;
+        case "ArrowUp":
+          contentRef.current?.scrollBy({
+            top: -100,
+            behavior: "smooth",
+          });
+          break;
+        case "PageDown":
+          contentRef.current?.scrollBy({
+            top: contentRef.current.clientHeight / 2,
+            behavior: "smooth",
+          });
+          break;
+        case "PageUp":
+          contentRef.current?.scrollBy({
+            top: -contentRef.current.clientHeight / 2,
+            behavior: "smooth",
+          });
+          break;
+      }
+    },
+  );
 
   return (
     <>
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 2bb726bad..b97967043 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -314,7 +314,7 @@ export default function SearchView({
 
       switch (key) {
         case "a":
-          if (modifiers.ctrl) {
+          if (modifiers.ctrl && !modifiers.repeat) {
             onSelectAllObjects();
           }
           break;
@@ -335,7 +335,6 @@ export default function SearchView({
             setSearchDetail(uniqueResults[newIndex]);
           }
           break;
-
         case "ArrowRight":
           if (uniqueResults.length > 0) {
             const currentIndex = searchDetail
@@ -352,6 +351,18 @@ export default function SearchView({
             setSearchDetail(uniqueResults[newIndex]);
           }
           break;
+        case "ArrowDown":
+          contentRef.current?.scrollBy({
+            top: 100,
+            behavior: "smooth",
+          });
+          break;
+        case "ArrowUp":
+          contentRef.current?.scrollBy({
+            top: -100,
+            behavior: "smooth",
+          });
+          break;
         case "PageDown":
           contentRef.current?.scrollBy({
             top: contentRef.current.clientHeight / 2,
@@ -370,7 +381,15 @@ export default function SearchView({
   );
 
   useKeyboardListener(
-    ["a", "ArrowLeft", "ArrowRight", "PageDown", "PageUp"],
+    [
+      "a",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "PageDown",
+      "PageUp",
+    ],
     onKeyboardShortcut,
     !inputFocused,
   );