proctolog 0.1.0

data/public/desk.css

@@ -0,0 +1,582 @@
+:root {
+	color-scheme: light dark;
+	--paper: #f3f0ea;
+	--ink: #1a1818;
+	--quiet: #6b655c;
+	--rule: #d9d3c8;
+	--chalk: #2f4a6b;
+	--pin: #a23b2a;
+	--rest: #e8e2d7;
+	--serif: ui-serif, "Iowan Old Style", Palatino, Georgia, serif;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--paper: #181716;
+		--ink: #ece8e1;
+		--quiet: #9c958a;
+		--rule: #34312d;
+		--chalk: #a9c1e0;
+		--pin: #e08a76;
+		--rest: #262321;
+	}
+}
+
+body {
+	margin: 0 auto;
+	max-width: 74rem;
+	padding: 2.5rem 1.5rem 5rem;
+	background: var(--paper);
+	color: var(--ink);
+	font:
+		15px / 1.45 ui-sans-serif,
+		system-ui,
+		sans-serif;
+	font-variant-numeric: tabular-nums;
+}
+
+a {
+	color: var(--chalk);
+	text-underline-offset: 0.18em;
+}
+
+form[data-code] {
+	display: inline;
+	margin: 0 0 0 0.5rem;
+}
+
+.code-link {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--chalk);
+	font: inherit;
+	font-size: 0.8rem;
+	text-decoration: underline;
+	text-underline-offset: 0.18em;
+	cursor: pointer;
+}
+
+.desk {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3rem 1.4rem;
+	margin-bottom: 1.6rem;
+	color: var(--quiet);
+	font-size: 0.75rem;
+	letter-spacing: 0.14em;
+	text-transform: uppercase;
+}
+
+.desk a {
+	color: var(--quiet);
+	text-decoration: none;
+}
+
+.desk a:hover {
+	color: var(--chalk);
+}
+
+.desk .name {
+	color: var(--ink);
+}
+
+.desk a[aria-current] {
+	color: var(--ink);
+	box-shadow: 0 2px var(--pin);
+}
+
+/* How far the decisions of a pull request are: a fraction and a thin bar. */
+
+.progress {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	white-space: nowrap;
+}
+
+.progress.none {
+	color: var(--quiet);
+}
+
+.progress meter {
+	width: 3.5rem;
+	height: 0.35rem;
+	border: 0;
+	border-radius: 999px;
+	background: var(--rule);
+}
+
+.progress meter::-webkit-meter-bar {
+	height: 0.35rem;
+	border: 0;
+	border-radius: 999px;
+	background: var(--rule);
+}
+
+.progress meter::-webkit-meter-optimum-value {
+	border-radius: 999px;
+	background: var(--chalk);
+}
+
+.progress meter::-moz-meter-bar {
+	border-radius: 999px;
+	background: var(--chalk);
+}
+
+.progress[data-done="true"] .fraction::after {
+	content: " ✓";
+}
+
+/* The bar at the foot of a page with keys, and the sentence that answers one. */
+
+.modebar {
+	position: fixed;
+	inset: auto 0 0;
+	z-index: 5;
+	display: flex;
+	align-items: baseline;
+	gap: 1.5rem;
+	padding: 0.45rem 1.5rem;
+	border-top: 1px solid var(--rule);
+	background: var(--paper);
+	color: var(--quiet);
+	font-size: 0.82rem;
+}
+
+.modebar .mode {
+	display: flex;
+	flex: 1;
+	flex-wrap: wrap;
+	gap: 0.2rem 1.1rem;
+	margin: 0;
+}
+
+.modebar .mode strong {
+	color: var(--ink);
+	font-weight: 600;
+}
+
+.modebar kbd + kbd {
+	margin-left: 0.2rem;
+}
+
+.modebar .all-keys {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--quiet);
+	font: inherit;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+.modebar .all-keys:hover {
+	color: var(--chalk);
+}
+
+.toast {
+	position: fixed;
+	right: 1.5rem;
+	bottom: 3rem;
+	z-index: 6;
+	max-width: min(70ch, 90vw);
+	margin: 0;
+	padding: 0.5rem 0.9rem;
+	border: 1px solid var(--rule);
+	border-radius: 6px;
+	background: var(--ink);
+	color: var(--paper);
+	font-size: 0.87rem;
+	white-space: pre-line;
+	opacity: 0;
+	transform: translateY(0.4rem);
+	transition:
+		opacity 0.15s,
+		transform 0.15s;
+	pointer-events: none;
+}
+
+.toast[data-shown] {
+	opacity: 1;
+	transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.toast {
+		transition: none;
+	}
+}
+
+.keys-help {
+	width: min(58rem, 92vw);
+	max-height: 86vh;
+	padding: 1.2rem 1.5rem 1.4rem;
+	border: 1px solid var(--rule);
+	border-radius: 8px;
+	background: var(--paper);
+	color: var(--ink);
+}
+
+.keys-help::backdrop {
+	background: rgb(0 0 0 / 0.45);
+}
+
+.keys-help .head {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+}
+
+.keys-help h2 {
+	margin: 0;
+	font: 500 1.35rem / 1.2 var(--serif);
+}
+
+.keys-help .close {
+	padding: 0.05em 0.5em;
+	border: 1px solid var(--rule);
+	border-radius: 4px;
+	background: none;
+	color: var(--quiet);
+	font:
+		0.78rem ui-monospace,
+		Menlo,
+		monospace;
+	cursor: pointer;
+}
+
+.keys-help .groups {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+	gap: 0.4rem 2rem;
+}
+
+.keys-help h3 {
+	margin: 1.1rem 0 0.35rem;
+	color: var(--quiet);
+	font-size: 0.72rem;
+	font-weight: 500;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+}
+
+.keys-help dl {
+	margin: 0;
+}
+
+.keys-help dl div {
+	display: grid;
+	grid-template-columns: 6.5rem 1fr;
+	gap: 0.6rem;
+	padding: 0.16rem 0;
+}
+
+.keys-help dt {
+	white-space: nowrap;
+}
+
+.keys-help dt kbd + kbd {
+	margin-left: 0.25rem;
+}
+
+.keys-help dd {
+	margin: 0;
+}
+
+.keys-help .note {
+	margin: 1.1rem 0 0;
+	color: var(--quiet);
+	font-size: 0.82rem;
+}
+
+h1 {
+	margin: 0.2rem 0 0.6rem;
+	font: 500 2.1rem / 1.15 var(--serif);
+	letter-spacing: -0.01em;
+}
+
+.tally,
+.gone {
+	margin: 0;
+	max-width: 62ch;
+}
+
+.gone {
+	color: var(--pin);
+}
+
+/* The desk's pages are named in a word or two, each on a line of its own;
+   the page the owner is on, marked and bold, may take two. */
+.side nav.desk a:not([aria-current]) {
+	white-space: nowrap;
+}
+
+/* A burst put away says so beside its name in the pane. */
+.side .name .away {
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+/* Done with a burst: a quiet line under its tally, with its button. */
+.put-away {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1ch;
+	align-items: baseline;
+	margin: 6px 0 0;
+	color: var(--quiet);
+}
+
+.put-away p {
+	margin: 0;
+}
+
+/* What went in is settled, so grey, and each line shows whole: no cursor
+   rests on it to open it out. */
+.merged .lines .title {
+	color: var(--quiet);
+}
+
+.merged .lines .facts {
+	display: block;
+	padding: 2px 0 6px 7ch;
+}
+
+.reading {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.35rem 1.25rem;
+	margin-top: 0.8rem;
+	color: var(--quiet);
+	font-size: 0.87rem;
+}
+
+.number {
+	margin-right: 0.45rem;
+	text-decoration: none;
+}
+
+.number:hover {
+	text-decoration: underline;
+}
+
+[data-stop] {
+	scroll-margin-block: 3rem;
+}
+
+[data-stop][aria-current] {
+	background: var(--rest);
+	box-shadow: inset 3px 0 var(--pin);
+}
+
+.ledger {
+	width: 100%;
+	margin-top: 1.5rem;
+	border-collapse: collapse;
+}
+
+.ledger th {
+	padding: 0.4rem 0.75rem;
+	border-bottom: 1px solid var(--rule);
+	color: var(--quiet);
+	font-size: 0.72rem;
+	font-weight: 500;
+	letter-spacing: 0.08em;
+	text-align: left;
+	text-transform: uppercase;
+	white-space: nowrap;
+}
+
+.ledger td {
+	padding: 0.42rem 0.75rem;
+	border-bottom: 1px solid var(--rule);
+	vertical-align: baseline;
+}
+
+.ledger .leg th,
+.ladder h2 {
+	padding: 1.9rem 0.75rem 0.45rem;
+	color: var(--ink);
+	font: italic 1.05rem / 1.3 var(--serif);
+	letter-spacing: 0;
+	text-transform: none;
+}
+
+.ledger .layer,
+.ledger .count {
+	text-align: right;
+	white-space: nowrap;
+}
+
+.ledger td.layer,
+.changed {
+	color: var(--quiet);
+}
+
+.changed {
+	white-space: nowrap;
+}
+
+.ladder h2 {
+	margin: 0;
+	padding-left: 0;
+}
+
+.ladder ol {
+	margin: 0 0 0 0.95rem;
+	padding: 0;
+	border-left: 2px solid var(--rule);
+	list-style: none;
+}
+
+.ladder.alone ol {
+	border-left-color: transparent;
+}
+
+.ladder li {
+	position: relative;
+	padding: 0.6rem 0.75rem 0.6rem 2rem;
+}
+
+.ladder .layer {
+	position: absolute;
+	top: 0.62rem;
+	left: -0.95rem;
+	display: grid;
+	width: 1.75rem;
+	height: 1.75rem;
+	border: 2px solid var(--rule);
+	border-radius: 50%;
+	background: var(--paper);
+	color: var(--quiet);
+	font-size: 0.72rem;
+	place-items: center;
+}
+
+.ladder p {
+	margin: 0;
+}
+
+.ladder .what {
+	font: 1.08rem / 1.3 var(--serif);
+}
+
+.ladder .number {
+	font:
+		0.92rem / 1.3 ui-sans-serif,
+		system-ui,
+		sans-serif;
+}
+
+.ladder .facts {
+	margin-top: 0.15rem;
+	color: var(--quiet);
+	font-size: 0.87rem;
+}
+
+.keys {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem 1.5rem;
+	margin-top: 2.5rem;
+	color: var(--quiet);
+	font-size: 0.82rem;
+}
+
+kbd {
+	padding: 0.05em 0.4em;
+	border: 1px solid var(--rule);
+	border-radius: 4px;
+	font:
+		0.78rem ui-monospace,
+		Menlo,
+		monospace;
+}
+
+.flash {
+	max-width: 70ch;
+	margin: 0 0 1.4rem;
+	padding: 0.6rem 1rem;
+	border-left: 3px solid var(--chalk);
+	background: var(--rest);
+	white-space: pre-line;
+}
+
+.flash.alert {
+	border-left-color: var(--pin);
+}
+
+/* The pull requests a # typed into a box may mean, just under the #. */
+
+.mentions {
+	position: fixed;
+	z-index: 10;
+	width: min(38rem, calc(100vw - 2rem));
+	border: 1px solid var(--rule);
+	background: var(--paper);
+	color: var(--ink);
+	font-size: 0.87rem;
+}
+
+.mentions ul {
+	max-height: 16rem;
+	margin: 0;
+	padding: 0;
+	overflow-y: auto;
+	list-style: none;
+}
+
+.mentions li {
+	display: flex;
+	gap: 0.9rem;
+	align-items: baseline;
+	padding: 0.2rem 0.7rem;
+	cursor: pointer;
+}
+
+.mentions li .number {
+	min-width: 5ch;
+	font-variant-numeric: tabular-nums;
+}
+
+.mentions li .title {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.mentions li .state {
+	color: var(--quiet);
+}
+
+.mentions li[aria-selected="true"],
+.mentions li[aria-selected="true"] .state {
+	background: var(--ink);
+	color: var(--paper);
+}
+
+.mentions .looking,
+.mentions .hint {
+	margin: 0;
+	padding: 0.3rem 0.7rem;
+	color: var(--quiet);
+}
+
+.mentions .hint {
+	border-top: 1px solid var(--rule);
+	font-size: 0.8rem;
+}
+
+.mentions .hint kbd + kbd {
+	margin-left: 0.2rem;
+}
+
+/* A # in the owner's words that names a pull request: its number goes to
+   it, and its title stands beside, quieter than the words around. */
+
+.mention-title,
+.mention-state {
+	color: var(--quiet);
+}

data/public/desk.js

@@ -0,0 +1,126 @@
+// The route by key: j and k rest on the next and the previous line, a pull
+// request, a notice at the head of the route that one joined or left, or a
+// rule made in the burst; Enter opens the one rested on, x dismisses a notice
+// or withdraws a rule, c edits a rule, N opens the next pull
+// request with decisions still to review, and a link that names a key answers
+// to it. The address remembers where the cursor rests, across a reload and a
+// change of layout.
+
+const stops = [...document.querySelectorAll("[data-stop]")];
+let at = Math.max(
+	0,
+	stops.findIndex((stop) => `#${stop.id}` === location.hash),
+);
+
+const restOn = (index, { scroll = true } = {}) => {
+	stops[at].removeAttribute("aria-current");
+	at = Math.min(Math.max(index, 0), stops.length - 1);
+	stops[at].setAttribute("aria-current", "true");
+	if (scroll) stops[at].scrollIntoView({ block: "nearest" });
+	// The first stop has no fragment, so a reload there stays at the top of the page.
+	const address = at ? `#${stops[at].id}` : location.pathname + location.search;
+	history.replaceState(null, "", address);
+};
+
+const follow = (key) => {
+	const link = document.querySelector(`a[data-key="${key}"]`);
+	if (link) location.assign(link.href + location.hash);
+};
+
+// Opens the next pull request with decisions still to review: the one the
+// cursor rests on when it has some, else the first after it, going round to
+// the top of the route. With none left anywhere, the cursor's row says so.
+const openUnreviewed = () => {
+	const ahead = [...stops.slice(at), ...stops.slice(0, at)];
+	// The non-blocking wait for one gesture on their pull request's page.
+	const next = ahead.find((stop) => Number(stop.dataset.blockingLeft) > 0);
+	if (!next) return said("Every decision of this burst is reviewed.");
+	restOn(stops.indexOf(next));
+	location.assign(next.querySelector("a").href);
+};
+
+// A sentence in answer to a key, in the toast every page uses: this script
+// is not a module, so keys.js lends it by this name.
+const said = (message) => globalThis.proctologSay(message);
+
+// A rule's line opens its one line for editing: Enter saves it, Escape
+// closes it as it was.
+const editRule = (stop) => {
+	const form = stop.querySelector("form[data-edit-rule]");
+	if (!form) return;
+	restOn(stops.indexOf(stop));
+	form.hidden = false;
+	form.querySelector("input[type=text]").select();
+};
+
+document.addEventListener("click", (event) => {
+	const stop = event.target.closest("[data-stop]");
+	if (stop) restOn(stops.indexOf(stop), { scroll: false });
+	const button = event.target.closest("[data-edit]");
+	if (button) editRule(button.closest("[data-stop]"));
+});
+
+document.addEventListener("focusin", (event) => {
+	const stop = event.target.closest("[data-stop]");
+	if (stop) restOn(stops.indexOf(stop), { scroll: false });
+});
+
+document.addEventListener("keydown", (event) => {
+	const form = event.target.closest("form[data-edit-rule]");
+	if (!form || event.key !== "Escape") return;
+	form.reset();
+	form.hidden = true;
+});
+
+const keys = {
+	j: () => restOn(at + 1),
+	ArrowDown: () => restOn(at + 1),
+	k: () => restOn(at - 1),
+	ArrowUp: () => restOn(at - 1),
+	Home: () => restOn(0),
+	End: () => restOn(stops.length - 1),
+	N: openUnreviewed,
+	Enter: () => {
+		const link = stops[at].querySelector("a");
+		if (link) location.assign(link.href);
+	},
+	r: () => follow("r"),
+	d: () => stops[at].querySelector("form[data-code]")?.requestSubmit(),
+	G: () => {
+		const link = stops[at].querySelector('a[data-key="G"]');
+		if (link) link.click();
+		else said("Nobody has opened this pull request yet: GitHub has nothing of it.");
+	},
+	// A notice that a pull request joined or left goes once it is seen; a
+	// rule is withdrawn.
+	x: () => stops[at].querySelector("form[data-dismiss]")?.requestSubmit(),
+	c: () => editRule(stops[at]),
+	// The part the cursor is in, alone: its line offers it unless it is the focus already.
+	p: () => {
+		const link = stops[at].querySelector('a[data-key="p"]');
+		if (link) location.assign(link.href);
+		else said("The route shows this part alone already.");
+	},
+};
+
+document.addEventListener("keydown", (event) => {
+	if (event.metaKey || event.ctrlKey || event.altKey || !stops.length) return;
+	if (document.querySelector("dialog[open]")) return;
+	// The key as keys.js reads it: by where a letter sits, whatever the layout types.
+	const key = globalThis.proctologKey?.(event) ?? event.key;
+	// A link or a button keeps Enter for itself; the letters are the route's wherever the focus rests.
+	if (!Object.hasOwn(keys, key)) return;
+	if (event.target.closest("input, textarea, select")) return;
+	if (key === "Enter" && event.target.closest("a, button, summary")) return;
+
+	event.preventDefault();
+	keys[key]();
+});
+
+// A first visit rests on the first stop without leaving the top of the page.
+if (stops.length) restOn(at, { scroll: at > 0 });
+
+// A page the browser kept from before a choice was made would show old counts.
+addEventListener("pageshow", (event) => {
+	if (event.persisted) location.reload();
+});