From 8751ba26ebf7b7761b9e237f2bf3453623dd1018 Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Mon, 6 Oct 2025 10:13:39 +0700
Subject: added frontend WS connection for demonstration purposes

---
 gui/src/components/modals/Modal.tsx | 72 +++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 gui/src/components/modals/Modal.tsx

(limited to 'gui/src/components/modals/Modal.tsx')

diff --git a/gui/src/components/modals/Modal.tsx b/gui/src/components/modals/Modal.tsx
new file mode 100644
index 0000000..e7bae78
--- /dev/null
+++ b/gui/src/components/modals/Modal.tsx
@@ -0,0 +1,72 @@
+import useLocalState from "@/state/state";
+import { useEffect, useRef, useState } from "react";
+
+function Modal({ children }: any) {
+  const { setModal } = useLocalState((s) => ({ setModal: s.setModal }));
+  function onKey(event: any) {
+    if (event.key === "Escape") setModal(null);
+  }
+  useEffect(() => {
+    document.addEventListener("keyup", onKey);
+    return () => {
+      document.removeEventListener("keyup", onKey);
+    };
+  }, [children]);
+
+  function clickAway(e: React.MouseEvent) {
+    console.log("clicked away");
+    e.stopPropagation();
+    if (!modalRef.current || !modalRef.current.contains(e.target))
+      setModal(null);
+  }
+  const modalRef = useRef(null);
+  return (
+    <div id="modal-background" onClick={clickAway}>
+      <div id="modal" ref={modalRef}>
+        {children}
+      </div>
+    </div>
+  );
+}
+export default Modal;
+
+export function Welcome() {
+  return (
+    <Modal>
+      <div id="welcome-msg">
+        <h1>Welcome to Nostril!</h1>
+        <p>
+          Trill is the world's only truly free and sovereign social media
+          platform, powered by Urbit.
+        </p>
+        <p>
+          Click on the crow icon on the top left to see all available feeds.
+        </p>
+        <p>The Global feed should be populated by default.</p>
+        <p>Follow people soon so your Global feed doesn't go stale.</p>
+        <p>
+          Trill is still on beta. The UI is Mobile only, we recommend you use
+          your phone or the browser dev tools. Desktop UI is on the works.
+        </p>
+        <p>
+          If you have any feedback please reach out to us on Groups at
+          ~hoster-dozzod-sortug/trill or here at ~polwex
+        </p>
+      </div>
+    </Modal>
+  );
+}
+
+export function Tooltip({ children, text, className }: any) {
+  const [show, toggle] = useState(false);
+  return (
+    <div
+      className={"tooltip-wrapper " + (className || "")}
+      onMouseOver={() => toggle(true)}
+      onMouseOut={() => toggle(false)}
+    >
+      {children}
+      {show && <div className="tooltip">{text}</div>}
+    </div>
+  );
+}
-- 
cgit v1.2.3

