Configuration

{
  "theme": { "name": "gruvbox" },
  "keys": {
    "cursor-down": "down",
    "cursor-up": "up",
    "quit": "ctrl+x"
  },
  "view": { "gutter": false }
}

Run tooee view README.md from the folder that holds .tooee/. View starts in gruvbox with the gutter off. down and up move the cursor, j and k do nothing, and ctrl+x quits. The file applies to every Tooee app started from that folder or from a folder below it, including apps you build on @tooee/shell.

Config files

Tooee starts from its defaults, tokyonight in dark mode, then applies the global file, the project file, and the overrides in that order. Each of theme, keys, and view merges key by key, so a project file that sets keys.quit keeps the keys.cursor-down from the global file. The search for a project file stops at the first .tooee/config.json it meets on the way up.

A file that fails to parse is skipped. A key Tooee does not know is dropped, so the file cannot carry settings of your own. A value of the wrong type is dropped as well; in keys, one value that is not a string drops the whole keys map of that file.

Settings

TooeeConfig from @tooee/config is the type of the merged result. ColorMode is the type of theme.mode.

Remap keys

Every command has an id. keys maps an id to a new hotkey in the grammar from Commands and modes: a key, a chord such as ctrl+x, or a sequence such as g d. The new hotkey replaces the default, so the old key is free for another command.

Commands of your own remap by the id you gave them. The deploy console on Commands and modes registers deploy.run on d, and { "keys": { "deploy.run": "shift+d" } } moves it to D.

The remap changes the key that runs the command. The palette and the which-key bar show the new key. Hints that your app draws itself must read the config, as the next example does.

Read the config in your app

import { useCommand } from "@tooee/commands";
import { useKeymapConfig } from "@tooee/config";
import { AppLayout } from "@tooee/layout";
import { launchCli, useQuitCommand } from "@tooee/shell";
import { useState } from "react";
import type { ReactNode } from "react";

const Deploy = function Deploy(): ReactNode {
  const keymap = useKeymapConfig();
  const [status, setStatus] = useState("idle");
  useQuitCommand();
  useCommand({
    handler: () => {
      setStatus("deployed");
    },
    hotkey: "d",
    id: "deploy.run",
    title: "Deploy",
  });
  const hints = `${keymap["deploy.run"] ?? "d"} deploy  ${keymap.quit ?? "q"} quit`;

  return (
    <AppLayout statusBar={{ items: [{ label: "", value: hints }] }}>
      <box paddingLeft={1}>
        <text content={`status: ${status}`} />
      </box>
    </AppLayout>
  );
};

await launchCli(<Deploy />, {
  provider: { config: { keys: { "deploy.run": "shift+d" } } },
});

Run it from the folder that holds the config file at the top of this page. The status bar reads shift+d deploy ctrl+x quit: the deploy.run key comes from the overrides and the quit key from the project file. D deploys and ctrl+x quits.

useConfig() returns the merged TooeeConfig. useKeymapConfig() returns keys, or an empty object. useThemeConfig() returns theme. All three come from @tooee/config and read the ConfigProvider that TooeeProvider mounts, so they work in any app started with launchCli or runCliSession. Outside React, loadConfig(overrides) reads the same layers and returns the merged result.

What the theme picker writes

Enter in the theme picker calls writeGlobalConfig({ theme: { mode, name } }) from @tooee/config. The function reads the global file, merges the new theme into it, and writes the file back with two-space indentation. The project file and the overrides are left alone, so a theme.name in .tooee/config.json still wins over the saved choice. The write merges into the raw JSON, so keys that Tooee does not know stay in the file, at the top level and inside theme, keys, and view. When the global file is not valid JSON, the write leaves it unchanged.

Next

• Themes
• Commands and modes
• Keyboard basics
• Keyboard shortcuts