NamespaceView

tcmts.share.NamespaceView · #dabcsmar · term · runs on the server

is an async component

A namespace: where it is, the namespaces in it, its definitions by what they're for, its README.

import { ROLES } from "#codebase/tcmts/cli/pages";
import {
  ago, childrenOf, codeHref, Crumbs, DefRow, Frame, Html, inSlices, leafOf, markdownHtml, namesNow, pageOf,
  ProjectSide, roleNow, shareNow,
} from "#codebase/tcmts/share";

export async function NamespaceView({ ns }: { ns: string }) {
  const s = shareNow();
  const rows = namesNow(s);
  const { namespaces, defs } = childrenOf(rows, ns);
  const all = rows.filter((r) => r.path.startsWith(`${ns}.`));
  const readme = defs.find((r) => leafOf(r.path) === "README" && r.kind === "file");
  const readmePage = readme && pageOf(s, readme.hash);
  await inSlices(defs.map((r) => () => roleNow(s, r)));
  const groups = ROLES.map(([role, label]) => ({
    label,
    defs: defs.filter((r) => r !== readme && roleNow(s, r) === role),
  })).filter((g) => g.defs.length);
  const latest = s.cache
    .atHead(s.cb, "history", () => s.cb.store.history(400))
    .filter((e) => e.path.startsWith(`${ns}.`))
    .sort((a, b) => b.ts - a.ts)[0];
  return (
    <Frame tab="code" title={ns}>
      <div className="page cols-2">
        <div>
          <div className="filters">
            <span style={{ fontSize: 17 }}>
              <Crumbs name={ns} />
            </span>
            <span className="right muted">
              {all.length} definitions{latest ? ` · changed ${ago(latest.ts)}` : ""}
            </span>
          </div>
          {namespaces.length > 0 && (
            <div className="subs">
              {namespaces.map((n) => (
                <a key={n.name} href={codeHref(n.name)}>
                  {leafOf(n.name)} <span className="muted">{n.rows.length}</span>
                </a>
              ))}
            </div>
          )}
          {groups.map((g) => (
            <div className="box" key={g.label}>
              <div className="boxhead">
                <b>{g.label}</b>
                <span className="muted">{g.defs.length}</span>
              </div>
              {g.defs.map((r) => (
                <DefRow key={r.path} row={r} />
              ))}
            </div>
          ))}
          {!groups.length && !namespaces.length && <div className="empty">Nothing here.</div>}
          {readmePage?.docMarkdown && (
            <div className="box">
              <div className="boxhead">
                <b>README</b>
              </div>
              <Html className="boxbody md" html={markdownHtml(s.cb, readmePage.docMarkdown)} />
            </div>
          )}
        </div>
        <ProjectSide />
      </div>
    </Frame>
  );
}

uses

used by