Update

components/NewTask.tsx

@@ -0,0 +1,30 @@
+import { Component, ContextType } from "preact";
+import { GlobalCtx } from "./GlobalContext.tsx";
+import Fab from "preact-material-components/Fab";
+import Icon from "preact-material-components/Icon";
+import { set_state } from "../server/state.ts";
+
+export type NewTaskProps = {
+    show: boolean;
+};
+
+export default class NewTask extends Component<NewTaskProps> {
+    static contextType = GlobalCtx;
+    declare context: ContextType<typeof GlobalCtx>;
+    render() {
+        if (!this.props.show) return null;
+        return (
+            <div class="new_task">
+                <Fab class="close" mini={true}>
+                    <Icon
+                        onClick={() => {
+                            set_state((p) => p.slice(0, p.length - 4));
+                        }}
+                    >
+                        close
+                    </Icon>
+                </Fab>
+            </div>
+        );
+    }
+}

islands/Container.tsx

@@ -1,6 +1,6 @@
 import { Head } from "$fresh/runtime.ts";
 import { Component, ContextType } from "preact";
-import { StateUpdater, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import Icon from "preact-material-components/Icon";
 import List from "preact-material-components/List";
 import TopAppBar from "preact-material-components/TopAppBar";
@@ -9,6 +9,8 @@ import { GlobalCtx } from "../components/GlobalContext.tsx";
 import Settings from "./Settings.tsx";
 import t, { i18n_map, I18NMap } from "../server/i18n.ts";
 import TaskManager from "./TaskManager.tsx";
+import { initState, set_state } from "../server/state.ts";
+import NewTask from "../components/NewTask.tsx";
 
 export type ContainerProps = {
     i18n: I18NMap;
@@ -21,26 +23,8 @@ export default class Container extends Component<ContainerProps> {
         i18n_map.value = this.props.i18n;
         const [display, set_display] = useState(false);
         const [state, set_state1] = useState("#/");
-        const set_state: StateUpdater<string> = (updater) => {
-            const v = typeof updater === "function" ? updater(state) : updater;
-            set_state1(v);
-            history.pushState(v, "", v);
-        };
         useEffect(() => {
-            const hash = document.location.hash;
-            if (!hash || hash == "#") {
-                set_state("#/");
-            } else {
-                set_state1(hash);
-            }
-            self.addEventListener("popstate", (e) => {
-                const s = e.state;
-                if (typeof s === "string") {
-                    set_state1(s);
-                } else {
-                    set_state1("#/");
-                }
-            });
+            initState(set_state1);
         }, []);
         return (
             <div>
@@ -96,7 +80,11 @@ export default class Container extends Component<ContainerProps> {
                 </List>
                 <div class="main">
                     <Settings show={state === "#/settings"} />
-                    <TaskManager show={state === "#/task_manager"} />
+                    <TaskManager
+                        base="#/task_manager"
+                        show={state === "#/task_manager"}
+                    />
+                    <NewTask show={state === "#/task_manager/new"} />
                 </div>
             </div>
         );

islands/TaskManager.tsx

@@ -7,13 +7,25 @@ import { Sortable } from "sortable";
 import { TaskClientSocketData, TaskServerSocketData } from "../server/task.ts";
 import { get_ws_host } from "../server/utils.ts";
 import Task from "../components/Task.tsx";
+import Fab from "preact-material-components/Fab";
+import Icon from "preact-material-components/Icon";
+import { set_state } from "../server/state.ts";
 
 export type TaskManagerProps = {
+    base: string;
     show: boolean;
 };
 
 const tasks = signal(new Map<number, TaskDetail>());
 const task_list = signal(new Array<number>());
+export const task_ws = signal<WebSocket | undefined>(undefined);
+export function sendTaskMessage(mes: TaskClientSocketData) {
+    const ws = task_ws.value;
+    if (ws && ws.readyState === ws.OPEN) {
+        ws.send(JSON.stringify(mes));
+        return true;
+    } else return false;
+}
 
 type SortableEvent = CustomEvent & {
     oldIndex: number | undefined;
@@ -46,6 +58,7 @@ export default class TaskManager extends Component<TaskManagerProps> {
         useEffect(() => {
             const ws = new WebSocket(`${get_ws_host()}/api/task`);
             console.log(ws);
+            task_ws.value = ws;
             function sendMessage(mes: TaskClientSocketData) {
                 ws.send(JSON.stringify(mes));
             }
@@ -153,6 +166,20 @@ export default class TaskManager extends Component<TaskManagerProps> {
         if (!this.props.show) return null;
         return (
             <div class="task_manager">
+                <div id="task_head">
+                    <div></div>
+                    <div class="add">
+                        <Fab mini={true}>
+                            <Icon
+                                onClick={() => {
+                                    set_state(`${this.props.base}/new`);
+                                }}
+                            >
+                                add
+                            </Icon>
+                        </Fab>
+                    </div>
+                </div>
                 <div
                     id="task-list"
                     // @ts-ignore checked

server/state.ts

@@ -0,0 +1,30 @@
+import { signal } from "@preact/signals";
+import { StateUpdater } from "preact/hooks";
+
+export const state = signal("#/");
+let listener: StateUpdater<string> | undefined = undefined;
+
+export function initState(l: StateUpdater<string>) {
+    const hash = document.location.hash;
+    listener = l;
+    if (!hash || hash == "#") {
+        set_state("#/");
+    } else {
+        set_state(hash);
+    }
+    self.addEventListener("popstate", (e) => {
+        const s = e.state;
+        if (typeof s === "string") {
+            l(s);
+        } else {
+            l("#/");
+        }
+    });
+}
+
+export const set_state: StateUpdater<string> = (updater) => {
+    const v = typeof updater === "function" ? updater(state.value) : updater;
+    state.value = v;
+    history.pushState(v, "", v);
+    if (listener) listener(v);
+};

static/common.css

@@ -104,3 +104,15 @@
         margin: 0;
     }
 }
+
+.task_manager #task_head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.new_task .close {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}