238 lines
8.0 KiB
TypeScript
238 lines
8.0 KiB
TypeScript
import { get, post, type ByreEvent, type Project, type Schemas, type Task } from "./api.js";
|
|
import { errorText, h, replace, showAlert } from "./dom.js";
|
|
import { markdown } from "./markdown.js";
|
|
import { models } from "./task.js";
|
|
import { findTask, focusedProject, focusTask, on, onEach, openSummary, state, taskState, unreadSummary, type TaskState } from "./state.js";
|
|
import { taskStyle } from "./taskcolor.js";
|
|
|
|
type Todo = Schemas["Todo"];
|
|
type TodoItem = Schemas["TodoItem"];
|
|
|
|
const refreshKinds = new Set(["task.merged", "project.created"]);
|
|
|
|
export function mountProject(root: HTMLElement): () => void {
|
|
const todos = new Map<string, Todo | string>();
|
|
const starting = new Set<string>();
|
|
let disposed = false;
|
|
|
|
const render = () => {
|
|
const scrollTop = root.querySelector(".project-view")?.scrollTop ?? 0;
|
|
const p = focusedProject();
|
|
replace(root, h("div", { class: "project-view" }, p ? projectBlock(p, todos.get(p.id), starting, start) : h("div", { class: "empty" }, "No project selected.")));
|
|
root.querySelector(".project-view")!.scrollTop = scrollTop;
|
|
};
|
|
|
|
const load = async (projectId: string) => {
|
|
try {
|
|
const todo = await get("/api/projects/{projectId}/todo", { path: { projectId } });
|
|
todos.set(projectId, todo);
|
|
} catch (err) {
|
|
todos.set(projectId, `Couldn't read TODO.md: ${errorText(err)}`);
|
|
}
|
|
if (!disposed) {
|
|
render();
|
|
}
|
|
};
|
|
|
|
const refresh = () => {
|
|
const p = focusedProject();
|
|
if (p) {
|
|
void load(p.id);
|
|
}
|
|
};
|
|
|
|
const start = async (project: Project, item: TodoItem, discuss: boolean) => {
|
|
const key = `${project.id}\n${item.title}`;
|
|
starting.add(key);
|
|
render();
|
|
try {
|
|
await post("/api/projects/{projectId}/todo/tasks", { path: { projectId: project.id }, body: { title: item.title, model: models[0], discuss } });
|
|
} catch (err) {
|
|
void showAlert(errorText(err));
|
|
}
|
|
starting.delete(key);
|
|
if (!disposed) {
|
|
render();
|
|
}
|
|
};
|
|
|
|
const offs = [
|
|
on("event", (detail?: unknown) => {
|
|
const ev = detail as ByreEvent;
|
|
if (!refreshKinds.has(ev.kind)) {
|
|
return;
|
|
}
|
|
if (ev.project_id) {
|
|
void load(ev.project_id);
|
|
}
|
|
}),
|
|
on("connection", () => {
|
|
if (state.connected) {
|
|
refresh();
|
|
}
|
|
}),
|
|
on("projects", refresh),
|
|
onEach(["focus", "selection"], () => {
|
|
render();
|
|
const p = focusedProject();
|
|
if (p && !todos.has(p.id)) {
|
|
void load(p.id);
|
|
}
|
|
}),
|
|
onEach(["tasks", "sessions", "inbox", "summaries"], render),
|
|
];
|
|
|
|
render();
|
|
refresh();
|
|
|
|
return () => {
|
|
disposed = true;
|
|
for (const off of offs) {
|
|
off();
|
|
}
|
|
};
|
|
}
|
|
|
|
function projectBlock(project: Project, todo: Todo | string | undefined, starting: Set<string>, start: (p: Project, item: TodoItem, discuss: boolean) => Promise<void>): HTMLElement {
|
|
const active = (state.tasks.get(project.id) ?? []).filter((t) => t.status === "active");
|
|
return h(
|
|
"section",
|
|
{ class: "project" },
|
|
h("h2", {}, project.name, " ", h("span", { class: "repo" }, project.default_branch)),
|
|
h("h3", {}, "Tasks"),
|
|
tasksBlock(active),
|
|
h("h3", {}, "TODO"),
|
|
...todoBlock(project, todo, active, starting, start),
|
|
);
|
|
}
|
|
|
|
function nested(active: Task[]): { task: Task; depth: number }[] {
|
|
const ids = new Set(active.map((t) => t.id));
|
|
const out: { task: Task; depth: number }[] = [];
|
|
const add = (task: Task, depth: number) => {
|
|
out.push({ task, depth });
|
|
for (const child of active.filter((t) => t.parent_task_id === task.id).reverse()) {
|
|
add(child, depth + 1);
|
|
}
|
|
};
|
|
for (const task of active.filter((t) => t.parent_task_id === undefined || !ids.has(t.parent_task_id))) {
|
|
add(task, 0);
|
|
}
|
|
return out;
|
|
}
|
|
|
|
function stateMark(ts: TaskState): HTMLElement {
|
|
if (ts.kind === "working" || ts.kind === "merging") {
|
|
return h("span", { class: "spinner", title: ts.title });
|
|
}
|
|
return h("span", { class: `dot ${ts.kind}`, title: ts.title });
|
|
}
|
|
|
|
function tasksBlock(active: Task[]): HTMLElement {
|
|
if (active.length === 0) {
|
|
return h("p", { class: "empty-row" }, "No active tasks.");
|
|
}
|
|
return h(
|
|
"ul",
|
|
{ class: "task-list" },
|
|
...nested(active).map(({ task, depth }) => {
|
|
const ts = taskState(task);
|
|
const count = state.inbox.filter((item) => item.task_id === task.id).length;
|
|
const classes = [task.id === state.selectedTaskId && "selected", task.parent_task_id !== undefined && "subtask"].filter(Boolean).join(" ");
|
|
return h(
|
|
"li",
|
|
{ class: classes, style: `${taskStyle(task.id)}; --depth: ${depth}` },
|
|
h(
|
|
"a",
|
|
{
|
|
href: `#/task/${task.id}`,
|
|
onclick: (e: MouseEvent) => {
|
|
e.preventDefault();
|
|
if (unreadSummary(task)) {
|
|
openSummary(task);
|
|
} else {
|
|
focusTask(task.id);
|
|
}
|
|
},
|
|
},
|
|
task.parent_task_id !== undefined && h("span", { class: "subtask-mark", title: `Subtask of ${findTask(task.parent_task_id)?.title ?? task.parent_task_id}` }, "↳"),
|
|
stateMark(ts),
|
|
h("span", { class: "task-title task-name" }, task.title),
|
|
count > 0 && h("span", { class: "badge", title: "inbox items" }, count),
|
|
summaryMark(task),
|
|
h("span", { class: `task-state ${ts.kind}`, title: ts.title }, ts.label),
|
|
),
|
|
);
|
|
}),
|
|
);
|
|
}
|
|
|
|
export function summaryMark(task: Task): HTMLElement | false {
|
|
return unreadSummary(task) && h("span", { class: "task-state summary-unread", title: "A turn summary you haven't read", ariaLabel: `New summary from ${task.title}, unread` }, "new summary");
|
|
}
|
|
|
|
function todoBlock(project: Project, todo: Todo | string | undefined, active: Task[], starting: Set<string>, start: (p: Project, item: TodoItem, discuss: boolean) => Promise<void>): HTMLElement[] {
|
|
if (todo === undefined) {
|
|
return [h("p", { class: "empty-row" }, "Loading…")];
|
|
}
|
|
if (typeof todo === "string") {
|
|
return [h("p", { class: "empty-row error-text" }, todo)];
|
|
}
|
|
if (!todo.exists) {
|
|
return [h("p", { class: "empty-row" }, `No TODO.md on ${project.default_branch}.`)];
|
|
}
|
|
if (todo.items.length === 0) {
|
|
return [h("p", { class: "empty-row" }, "TODO.md has no items.")];
|
|
}
|
|
|
|
const children: HTMLElement[] = [];
|
|
let section = "";
|
|
let list: HTMLElement | undefined;
|
|
for (const item of todo.items) {
|
|
if (!list || item.section !== section) {
|
|
section = item.section;
|
|
if (section) {
|
|
children.push(h("h4", { class: "todo-section" }, section));
|
|
}
|
|
list = h("ul", { class: "todo-list" });
|
|
children.push(list);
|
|
}
|
|
|
|
const task = active.find((t) => t.todo_item === item.title);
|
|
let action: HTMLElement;
|
|
if (task) {
|
|
const ts = taskState(task);
|
|
action = h(
|
|
"a",
|
|
{
|
|
class: "todo-task",
|
|
href: `#/task/${task.id}`,
|
|
onclick: (e: MouseEvent) => {
|
|
e.preventDefault();
|
|
focusTask(task.id);
|
|
},
|
|
},
|
|
stateMark(ts),
|
|
ts.label,
|
|
);
|
|
} else {
|
|
const busy = starting.has(`${project.id}\n${item.title}`);
|
|
const startButton = h("button", { disabled: busy, title: "Start a task that gets straight to work" }, busy ? "Starting…" : "Start");
|
|
startButton.onclick = () => void start(project, item, false);
|
|
const discussButton = h("button", { disabled: busy, title: "Start a task that discusses it with you in chat before building anything" }, "Discuss");
|
|
discussButton.onclick = () => void start(project, item, true);
|
|
action = h("span", { class: "todo-buttons" }, startButton, discussButton);
|
|
}
|
|
|
|
list.append(
|
|
h(
|
|
"li",
|
|
{ class: task && task.id === state.selectedTaskId ? "selected" : "", style: task ? taskStyle(task.id) : "" },
|
|
h("div", { class: "todo-head" }, h("span", { class: task ? "todo-title task-name" : "todo-title" }, item.title), action),
|
|
item.body && markdown(item.body, "md todo-body"),
|
|
),
|
|
);
|
|
}
|
|
return children;
|
|
}
|