Add note pane keyboard navigation

Author: ChristianChiarulli

app/src/features/editor/note-editor.tsx

@@ -521,6 +521,14 @@ export const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
                 return true;
               },
             },
+            {
+              key: "Escape",
+              run(view) {
+                useShellStore.getState().setFocusedPane("notes");
+                blurEditorView(view);
+                return true;
+              },
+            },
             {
               key: "Mod-a",
               run(view) {

app/src/features/notes/lib/note-list-navigation.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+
+import { getAdjacentNoteId } from "@/features/notes/lib/note-list-navigation";
+
+const notes = [{ id: "note-1" }, { id: "note-2" }, { id: "note-3" }];
+
+describe("getAdjacentNoteId", () => {
+  it("returns the next note id when moving forward", () => {
+    expect(getAdjacentNoteId(notes, "note-2", "next")).toBe("note-3");
+  });
+
+  it("returns the previous note id when moving backward", () => {
+    expect(getAdjacentNoteId(notes, "note-2", "previous")).toBe("note-1");
+  });
+
+  it("returns null when moving past the end of the list", () => {
+    expect(getAdjacentNoteId(notes, "note-3", "next")).toBeNull();
+  });
+
+  it("returns null when moving before the start of the list", () => {
+    expect(getAdjacentNoteId(notes, "note-1", "previous")).toBeNull();
+  });
+
+  it("returns null when the current note is not in the list", () => {
+    expect(getAdjacentNoteId(notes, "missing-note", "next")).toBeNull();
+  });
+});

app/src/features/notes/lib/note-list-navigation.ts

@@ -0,0 +1,20 @@
+export type NoteListNavigationDirection = "next" | "previous";
+
+type NoteListItem = {
+  id: string;
+};
+
+export function getAdjacentNoteId<T extends NoteListItem>(
+  notes: T[],
+  currentNoteId: string,
+  direction: NoteListNavigationDirection,
+) {
+  const currentIndex = notes.findIndex((note) => note.id === currentNoteId);
+  if (currentIndex === -1) {
+    return null;
+  }
+
+  const nextIndex = direction === "next" ? currentIndex + 1 : currentIndex - 1;
+
+  return notes[nextIndex]?.id ?? null;
+}

app/src/features/notes/ui/notes-pane.tsx

@@ -32,6 +32,10 @@ import { useInView } from "react-intersection-observer";
 
 import { Button } from "@/shared/ui/button";
 import { searchWordsFromQuery } from "@/shared/lib/search";
+import {
+  type NoteListNavigationDirection,
+  getAdjacentNoteId,
+} from "@/features/notes/lib/note-list-navigation";
 import { useShellStore } from "@/features/shell/store/use-shell-store";
 
 import {
@@ -378,6 +382,7 @@ type NoteRowProps = {
   isSearchFocused: boolean;
   note: NoteSummary;
   onContextMenu(event: MouseEvent<HTMLButtonElement>, note: NoteSummary): void;
+  onMoveSelection(direction: NoteListNavigationDirection): void;
   onSelectNote(noteId: string): void;
   searchWords: string[];
   selectedNoteId: string | null;
@@ -437,6 +442,7 @@ const NoteRow = memo(function NoteRow({
   isSearchFocused,
   note,
   onContextMenu,
+  onMoveSelection,
   onSelectNote,
   searchWords,
   selectedNoteId,
@@ -474,6 +480,18 @@ const NoteRow = memo(function NoteRow({
         onFocus={() => {
           useShellStore.getState().setFocusedPane("notes");
         }}
+        onKeyDown={(event) => {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            onMoveSelection("next");
+            return;
+          }
+
+          if (event.key === "ArrowUp") {
+            event.preventDefault();
+            onMoveSelection("previous");
+          }
+        }}
         onPointerDown={(event) => {
           handleNoteRowPointerDown(event);
           setShouldRestoreSelectedRowFocus();
@@ -619,6 +637,27 @@ export function NotesPane({
     [onChangeSearch],
   );
 
+  const handleMoveSelection = useCallback(
+    (currentNoteId: string, direction: NoteListNavigationDirection) => {
+      if (isMutatingNote) {
+        return;
+      }
+
+      const nextNoteId = getAdjacentNoteId(
+        filteredNotes,
+        currentNoteId,
+        direction,
+      );
+      if (!nextNoteId) {
+        return;
+      }
+
+      setIsSearchFocused(false);
+      onSelectNote(nextNoteId);
+    },
+    [filteredNotes, isMutatingNote, onSelectNote],
+  );
+
   useEffect(() => {
     if (searchQuery) {
       setIsSearchOpen(true);
@@ -817,6 +856,9 @@ export function NotesPane({
                       key={note.id}
                       note={note}
                       onContextMenu={handleNoteContextMenu}
+                      onMoveSelection={(direction) => {
+                        handleMoveSelection(note.id, direction);
+                      }}
                       onSelectNote={(noteId) => {
                         setIsSearchFocused(false);
                         onSelectNote(noteId);