Merge pull request #4: navigate panes with the arrow keys

# Conflicts:
#	package-lock.json

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
 .DS_Store
+package-lock.json

src/ui/App.tsx

@@ -315,6 +315,14 @@ export function App({
         setRegion(region === "sidebar" ? "content" : "sidebar");
         return;
       }
+      if (key.rightArrow) {
+        if (region === "sidebar") setRegion("content");
+        return;
+      }
+      if (key.leftArrow) {
+        if (region === "content") setRegion("sidebar");
+        return;
+      }
       if (key.escape) {
         if (captureMode === "esc") return;
         if (region === "content") {

src/ui/components/Results.tsx

@@ -113,6 +113,7 @@ export function Results() {
     submitQuery,
     section,
     region,
+    setRegion,
     setCaptureMode,
     startDownload,
     copyMagnet,
@@ -172,9 +173,13 @@ export function Results() {
         setMode("search");
         return;
       }
+      if (key.upArrow) {
+        if (results.length > 0 && clamped > 0) setCursor(clamped - 1);
+        else setMode("search");
+        return;
+      }
       if (results.length === 0) return;
-      if (key.upArrow) setCursor(wrapStep(clamped, -1, results.length));
-      else if (key.downArrow) setCursor(wrapStep(clamped, 1, results.length));
+      if (key.downArrow) setCursor(wrapStep(clamped, 1, results.length));
       else if (key.pageUp) setCursor(Math.max(0, clamped - pageJump));
       else if (key.pageDown) setCursor(Math.min(results.length - 1, clamped + pageJump));
       else if (key.return) {
@@ -292,12 +297,14 @@ export function Results() {
         editing={mode === "search"}
         placeholder={PLACEHOLDER}
         onSubmit={onSubmit}
+        onExitDown={() => setMode("list")}
+        onExitLeft={() => setRegion("sidebar")}
       />
       <Box marginTop={1}>
         <Panel
           title={mode === "detail" ? "details" : browsing ? "latest" : "results"}
           width={contentWidth}
-          focused={focused}
+          focused={focused && mode !== "search"}
           count={mode === "detail" ? undefined : count}
           height={panelOuter}
         >

src/ui/components/SearchBar.tsx

@@ -10,6 +10,8 @@ interface SearchBarProps {
   editing: boolean;
   onSubmit: (value: string) => void;
   onChange?: (value: string) => void;
+  onExitDown?: () => void;
+  onExitLeft?: () => void;
 }
 
 export function SearchBar({
@@ -19,6 +21,8 @@ export function SearchBar({
   editing,
   onSubmit,
   onChange,
+  onExitDown,
+  onExitLeft,
 }: SearchBarProps) {
   return (
     <Panel title="search" width={width} focused={editing} height={2}>
@@ -31,6 +35,8 @@ export function SearchBar({
               placeholder={placeholder}
               onSubmit={onSubmit}
               onChange={onChange}
+              onExitDown={onExitDown}
+              onExitLeft={onExitLeft}
             />
           ) : value ? (
             <Text wrap="truncate-end">{value}</Text>

src/ui/components/TextField.tsx

@@ -7,6 +7,8 @@ export interface TextFieldProps {
   placeholder?: string;
   onChange?: (value: string) => void;
   onSubmit?: (value: string) => void;
+  onExitDown?: () => void;
+  onExitLeft?: () => void;
 }
 
 interface Edit {
@@ -48,6 +50,8 @@ export function TextField({
   placeholder = "",
   onChange,
   onSubmit,
+  onExitDown,
+  onExitLeft,
 }: TextFieldProps) {
   const [value, setValue] = useState(defaultValue);
   const [cursor, setCursor] = useState(defaultValue.length);
@@ -60,8 +64,11 @@ export function TextField({
 
   useInput(
     (input, key) => {
-      if (key.upArrow || key.downArrow || key.tab || (key.ctrl && input === "c"))
+      if (key.downArrow) {
+        onExitDown?.();
         return;
+      }
+      if (key.upArrow || key.tab || (key.ctrl && input === "c")) return;
 
       if (key.return) {
         onSubmit?.(value);
@@ -91,7 +98,11 @@ export function TextField({
       }
 
       if (key.leftArrow) {
-        setCursor(Math.max(0, cursor - 1));
+        if (cursor === 0) {
+          onExitLeft?.();
+          return;
+        }
+        setCursor(cursor - 1);
         return;
       }
       if (key.rightArrow) {

src/ui/keymap.ts

@@ -14,7 +14,7 @@ export const HELP_GROUPS: HelpGroup[] = [
   {
     title: "Navigate",
     hints: [
-      { keys: "↑ ↓", label: "Move" },
+      { keys: "↑ ↓ ← →", label: "Navigate content and panes" },
       { keys: "↵", label: "Open" },
       { keys: "tab", label: "Switch pane" },
       { keys: "esc", label: "Back" },
@@ -49,6 +49,8 @@ export const HELP_GROUPS: HelpGroup[] = [
   },
 ];
 
+const NAVIGATE: Hint = { keys: "↑ ↓ ← →", label: "Navigate content and panes" };
+
 const ALWAYS: Hint = { keys: "?", label: "Keys" };
 
 const SWITCH: Hint = { keys: "tab", label: "Switch pane" };
@@ -61,7 +63,7 @@ export function footerHints(
 ): Hint[] {
   if (region === "sidebar") {
     return [
-      { keys: "↑↓", label: "Move" },
+      NAVIGATE,
       { keys: "↵", label: "Open" },
       SWITCH,
       ALWAYS,
@@ -82,6 +84,7 @@ export function footerHints(
     }
     if (downloadFocus === "recent") {
       return [
+        NAVIGATE,
         { keys: "d", label: "Download again" },
         { keys: "c", label: "Remove" },
         { keys: "x", label: "Clear" },
@@ -92,6 +95,7 @@ export function footerHints(
     return [{ keys: "p", label: "Pause" }, { keys: "c", label: "Cancel" }, SWITCH, ALWAYS];
   }
   return [
+    NAVIGATE,
     { keys: "d", label: "Download" },
     { keys: "y", label: "Copy magnet" },
     { keys: "/", label: "Search" },