Move focus between panes

You'll split the task list into a list pane and a detail pane, move between them with Tab and Shift+Tab and give each pane its own keys. It starts from the app you built in 640.

Before you start

Install from crates.io. You need no Node and no package manager.

cargo install snapfire_compiler
cargo install snapfire_fsr_cli
fsr --version

Every command and screenshot on this page was captured with fsr 0.x.

Focus in Ink#

useFocus makes a component focusable and tells it whether it has the focus. Tab moves the focus to the next focusable component in the order they render and Shift+Tab moves it back, wrapping at either end. autoFocus: true gives a component the focus when nothing else has it. An id lets you move the focus to it by name.

useFocusManager moves the focus from code: focus(id), focusNext, focusPrevious, enableFocus, disableFocus and activeId.

Every useInput hears every key. Its second argument, { isActive }, turns a handler off. A pane that should only answer while it has the focus passes { isActive: isFocused }.

Write the two panes#

Add useFocus and useFocusManager to the ink import:

app/routes/page.tsx

import { Box, Spacer, Text, useFocus, useFocusManager, useInput } from "ink";

Then add the panes above Tasks. The list pane takes the arrow keys and space. The detail pane shows the selected task and takes x, which removes it:

app/routes/page.tsx

type ListProps = { tasks: Task[]; selected: number; active: boolean; onMove: (by: number) => void; onToggle: () => void };

function ListPane({ tasks, selected, active, onMove, onToggle }: ListProps) {
  const { isFocused } = useFocus({ id: "list", autoFocus: true });
  useInput(
    (input, key) => {
      if (key.upArrow) onMove(-1);
      if (key.downArrow) onMove(1);
      if (input === " ") onToggle();
    },
    { isActive: isFocused && active },
  );
  return (
    <Box flexDirection="column" flexGrow={1} flexBasis={0} borderStyle="round" borderColor={isFocused ? "cyan" : "gray"} paddingX={1}>
      {tasks.map((task, index) => (
        <Text key={task.title} bold={index === selected} dimColor={task.done} strikethrough={task.done}>
          {index === selected ? "> " : "  "}
          {task.title}
        </Text>
      ))}
    </Box>
  );
}

type DetailProps = { task: Task | undefined; active: boolean; onRemove: () => void };

function DetailPane({ task, active, onRemove }: DetailProps) {
  const { isFocused } = useFocus({ id: "detail" });
  useInput(
    (input) => {
      if (input === "x") onRemove();
    },
    { isActive: isFocused && active },
  );
  return (
    <Box flexDirection="column" flexGrow={1} flexBasis={0} borderStyle="round" borderColor={isFocused ? "cyan" : "gray"} paddingX={1}>
      {task ? (
        <>
          <Text bold>{task.title}</Text>
          <Text color={task.done ? "green" : "yellow"}>{task.done ? "done" : "open"}</Text>
          <Text dimColor>x removes it</Text>
        </>
      ) : (
        <Text dimColor>nothing selected</Text>
      )}
    </Box>
  );
}

Each pane runs in place with its own focus and its own handler. The border is cyan on the pane that has the focus and gray on the other. active is false while the text box from 640 is open, so typing a space or an x into it reaches neither pane. flexGrow={1} with flexBasis={0} on both panes splits the row between them in equal halves.

Hand the panes the state#

The tasks and the selection stay in Tasks. The panes get them as props, with functions that change them. Replace the component:

app/routes/page.tsx

export default function Tasks({ name, where, tasks: initial, limit }: RootProps) {
  const [tasks, setTasks] = useState(initial);
  const [selected, setSelected] = useState(0);
  const [adding, setAdding] = useState(false);
  const [draft, setDraft] = useState("");
  const [saving, setSaving] = useState(false);
  const { focus } = useFocusManager();

  useEffect(() => {
    if (!saving) return;
    const timer = setTimeout(() => {
      save(where, tasks);
      setSaving(false);
    }, 500);
    return () => clearTimeout(timer);
  }, [tasks]);

  useInput((input, key) => {
    if (adding) {
      if (key.escape) setAdding(false);
      return;
    }
    if (input === "a") setAdding(true);
    if (input === "1") focus("list");
    if (input === "2") focus("detail");
  });

  const open = tasks.filter((task) => !task.done).length;
  const shown = tasks.slice(0, limit);

  const change = (next: Task[]) => {
    setTasks(next);
    setSaving(true);
  };

  const move = (by: number) => setSelected(Math.min(Math.max(selected + by, 0), shown.length - 1));
  const toggle = () => change(tasks.map((task, index) => (index === selected ? { ...task, done: !task.done } : task)));
  const remove = () => {
    change(tasks.filter((_, index) => index !== selected));
    setSelected(Math.max(selected - 1, 0));
  };
  const add = (title: string) => {
    setAdding(false);
    setDraft("");
    if (title.trim() !== "") change([...tasks, { title: title.trim(), done: false }]);
  };

  return (
    <Box flexDirection="column" width={64}>
      <Box paddingX={1}>
        <Text bold>Tasks</Text>
        <Text dimColor> {name}</Text>
        <Spacer />
        <Text color={open === 0 ? "green" : "yellow"}>{open} open</Text>
      </Box>
      <Box>
        <ListPane tasks={shown} selected={selected} active={!adding} onMove={move} onToggle={toggle} />
        <DetailPane task={shown[selected]} active={!adding} onRemove={remove} />
      </Box>
      {adding ? (
        <Box paddingX={1}>
          <Text color="cyan">new: </Text>
          <TextInput value={draft} onChange={setDraft} onSubmit={add} placeholder="what needs doing" />
        </Box>
      ) : null}
      <Box paddingX={1}>
        <Text dimColor>{adding ? "Enter adds, Esc cancels" : "Tab switches panes, a adds"}</Text>
        <Spacer />
        {saving ? (
          <Text color="yellow">
            <Spinner type="dots" /> saving
          </Text>
        ) : (
          <Text dimColor>saved</Text>
        )}
      </Box>
    </Box>
  );
}

The page's own handler has no isActive, so it hears every key whichever pane has the focus. 1 and 2 call focus with a pane's id to jump straight to it.

Run it#

Start from a list of three:

$ cat > ~/.tasks/tasks.json <<'EOF'
[{"title":"Write the README","done":true},{"title":"Tag a release","done":false},{"title":"Answer the open issues","done":false}]
EOF
$ fsr dev app --terminal

The list pane has the focus from the start:

 Tasks tasks.json                                        2 open
╭──────────────────────────────╮╭──────────────────────────────╮
│ > Write the README           ││ Write the README             │
│   Tag a release              ││ done                         │
│   Answer the open issues     ││ x removes it                 │
╰──────────────────────────────╯╰──────────────────────────────╯
 Tab switches panes, a adds                               saved

Press Tab. The detail pane's border turns cyan. Press x and the README task is gone. Press Shift+Tab to go back to the list, then down and space:

 Tasks tasks.json                                        1 open
╭──────────────────────────────╮╭──────────────────────────────╮
│   Tag a release              ││ Answer the open issues       │
│ > Answer the open issues     ││ done                         │
│                              ││ x removes it                 │
╰──────────────────────────────╯╰──────────────────────────────╯
 Tab switches panes, a adds                               saved

Space does nothing while the detail pane has the focus and x does nothing while the list has it, since each handler is only active in its own pane.

Next up: 660. Run git and show its output.