Add pane navigation shortcuts

Author: ChristianChiarulli

app/src/app.tsx

@@ -24,8 +24,14 @@ import { PublishDialog, PublishShortNoteDialog } from "@/features/publishing";
 import { SidebarPane } from "@/features/shell/sidebar-pane";
 import { useRevealMainWindow } from "@/features/shell/use-reveal-main-window";
 import { useShellController } from "@/features/shell/use-shell-controller";
+import { useShellStore } from "@/features/shell/store/use-shell-store";
 import { useUIStore } from "@/features/settings/store/use-ui-store";
 import {
+  dispatchFocusEditor,
+  dispatchFocusNotesPane,
+} from "@/shared/lib/pane-navigation";
+import {
+  getPaneFocusShortcut,
   isCommandPaletteShortcut,
   isEditorFindShortcut,
   isNotesSearchShortcut,
@@ -77,6 +83,7 @@ function App() {
   useRevealMainWindow(!hasCompletedStartupReveal && !readyToRevealWindow);
 
   const setSettingsOpen = useUIStore((s) => s.setSettingsOpen);
+  const setFocusedPane = useShellStore((s) => s.setFocusedPane);
 
   const openCommandPalette = useEffectEvent(() => {
     setCommandPaletteOpen(true);
@@ -90,6 +97,20 @@ function App() {
     window.dispatchEvent(new CustomEvent(OPEN_EDITOR_FIND_EVENT));
   });
 
+  const focusPane = useEffectEvent((pane: "sidebar" | "notes" | "editor") => {
+    if (pane === "editor") {
+      dispatchFocusEditor();
+      return;
+    }
+
+    if (pane === "notes") {
+      dispatchFocusNotesPane();
+      return;
+    }
+
+    setFocusedPane(pane);
+  });
+
   const handleKeyDown = useEffectEvent((event: KeyboardEvent) => {
     if (isCommandPaletteShortcut(event)) {
       event.preventDefault();
@@ -115,6 +136,15 @@ function App() {
       return;
     }
 
+    const paneShortcut = getPaneFocusShortcut(event);
+    if (paneShortcut) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      focusPane(paneShortcut);
+      return;
+    }
+
     if (!event.metaKey) return;
 
     const key = event.key.toLowerCase();

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

@@ -109,6 +109,7 @@ type NoteEditorProps = {
 export type NoteEditorHandle = {
   blur(): void;
   focus(): void;
+  focusAtStart(): void;
   focusAtEnd(): void;
   redo(): boolean;
   undo(): boolean;
@@ -271,6 +272,20 @@ function focusEditorAtEndPreservingScroll(view: EditorView) {
   }
 }
 
+function focusEditorAtStart(view: EditorView) {
+  useShellStore.getState().setFocusedPane("editor");
+  view.dispatch({
+    selection: EditorSelection.cursor(0),
+    scrollIntoView: false,
+  });
+  view.focus();
+
+  const scrollContainer = findEditorScrollContainer(view);
+  if (scrollContainer) {
+    scrollContainer.scrollTop = 0;
+  }
+}
+
 function dispatchPointerCursorSelection(view: EditorView, pos: number) {
   view.dispatch({
     annotations: Transaction.userEvent.of("select.pointer"),
@@ -766,6 +781,13 @@ export const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           }
           viewRef.current?.focus();
         },
+        focusAtStart() {
+          if (readOnly || !viewRef.current) {
+            return;
+          }
+
+          focusEditorAtStart(viewRef.current);
+        },
         focusAtEnd() {
           if (readOnly || !viewRef.current) {
             return;