@loopbacktools/inbox 0.0.0-stage → 0.4.1

package/src/update.tsx

@@ -0,0 +1,39 @@
+import { Banner } from "@cloudflare/kumo";
+import { ArrowClockwise } from "@phosphor-icons/react";
+import { useEffect } from "react";
+import { useUpdate } from "./context.tsx";
+import { reloadPage } from "./page.ts";
+
+/**
+ * Says when Loopback has been updated under the page. A later deploy of the same revision of the
+ * contract is offered as a reload. A later revision is one this page can't fully read, so it reloads
+ * at the first moment that disturbs no one: as soon as the page is hidden, or at once if it already
+ * is. What the person has written and not sent is kept in this browser, so the reload loses none of it.
+ */
+export function UpdateBanner() {
+	const update = useUpdate();
+	useEffect(() => {
+		if (update !== "required") return undefined;
+		const whenHidden = () => {
+			if (document.visibilityState === "hidden") reloadPage();
+		};
+		whenHidden();
+		document.addEventListener("visibilitychange", whenHidden);
+		return () => document.removeEventListener("visibilitychange", whenHidden);
+	}, [update]);
+	if (update === "none") return null;
+	return (
+		<Banner
+			size="sm"
+			className="m-2"
+			icon={<ArrowClockwise />}
+			title="Loopback has been updated"
+			description={
+				update === "required"
+					? "This page reloads onto the new version when you next leave it. Anything you haven't sent is kept."
+					: "Reload to use the new version."
+			}
+			action={<Banner.Action onClick={reloadPage}>Reload</Banner.Action>}
+		/>
+	);
+}

package/styles.css

@@ -0,0 +1,72 @@
+/*
+ * The inbox's styles. Import this after Tailwind and Kumo's theme: it has Tailwind generate the
+ * utilities the components use, and styles the Markdown agents write.
+ */
+@source "./src";
+
+/* Markdown an agent wrote: quiet, readable prose. */
+.loopback-markdown {
+	line-height: 1.6;
+	overflow-wrap: anywhere;
+}
+.loopback-markdown > * + * {
+	margin-top: 0.75em;
+}
+.loopback-markdown h1,
+.loopback-markdown h2,
+.loopback-markdown h3 {
+	font-weight: 600;
+	line-height: 1.3;
+	color: var(--text-color-kumo-strong);
+}
+.loopback-markdown h1 {
+	font-size: 1.25rem;
+}
+.loopback-markdown h2 {
+	font-size: 1.125rem;
+}
+.loopback-markdown h3 {
+	font-size: 1rem;
+}
+.loopback-markdown ul {
+	list-style: disc;
+	padding-left: 1.25rem;
+}
+.loopback-markdown ol {
+	list-style: decimal;
+	padding-left: 1.25rem;
+}
+.loopback-markdown li + li {
+	margin-top: 0.25em;
+}
+.loopback-markdown a {
+	color: var(--text-color-kumo-link);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+.loopback-markdown blockquote {
+	border-left: 3px solid var(--color-kumo-line);
+	padding-left: 0.75rem;
+	color: var(--text-color-kumo-subtle);
+}
+.loopback-markdown :not(pre) > code {
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 0.875em;
+	padding: 0.1em 0.35em;
+	border-radius: 4px;
+	background: var(--color-kumo-recessed);
+}
+.loopback-markdown table {
+	border-collapse: collapse;
+	font-size: 0.875rem;
+}
+.loopback-markdown th,
+.loopback-markdown td {
+	border: 1px solid var(--color-kumo-line);
+	padding: 0.35rem 0.6rem;
+	text-align: left;
+}
+.loopback-markdown hr {
+	border: 0;
+	border-top: 1px solid var(--color-kumo-line);
+}