commit 2

web/src/App.tsx

@@ -1,85 +1,67 @@
 import { useEffect, useState } from "preact/hooks";
 import { createClient } from "@connectrpc/connect";
 import { createConnectTransport } from "@connectrpc/connect-web";
-import { Dices, Hash, Send } from "lucide-preact";
+import { Gauge, FlaskConical } from "lucide-preact";
+import type { Section } from "./gen/homelab/v1/homelab_pb";
 import { HomelabService } from "./gen/homelab/v1/homelab_pb";
+import { ScriptCard } from "./components/ScriptCard";
+import { MonitorCard } from "./components/MonitorCard";
 
 const client = createClient(HomelabService, createConnectTransport({ baseUrl: "" }));
 
+// Иконки секций: строка из конфига → компонент. Новый icon в yaml = добавить сюда.
+const ICONS: Record<string, preact.JSX.ElementType> = { gauge: Gauge, "flask-conical": FlaskConical };
+
+function DynIcon({ name, size = 20 }: { name: string; size?: number }) {
+  const Cmp = ICONS[name] ?? Gauge;
+  return <Cmp size={size} />;
+}
+
 export function App() {
-  const [lucky, setLucky] = useState<number | null>(null);
-  const [count, setCount] = useState(0);
-  const [name, setName] = useState("");
-  const [greeting, setGreeting] = useState("");
-  const [error, setError] = useState("");
+  const [sections, setSections] = useState<Section[]>([]);
+  const [active, setActive] = useState(0);
 
   useEffect(() => {
-    client.getLuckyNumber({}).then((r) => setLucky(r.number));
+    const poll = () => client.listSections({}).then((r) => setSections(r.sections));
+    poll();
+    const id = setInterval(poll, 3000);
+    return () => clearInterval(id);
   }, []);
 
-  const run = async (fn: () => Promise<unknown>) => {
-    try {
-      await fn();
-      setError("");
-    } catch (e) {
-      setError(String(e));
-    }
-  };
+  const sec = sections[active];
 
   return (
-    <div class="mx-auto max-w-md px-4 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]">
-      <div class="navbar px-0">
-        <div class="navbar-start" />
-        <div class="navbar-center">
-          <span class="text-lg font-bold">Homelab</span>
-        </div>
-        <div class="navbar-end" />
-      </div>
+    <div class="flex min-h-screen">
+      {/* Sidebar */}
+      <nav class="bg-base-200 w-20 flex flex-col items-center gap-1 py-4 pt-[calc(env(safe-area-inset-top)+1rem)]">
+        {sections.map((s, i) => (
+          <button
+            class={`btn btn-square btn-ghost ${i === active ? "btn-primary" : ""}`}
+            title={s.name}
+            onClick={() => setActive(i)}
+          >
+            <DynIcon name={s.icon} />
+          </button>
+        ))}
+      </nav>
 
-      {error && <div role="alert" class="alert alert-error text-sm">{error}</div>}
-
-      <div class="stats w-full shadow bg-base-200 mt-4">
-        <div class="stat">
-          <div class="stat-figure text-primary"><Dices size={28} /></div>
-          <div class="stat-title">Lucky number</div>
-          <div class="stat-value text-primary">{lucky ?? "…"}</div>
-          <div class="stat-desc">set at server start</div>
-        </div>
-        <div class="stat">
-          <div class="stat-figure text-secondary"><Hash size={28} /></div>
-          <div class="stat-title">Counter</div>
-          <div class="stat-value text-secondary">{count}</div>
-          <div class="stat-actions">
-            <button class="btn btn-sm btn-secondary" onClick={() => run(async () => setCount((await client.incrementCounter({})).value))}>
-              +1
-            </button>
+      {/* Active section view */}
+      <div class="flex-1 max-w-md mx-auto px-4 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]">
+        <div class="navbar px-0">
+          <div class="navbar-start" />
+          <div class="navbar-center">
+            <span class="text-lg font-bold">{sec?.name ?? "Homelab"}</span>
           </div>
+          <div class="navbar-end" />
         </div>
-      </div>
 
-      <form
-        class="card bg-base-200 shadow mt-4"
-        onSubmit={(e) => {
-          e.preventDefault();
-          run(async () => setGreeting((await client.sayHello({ name })).greeting));
-        }}
-      >
-        <div class="card-body">
-          <h2 class="card-title text-base">Hello</h2>
-          <div class="flex gap-2">
-            <input
-              class="input input-bordered flex-1"
-              value={name}
-              onInput={(e) => setName((e.target as HTMLInputElement).value)}
-              placeholder="NAME"
-            />
-            <button type="submit" class="btn btn-primary">
-              <Send size={16} /> Send
-            </button>
+        {sec && (
+          <div class="flex flex-col gap-4 pb-6">
+            {sec.items.filter((it) => it.type === "monitor").map((it) => <MonitorCard s={it} />)}
+            {sec.items.filter((it) => it.type === "response").map((it) => <ScriptCard s={it} />)}
           </div>
-          {greeting && <p class="text-xl font-semibold">{greeting}</p>}
-        </div>
-      </form>
+        )}
+      </div>
     </div>
   );
 }