feat(ui): alias Ctrl+N / Ctrl+P to ArrowDown / ArrowUp in list navigation

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: koki-develop

src/components/molecules/MenuList.tsx

@@ -1,6 +1,8 @@
 import { clsx } from "clsx";
 import { useEffect, useRef } from "react";
 
+import { isArrowDownKey, isArrowUpKey } from "@/lib/keyboard";
+
 import type { DropdownMenuItem } from "./DropdownMenu";
 
 export type MenuListProps = {
@@ -14,7 +16,7 @@ const itemColorStyles: Record<NonNullable<DropdownMenuItem["color"]>, string> =
     "text-red-400 hover:bg-red-500/10 hover:text-red-300 focus:bg-red-500/10 focus:text-red-300",
 };
 
-const NAV_KEYS = new Set(["Tab", "ArrowDown", "ArrowUp", "Home", "End"]);
+const STATIC_NAV_KEYS = new Set(["Tab", "Home", "End"]);
 
 /**
  * Renders a focus-managed menu list shared by `DropdownMenu` and `ContextMenu`.
@@ -60,7 +62,9 @@ export function MenuList({ items, onSelect }: MenuListProps) {
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.defaultPrevented) return;
-      if (!NAV_KEYS.has(e.key)) return;
+      const downKey = isArrowDownKey(e);
+      const upKey = isArrowUpKey(e);
+      if (!downKey && !upKey && !STATIC_NAV_KEYS.has(e.key)) return;
       if (!container) return;
       const buttons = Array.from(container.querySelectorAll<HTMLButtonElement>("button"));
       if (buttons.length === 0) return;
@@ -71,33 +75,33 @@ export function MenuList({ items, onSelect }: MenuListProps) {
       const currentIndex = focusedButton ? buttons.indexOf(focusedButton) : -1;
 
       let nextIndex: number;
-      switch (e.key) {
-        case "Tab":
-          if (currentIndex < 0) {
-            nextIndex = e.shiftKey ? buttons.length - 1 : 0;
-          } else {
-            nextIndex = e.shiftKey
-              ? (currentIndex - 1 + buttons.length) % buttons.length
-              : (currentIndex + 1) % buttons.length;
-          }
-          break;
-        case "ArrowDown":
-          nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % buttons.length;
-          break;
-        case "ArrowUp":
-          nextIndex =
-            currentIndex < 0
-              ? buttons.length - 1
-              : (currentIndex - 1 + buttons.length) % buttons.length;
-          break;
-        case "Home":
-          nextIndex = 0;
-          break;
-        case "End":
-          nextIndex = buttons.length - 1;
-          break;
-        default:
-          return;
+      if (downKey) {
+        nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % buttons.length;
+      } else if (upKey) {
+        nextIndex =
+          currentIndex < 0
+            ? buttons.length - 1
+            : (currentIndex - 1 + buttons.length) % buttons.length;
+      } else {
+        switch (e.key) {
+          case "Tab":
+            if (currentIndex < 0) {
+              nextIndex = e.shiftKey ? buttons.length - 1 : 0;
+            } else {
+              nextIndex = e.shiftKey
+                ? (currentIndex - 1 + buttons.length) % buttons.length
+                : (currentIndex + 1) % buttons.length;
+            }
+            break;
+          case "Home":
+            nextIndex = 0;
+            break;
+          case "End":
+            nextIndex = buttons.length - 1;
+            break;
+          default:
+            return;
+        }
       }
       e.preventDefault();
       buttons[nextIndex].focus();

src/components/molecules/Select.tsx

@@ -6,6 +6,7 @@ import { createPortal } from "react-dom";
 import { useAnchorRect } from "@/hooks/ui/useAnchorRect";
 import { useClickOutside } from "@/hooks/ui/useClickOutside";
 import { useEscapeKey } from "@/hooks/ui/useEscapeKey";
+import { isArrowDownKey, isArrowUpKey } from "@/lib/keyboard";
 
 export type SelectOption = {
   label: string;
@@ -32,15 +33,17 @@ export function Select({ value, onChange, options }: SelectProps) {
 
   const handleKeyDown = useEffectEvent((e: KeyboardEvent) => {
     if (options.length === 0) return;
+    if (isArrowDownKey(e)) {
+      e.preventDefault();
+      setHighlightedIndex((prev) => (prev + 1) % options.length);
+      return;
+    }
+    if (isArrowUpKey(e)) {
+      e.preventDefault();
+      setHighlightedIndex((prev) => (prev - 1 + options.length) % options.length);
+      return;
+    }
     switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        setHighlightedIndex((prev) => (prev + 1) % options.length);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        setHighlightedIndex((prev) => (prev - 1 + options.length) % options.length);
-        break;
       case "Enter":
       case " ":
         e.preventDefault();

src/components/molecules/TagEditor.tsx

@@ -12,7 +12,7 @@ import {
 import { TagChip } from "@/components/atoms";
 import { useAnchorRect } from "@/hooks/ui/useAnchorRect";
 import { useClickOutside } from "@/hooks/ui/useClickOutside";
-import { isImeKeyEvent } from "@/lib/keyboard";
+import { isArrowDownKey, isArrowUpKey, isImeKeyEvent } from "@/lib/keyboard";
 import { commitPending, fuzzySubsequenceMatch } from "@/lib/tags";
 
 import { TagSuggestionPopover } from "./TagSuggestionPopover";
@@ -181,12 +181,12 @@ export function TagEditor({
     // (e.g. zero matches), Escape must fall through to close the enclosing
     // dialog instead of being consumed as a popover dismiss.
     if (!popoverVisible) return false;
-    if (e.key === "ArrowDown") {
+    if (isArrowDownKey(e)) {
       e.preventDefault();
       setSelectedIndex((i) => (i < 0 ? 0 : (i + 1) % filteredSuggestions.length));
       return true;
     }
-    if (e.key === "ArrowUp") {
+    if (isArrowUpKey(e)) {
       e.preventDefault();
       setSelectedIndex((i) =>
         i < 0

src/components/organisms/settings/McpSetupSnippets.tsx

@@ -3,6 +3,7 @@ import { type KeyboardEvent, useId, useRef, useState } from "react";
 
 import { Text } from "@/components/atoms";
 import { CodeBlock } from "@/components/molecules";
+import { isArrowDownKey, isArrowUpKey } from "@/lib/keyboard";
 import type { McpSetupSnippet } from "@/types";
 
 export type McpSetupSnippetsProps = {
@@ -35,17 +36,17 @@ export function McpSetupSnippets({ snippets }: McpSetupSnippetsProps) {
 
   const handleKeyDown = (e: KeyboardEvent) => {
     const last = snippets.length - 1;
+    if (e.key === "ArrowRight" || isArrowDownKey(e)) {
+      e.preventDefault();
+      focusTab(active === last ? 0 : active + 1);
+      return;
+    }
+    if (e.key === "ArrowLeft" || isArrowUpKey(e)) {
+      e.preventDefault();
+      focusTab(active === 0 ? last : active - 1);
+      return;
+    }
     switch (e.key) {
-      case "ArrowRight":
-      case "ArrowDown":
-        e.preventDefault();
-        focusTab(active === last ? 0 : active + 1);
-        break;
-      case "ArrowLeft":
-      case "ArrowUp":
-        e.preventDefault();
-        focusTab(active === 0 ? last : active - 1);
-        break;
       case "Home":
         e.preventDefault();
         focusTab(0);

src/lib/AGENTS.md

@@ -6,7 +6,7 @@ Domain helpers that take inputs and return values. **No React, no Tauri, no `@/a
 
 - `board.ts` — Kanban column state derivation. `groupTasksByStatus`, `moveTaskToIndex` (geometry-aware insertion for column empty-area drops), `calculateMidpoint` + `computeDropOrder` (the floating-point `order` slot picker that triggers a backend `renumber` when precision is exhausted), and the `UNKNOWN_STATUS` sentinel for tasks whose status no longer matches any column.
 - `filter.ts` — `isValidFilter`: trims operand-less tag filters out of visible-count / save payloads.
-- `keyboard.ts` — `isImeKeyEvent`: returns true when a keydown was generated by an IME composition step (composition, confirm, cancel). Handles both native `KeyboardEvent` and React's synthetic, including the WebKit quirk where `compositionend` fires before the confirming/cancelling keydown.
+- `keyboard.ts` — `isImeKeyEvent`: returns true when a keydown was generated by an IME composition step (composition, confirm, cancel). Handles both native `KeyboardEvent` and React's synthetic, including the WebKit quirk where `compositionend` fires before the confirming/cancelling keydown. `isArrowDownKey` / `isArrowUpKey`: project-wide directional-key detectors — match either the literal `ArrowDown` / `ArrowUp` key or the Emacs-style `Ctrl+N` / `Ctrl+P`. Every list / menu / popover / tab navigation handler routes through these helpers so the two stay perfectly aligned. Ctrl+N/P is matched only with the plain Control modifier so it never collides with chords like `Cmd+N` ("New Task") or `Ctrl+Shift+N` ("New Window").
 - `statuses.ts` — Status edit support: `labelKey` (cheap equality), `buildCandidateStatuses` (trim + drop blanks), `hasDuplicateLabel`, `statusEntriesEqual`, `buildRenameMap` (drives backend frontmatter migration on rename).
 - `tags.ts` — `commitPending` (dedup + trim a pending tag input), `fuzzySubsequenceMatch` (autocomplete predicate), `fuzzySubsequenceMatchIndices` (the matched-character indices used to highlight suggestions).
 - `task.ts` — Task form diff: `TaskFormSnapshot`, `computeDirtyUpdates` (returns a sparse `TaskUpdates`), `withTaskUpdates`.

src/lib/keyboard.ts

@@ -22,3 +22,38 @@ export const isImeKeyEvent = (e: ImeAwareKeyEvent): boolean => {
   const composing = e.nativeEvent?.isComposing ?? e.isComposing ?? false;
   return composing || e.keyCode === 229;
 };
+
+type DirectionalKeyEvent = {
+  key: string;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  altKey: boolean;
+  shiftKey: boolean;
+};
+
+// Plain Ctrl with no co-modifier. Ctrl+Shift+N is "New Window" and Cmd+N is
+// "New Task" — neither must alias to a navigation key, so we reject any chord
+// that combines Ctrl with another modifier.
+const isPlainCtrl = (e: DirectionalKeyEvent): boolean =>
+  e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
+
+/**
+ * True when the keydown represents "move down" — either the literal ArrowDown
+ * key or the Emacs-style Ctrl+N. Every list / menu / popover / tab navigation
+ * handler in the project routes through this helper so Ctrl+N stays universally
+ * aligned with ArrowDown.
+ *
+ * Matched only with the *plain* Control modifier (no Cmd / Alt / Shift), so the
+ * shortcut never collides with chords that already mean something else
+ * (Cmd+N "New Task", Ctrl+Shift+N "New Window").
+ */
+export const isArrowDownKey = (e: DirectionalKeyEvent): boolean =>
+  e.key === "ArrowDown" || (isPlainCtrl(e) && e.key.toLowerCase() === "n");
+
+/**
+ * True when the keydown represents "move up" — either the literal ArrowUp key
+ * or the Emacs-style Ctrl+P. Pairs with `isArrowDownKey` for keyboard
+ * navigation across the project.
+ */
+export const isArrowUpKey = (e: DirectionalKeyEvent): boolean =>
+  e.key === "ArrowUp" || (isPlainCtrl(e) && e.key.toLowerCase() === "p");