mobux 0.45.0

A touch-friendly tmux web UI for unhinged people who run terminal sessions from their phone while walking the dog
import { UpdateRow, UpdateCard } from "../components/settings/Update.jsx";
import { NotificationsCard } from "../components/settings/Notifications.jsx";
import { RendererRow } from "../components/settings/Renderer.jsx";
import { ThemeRow } from "../components/settings/Theme.jsx";
import {
  ShellIntegrationRow,
  ShellIntegrationCard,
} from "../components/settings/ShellIntegration.jsx";
import { NodesRow, NodesCard } from "../components/settings/Nodes.jsx";
import { SttRow, SttCard } from "../components/settings/Stt.jsx";
import { ListenRow, ListenCard } from "../components/settings/Listen.jsx";
import { AboutRow, BuildInfoCard } from "../components/settings/BuildInfo.jsx";
import { Group, NavRow } from "../components/settings/ui.jsx";

export const SUB_PAGES = {
  update: { title: "Software update", Page: UpdateCard },
  shell: { title: "Shell integration", Page: ShellIntegrationCard },
  nodes: { title: "Nodes", Page: NodesCard },
  stt: { title: "Speech to text", Page: SttCard },
  listen: { title: "Listen", Page: ListenCard },
  about: { title: "About", Page: BuildInfoCard },
};

export function SettingsPage() {
  return (
    <div class="settings-page" data-page="settings">
      <Group id="install-app" title="App">
        <UpdateRow />
        <NavRow
          row="install"
          to="/install"
          label="Install app"
          secondary="Certificate and Android package"
        />
      </Group>
      <NotificationsCard />
      <Group title="Terminal">
        <RendererRow />
        <ThemeRow />
        <ShellIntegrationRow />
      </Group>
      <Group title="Hosts">
        <NodesRow />
      </Group>
      <Group title="Voice">
        <SttRow />
        <ListenRow />
      </Group>
      <Group>
        <AboutRow />
      </Group>
    </div>
  );
}

export function SettingsSubPage({ section }) {
  const sub = SUB_PAGES[section];
  if (!sub) {
    return (
      <div class="settings-page">
        <p class="settings-lede">No settings page named “{section}”.</p>
      </div>
    );
  }
  const { Page } = sub;
  return (
    <div class="settings-page settings-subpage" data-page={section}>
      <Page />
    </div>
  );
}