AGENTS

web/src/App.tsx

@@ -10,7 +10,10 @@ import { ServiceCard } from "./components/ServiceCard";
 import { DocsView, DocView, localDocs } from "./components/Docs";
 import { syncDocs } from "./docsStore";
 
-const client = createClient(HomelabService, createConnectTransport({ baseUrl: "" }));
+const client = createClient(
+  HomelabService,
+  createConnectTransport({ baseUrl: "" }),
+);
 
 const CATEGORIES = [
   { id: "links", label: "Links", icon: LinkIcon },
@@ -23,15 +26,23 @@ const CATEGORIES = [
 type Category = (typeof CATEGORIES)[number]["id"];
 
 function LinkList({ links }: { links: Link[] }) {
-  if (links.length === 0) return <div class="alert mt-4">No links in config</div>;
+  if (links.length === 0)
+    return <div class="alert mt-4">No links in config</div>;
   return (
     <div class="flex flex-col gap-2 mt-4">
       {links.map((l) => (
-        <a href={l.url} target="_blank" rel="noreferrer" class="card bg-base-200 shadow">
+        <a
+          href={l.url}
+          target="_blank"
+          rel="noreferrer"
+          class="card bg-base-200 shadow"
+        >
           <div class="card-body p-4 py-3 flex-row items-center gap-2">
             <LinkIcon size={14} class="text-primary" />
             <span class="flex-1 truncate">{l.name}</span>
-            <span class="text-xs text-base-content/40 truncate max-w-40">{l.url}</span>
+            <span class="text-xs text-base-content/40 truncate max-w-40">
+              {l.url}
+            </span>
           </div>
         </a>
       ))}
@@ -40,7 +51,12 @@ function LinkList({ links }: { links: Link[] }) {
 }
 
 export function App() {
-  const [content, setContent] = useState<{ links: Link[]; monitors: Item[]; exec: Item[]; services: Service[] }>({
+  const [content, setContent] = useState<{
+    links: Link[];
+    monitors: Item[];
+    exec: Item[];
+    services: Service[];
+  }>({
     links: [],
     monitors: [],
     exec: [],
@@ -54,7 +70,14 @@ export function App() {
     () =>
       client
         .listContent({})
-        .then((r) => setContent({ links: r.links, monitors: r.monitors, exec: r.exec, services: r.services }))
+        .then((r) =>
+          setContent({
+            links: r.links,
+            monitors: r.monitors,
+            exec: r.exec,
+            services: r.services,
+          }),
+        )
         .catch(() => {}), // offline: keep last state
     [],
   );
@@ -66,7 +89,10 @@ export function App() {
 
   // Docs sync + offline dirty flush, every 5s.
   useEffect(() => {
-    const tick = () => syncDocs().then(() => setDocs(localDocs())).catch(() => {});
+    const tick = () =>
+      syncDocs()
+        .then(() => setDocs(localDocs()))
+        .catch(() => {});
     tick();
     const id = setInterval(tick, 5000);
     return () => clearInterval(id);
@@ -102,13 +128,20 @@ export function App() {
         {category === "links" && <LinkList links={content.links} />}
         {category === "monitor" && (
           <div class="flex flex-col gap-3 mt-4">
-            {content.monitors.map((it) => <MonitorCard s={it} />)}
+            {content.monitors.map((it) => (
+              <MonitorCard s={it} />
+            ))}
           </div>
         )}
         {category === "exec" && content.exec.map((it) => <ScriptCard s={it} />)}
         {category === "services" && (
-          <div class="grid gap-3 mt-4 md:grid-cols-2 lg:grid-cols-3">
-            {content.services.map((s) => <ServiceCard s={s} refresh={refresh} />)}
+          <div>
+            <input type="text" placeholder="Type here" className="input" />
+            <div class="grid gap-3 mt-4 md:grid-cols-2 lg:grid-cols-3">
+              {content.services.map((s) => (
+                <ServiceCard s={s} refresh={refresh} />
+              ))}
+            </div>
           </div>
         )}
         {category === "docs" &&
@@ -122,7 +155,17 @@ export function App() {
       {/* Mobile footer nav: daisyUI dock (v5 btm-nav removed), equal quarters */}
       <div class="dock md:hidden">
         {CATEGORIES.map((c) => (
-          <button class={c.id === category ? "dock-active text-primary" : "text-base-content/60"} onClick={() => { setCategory(c.id); setOpenDoc(null); }}>
+          <button
+            class={
+              c.id === category
+                ? "dock-active text-primary"
+                : "text-base-content/60"
+            }
+            onClick={() => {
+              setCategory(c.id);
+              setOpenDoc(null);
+            }}
+          >
             <c.icon size={26} />
             <span class="dock-label text-xs">{c.label}</span>
           </button>