@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/react/LibraryContents.tsx

@@ -0,0 +1,82 @@
+import { Option } from "effect";
+import { useState } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import type { Library, LibraryFile } from "#browser/navigation/library.ts";
+import { Age } from "./Age.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+export function LibraryContents({
+	api,
+	data,
+	filters,
+	view,
+}: {
+	readonly api: ShellApi;
+	readonly data: Library;
+	readonly filters: Filters;
+	readonly view: string;
+}) {
+	if (view === "folders") {
+		return <FolderContents api={api} data={data} filters={filters} />;
+	}
+	const files = view === "recently changed" ? data.files.toSorted((a, b) => b.modified - a.modified || a.path.localeCompare(b.path)) : data.files;
+	return <DocumentList files={files} />;
+}
+function DocumentList({ files }: { readonly files: readonly LibraryFile[] }) {
+	return files.length === 0 ? (
+		<p className="text-muted-foreground">No documents in this view.</p>
+	) : (
+		<ul className="m-0 list-none divide-y p-0">
+			{files.map((file) => (
+				<li className="flex flex-wrap items-center justify-between gap-2 py-3" key={file.path}>
+					<div className="min-w-0">
+						<a className="break-words font-medium" href={file.href}>
+							{file.title}
+						</a>
+						<p className="m-0 text-muted-foreground text-xs">
+							{file.kind}
+							{file.status ? ` · ${file.status}` : ""}
+						</p>
+					</div>
+					<Age modified={file.modified} />
+				</li>
+			))}
+		</ul>
+	);
+}
+interface Filters {
+	readonly kind?: string;
+	readonly showFleet?: boolean;
+	readonly status?: string;
+}
+function FolderContents({ api, data, filters }: { readonly api: ShellApi; readonly data: Library; readonly filters: Filters }) {
+	return (
+		<>
+			<DocumentList files={data.files} />
+			{data.folders.map((folder) => (
+				<LazyFolder api={api} filters={filters} folder={folder} key={folder.path} />
+			))}
+		</>
+	);
+}
+function LazyFolder({ api, folder, filters }: { readonly api: ShellApi; readonly folder: Library["folders"][number]; readonly filters: Filters }) {
+	const [open, setOpen] = useState(false);
+	return (
+		<details className="my-3 border-l pl-4" onToggle={(event) => setOpen(event.currentTarget.open)} open={open}>
+			<summary className="cursor-pointer py-2">
+				{folder.name} ({folder.count})
+			</summary>
+			{open ? <ExpandedFolder api={api} filters={filters} path={folder.path} /> : null}
+		</details>
+	);
+}
+function ExpandedFolder({ api, filters, path }: { readonly api: ShellApi; readonly filters: Filters; readonly path: string }) {
+	const query = useQuery(api.library.query({ ...filters, folder: path }, { timeToLive: 0 }), { keepPreviousData: true });
+	const data = Option.getOrUndefined(query.data);
+	return (
+		<>
+			{query.pending ? <p role="status">Loading folder…</p> : null}
+			{Option.isSome(query.cause) && <p role="alert">This folder could not be loaded.</p>}
+			{data ? <FolderContents api={api} data={data} filters={filters} /> : null}
+		</>
+	);
+}

package/src/client/react/LibraryMain.tsx

@@ -0,0 +1,25 @@
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import { LibraryPage } from "./LibraryPage.tsx";
+import type { MainLocation } from "./mainLocation.ts";
+import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+export function LibraryMain({
+	api,
+	onPage,
+	url,
+}: {
+	readonly api: ShellApi;
+	readonly onPage: (location: MainLocation) => void;
+	readonly url: string;
+}) {
+	return (
+		<ProjectionFrame
+			atom={api.library.query({}, routeQueryOptions)}
+			location={() => ({ file: "Library", status: 200, view: "library" })}
+			onPage={onPage}
+			render={() => <LibraryPage api={api} key={url} url={url} />}
+			route="library"
+			url={url}
+		/>
+	);
+}

package/src/client/react/LibraryPage.tsx

@@ -0,0 +1,74 @@
+import { Option } from "effect";
+import { useState } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import { LibraryContents } from "./LibraryContents.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+
+export function LibraryPage({ api, url = "/_board/library" }: { readonly api: ShellApi; readonly url?: string }) {
+	const [kind, setKind] = useState("");
+	const [status, setStatus] = useState("");
+	const [showFleet, setShowFleet] = useState(false);
+	const [view, setView] = useState(new URL(url, "http://localhost").searchParams.get("view") === "recently-changed" ? "recently changed" : "titles");
+	const filters = { ...(kind ? { kind } : {}), ...(status ? { status } : {}), ...(showFleet ? { showFleet } : {}) };
+	const query = useQuery(api.library.query({ ...filters, ...(view === "folders" ? { folder: "" } : {}) }, routeQueryOptions), {
+		keepPreviousData: true,
+	});
+	const data = Option.getOrUndefined(query.data);
+	return (
+		<div className="mx-auto max-w-5xl p-4 md:p-8">
+			<h1>Library</h1>
+			<p className="text-muted-foreground">Every document in your workspace.</p>
+			<div className="my-6 flex flex-wrap items-end gap-4">
+				<Filter label="Kind" onChange={setKind} options={data?.kinds ?? []} value={kind} />
+				<Filter label="Status" onChange={setStatus} options={data?.statuses ?? []} value={status} />
+				<Filter label="View" onChange={setView} options={["titles", "folders", "recently changed"]} value={view} />
+				<label className="flex items-center gap-2 text-sm">
+					<input checked={showFleet} onChange={(event) => setShowFleet(event.target.checked)} type="checkbox" />
+					Show Fleet records ({data?.fleetCount ?? 0})
+				</label>
+			</div>
+			{query.pending ? <p role="status">Loading Library…</p> : null}
+			{Option.isSome(query.cause) && <p role="alert">Library refresh failed. Try again.</p>}
+			{data ? <LibraryContents api={api} data={data} filters={filters} view={view} /> : null}
+		</div>
+	);
+}
+function Filter({
+	label,
+	options,
+	value,
+	onChange,
+}: {
+	readonly label: string;
+	readonly options: readonly string[];
+	readonly value: string;
+	readonly onChange: (value: string) => void;
+}) {
+	return (
+		<label className="grid gap-1 text-sm">
+			{label}
+			<select aria-label={label} className="rounded-md border bg-background p-2" onChange={(event) => onChange(event.target.value)} value={value}>
+				{label !== "View" && <option value="">All</option>}
+				{options.map((option) => (
+					<option key={option} value={option}>
+						{viewLabel(option)}
+					</option>
+				))}
+			</select>
+		</label>
+	);
+}
+
+function viewLabel(value: string) {
+	if (value === "recently changed") {
+		return "Recently changed";
+	}
+	if (value === "folders") {
+		return "Folders";
+	}
+	if (value === "titles") {
+		return "Titles";
+	}
+	return value;
+}

package/src/client/react/LiveControls.tsx

@@ -0,0 +1,82 @@
+import { useAtomValue } from "@effect/atom-react";
+import { Option } from "effect";
+import * as Atom from "effect/reactivity/Atom";
+import { useEffect, useMemo, useState } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import type { BrowserClient } from "#client/client.ts";
+import { activeRead } from "./activeRead.ts";
+import { liveStatus } from "./liveStatus.ts";
+import { shellIds } from "./shellIds.ts";
+
+const opening = Atom.make({ failed: false, pending: true });
+interface Page {
+	readonly kind: string;
+	readonly url: string;
+}
+export function LiveControls({
+	client,
+	current,
+	navigationPending,
+	navigationFailed,
+}: {
+	readonly client: BrowserClient;
+	readonly current: string;
+	readonly navigationPending: boolean;
+	readonly navigationFailed: boolean;
+}) {
+	const status = useAtomValue(client.updates.status);
+	const paused = useAtomValue(client.updates.paused);
+	const watcher = useQuery(client.api.watcher.query());
+	const watching = Option.getOrUndefined(watcher.data)?.watching === true;
+	const [page, setPage] = useState<Page>();
+	useEffect(() => {
+		function sync() {
+			const doc = document.getElementById("doc");
+			if (doc?.dataset.route !== current) {
+				return;
+			}
+			setPage({
+				kind: doc?.dataset.projection ?? "document",
+				url: current,
+			});
+		}
+		sync();
+		document.addEventListener("board-page", sync);
+		return () => document.removeEventListener("board-page", sync);
+	}, [current]);
+	const atom = useMemo(() => (page ? activeRead(client.api, page.kind, page.url) : opening), [client, page]);
+	const reading = useAtomValue(atom);
+	const displayed = liveStatus({
+		connection: status.connection,
+		failed: reading.failed,
+		navigationFailed,
+		paused,
+		pending: status.pending,
+		waiting: navigationPending || reading.pending,
+		watching,
+	});
+	useEffect(
+		() =>
+			client.registry.subscribe(
+				client.updates.paused,
+				(value) => {
+					if (!value) {
+						document.dispatchEvent(new Event("board-updates-resumed"));
+					}
+				},
+				{ immediate: true },
+			),
+		[client],
+	);
+	return (
+		<span
+			className="font-mono text-muted-foreground text-xs data-[state=down]:text-destructive data-[state=stale]:text-destructive"
+			data-state={displayed.state}
+			id={shellIds.live}
+			role="status"
+			title={displayed.title}
+		>
+			{displayed.text}
+		</span>
+	);
+}

package/src/client/react/Modal.tsx

@@ -0,0 +1,95 @@
+import { type ReactNode, useEffect, useRef } from "react";
+
+export function Modal({
+	id,
+	title,
+	open,
+	close,
+	children,
+	opener,
+	focus,
+	returnFocus,
+	className,
+}: {
+	readonly className?: string;
+	readonly id: string;
+	readonly title: string;
+	readonly open: boolean;
+	readonly close: () => void;
+	readonly children: ReactNode;
+	readonly opener?: string;
+	readonly focus?: string;
+	readonly returnFocus?: HTMLElement | undefined;
+}) {
+	const ref = useRef<HTMLDialogElement>(null);
+	const previousRef = useRef<Element | null>(null);
+	const selectionRef = useRef<ReturnType<typeof textSelection>>(undefined);
+	useEffect(() => {
+		const dialog = ref.current;
+		if (!dialog) {
+			return;
+		}
+		if (open && !dialog.open) {
+			const previous = returnFocus ?? (opener ? document.getElementById(opener) : document.activeElement);
+			previousRef.current = previous;
+			selectionRef.current = textSelection(previous);
+			dialog.returnValue = "";
+			dialog.showModal();
+			if (focus) {
+				document.getElementById(focus)?.focus();
+			}
+		} else if (!open && dialog.open) {
+			dialog.close();
+		}
+	}, [open, opener, focus, returnFocus]);
+	return (
+		<dialog
+			aria-labelledby={title}
+			className={className}
+			id={id}
+			onCancel={() => close()}
+			onClick={(event) => {
+				if (event.target !== event.currentTarget) {
+					return;
+				}
+				const bounds = event.currentTarget.getBoundingClientRect();
+				if (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom) {
+					close();
+				}
+			}}
+			onClose={() => {
+				close();
+				const target = returnFocus ?? previousRef.current;
+				if (ref.current?.returnValue !== "navigate" && target instanceof HTMLElement) {
+					target.focus({ preventScroll: true });
+					const selection = selectionRef.current;
+					const control = textControl(target);
+					if (selection && control) {
+						control.setSelectionRange(selection.start, selection.end, selection.direction);
+					}
+				}
+			}}
+			onKeyDown={(event) => {
+				if (event.key === "Escape") {
+					event.preventDefault();
+					close();
+				}
+			}}
+			ref={ref}
+		>
+			{children}
+		</dialog>
+	);
+}
+
+function textControl(element: Element | null) {
+	return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement ? element : undefined;
+}
+
+function textSelection(element: Element | null) {
+	const control = textControl(element);
+	if (!control || control.selectionStart === null || control.selectionEnd === null) {
+		return undefined;
+	}
+	return { direction: control.selectionDirection ?? "none", end: control.selectionEnd, start: control.selectionStart };
+}

package/src/client/react/PhoneNavigation.tsx

@@ -0,0 +1,84 @@
+import { CalendarDays, Ellipsis, Flag, Search, Zap } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "#client/react/components/ui/Button.tsx";
+import { Modal } from "./Modal.tsx";
+import type { MainLocation } from "./mainLocation.ts";
+import { shellIds } from "./shellIds.ts";
+import { useMedia } from "./useMedia.ts";
+import { workspaceDestinations } from "./workspaceDestinations.ts";
+
+const icons = [CalendarDays, Flag, Zap];
+const TAB_CLASS =
+	"flex min-h-12 min-w-0 flex-col items-center justify-center gap-1 rounded-md border-0 bg-transparent p-0 text-foreground text-xs no-underline aria-[current=page]:bg-accent aria-[current=page]:text-primary";
+
+export function PhoneNavigation({ main, openSearch }: { readonly main: MainLocation; readonly openSearch: () => void }) {
+	const [more, setMore] = useState(false);
+	const narrow = useMedia("(max-width: 767px)");
+	useEffect(() => {
+		if (!narrow) {
+			setMore(false);
+		}
+	}, [narrow]);
+	useEffect(() => {
+		function close() {
+			setMore(false);
+		}
+		document.addEventListener("board-navigate", close);
+		return () => document.removeEventListener("board-navigate", close);
+	}, []);
+	return (
+		<>
+			<nav
+				aria-label="Phone navigation"
+				className="fixed inset-x-0 bottom-0 z-20 grid grid-cols-5 border-t bg-background px-2 pt-1 pb-[max(0.25rem,env(safe-area-inset-bottom))] md:hidden print:hidden"
+			>
+				{workspaceDestinations.slice(0, 3).map(({ label, href, view }, index) => {
+					const Icon = icons[index] ?? CalendarDays;
+					return (
+						<a aria-current={main.view === view ? "page" : undefined} className={TAB_CLASS} href={href} key={view}>
+							<Icon aria-hidden="true" className="size-5" />
+							{label}
+						</a>
+					);
+				})}
+				<button aria-controls="search-dialog" aria-haspopup="dialog" className={TAB_CLASS} onClick={() => openSearch()} type="button">
+					<Search aria-hidden="true" className="size-5" />
+					Search
+				</button>
+				<button
+					aria-controls="phone-more"
+					aria-expanded={more}
+					aria-haspopup="dialog"
+					className={TAB_CLASS}
+					onClick={() => setMore(true)}
+					type="button"
+				>
+					<Ellipsis aria-hidden="true" className="size-5" />
+					More
+				</button>
+			</nav>
+			<Modal className="phone-more" close={() => setMore(false)} id={shellIds.phoneMore} open={more} title={shellIds.phoneMoreTitle}>
+				<div className="mb-3 flex items-center justify-between">
+					<h2 className="font-semibold" id={shellIds.phoneMoreTitle}>
+						More
+					</h2>
+					<Button onClick={() => setMore(false)} variant="ghost">
+						Close
+					</Button>
+				</div>
+				<nav aria-label="More destinations" className="grid gap-2">
+					{workspaceDestinations.slice(3).map(({ href, label, view }) => (
+						<a
+							aria-current={main.view === view ? "page" : undefined}
+							className="flex min-h-12 items-center rounded-md px-3 hover:bg-accent"
+							href={href}
+							key={view}
+						>
+							{label}
+						</a>
+					))}
+				</nav>
+			</Modal>
+		</>
+	);
+}

package/src/client/react/PrChip.tsx

@@ -0,0 +1,13 @@
+import { GitPullRequest } from "lucide-react";
+import { Badge } from "#client/react/components/ui/Badge.tsx";
+
+export function PrChip({ url }: { readonly url: string | undefined }) {
+	return url ? (
+		<a href={url}>
+			<Badge variant="outline">
+				<GitPullRequest aria-hidden="true" />
+				PR
+			</Badge>
+		</a>
+	) : null;
+}

package/src/client/react/ProjectionFrame.tsx

@@ -0,0 +1,133 @@
+import { Option } from "effect";
+import type * as AsyncResult from "effect/reactivity/AsyncResult";
+import type * as Atom from "effect/reactivity/Atom";
+import { type ReactNode, useLayoutEffect, useRef } from "react";
+import { flushSync } from "react-dom";
+import { fileUrl } from "#files/url.ts";
+import type { MainLocation } from "./mainLocation.ts";
+import { projectionChanges, type RenderedProjection } from "./projectionChanges.ts";
+import type { ProjectionRoute } from "./projectionRoute.ts";
+import type { RemainingRoute } from "./remainingRoute.ts";
+import { shellIds } from "./shellIds.ts";
+import { useProjectionData } from "./useProjectionData.ts";
+
+export function ProjectionFrame<A, E>({
+	atom,
+	location,
+	onPage,
+	render,
+	source,
+	route,
+	url,
+}: {
+	readonly atom: Atom.Atom<AsyncResult.AsyncResult<A, E>>;
+	readonly location: (data: A) => MainLocation & { readonly identity?: string | undefined; readonly status: number };
+	readonly onPage: (location: MainLocation) => void;
+	readonly render: (data: A) => ReactNode;
+	readonly source?: (data: A) => string | undefined;
+	readonly route: ProjectionRoute | RemainingRoute;
+	readonly url: string;
+}) {
+	const { query, failure, missing, conflict, data, content } = useProjectionData(atom, route, url);
+	const main = data === undefined ? { file: "", status: failureStatus(missing, conflict), view: projectionView(route) } : location(data);
+	const expectedSource = data === undefined ? undefined : source?.(data);
+	const hostRef = useRef<HTMLElement>(null);
+	const renderedRef = useRef<RenderedProjection | undefined>(undefined);
+	const failed = Option.isSome(query.cause);
+	useLayoutEffect(() => {
+		const element = hostRef.current;
+		if (element && element.dataset.route !== url) {
+			delete element.dataset.route;
+		}
+		if (!element || query.pending || (data === undefined && !failed)) {
+			return;
+		}
+		const mainElement = element;
+		let active = true;
+		function announce() {
+			queueMicrotask(() => {
+				if (
+					!active
+					|| (expectedSource !== undefined
+						&& mainElement.querySelector<HTMLElement>(".board[data-source], .document-layout > article.doc[data-source]")?.dataset.source
+							!== expectedSource)
+				) {
+					return;
+				}
+				renderedRef.current = projectionChanges(mainElement, renderedRef.current, url);
+				mainElement.dataset.route = url;
+				flushSync(() => onPage({ file: main.file, title: mainElement.querySelector("h1")?.textContent?.trim(), view: main.view }));
+				document.dispatchEvent(new Event("board-page"));
+			});
+		}
+		const observer = new MutationObserver((records) => {
+			if (
+				records.some(
+					(record) =>
+						record.target instanceof Element
+						&& (record.target.matches(".document-layout, .board[data-source]") || record.target.closest("article.doc, .item-introduction"))
+						&& !record.target.closest(".age"),
+				)
+			) {
+				announce();
+			}
+		});
+		observer.observe(element, { attributeFilter: ["data-source"], attributes: true, childList: true, subtree: true });
+		announce();
+		return () => {
+			active = false;
+			observer.disconnect();
+		};
+	}, [data, failed, query.pending, expectedSource, main.file, main.view, onPage, url]);
+	return (
+		<>
+			<main
+				className="board-view min-w-0 p-4 md:p-8"
+				data-file={main.file}
+				data-identity={"identity" in main ? main.identity : undefined}
+				data-projection={route}
+				data-react-projection
+				data-status={main.status}
+				data-url={route === "board" ? fileUrl(main.file) : url}
+				data-view={main.view}
+				id={shellIds.doc}
+				ref={hostRef}
+				tabIndex={-1}
+			>
+				{data === undefined && (
+					<p className="empty" role="status">
+						{loadingMessage(query.pending, missing, failure)}
+					</p>
+				)}
+				<div className={data === undefined ? "hidden" : "contents"} hidden={data === undefined}>
+					{content === undefined ? null : render(content)}
+				</div>
+			</main>
+			{data !== undefined && Option.isSome(query.cause) && <p role="status">Refresh failed. Your displayed view is retained.</p>}
+		</>
+	);
+}
+
+function loadingMessage(pending: boolean, missing: boolean, failure: unknown) {
+	if (pending) {
+		return "Opening view…";
+	}
+	if (typeof failure === "object" && failure !== null && "message" in failure && typeof failure.message === "string") {
+		return failure.message;
+	}
+	return missing ? "The board source is missing." : "This view could not be opened. Retry the link or reload the page.";
+}
+
+function projectionView(route: ProjectionRoute | RemainingRoute) {
+	if (route === "board") {
+		return "";
+	}
+	return route === "respond" ? "response" : route;
+}
+
+function failureStatus(missing: boolean, conflict: boolean) {
+	if (missing) {
+		return 404;
+	}
+	return conflict ? 409 : 503;
+}

package/src/client/react/ProjectionMain.tsx

@@ -0,0 +1,53 @@
+import { documentSourceId } from "#client/document/layout.ts";
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import { HomeBoard } from "./HomeBoard.tsx";
+import type { MainLocation } from "./mainLocation.ts";
+import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import type { ProjectionRoute } from "./projectionRoute.ts";
+import type { ShellApi } from "./ShellApi.ts";
+import { TodayPage } from "./TodayPage.tsx";
+import { WorkPage } from "./WorkPage.tsx";
+export function ProjectionMain({
+	api,
+	route,
+	url,
+	onPage,
+}: {
+	readonly api: ShellApi;
+	readonly route: ProjectionRoute;
+	readonly url: string;
+	readonly onPage: (location: MainLocation) => void;
+}) {
+	const options = { onPage, route, url };
+	switch (route) {
+		case "today":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.inbox.query(undefined, routeQueryOptions)}
+					location={(data) => ({ file: "Today", status: data.complete ? 200 : 503, view: "today" })}
+					render={(data) => <TodayPage api={api} data={data} />}
+				/>
+			);
+		case "board":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.board.query({ url }, routeQueryOptions)}
+					location={(data) => ({ file: data.document.file, identity: data.document.identity, status: 200, view: "" })}
+					render={(data) => <HomeBoard data={data} />}
+					source={(data) => documentSourceId(data.document)}
+				/>
+			);
+		case "work":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.work.query({ url }, routeQueryOptions)}
+					location={(data) => ({ file: "Work", status: data.validBoard ? 200 : 404, view: "work" })}
+					render={(data) => <WorkPage api={api} data={data} />}
+					source={(data) => (data.selected ? documentSourceId(data.selected) : undefined)}
+				/>
+			);
+	}
+}