1 files changed, 40 insertions, 0 deletions

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>
+  );
+}