UI for systemd srv

web/src/App.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 import { createClient } from "@connectrpc/connect";
 import { createConnectTransport } from "@connectrpc/connect-web";
-import { BookOpen, Gauge, Link as LinkIcon, Play } from "lucide-preact";
-import type { Item, Link } from "./gen/homelab/v1/homelab_pb";
+import { BookOpen, Gauge, Link as LinkIcon, Play, Server } from "lucide-preact";
+import type { Item, Link, Service } from "./gen/homelab/v1/homelab_pb";
 import { HomelabService } from "./gen/homelab/v1/homelab_pb";
 import { MonitorCard } from "./components/MonitorCard";
 import { ScriptCard } from "./components/ScriptCard";
+import { ServiceCard } from "./components/ServiceCard";
 import { DocsView, DocView, localDocs } from "./components/Docs";
 import { syncDocs } from "./docsStore";
 
@@ -14,6 +15,7 @@ const client = createClient(HomelabService, createConnectTransport({ baseUrl: ""
 const CATEGORIES = [
   { id: "links", label: "Links", icon: LinkIcon },
   { id: "monitor", label: "Monitor", icon: Gauge },
+  { id: "services", label: "Services", icon: Server },
   { id: "exec", label: "Exec", icon: Play },
   { id: "docs", label: "Docs", icon: BookOpen },
 ] as const;
@@ -38,25 +40,29 @@ function LinkList({ links }: { links: Link[] }) {
 }
 
 export function App() {
-  const [content, setContent] = useState<{ links: Link[]; monitors: Item[]; exec: Item[] }>({
+  const [content, setContent] = useState<{ links: Link[]; monitors: Item[]; exec: Item[]; services: Service[] }>({
     links: [],
     monitors: [],
     exec: [],
+    services: [],
   });
   const [category, setCategory] = useState<Category>("monitor");
   const [docs, setDocs] = useState(localDocs());
   const [openDoc, setOpenDoc] = useState<string | null>(null);
 
-  useEffect(() => {
-    const poll = () =>
+  const refresh = useCallback(
+    () =>
       client
         .listContent({})
-        .then((r) => setContent({ links: r.links, monitors: r.monitors, exec: r.exec }))
-        .catch(() => {}); // offline: keep last state
-    poll();
-    const id = setInterval(poll, 3000);
+        .then((r) => setContent({ links: r.links, monitors: r.monitors, exec: r.exec, services: r.services }))
+        .catch(() => {}), // offline: keep last state
+    [],
+  );
+  useEffect(() => {
+    refresh();
+    const id = setInterval(refresh, 3000);
     return () => clearInterval(id);
-  }, []);
+  }, [refresh]);
 
   // Docs sync + offline dirty flush, every 5s.
   useEffect(() => {
@@ -96,6 +102,11 @@ export function App() {
           </div>
         )}
         {category === "exec" && content.exec.map((it) => <ScriptCard s={it} />)}
+        {category === "services" && (
+          <div class="flex flex-col gap-3 mt-4">
+            {content.services.map((s) => <ServiceCard s={s} refresh={refresh} />)}
+          </div>
+        )}
         {category === "docs" &&
           (open ? (
             <DocView doc={open} onBack={() => setOpenDoc(null)} />