@dxos/react-ui-task 0.13.0 → 0.16.0-next-60712ab191a99ba90316cc4be753e9e11b17100a

package/dist/lib/index.mjs

@@ -7,8 +7,10 @@ import { Person, PullRequest, RemoteSession, Task } from "@dxos/types";
 import { getHashHue, getStyles, mx, toHue } from "@dxos/ui-theme";
 import { translationKey } from "#translations";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAtomValue } from "@effect/atom-react/Hooks";
+import * as Atom from "effect/reactivity/Atom";
 import { Filter, Obj, Ref, Tag } from "@dxos/echo";
-import { useObject, useQuery } from "@dxos/echo-react";
+import { useLabel, useObject, useQuery } from "@dxos/echo-react";
 import { Tree, createStaticTreeModel } from "@dxos/react-ui-list";
 import { ActionMenu, createMenuAction, executeMenuAction, fallbackIcon } from "@dxos/react-ui-menu";
 import * as Button from "@dxos/react-ui/Button";
@@ -391,10 +393,13 @@ var [TaskListProvider, useTaskListContext] = Hooks.createContext("TaskList.Root"
 //#endregion
 //#region src/components/TaskList/TaskRowCells.tsx
 /** The status glyph, which is also the control that completes the task. */
+var useAgentWorking = (task) => useAtomValue(useMemo(() => Atom.make((get) => Task.isAgentWorking(get(Obj.atom(task)))), [task]));
 var TaskStatusControl = ({ task, onTaskUpdate, active, classNames }) => {
 	const { t } = Hooks.useTranslation(translationKey);
-	const status = task.status ?? "todo";
-	const { icon, classNames: iconClassNames } = active ?? Task.isAgentWorking(task) ? {
+	const [storedStatus] = useObject(task, "status");
+	const status = storedStatus ?? "todo";
+	const agentWorking = useAgentWorking(task);
+	const { icon, classNames: iconClassNames } = active ?? agentWorking ? {
 		icon: "ph--spinner--regular",
 		classNames: "text-info-text animate-spin"
 	} : {
@@ -517,8 +522,9 @@ TaskCheckbox.displayName = "TaskList.Checkbox";
 */
 var TaskEstimateControl = ({ task, classNames }) => {
 	const { onTaskUpdate } = useTaskListContext("TaskList.EstimateControl");
+	const [estimate] = useObject(task, "estimate");
 	return /* @__PURE__ */ jsx(TaskEstimatePicker, {
-		estimate: task.estimate,
+		estimate,
 		onChange: onTaskUpdate && ((estimate) => onTaskUpdate(task, { estimate: estimate ?? null })),
 		testId: "taskList.item.estimate",
 		classNames
@@ -564,8 +570,9 @@ TaskEstimateControl.displayName = "TaskList.EstimateControl";
 */
 var TaskPriorityIcon = ({ task, classNames }) => {
 	const { onTaskUpdate } = useTaskListContext("TaskList.PriorityIcon");
+	const [priority] = useObject(task, "priority");
 	return /* @__PURE__ */ jsx(TaskPriorityPicker, {
-		priority: task.priority ?? void 0,
+		priority: priority ?? void 0,
 		onChange: onTaskUpdate && ((priority) => onTaskUpdate(task, { priority: priority ?? null })),
 		testId: "taskList.item.priority",
 		classNames
@@ -1668,12 +1675,10 @@ var TaskListItem = ({ node, indicator, ordinal, checked, translationKey: itemTra
 		}),
 		/* @__PURE__ */ jsx(Layout.Flex, {
 			align: "center",
-			classNames: "col-[title] row-start-2 empty:hidden",
+			gap: "xs",
+			classNames: "col-[title] row-start-2 px-(--dx-gap-size) empty:hidden",
 			"data-testid": "taskList.item.chips",
-			children: /* @__PURE__ */ jsx(TaskListItemTags, {
-				task,
-				tags: Obj.getMeta(task).tags
-			})
+			children: /* @__PURE__ */ jsx(TaskListItemTags, { task })
 		}),
 		description && /* @__PURE__ */ jsx(TaskDescription, {
 			content: description,
@@ -1730,12 +1735,13 @@ TaskListItemActions.displayName = "TaskList.ItemActions";
 */
 var TaskListItemArtifacts = ({ task, filter }) => {
 	const db = Obj.getDatabase(task);
-	const ids = useMemo(() => (task.artifacts ?? []).flatMap((ref) => {
+	const [refs] = useObject(task, "artifacts");
+	const ids = useMemo(() => (refs ?? []).flatMap((ref) => {
 		const id = Task.refEntityId(ref);
 		return id ? [id] : [];
-	}), [task.artifacts]);
+	}), [refs]);
 	const queried = useQuery(ids.length > 0 ? db : void 0, Filter.id(...ids));
-	const resolved = db ? queried : (task.artifacts ?? []).flatMap((ref) => ref.target ? [ref.target] : []);
+	const resolved = db ? queried : (refs ?? []).flatMap((ref) => ref.target ? [ref.target] : []);
 	const artifacts = filter ? resolved.filter(filter) : resolved;
 	return /* @__PURE__ */ jsx(Fragment, { children: artifacts.map((artifact) => /* @__PURE__ */ jsx(ArtifactTag, { artifact }, artifact.id)) });
 };
@@ -1744,10 +1750,7 @@ TaskListItemArtifacts.displayName = "TaskList.ItemArtifacts";
 * Everything a task carries as a chip: its tags, what it produced, and who has it.
 */
 var TaskTags = ({ task }) => {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TaskListItemTags, {
-		task,
-		tags: Obj.getMeta(task).tags
-	}), /* @__PURE__ */ jsx(TaskListItemArtifacts, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TaskListItemTags, { task }), /* @__PURE__ */ jsx(TaskListItemArtifacts, {
 		task,
 		filter: (artifact) => PullRequest.instanceOf(artifact)
 	})] });
@@ -1757,15 +1760,21 @@ TaskTags.displayName = "TaskList.Tags";
 * The task's tags, as chips in the same cell as its artifacts and assignee. Queried by id for the
 * reason artifacts are: a tag's target is not in memory on a cold load.
 */
-var TaskListItemTags = ({ task, tags }) => {
+var TaskListItemTags = ({ task }) => {
 	const db = Obj.getDatabase(task);
+	const tags = useAtomValue(Obj.tagsAtom(task));
 	const ids = useMemo(() => tags.flatMap((ref) => {
 		const id = Task.refEntityId(ref);
 		return id ? [id] : [];
 	}), [tags]);
 	const queried = useQuery(ids.length > 0 ? db : void 0, Filter.id(...ids));
-	const resolved = db ? queried : tags.flatMap((ref) => ref.target ? [ref.target] : []);
-	const labelled = useMemo(() => resolved.filter((object) => Obj.instanceOf(Tag.Tag, object)).sort(Tag.sortTags), [resolved]);
+	const resolved = useMemo(() => db ? queried : tags.flatMap((ref) => ref.target ? [ref.target] : []), [
+		db,
+		queried,
+		tags
+	]);
+	const labelledAtom = useMemo(() => Atom.make((get) => resolved.filter((object) => Obj.instanceOf(Tag.Tag, object)).map((tag) => get(Obj.atom(tag))).sort(Tag.sortTags)), [resolved]);
+	const labelled = useAtomValue(labelledAtom);
 	return /* @__PURE__ */ jsx(Fragment, { children: labelled.map((tag) => /* @__PURE__ */ jsx(Tag$1.Tag, {
 		hue: toHue(tag.hue),
 		"data-testid": "taskList.item.tag",
@@ -1782,20 +1791,14 @@ TaskListItemTags.displayName = "TaskList.ItemTags";
 * markdown — so a row reads the same as the text that references it.
 */
 var ArtifactTag = ({ artifact }) => {
-	const label = Obj.getLabel(artifact) ?? Obj.getTypename(artifact) ?? "";
+	const label = useLabel(artifact, { fallback: "typename" }) ?? "";
 	const anchor = usePreviewAnchor({
 		eid: Obj.getURI(artifact).toString(),
 		label
 	});
-	if (PullRequest.instanceOf(artifact)) return /* @__PURE__ */ jsx(Button.Root, {
-		...anchor,
-		hue: "neutral",
-		size: "sm",
-		classNames: "bg-input-surface text-fg font-normal ring-inset ring ring-neutral-border hover:bg-hover-surface hover:ring-info-border",
-		icon: "ph--git-pull-request--regular",
-		iconClassNames: pullRequestStateStyle[artifact.state],
-		label: `#${artifact.number}`,
-		tabIndex: -1
+	if (Obj.instanceOf(PullRequest.PullRequest, artifact)) return /* @__PURE__ */ jsx(PullRequestTag, {
+		pullRequest: artifact,
+		anchor
 	});
 	return /* @__PURE__ */ jsx(Tag$1.Tag, {
 		...anchor,
@@ -1805,6 +1808,21 @@ var ArtifactTag = ({ artifact }) => {
 	});
 };
 ArtifactTag.displayName = "TaskList.ArtifactTag";
+var PullRequestTag = ({ pullRequest, anchor }) => {
+	const [state] = useObject(pullRequest, "state");
+	const [number] = useObject(pullRequest, "number");
+	return /* @__PURE__ */ jsx(Button.Root, {
+		...anchor,
+		hue: "neutral",
+		size: "sm",
+		classNames: "bg-input-surface text-fg font-normal ring-inset ring ring-neutral-border hover:bg-hover-surface hover:ring-info-border",
+		icon: "ph--git-pull-request--regular",
+		iconClassNames: pullRequestStateStyle[state],
+		label: `#${number}`,
+		tabIndex: -1
+	});
+};
+PullRequestTag.displayName = "TaskList.PullRequestTag";
 /** GitHub's own state colours, so the icon reads as open, merged or closed at a glance. */
 var pullRequestStateStyle = {
 	open: "text-green-500",
@@ -1870,10 +1888,14 @@ var ESTIMATE_ICON = "ph--ruler--regular";
 */
 var TaskProperties = ({ task, members = [], onTaskUpdate, classNames }) => {
 	const { t } = Hooks.useTranslation(translationKey);
-	const status = task.status ?? "todo";
-	const priority = task.priority ?? void 0;
-	const estimate = task.estimate ?? void 0;
-	const assignee = task.assignee ?? void 0;
+	const [storedStatus] = useObject(task, "status");
+	const [storedPriority] = useObject(task, "priority");
+	const [storedEstimate] = useObject(task, "estimate");
+	const [storedAssignee] = useObject(task, "assignee");
+	const status = storedStatus ?? "todo";
+	const priority = storedPriority ?? void 0;
+	const estimate = storedEstimate ?? void 0;
+	const assignee = storedAssignee ?? void 0;
 	const db = Obj.getDatabase(task);
 	const people = useQuery(onTaskUpdate ? db : void 0, Filter.type(Person.Person));
 	const { label: assigneeLabel, icon: assigneeIcon } = useAssigneeDisplay(assignee);