@shivaedev/work-board 0.13.0 → 0.14.1

package/src/server/responses/templateHtml.ts

@@ -1,34 +0,0 @@
-import { Effect } from "effect";
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import { RenderFailed } from "#render/failed.ts";
-import { metadataParse } from "#server/metadata/parse.ts";
-import { renderMarkdown } from "#server/render/markdown.ts";
-import { optionControls } from "./optionControls.ts";
-import { questionTemplate } from "./template.ts";
-
-export const templateHtml = Effect.fn("WorkBoard.templateHtml")(function* (context: string, request: string, file: string) {
-	const template = yield* Effect.try({ catch: (cause) => new RenderFailed({ cause }), try: () => questionTemplate(context, request, file) });
-	function render(source: string) {
-		return renderMarkdown(source, { file, safe: true });
-	}
-	const background = yield* render(template.context);
-	const fields = metadataParse(context).fields;
-	const choicePrompt = fields.kind === "question" && !fields.question && fields.options !== undefined ? template.prompts.at(0) : undefined;
-	if (choicePrompt) {
-		return { background, controls: optionControls(choicePrompt, fields), hasPrompts: true };
-	}
-	const controls = yield* Effect.forEach(template.prompts, (prompt, index) =>
-		Effect.gen(function* () {
-			const description = yield* render(prompt.source);
-			const options = yield* Effect.forEach(prompt.options, (option, choice) =>
-				Effect.map(
-					render(option.source),
-					(html) =>
-						`<div class="question-option"><input id="question-${index}-${choice}" type="${prompt.mode === "one" ? "radio" : "checkbox"}" name="choice-${escapeHtml(prompt.id)}" value="${escapeHtml(option.id)}" data-option-source="${escapeHtml(option.source)}"><div><label for="question-${index}-${choice}">Option ${escapeHtml(option.id)}</label>${html}</div></div>`,
-				),
-			);
-			return `<fieldset data-prompt="${escapeHtml(prompt.id)}" data-mode="${prompt.mode}" data-source="${escapeHtml(prompt.source)}"><legend>Question ${index + 1} · ${escapeHtml(prompt.id)}</legend>${description}<p>${prompt.mode === "text" ? "Answer in your own words" : `${prompt.mode === "one" ? "Choose one option" : "Choose any combination"}, or answer in your own words`}. Nothing is selected for you.</p>${options.join("")}${prompt.mode === "text" ? "" : '<button type="button" data-clear-choices>Clear selections</button>'}<label>Additional text / another answer<textarea data-answer-text maxlength="8192" rows="3"></textarea></label></fieldset>`;
-		}),
-	);
-	return { background, controls: controls.join(""), hasPrompts: template.prompts.length > 0 };
-});

package/src/server/views/tools.ts

@@ -1,11 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.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/server/views/workCards.ts

@@ -1,27 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import type { Item } from "./items.ts";
-import { type State, viewUrl } from "./state.ts";
-
-function card(item: Item, state: State, waiting: ReadonlyMap<string, string>): 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"' : ""}>
- ${waiting.has(item.id) ? `<span class="waiting-badge" title="${escapeHtml(waiting.get(item.id) ?? "")}">Waiting on you</span>` : ""}
- <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, waiting: ReadonlyMap<string, string> = new Map()): 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, waiting)).join("")}</section>`,
-		)
-		.join("")}</div>`;
-}

package/src/server/views/workControls.ts

@@ -1,38 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.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/server/views/workDetail.ts

@@ -1,28 +0,0 @@
-import { Effect } from "effect";
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import { documentHeadings } from "#render/documentHeadings.ts";
-import { identityUrl } from "#server/metadata/links.ts";
-import { metadataHtml } from "#server/page/metadata.ts";
-import { renderMarkdown } from "#server/render/markdown.ts";
-import type { Snapshot } from "#server/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/server/views/workHtml.ts

@@ -1,45 +0,0 @@
-import { Effect } from "effect";
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import { inboxItems } from "#server/attention/inbox.ts";
-import { identityUrl } from "#server/metadata/links.ts";
-import type { Snapshot } from "#server/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 waiting = new Map(
-		inboxItems(snapshot)
-			.filter((item) => !item.problem)
-			.map((item) => [item.id, item.reason]),
-	);
-	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, waiting) : workCards(projection.rows, state, waiting)}</section>${detail}</div>`,
-		status: 200,
-	};
-});

package/src/server/views/workStyle.ts

@@ -1,18 +0,0 @@
-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 .document-layout{display:flex;flex-direction:column;gap:16px}.work-detail .item-context{align-self:stretch}
-.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/server/views/workTable.ts

@@ -1,26 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import type { Item } from "./items.ts";
-import { type State, viewUrl } from "./state.ts";
-
-function row(item: Item, state: State, waiting: ReadonlyMap<string, string>): string {
-	const fields = item.document.parsed.fields;
-	const selected = item.id === state.item;
-	const values = [
-		fields.kind,
-		waiting.has(item.id) ? `Waiting on you · ${fields.status ?? "Status not recorded"}` : 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, waiting: ReadonlyMap<string, string> = new Map()): 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, waiting)).join("")}</tbody></table></div>`;
-}