Global Error Message Prompt (#181)

UI/_main.tsx

@@ -3,25 +3,9 @@ import { h, render } from "https://esm.sh/preact@10.17.1";
 import { setup } from "https://esm.sh/twind@0.16.16";
 import { NewIndexedDB } from "./dexie-db.ts";
 import { Start } from "./app.tsx";
+import { TWConfig } from "./tw.config.ts";
 
-setup({
+setup(TWConfig);
-    theme: {
-        fontFamily: {
-            roboto: ["Roboto", "sans-serif"],
-        },
-        screens: {
-            "mobile": { "max": "1023px" },
-            "desktop": { "min": "1024px" },
-        },
-    },
-    // https://twind.dev/handbook/extended-functionality.html
-    // https://sass-lang.com/documentation/style-rules/parent-selector/
-    variants: {
-        "children": "& > *",
-        "firstChild": "& > *:first-child",
-        "lastChild": "& > *:last-child",
-    },
-});
 
 const database = NewIndexedDB();
 if (database instanceof Error) {

UI/components/toast.test.tsx

@@ -0,0 +1,27 @@
+/** @jsx h */
+import { createRef, h, render } from "https://esm.sh/preact@10.17.1";
+import { Toast, ToastChannel } from "./toast.tsx";
+import { setup, tw } from "https://esm.sh/twind@0.16.16";
+import { TWConfig } from "../tw.config.ts";
+import { Channel } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts";
+import { CenterClass, inputBorderClass } from "./tw.ts";
+
+setup(TWConfig);
+
+const toastChannel: ToastChannel = new Channel();
+const inputRef = createRef();
+render(
+    <div class={tw`h-screen w-screen ${CenterClass}`}>
+        <input class={tw`${inputBorderClass} px-4 py-2 mr-4`} ref={inputRef} type="text" />
+        <button
+            onClick={() => {
+                toastChannel.put(inputRef.current.value);
+            }}
+            class={tw`bg-black text-white px-4 py-2 rounded`}
+        >
+            toast
+        </button>
+        <Toast inputChan={toastChannel} />
+    </div>,
+    document.body,
+);

UI/components/toast.tsx

@@ -0,0 +1,41 @@
+/** @jsx h */
+import { Component } from "https://esm.sh/preact@10.17.1";
+import { h } from "https://esm.sh/preact@10.17.1";
+import { tw } from "https://esm.sh/twind@0.16.16";
+import { PrimaryBackgroundColor, PrimaryTextColor } from "../style/colors.ts";
+import { Channel } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts";
+
+export type ToastChannel = Channel<string>;
+
+type Props = {
+    inputChan: ToastChannel;
+};
+
+type State = {
+    content: string;
+};
+
+export class Toast extends Component<Props, State> {
+    state = { content: "" };
+
+    async componentDidMount() {
+        for await (const message of this.props.inputChan) {
+            this.setState({
+                content: message,
+            });
+        }
+    }
+
+    render() {
+        return this.state.content
+            ? (
+                <div
+                    key={`${this.state.content}${Date.now()}`}
+                    class={tw`animate-toast absolute left-full top-4 px-4 py-2 rounded shadow-2xl w-max max-w-xs bg-[${PrimaryBackgroundColor}] text-[${PrimaryTextColor}] text-xs break-all`}
+                >
+                    {this.state.content}
+                </div>
+            )
+            : undefined;
+    }
+}

UI/tw.config.ts

@@ -0,0 +1,33 @@
+import { Configuration } from "https://esm.sh/twind@0.16.16";
+
+export const TWConfig: Configuration = {
+    theme: {
+        fontFamily: {
+            roboto: ["Roboto", "sans-serif"],
+        },
+        screens: {
+            "mobile": { "max": "1023px" },
+            "desktop": { "min": "1024px" },
+        },
+        extend: {
+            keyframes: {
+                toast: {
+                    "0%": { transform: "translateX(0)" },
+                    "16.66%": { transform: "translateX(calc(-100% - 1rem))" },
+                    "83.34%": { transform: "translateX(calc(-100% - 1rem))" },
+                    "100%": { transform: "translateX(0)" },
+                },
+            },
+            animation: {
+                "toast": "toast 3s cubic-bezier(0.68, -0.55, 0.25, 1.35)",
+            },
+        },
+    },
+    // https://twind.dev/handbook/extended-functionality.html
+    // https://sass-lang.com/documentation/style-rules/parent-selector/
+    variants: {
+        "children": "& > *",
+        "firstChild": "& > *:first-child",
+        "lastChild": "& > *:last-child",
+    },
+};