@shivaedev/work-board 0.2.1 → 0.3.0

package/src/search/entries.ts

@@ -0,0 +1,51 @@
+import { markdownToHtml } from "satteri";
+import { fileUrl } from "#files/url.ts";
+import { boardOf } from "#render/board.ts";
+import { documentHeadings } from "#render/documentHeadings.ts";
+import { searchCollector } from "./collector.ts";
+import { linkCollector } from "./linkCollector.ts";
+
+export interface Entry {
+	readonly file: string;
+	readonly href: string;
+	readonly kind: "document" | "heading" | "passage";
+	readonly line?: number;
+	readonly text: string;
+	readonly title: string;
+}
+
+function fragmentLocation(source: string, fragment: string, bodyLine: number, seen: Map<string, number>): number | undefined {
+	const start = source.indexOf(fragment, seen.get(fragment) ?? 0);
+	if (start < 0) {
+		return undefined;
+	}
+	seen.set(fragment, start + fragment.length);
+	return bodyLine + source.slice(0, start).split("\n").length - 1;
+}
+
+export async function entriesOf(source: string, file: string, home: boolean, bodyLine = 1, links = new Set<string>()): Promise<readonly Entry[]> {
+	const headings = documentHeadings();
+	let fragmentLine: number | undefined = bodyLine;
+	let fragmentLength = 0;
+	const seenFragments = new Map<string, number>();
+	const { entries, plugin } = searchCollector(
+		file,
+		() => fragmentLine,
+		() => fragmentLength,
+	);
+	const board = home ? boardOf(source) : undefined;
+	const fragments = board
+		? [board.title, board.intro, ...board.sections.flatMap((section) => [section.heading, section.notes, ...section.items]), board.footer]
+		: [source];
+	for (const fragment of fragments) {
+		if (fragment) {
+			fragmentLength = fragment.split("\n").length;
+			fragmentLine = board ? fragmentLocation(source, fragment, bodyLine, seenFragments) : bodyLine;
+			await markdownToHtml(board?.definitions ? `${fragment}\n\n${board.definitions}` : fragment, {
+				hastPlugins: [headings.plugin, plugin, linkCollector(links)],
+			});
+		}
+	}
+	const title = headings.entries.find((heading) => heading.depth === 1)?.title || file;
+	return [{ file, href: fileUrl(file), kind: "document", line: bodyLine, text: `${file} ${title}`, title }, ...entries];
+}

package/src/search/linkCollector.ts

@@ -0,0 +1,16 @@
+import { defineHastPlugin } from "satteri";
+
+export function linkCollector(links: Set<string>) {
+	return defineHastPlugin({
+		element: {
+			filter: ["a"],
+			visit: (element) => {
+				const href = element.properties.href;
+				if (typeof href === "string" && !href.startsWith("#")) {
+					links.add(href);
+				}
+			},
+		},
+		name: "work-board-link-collector",
+	});
+}

package/src/search/match.ts

@@ -0,0 +1,28 @@
+import type { Entry } from "./entries.ts";
+
+function normalize(text: string): string {
+	return text.normalize("NFKC").toLowerCase().replace(/\s+/gu, " ").trim();
+}
+
+export function searchMatch(entries: readonly Entry[], query: string) {
+	const phrase = normalize(query.slice(0, 200));
+	const terms = phrase.split(" ").filter(Boolean).slice(0, 8);
+	if (terms.length === 0) {
+		return { results: [], total: 0 };
+	}
+	const matches = entries
+		.flatMap((entry, order) => {
+			const text = normalize(entry.text);
+			if (!terms.every((term) => text.includes(term))) {
+				return [];
+			}
+			const at = Math.max(0, entry.text.toLowerCase().indexOf(terms[0] ?? ""));
+			const start = Math.max(0, at - 50);
+			const snippet = (start ? "…" : "") + entry.text.slice(start, start + 180) + (entry.text.length > start + 180 ? "…" : "");
+			const ranks = { document: 0, heading: 2, passage: 4 };
+			const rank = ranks[entry.kind] + (text.includes(phrase) ? 0 : 1);
+			return [{ entry: { ...entry, snippet }, order, rank }];
+		})
+		.sort((left, right) => left.rank - right.rank || left.order - right.order);
+	return { results: matches.slice(0, 40).map((match) => match.entry), total: matches.length };
+}

package/src/search/metadataEntries.ts

@@ -0,0 +1,42 @@
+import { fileUrl } from "#files/url.ts";
+import { identityUrl } from "#metadata/links.ts";
+import type { MetadataDocument, MetadataModel } from "#metadata/model.ts";
+import type { Entry } from "./entries.ts";
+
+function itemUrl(document: MetadataDocument, model: MetadataModel): string {
+	const id = document.parsed.fields.id;
+	return model.unavailable.length === 0 && id && model.ids.get(id)?.length === 1 ? identityUrl(id) : fileUrl(document.file);
+}
+export function metadataEntries(entries: readonly Entry[], documents: readonly MetadataDocument[], model: MetadataModel): readonly Entry[] {
+	const sources = new Map(documents.map((document) => [document.file, document]));
+	const enriched = entries.map((entry) => {
+		const document = sources.get(entry.file);
+		if (entry.kind !== "document" || !document) {
+			return entry;
+		}
+		const fields = document.parsed.fields;
+		return {
+			...entry,
+			href: itemUrl(document, model),
+			text: [entry.text, fields.id, fields.kind, fields.status, fields.owner, fields.nextAction].filter(Boolean).join(" "),
+		};
+	});
+	for (const document of documents) {
+		const criteria = document.parsed.fields.criteria ?? [];
+		for (const [index, criterion] of criteria.entries()) {
+			if (criteria.filter((item) => item.id === criterion.id).length !== 1) {
+				continue;
+			}
+			const line = document.parsed.lines[`criteria.${index}`] ?? document.parsed.lines.criteria;
+			enriched.push({
+				file: document.file,
+				href: `${itemUrl(document, model)}#criterion-${encodeURIComponent(criterion.id)}`,
+				kind: "passage",
+				...(line === undefined ? {} : { line }),
+				text: criterion.text,
+				title: criterion.text,
+			});
+		}
+	}
+	return enriched;
+}

package/src/search/snapshot.ts

@@ -0,0 +1,60 @@
+import { Effect, FileSystem, Option, Path, Ref, Semaphore } from "effect";
+import type { Changes } from "#files/changes.ts";
+import { within } from "#files/list.ts";
+import { type MetadataDocument, metadataModel } from "#metadata/model.ts";
+import { metadataParse } from "#metadata/parse.ts";
+import { type Entry, entriesOf } from "./entries.ts";
+import { metadataEntries } from "./metadataEntries.ts";
+
+export interface Snapshot {
+	readonly documents: readonly MetadataDocument[];
+	readonly entries: readonly Entry[];
+	readonly model: ReturnType<typeof metadataModel>;
+	readonly revision: number;
+	readonly unavailable: readonly string[];
+}
+
+export const searchSnapshot = Effect.fn("WorkBoard.searchSnapshot")(function* (root: string, home: string | undefined, changes: Changes) {
+	const cached = yield* Ref.make<Snapshot | undefined>(undefined);
+	const semaphore = yield* Semaphore.make(1);
+	const read = Effect.gen(function* () {
+		const revision = yield* changes.revision;
+		const hit = yield* Ref.get(cached);
+		if (hit?.revision === revision && (yield* Ref.get(changes.watching))) {
+			return hit;
+		}
+		const fs = yield* FileSystem.FileSystem;
+		const path = yield* Path.Path;
+		const files = yield* changes.files;
+		const entries: Entry[] = [];
+		const documents: MetadataDocument[] = [];
+		const unavailable: string[] = [];
+		for (const file of files) {
+			const found = yield* Effect.option(
+				Effect.gen(function* () {
+					const real = yield* fs.realPath(path.join(root, file.path));
+					if (!within(changes.realRoot, path.sep, real)) {
+						return undefined;
+					}
+					const source = yield* fs.readFileString(real);
+					const parsed = metadataParse(source);
+					const links = new Set<string>();
+					const rendered = yield* Effect.tryPromise(() => entriesOf(parsed.body, file.path, file.path === home, parsed.bodyLine, links));
+					return { links: [...links], parsed, rendered };
+				}),
+			);
+			if (Option.isSome(found) && found.value) {
+				documents.push({ file: file.path, links: found.value.links, parsed: found.value.parsed });
+				entries.push(...found.value.rendered);
+			} else {
+				unavailable.push(file.path);
+			}
+		}
+		const model = metadataModel(documents, unavailable, home ?? files[0]?.path);
+		const enriched = metadataEntries(entries, documents, model);
+		const snapshot = { documents, entries: enriched, model, revision, unavailable };
+		yield* Ref.set(cached, unavailable.length > 0 ? undefined : snapshot);
+		return snapshot;
+	});
+	return semaphore.withPermit(read);
+});

package/src/views/items.ts

@@ -0,0 +1,55 @@
+import type { MetadataDocument } from "#metadata/model.ts";
+import type { Snapshot } from "#search/snapshot.ts";
+import { fieldFilter, type State } from "./state.ts";
+
+export interface Item {
+	readonly document: MetadataDocument;
+	readonly id: string;
+	readonly title: string;
+}
+export function itemsOf(snapshot: Snapshot): readonly Item[] {
+	const titles = new Map(snapshot.entries.filter((entry) => entry.kind === "document").map((entry) => [entry.file, entry.title]));
+	return [...snapshot.model.ids].flatMap(([id, documents]) => {
+		const document = documents.length === 1 ? documents[0] : undefined;
+		return document ? [{ document, id, title: titles.get(document.file) ?? document.file }] : [];
+	});
+}
+function matches(item: Item, state: State): boolean {
+	const fields = item.document.parsed.fields;
+	if (state.owner && fieldFilter(fields.owner) !== state.owner) {
+		return false;
+	}
+	if (state.status && fieldFilter(fields.status) !== state.status) {
+		return false;
+	}
+	const text = [item.id, item.title, fields.kind, fields.status, fields.owner, fields.nextAction]
+		.filter(Boolean)
+		.join(" ")
+		.normalize("NFKC")
+		.toLowerCase();
+	return state.query
+		.normalize("NFKC")
+		.toLowerCase()
+		.split(/\s+/u)
+		.filter(Boolean)
+		.every((term) => text.includes(term));
+}
+function order(item: Item, sort: State["sort"]): string | undefined {
+	return sort === "title" ? item.title : item.document.parsed.fields[sort];
+}
+const collator = new Intl.Collator("en", { numeric: true, sensitivity: "base" });
+export function filterItems(items: readonly Item[], state: State): readonly Item[] {
+	return items
+		.filter((item) => matches(item, state))
+		.sort((a, b) => {
+			const left = order(a, state.sort);
+			const right = order(b, state.sort);
+			if (left === undefined) {
+				return right === undefined ? a.id.localeCompare(b.id) : 1;
+			}
+			if (right === undefined) {
+				return -1;
+			}
+			return collator.compare(left, right) || a.id.localeCompare(b.id);
+		});
+}

package/src/views/projection.ts

@@ -0,0 +1,59 @@
+import type { Snapshot } from "#search/snapshot.ts";
+import { filterItems, type Item, itemsOf } from "./items.ts";
+import type { State } from "./state.ts";
+
+export interface Projection {
+	readonly boards: readonly Item[];
+	readonly issues: readonly string[];
+	readonly items: readonly Item[];
+	readonly rows: readonly Item[];
+	readonly selected: Item | undefined;
+	readonly selectedOutside: boolean;
+	readonly title: string;
+	readonly validBoard: boolean;
+}
+function boardItems(board: Item, items: readonly Item[], snapshot: Snapshot) {
+	const references = board.document.parsed.fields.items ?? [];
+	const byId = new Map(items.map((item) => [item.id, item]));
+	const issues: string[] = [];
+	const found: Item[] = [];
+	for (const id of new Set(references)) {
+		const item = byId.get(id);
+		if (item) {
+			found.push(item);
+		} else {
+			issues.push(`${id}: ${(snapshot.model.ids.get(id)?.length ?? 0) > 1 ? "ambiguous ID" : "missing or invalid ID"}`);
+		}
+		if (references.filter((reference) => reference === id).length > 1) {
+			issues.push(`${id}: repeated membership, shown once`);
+		}
+	}
+	return { found, issues };
+}
+export function projectItems(snapshot: Snapshot, state: State): Projection {
+	const known = itemsOf(snapshot);
+	const boards = known.filter((item) => item.document.parsed.fields.kind === "board");
+	const board = boards.find((item) => item.id === state.board);
+	const membership = board ? boardItems(board, known, snapshot) : undefined;
+	const items = membership?.found ?? known.filter((item) => item.document.parsed.fields.kind !== "board");
+	const rows = filterItems(items, state);
+	const selected = known.find((item) => item.id === state.item);
+	const issues =
+		membership?.issues
+		?? [...snapshot.model.ids]
+			.filter(([, documents]) => documents.length > 1)
+			.map(([id]) => `${id}: ambiguous ID; open its source files to correct the declaration`);
+	const sourceIssues = board
+		? (snapshot.model.diagnostics.get(board.document.file) ?? []).map((problem) => `${board.document.file}:${problem.line}: ${problem.message}`)
+		: [];
+	return {
+		boards,
+		issues: [...issues, ...sourceIssues],
+		items,
+		rows,
+		selected,
+		selectedOutside: selected !== undefined && !rows.some((item) => item.id === selected.id),
+		title: board?.title ?? "All work",
+		validBoard: !state.board || board !== undefined,
+	};
+}

package/src/views/savedScript.ts

@@ -0,0 +1,88 @@
+export function savedScript(): string {
+	return `
+const key = "work-board:views:" + document.documentElement.dataset.workspace;
+let views = [];
+let notice = "";
+let selectedName = "";
+const localUrl = (value) => {
+  if (typeof value !== "string" || value.length > 8192) return null;
+  try {
+    const url = new URL(value, location.href);
+    if (url.origin !== location.origin || url.pathname !== "/_board/work") return null;
+    for (const name of [...url.searchParams.keys()]) {
+      if (!["view", "board", "owner", "status", "q", "sort"].includes(name)) url.searchParams.delete(name);
+    }
+    return url.pathname + url.search;
+  } catch { return null; }
+};
+try {
+  const saved = JSON.parse(localStorage.getItem(key) ?? "[]");
+  if (Array.isArray(saved)) {
+    for (const entry of saved) {
+      const url = localUrl(entry?.url);
+      if (!url || typeof entry.name !== "string" || !entry.name.trim() || entry.name.length > 60 || views.some((view) => view.name === entry.name)) continue;
+      views.push({ name: entry.name, url });
+      if (views.length === 10) break;
+    }
+  }
+} catch { notice = "Saved views could not be restored; new views apply to this page until saved."; }
+const persist = () => {
+  try { localStorage.setItem(key, JSON.stringify(views)); notice = ""; }
+  catch { notice = "Saved views apply to this page only; browser storage is unavailable."; }
+};
+const selectedView = () => views.find((view) => view.name === document.getElementById("saved-view")?.value);
+const showSelection = () => {
+  const open = document.getElementById("open-saved-view");
+  if (!open) return;
+  const selected = selectedView();
+  open.hidden = !selected;
+  if (selected) open.href = selected.url; else open.removeAttribute("href");
+  document.getElementById("remove-saved-view").disabled = !selected;
+};
+const option = (label, value) => {
+  const node = document.createElement("option");
+  node.textContent = label; node.value = value;
+  return node;
+};
+const refresh = (chosen) => {
+  const tools = document.getElementById("saved-work-views");
+  if (!tools) return;
+  const picker = document.getElementById("saved-view");
+  const previous = chosen ?? selectedName;
+  const labels = views.map((view) => view.name);
+  if (JSON.stringify([...picker.options].slice(1).map((option) => option.value)) !== JSON.stringify(labels)) {
+    picker.replaceChildren(option(views.length ? "Choose a saved view" : "No saved views", ""), ...views.map((view) => option(view.name, view.name)));
+  }
+  picker.value = views.some((view) => view.name === previous) ? previous : "";
+  selectedName = picker.value;
+  picker.disabled = views.length === 0;
+  tools.querySelector('#save-work-view button').disabled = false;
+  document.getElementById("clear-saved-views").disabled = views.length === 0;
+  document.getElementById("saved-view-status").textContent = notice || "Save board, filters, sort, and layout locally. Up to 10 named views; saving the same name updates it. Item selection stays in the URL.";
+  showSelection();
+};
+document.addEventListener("submit", (event) => {
+  if (!event.target.matches?.("#save-work-view")) return;
+  event.preventDefault();
+  const name = document.getElementById("view-name").value.trim().slice(0, 60);
+  const url = localUrl(document.getElementById("saved-work-views").dataset.url);
+  if (!name || !url) return;
+  if (views.length === 10 && !views.some((view) => view.name === name)) {
+    notice = "You have 10 saved views. Remove one or update an existing name."; refresh(); return;
+  }
+  views = [{ name, url }, ...views.filter((view) => view.name !== name)];
+  persist(); refresh(name);
+});
+document.addEventListener("change", (event) => {
+  if (event.target.id === "saved-view") { selectedName = event.target.value; showSelection(); }
+});
+document.addEventListener("click", (event) => {
+  if (event.target.id === "remove-saved-view") views = views.filter((view) => view.name !== selectedView()?.name);
+  else if (event.target.id === "clear-saved-views") views = [];
+  else return;
+  persist(); refresh();
+});
+document.addEventListener("board-page", () => refresh());
+refresh();
+`;
+}

package/src/views/state.ts

@@ -0,0 +1,47 @@
+import { Option, Schema } from "effect";
+
+const View = Schema.Literals(["board", "table"]);
+const Sort = Schema.Literals(["title", "owner", "status"]);
+export const State = Schema.Struct({
+	board: Schema.String,
+	item: Schema.String,
+	owner: Schema.String,
+	query: Schema.String,
+	sort: Sort,
+	status: Schema.String,
+	view: View,
+});
+export type State = typeof State.Type;
+
+export function stateOf(url: string): State {
+	const params = new URL(url, "http://127.0.0.1").searchParams;
+	return {
+		board: params.get("board") ?? "",
+		item: params.get("item") ?? "",
+		owner: params.get("owner") ?? "",
+		query: (params.get("q") ?? "").slice(0, 200),
+		sort: Option.getOrElse(Schema.decodeUnknownOption(Sort)(params.get("sort")), () => "title"),
+		status: params.get("status") ?? "",
+		view: Option.getOrElse(Schema.decodeUnknownOption(View)(params.get("view")), () => "board"),
+	};
+}
+export function viewUrl(state: State, changes: Partial<State> = {}, hash = ""): string {
+	const next = { ...state, ...changes };
+	const params = new URLSearchParams({ view: next.view });
+	for (const [key, value] of Object.entries({
+		board: next.board,
+		item: next.item,
+		owner: next.owner,
+		q: next.query,
+		sort: next.sort,
+		status: next.status,
+	})) {
+		if (value) {
+			params.set(key, value);
+		}
+	}
+	return `/_board/work?${params}${hash ? `#${hash}` : ""}`;
+}
+export function fieldFilter(value: string | undefined): string {
+	return value === undefined ? "missing" : `value:${value}`;
+}

package/src/views/tools.ts

@@ -0,0 +1,11 @@
+import { escapeHtml } from "#page/escape.ts";
+import { type State, viewUrl } from "./state.ts";
+
+export function viewTools(state: State): string {
+	const layouts = ["board", "table"] as const;
+	return `<nav class="view-layouts" aria-label="Work layout">${layouts.map((view) => `<a href="${escapeHtml(viewUrl(state, { view }, "work-results"))}"${state.view === view ? ' aria-current="page"' : ""}>${view === "board" ? "Board" : "Table"}</a>`).join("")}</nav>
+ <section id="saved-work-views" class="saved-work-views" aria-label="Saved local views" data-url="${escapeHtml(viewUrl(state, { item: "" }))}">
+ <form id="save-work-view"><label for="view-name">View name</label><input id="view-name" maxlength="60" placeholder="Name this view" required><button type="submit" disabled>Save view</button></form>
+ <div class="view-picker"><label for="saved-view">Saved views</label><select id="saved-view" disabled><option value="">No saved views</option></select><a id="open-saved-view" hidden>Open</a><button id="remove-saved-view" type="button" disabled>Remove</button><button id="clear-saved-views" type="button" disabled>Clear all</button></div>
+ <p id="saved-view-status" role="status">Save board, filters, sort, and layout locally. Item selection stays in the URL. Saving requires JavaScript.</p></section>`;
+}

package/src/views/workCards.ts

@@ -0,0 +1,26 @@
+import { escapeHtml } from "#page/escape.ts";
+import type { Item } from "./items.ts";
+import { type State, viewUrl } from "./state.ts";
+
+function card(item: Item, state: State): string {
+	const fields = item.document.parsed.fields;
+	const selected = item.id === state.item;
+	return `<article class="work-card" data-key="item:${escapeHtml(item.id)}" data-item="${escapeHtml(item.id)}"${selected ? ' data-selected="true"' : ""}>
+ <p class="work-kind">${escapeHtml(fields.kind ?? "Kind not recorded")}</p>
+ <h3><a href="${escapeHtml(viewUrl(state, { item: item.id }, "work-detail"))}"${selected ? ' aria-current="true"' : ""}>${escapeHtml(item.title)}</a></h3>
+ <p class="work-id">${escapeHtml(item.id)}</p><p class="work-owner">Owner: ${escapeHtml(fields.owner ?? "Not recorded")}</p>
+ ${fields.nextAction ? `<p class="work-next">Next: ${escapeHtml(fields.nextAction)}</p>` : ""}</article>`;
+}
+export function workCards(items: readonly Item[], state: State): string {
+	if (items.length === 0) {
+		return '<p class="empty">No work matches these filters.</p>';
+	}
+	const columns = Map.groupBy(items, (item) => item.document.parsed.fields.status);
+	return `<div class="work-columns">${[...columns]
+		.map(
+			([status, rows]) => `<section class="work-column" data-key="status:${escapeHtml(status ?? "")}"
+ aria-label="${escapeHtml(status ?? "Status not recorded")}"><h2>${escapeHtml(status ?? "Status not recorded")} <span class="work-count">${rows.length}</span></h2>
+ ${rows.map((item) => card(item, state)).join("")}</section>`,
+		)
+		.join("")}</div>`;
+}

package/src/views/workControls.ts

@@ -0,0 +1,38 @@
+import { escapeHtml } from "#page/escape.ts";
+import type { Item } from "./items.ts";
+import type { Projection } from "./projection.ts";
+import { fieldFilter, type State, viewUrl } from "./state.ts";
+
+function option(value: string, title: string, current: string): string {
+	return `<option value="${escapeHtml(value)}"${value === current ? " selected" : ""}>${escapeHtml(title)}</option>`;
+}
+function fieldOptions(items: readonly Item[], field: "owner" | "status", current: string): string {
+	const values = new Map(
+		items.map((item) => {
+			const value = item.document.parsed.fields[field];
+			return [fieldFilter(value), value ?? `${field === "owner" ? "Owner" : "Status"} not recorded`];
+		}),
+	);
+	if (current && !values.has(current)) {
+		values.set(current, `${current.startsWith("value:") ? current.slice(6) : current} (no current matches)`);
+	}
+	return (
+		option("", `All ${field === "owner" ? "owners" : "statuses"}`, current)
+		+ [...values]
+			.sort((a, b) => a[1].localeCompare(b[1], "en"))
+			.map(([value, label]) => option(value, label, current))
+			.join("")
+	);
+}
+export function workControls(projection: Projection, state: State): string {
+	const boards = option("", "All work", state.board) + projection.boards.map((board) => option(board.id, board.title, state.board)).join("");
+	const unavailable = state.board && !projection.validBoard ? option(state.board, `${state.board} (unavailable)`, state.board) : "";
+	return `<form id="work-filters" class="work-filters" action="/_board/work#work-results" method="get">
+ <input type="hidden" name="view" value="${state.view}"><input type="hidden" name="item" value="${escapeHtml(state.item)}">
+ <label><span>Board</span><select name="board" id="work-board">${boards}${unavailable}</select></label>
+ <label><span>Status</span><select name="status" id="work-status">${fieldOptions(projection.items, "status", state.status)}</select></label>
+ <label><span>Owner</span><select name="owner" id="work-owner">${fieldOptions(projection.items, "owner", state.owner)}</select></label>
+ <label><span>Find work</span><input name="q" id="work-query" type="search" value="${escapeHtml(state.query)}" maxlength="200"></label>
+ <label><span>Sort by</span><select name="sort" id="work-sort">${["title", "owner", "status"].map((sort) => option(sort, sort.charAt(0).toUpperCase() + sort.slice(1), state.sort)).join("")}</select></label>
+ <button type="submit">Apply</button><a href="${escapeHtml(viewUrl(state, { owner: "", query: "", status: "" }, "work-results"))}">Clear filters</a></form>`;
+}

package/src/views/workDetail.ts

@@ -0,0 +1,28 @@
+import { Effect } from "effect";
+import { identityUrl } from "#metadata/links.ts";
+import { escapeHtml } from "#page/escape.ts";
+import { metadataHtml } from "#page/metadata.ts";
+import { documentHeadings } from "#render/documentHeadings.ts";
+import { renderMarkdown } from "#render/markdown.ts";
+import type { Snapshot } from "#search/snapshot.ts";
+import type { Projection } from "./projection.ts";
+import { type State, viewUrl } from "./state.ts";
+
+export const workDetail = Effect.fn("WorkBoard.workDetail")(function* (projection: Projection, state: State, snapshot: Snapshot) {
+	if (!state.item) {
+		return "";
+	}
+	const close = `<a class="detail-close" href="${escapeHtml(viewUrl(state, { item: "" }, "work-results"))}">Close detail</a>`;
+	const selected = projection.selected;
+	if (!selected) {
+		const ambiguous = (snapshot.model.ids.get(state.item)?.length ?? 0) > 1;
+		return `<aside id="work-detail" class="work-detail" tabindex="-1" aria-label="Selected work">${close}<h2>Item unavailable</h2><p>${escapeHtml(state.item)} ${ambiguous ? "has a duplicate ID" : "is missing or its identity changed"}. No source was selected.</p><a href="${escapeHtml(identityUrl(state.item))}">Inspect item identity</a></aside>`;
+	}
+	const { document } = selected;
+	const prose = yield* renderMarkdown(document.parsed.body, { file: document.file, headings: documentHeadings() });
+	return `<aside id="work-detail" class="work-detail" data-key="detail:${escapeHtml(selected.id)}" tabindex="-1" aria-label="Selected work">
+ <header>${close}<a href="${escapeHtml(identityUrl(selected.id))}">Open document</a></header>
+ ${projection.selectedOutside ? '<p class="detail-notice" role="status">This selected item is outside the current board or filters.</p>' : ""}
+ <p class="meta">Source: ${escapeHtml(document.file)}</p>${metadataHtml(document.parsed, document.file, snapshot.model)}
+ <article class="doc">${prose}</article></aside>`;
+});

package/src/views/workHtml.ts

@@ -0,0 +1,39 @@
+import { Effect } from "effect";
+import { identityUrl } from "#metadata/links.ts";
+import { escapeHtml } from "#page/escape.ts";
+import type { Snapshot } from "#search/snapshot.ts";
+import { projectItems } from "./projection.ts";
+import type { State } from "./state.ts";
+import { viewTools } from "./tools.ts";
+import { workCards } from "./workCards.ts";
+import { workControls } from "./workControls.ts";
+import { workDetail } from "./workDetail.ts";
+import { workTable } from "./workTable.ts";
+
+export const workHtml = Effect.fn("WorkBoard.workHtml")(function* (snapshot: Snapshot, state: State) {
+	const projection = projectItems(snapshot, state);
+	const controls = workControls(projection, state);
+	const tools = viewTools(state);
+	if (!projection.validBoard) {
+		return {
+			html: `<h1>Board unavailable</h1>${tools}${controls}<p class="empty">${escapeHtml(state.board)} is missing, has a duplicate ID, or is not a declared board. Choose another board or open its <a href="${escapeHtml(identityUrl(state.board))}">source identity</a>.</p>`,
+			status: 404,
+		};
+	}
+	const issues =
+		projection.issues.length > 0
+			? `<details class="view-issues"><summary>Source issues (${projection.issues.length})</summary><ul>${projection.issues.map((issue) => `<li>${escapeHtml(issue)}</li>`).join("")}</ul></details>`
+			: "";
+	const source = state.board ? `<a href="${escapeHtml(identityUrl(state.board))}">Board source</a>` : "";
+	const empty =
+		projection.items.length === 0
+			? '<p class="empty">No identified work is declared here. Keep reading ordinary files, or add item IDs and explicit board membership in their Markdown sources.</p>'
+			: "";
+	const detail = yield* workDetail(projection, state, snapshot);
+	return {
+		html: `<header class="work-head"><p class="work-eyebrow">WORK · ${state.view.toUpperCase()} VIEW</p><h1>${escapeHtml(projection.title)}</h1><p>Views use recorded fields. A section heading does not set an item's status.</p>${source}</header>
+ ${tools}${controls}${issues}<p class="work-total" role="status">${projection.rows.length} shown · ${projection.items.length} items in this view</p>
+ <div class="work-layout${state.item ? " has-detail" : ""}"><section id="work-results" tabindex="-1" aria-label="Work items">${empty}${state.view === "table" ? workTable(projection.rows, state) : workCards(projection.rows, state)}</section>${detail}</div>`,
+		status: 200,
+	};
+});

package/src/views/workStyle.ts

@@ -0,0 +1,17 @@
+export function workStyle(): string {
+	return `
+.work-head h1{margin:0 0 8px}.work-eyebrow{font:11px var(--mono);letter-spacing:.12em;color:var(--muted);margin:0 0 12px}.work-head>p:not(.work-eyebrow){color:var(--muted);font-size:.9rem;margin:0 0 12px}
+.work-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:24px 0 16px;padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
+.work-filters label{display:grid;gap:5px;font-size:12px;color:var(--muted);flex:1 1 130px;min-width:0}.work-filters input,.work-filters select{width:100%;min-width:0;font:inherit;font-size:14px;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:5px;padding:8px}
+.work-filters button{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:5px;padding:8px 12px}.work-filters>a{font-size:13px;padding:8px 0}.work-total{font-size:13px;color:var(--muted);margin:0 0 20px}
+.work-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}.work-layout.has-detail{grid-template-columns:minmax(0,1fr) minmax(300px,420px)}
+.work-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}.work-column{min-width:0}.work-column>h2{display:flex;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:14px;overflow-wrap:anywhere}.work-count{font:12px var(--mono);color:var(--muted)}
+.work-card{padding:var(--card-space);margin-bottom:12px;border:1px solid var(--border);border-radius:10px;background:var(--card);overflow-wrap:anywhere}.work-card[data-selected="true"]{border-color:var(--link);box-shadow:0 0 0 1px var(--link)}.work-card h3{font-size:1rem;margin:6px 0}.work-card h3 a{text-decoration:none}.work-kind{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0}.work-id{font:11px var(--mono);color:var(--muted);margin:0 0 12px}.work-owner,.work-next{font-size:13px;margin:0 0 8px}.work-card>:last-child{margin-bottom:0}
+.work-detail{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;min-width:0;padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--card);scroll-margin-top:20px}.work-detail>header{display:flex;justify-content:space-between;gap:16px;font-size:13px;margin:0 0 16px}.work-detail .work-meta{padding:12px;font-size:13px}.work-detail .doc{font-size:.9rem}.work-detail .doc h1{font-size:1.5rem}.detail-notice{padding:10px;background:var(--surface);font-size:13px}.view-issues{margin:0 0 16px;padding:12px;background:var(--surface);border-radius:8px;font-size:13px;overflow-wrap:anywhere}
+.work-open{font-size:13px;white-space:nowrap}.work-open[aria-current="page"]{font-weight:700;text-decoration:underline}#work-results{scroll-margin-top:20px}
+.view-layouts{display:flex;gap:6px;margin:20px 0 12px}.view-layouts a{padding:5px 14px;border:1px solid var(--border);border-radius:6px;text-decoration:none;font-size:13px}.view-layouts a[aria-current="page"]{background:var(--surface);font-weight:600}
+.saved-work-views{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:12px}.saved-work-views form,.view-picker{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}.saved-work-views input,.saved-work-views select{min-width:0;max-width:100%;padding:6px 10px;font:inherit;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)}.saved-work-views>p{flex-basis:100%;margin:0;color:var(--muted)}
+.work-table-wrap{max-width:100%;overflow:auto}.work-table{display:table;width:100%;margin:0;font-size:13px;background:var(--card)}.work-table th,.work-table td{padding:calc(var(--card-space)/2);overflow-wrap:anywhere;min-width:100px}.work-table th{font-weight:500}.work-table tbody th{min-width:160px}.work-table .work-id{display:block;margin:6px 0 0}.work-table tr[data-selected="true"]>*{background:var(--surface);box-shadow:inset 0 -2px var(--link)}
+@media(max-width:1000px){.work-layout.has-detail{grid-template-columns:minmax(0,1fr)}.work-detail{position:static;max-height:none;grid-row:1}.work-filters{padding:12px;gap:10px}}
+`;
+}

package/src/views/workTable.ts

@@ -0,0 +1,21 @@
+import { escapeHtml } from "#page/escape.ts";
+import type { Item } from "./items.ts";
+import { type State, viewUrl } from "./state.ts";
+
+function row(item: Item, state: State): string {
+	const fields = item.document.parsed.fields;
+	const selected = item.id === state.item;
+	const values = [fields.kind, fields.status, fields.owner, fields.nextAction];
+	return `<tr data-item="${escapeHtml(item.id)}"${selected ? ' data-selected="true"' : ""}>
+ <th scope="row"><a href="${escapeHtml(viewUrl(state, { item: item.id }, "work-detail"))}"${selected ? ' aria-current="true"' : ""}>${escapeHtml(item.title)}</a><span class="work-id">${escapeHtml(item.id)}</span></th>
+ ${values.map((value) => `<td>${escapeHtml(value ?? "Not recorded")}</td>`).join("")}</tr>`;
+}
+
+export function workTable(items: readonly Item[], state: State): string {
+	if (items.length === 0) {
+		return '<p class="empty">No work matches these filters.</p>';
+	}
+	return `<div class="work-table-wrap"><table class="work-table"><caption class="sr-only">Identified work, sorted by ${escapeHtml(state.sort)}</caption>
+ <thead><tr>${["Work", "Kind", "Status", "Owner", "Next action"].map((title) => `<th scope="col">${title}</th>`).join("")}</tr></thead>
+ <tbody>${items.map((item) => row(item, state)).join("")}</tbody></table></div>`;
+}