404-Layers/src/App.tsx

/**
 * App shell: pickers, the panel, and the tab bar.
 *
 * Angular: useState is roughly a component field plus change detection. Setting
 * it re-runs this function, so derived values below are recomputed each render;
 * useMemo is the explicit opt-out when that stops being cheap.
 */
import { useMemo, useState } from "react";
import { ENTRIES } from "./domain/entries";
import { controlName } from "./domain/format";
import { CTX } from "./domain/labels";
import { entriesByTarget, entriesForLayer, layerCounts, orderLayerKeys } from "./domain/layers";
import type { ContextCode } from "./domain/types";
import { Panel } from "./ui/Panel";
import styles from "./App.module.css";

const TABS = ["Explore", "Drill", "Find", "Rules"] as const;

/** Drawn, not typed: caret glyphs sit outside every Latin font subset. */
function Caret() {
  return (
    <svg width="9" height="6" viewBox="0 0 9 6" aria-hidden="true">
      <path d="M1 1l3.5 3.5L8 1" fill="none" stroke="currentColor" strokeWidth="1.6" />
    </svg>
  );
}

const layerLabel = (key: string): string =>
  key === "" ? "NO MODIFIER" : key.split("+").map(controlName).join(" + ");

export function App() {
  const [ctx, setCtx] = useState<ContextCode>("S");
  const [layer, setLayer] = useState("");
  const [tab, setTab] = useState<(typeof TABS)[number]>("Explore");

  const counts = useMemo(() => layerCounts(ENTRIES, ctx), [ctx]);
  const layers = useMemo(() => orderLayerKeys(counts.keys()), [counts]);

  // Changing mode can strip the held layer out from under us.
  const activeLayer = counts.has(layer) ? layer : "";

  const onLayer = useMemo(
    () => entriesForLayer(ENTRIES, ctx, activeLayer),
    [ctx, activeLayer],
  );
  const lit = useMemo(() => entriesByTarget(onLayer), [onLayer]);

  const held = activeLayer === "" ? [] : activeLayer.split("+");

  return (
    <div className={styles.app}>
      <div className={styles.strip}>
        <button
          className={styles.picker}
          onClick={() => {
            const order = Object.keys(CTX) as ContextCode[];
            setCtx(order[(order.indexOf(ctx) + 1) % order.length]!);
          }}
        >
          <b>{CTX[ctx].toUpperCase()}</b>
          <Caret />
        </button>

        <button
          className={styles.picker}
          onClick={() => {
            const i = layers.indexOf(activeLayer);
            setLayer(layers[(i + 1) % layers.length]!);
          }}
        >
          <b>{layerLabel(activeLayer)}</b>
          <span className={styles.count}>{onLayer.length}</span>
        </button>
      </div>

      <Panel
        lit={lit}
        held={held}
        screen={{
          top: `MODE:${ctx}`,
          right: activeLayer === "" ? "LAYER:—" : layerLabel(activeLayer),
          main: `${onLayer.length} function${onLayer.length === 1 ? "" : "s"}`,
          chips: onLayer.slice(0, 3).map((e) => e.short),
        }}
      />

      <div className={styles.info} />

      <nav className={styles.nav}>
        {TABS.map((name) => (
          <button
            key={name}
            className={name === tab ? styles.tabOn : styles.tab}
            onClick={() => setTab(name)}
          >
            {name.toUpperCase()}
          </button>
        ))}
      </nav>
    </div>
  );
}