Display live usenet connection count in UI (#34)

Author: nzbdav-dev

frontend/app/routes/_index/components/left-navigation/left-navigation.tsx

@@ -2,6 +2,7 @@ import { Form, Link, useLocation, useNavigation } from "react-router";
 import styles from "./left-navigation.module.css";
 import { className } from "~/utils/styling";
 import type React from "react";
+import { LiveUsenetConnections } from "../live-usenet-connections/live-usenet-connections";
 
 export function LeftNavigation() {
     return (
@@ -18,6 +19,7 @@ export function LeftNavigation() {
                 <div className={styles["settings-icon"]} />
                 <div className={styles.title}>Settings</div>
             </Item>
+            <LiveUsenetConnections />
 
             <div className={styles.footer}>
                 <div className={styles["footer-item"]}>

frontend/app/routes/_index/components/live-usenet-connections/live-usenet-connections.module.css

@@ -0,0 +1,37 @@
+.container {
+    width: 100%;
+    margin-top: 25px;
+}
+
+.title {
+    font-size: 14px;
+    margin-bottom: 5px;
+}
+
+.max {
+    background-color: #93a1a1;
+    position: relative;
+    border-radius: 10px;
+    height: 10px;
+    overflow: hidden;
+}
+
+.live {
+    background-color: #eee8d5;
+    position: absolute;
+    height: 100%;
+    width: 0%;
+}
+
+.active {
+    background-color: #268bd2;
+    position: absolute;
+    height: 100%;
+    width: 0%;
+}
+
+.caption {
+    text-align: right;
+    margin-right: 5px;
+    font-size: 12px;
+}

frontend/app/routes/_index/components/live-usenet-connections/live-usenet-connections.module.css.d.ts

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "container": string;
+  readonly "title": string;
+  readonly "max": string;
+  readonly "live": string;
+  readonly "active": string;
+  readonly "caption": string;
+};
+export = styles;
+

frontend/app/routes/_index/components/live-usenet-connections/live-usenet-connections.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import styles from "./live-usenet-connections.module.css";
+
+const usenetConnectionsTopic = "cxs";
+
+export function LiveUsenetConnections() {
+    const [connections, setConnections] = useState<string | null>(null);
+    const parts = (connections || "0|1|0").split("|");
+    const [live, max, idle] = parts.map(x => Number(x));
+    const active = live - idle;
+    const activePercent = 100 * (active / max);
+    const livePercent = 100 * (live / max);
+
+    useEffect(() => {
+        const ws = new WebSocket(window.location.origin.replace(/^http/, 'ws'));
+        ws.onmessage = (event) => setConnections(event.data);
+        ws.onopen = () => ws.send(usenetConnectionsTopic);
+        return () => ws.close();
+    }, [setConnections]);
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.title}>
+                Usenet Connections
+            </div>
+            <div className={styles.max}>
+                <div className={styles.live} style={{ width: `${livePercent}%` }} />
+                <div className={styles.active} style={{ width: `${activePercent}%` }} />
+            </div>
+            <div className={styles.caption}>
+                {connections && `${live} connected / ${max} max`}
+                {!connections && `Loading...`}
+            </div>
+            {connections &&
+                <div className={styles.caption}>
+                    ( {active} active )
+                </div>
+            }
+        </div>
+    );
+}