From d06784958d73159b5e4abafe5114804662114ed7 Mon Sep 17 00:00:00 2001
From: Ryan Schanzenbacher <ryan@rschanz.org>
Date: Thu, 9 Jul 2026 22:15:53 -0400
Subject: move ubersicht modules in tree

---
 .../lib/components/missives/missive.jsx            | 48 ++++++++++++++++++++++
 .../lib/components/missives/missives.jsx           | 40 ++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/components/missives/missive.jsx
 create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/components/missives/missives.jsx

(limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/components/missives')

diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/missives/missive.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/missives/missive.jsx
new file mode 100755
index 0000000..eec0ace
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/missives/missive.jsx
@@ -0,0 +1,48 @@
+import * as Uebersicht from "uebersicht";
+import { SuspenseIcon } from "../icons/icon.jsx";
+import * as Icons from "../icons/icons.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
+import * as Utils from "../../utils.js";
+
+const { React } = Uebersicht;
+
+/**
+ * Missive component to display a notification.
+ * @param {Object} props - The properties object.
+ * @param {string} props.id - The unique identifier for the missive.
+ * @param {string} props.side - The side where the missive should appear ('left' or 'right').
+ * @param {string} props.content - The content of the missive.
+ * @param {number} [props.timeout] - The timeout for the missive to auto-close.
+ * @returns {JSX.Element} The Missive component.
+ */
+export default function Missive({ id, side, content, timeout }) {
+  // Get the setMissives function from the context
+  const { setMissives } = useSimpleBarContext();
+
+  // Generate class names based on the side prop
+  const classes = Utils.classNames("missive", {
+    "missive--left": side === "left",
+    "missive--right": side === "right",
+  });
+
+  // Close the missive by removing it from the context and clearing the timeout.
+  const closeMissive = () => {
+    setMissives((current) => {
+      return current.filter((m) => m.id !== id);
+    });
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+  };
+
+  return (
+    <div key={id} className={classes}>
+      <div className="missive__text">{content}</div>
+      <button className="missive__close" onClick={closeMissive}>
+        <SuspenseIcon>
+          <Icons.Close className="missive__close-icon" />
+        </SuspenseIcon>
+      </button>
+    </div>
+  );
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/missives/missives.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/missives/missives.jsx
new file mode 100755
index 0000000..3563937
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/missives/missives.jsx
@@ -0,0 +1,40 @@
+import * as Uebersicht from "uebersicht";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
+import Missive from "./missive.jsx";
+import useServerSocket from "../../hooks/use-server-socket.js";
+
+export { missivesStyles as styles } from "../../styles/components/missives";
+
+const { React } = Uebersicht;
+
+/**
+ * Component to display a list of missives.
+ * It uses the simple-bar context to get settings and missives data.
+ * It also sets up a server socket to receive new missives.
+ *
+ * @returns {JSX.Element} The rendered component.
+ */
+export function Component() {
+  // Destructure settings, missives, and pushMissive function from the context
+  const { settings, missives, pushMissive } = useSimpleBarContext();
+  const { enableServer } = settings.global;
+
+  // Set up a server socket to listen for "missive" events and push new missives
+  useServerSocket("missive", enableServer, pushMissive);
+
+  return (
+    <div className="missives">
+      {missives.map(({ id, side, content, timeout }) => {
+        return (
+          <Missive
+            key={id}
+            id={id}
+            side={side}
+            content={content}
+            timeout={timeout}
+          />
+        );
+      })}
+    </div>
+  );
+}
-- 
cgit v1.3