Update

components/Task.tsx

@@ -5,13 +5,39 @@ type Props = {
     task: TaskDetail;
 };
 
-export default class Task extends Component<Props> {
+type State = {
+    task_changed: (d: Event) => void;
+};
+
+export default class Task extends Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            task_changed: (e) => this.task_changed(e),
+        };
+    }
+    task_changed(d: Event) {
+        const e = d as unknown as CustomEvent<number>;
+        if (e.detail == this.props.task.base.id) {
+            e.stopImmediatePropagation();
+            this.forceUpdate();
+        }
+    }
     render() {
         const task = this.props.task;
+        console.log(task);
         return (
             <div data-id={task.base.id}>
                 Task Id: {task.base.id}
             </div>
         );
     }
+    componentDidMount(): void {
+        self.addEventListener("task_started", this.state.task_changed);
+        self.addEventListener("task_finished", this.state.task_changed);
+    }
+    componentWillUnmount(): void {
+        self.removeEventListener("task_started", this.state.task_changed);
+        self.removeEventListener("task_finished", this.state.task_changed);
+    }
 }

islands/TaskManager.tsx

@@ -90,6 +90,51 @@ export default class TaskManager extends Component<TaskManagerProps> {
                         task_list.value.push(t.detail.id);
                     }
                     this.forceUpdate();
+                } else if (t.type == "task_started") {
+                    const task = tasks.value.get(t.detail.id);
+                    if (task === undefined) {
+                        tasks.value.set(t.detail.id, {
+                            base: t.detail,
+                            status: TaskStatus.Running,
+                        });
+                        const tl = task_list.value;
+                        if (!tl.includes(t.detail.id)) {
+                            tl.push(t.detail.id);
+                            if (tl.length) {
+                                tl.splice(0, 0, tl.splice(tl.length - 1, 1)[0]);
+                            }
+                        }
+                        this.forceUpdate();
+                    } else {
+                        task.status = TaskStatus.Running;
+                        self.dispatchEvent(
+                            new CustomEvent("task_started", {
+                                detail: t.detail.id,
+                            }),
+                        );
+                        const tl = task_list.value;
+                        const ind = tl.indexOf(task.base.id);
+                        if (ind > 0) {
+                            tl.splice(0, 0, tl.splice(ind, 1)[0]);
+                            this.sortable?.sort(tl.map((t) => t.toString()));
+                        }
+                    }
+                } else if (t.type == "task_finished") {
+                    const task = tasks.value.get(t.detail.id);
+                    if (task !== undefined) {
+                        task.status = TaskStatus.Finished;
+                        self.dispatchEvent(
+                            new CustomEvent("task_finished", {
+                                detail: t.detail.id,
+                            }),
+                        );
+                        const tl = task_list.value;
+                        const ind = tl.indexOf(task.base.id);
+                        if (ind < tl.length - 1 && ind > -1) {
+                            tl.splice(tl.length - 1, 0, tl.splice(ind, 1)[0]);
+                            this.sortable?.sort(tl.map((t) => t.toString()));
+                        }
+                    }
                 }
             };
             self.addEventListener("beforeunload", () => {