mobux 0.46.0

A touch-friendly tmux web UI for unhinged people who run terminal sessions from their phone while walking the dog
import { useEffect } from "preact/hooks";
import {
  buildInfo,
  buildInfoError,
  loadBuildInfo,
} from "../../lib/buildInfo.js";
import { PageRows, PagesError, hasPages, pageCount } from "../PagesList.jsx";
import { Group, Lede, NavRow } from "./ui.jsx";

const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;

function summary(info, error) {
  if (error) return "⚠";
  if (!info) return "…";
  if (!hasPages(info)) return "none";
  const { files, proxies } = pageCount(info);
  return `${plural(files, "file", "files")}, ${plural(proxies, "proxy", "proxies")}`;
}

export function PagesRow() {
  useEffect(() => {
    loadBuildInfo();
  }, []);
  return (
    <NavRow
      row="pages"
      to="/settings/pages"
      label="Pages"
      value={summary(buildInfo.value, buildInfoError.value)}
    />
  );
}

function PagesBody({ info, error }) {
  if (error) return <PagesError error={error} />;
  if (hasPages(info)) return <PageRows info={info} />;
  return (
    <div class="settings-row settings-row--hint">
      {info ? "Nothing configured" : "Loading…"}
    </div>
  );
}

export function PagesCard() {
  useEffect(() => {
    loadBuildInfo();
  }, []);
  return (
    <div id="pages-settings">
      <Lede>
        Set file roots and proxy targets in <code>config.json</code>, or with{" "}
        <code>MOBUX_FILES</code> and <code>MOBUX_PROXY</code>.
      </Lede>
      <Group title="Pages">
        <PagesBody info={buildInfo.value} error={buildInfoError.value} />
      </Group>
    </div>
  );
}