Rework: 4 tabs by func

web/src/App.tsx

@@ -1,66 +1,123 @@
 import { useEffect, useState } from "preact/hooks";
 import { createClient } from "@connectrpc/connect";
 import { createConnectTransport } from "@connectrpc/connect-web";
-import { Gauge, FlaskConical } from "lucide-preact";
-import type { Section } from "./gen/homelab/v1/homelab_pb";
+import { BookOpen, Gauge, Link as LinkIcon, Menu, Play } from "lucide-preact";
+import type { Item, Link } from "./gen/homelab/v1/homelab_pb";
 import { HomelabService } from "./gen/homelab/v1/homelab_pb";
-import { ScriptCard } from "./components/ScriptCard";
 import { MonitorCard } from "./components/MonitorCard";
+import { ScriptCard } from "./components/ScriptCard";
+import { DocsView, DocView, localDocs } from "./components/Docs";
+import { syncDocs } from "./docsStore";
 
 const client = createClient(HomelabService, createConnectTransport({ baseUrl: "" }));
 
-// Иконки секций: строка из конфига → компонент. Новый icon в yaml = добавить сюда.
-const ICONS: Record<string, preact.JSX.ElementType> = { gauge: Gauge, "flask-conical": FlaskConical };
+const CATEGORIES = [
+  { id: "links", label: "Links", icon: LinkIcon },
+  { id: "monitor", label: "Monitor", icon: Gauge },
+  { id: "exec", label: "Exec", icon: Play },
+  { id: "docs", label: "Docs", icon: BookOpen },
+] as const;
 
-function DynIcon({ name, size = 20 }: { name: string; size?: number }) {
-  const Cmp = ICONS[name] ?? Gauge;
-  return <Cmp size={size} />;
+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>;
+  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">
+          <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>
+          </div>
+        </a>
+      ))}
+    </div>
+  );
 }
 
 export function App() {
-  const [sections, setSections] = useState<Section[]>([]);
-  const [active, setActive] = useState(0);
+  const [content, setContent] = useState<{ links: Link[]; monitors: Item[]; exec: Item[] }>({
+    links: [],
+    monitors: [],
+    exec: [],
+  });
+  const [category, setCategory] = useState<Category>("monitor");
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [docs, setDocs] = useState(localDocs());
+  const [openDoc, setOpenDoc] = useState<string | null>(null);
 
   useEffect(() => {
-    const poll = () => client.listSections({}).then((r) => setSections(r.sections));
+    const poll = () =>
+      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);
     return () => clearInterval(id);
   }, []);
 
-  const sec = sections[active];
+  // Docs sync + offline dirty flush, every 5s.
+  useEffect(() => {
+    const tick = () => syncDocs().then(() => setDocs(localDocs())).catch(() => {});
+    tick();
+    const id = setInterval(tick, 5000);
+    return () => clearInterval(id);
+  }, []);
+
+  const cat = CATEGORIES.find((c) => c.id === category)!;
+  const open = docs.find((d) => d.name === openDoc);
 
   return (
-    <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>
+    <div class="drawer min-h-screen">
+      <input id="nav-drawer" type="checkbox" class="drawer-toggle" checked={drawerOpen} onChange={() => setDrawerOpen((v) => !v)} />
 
-      {/* 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 class="drawer-content flex flex-col">
+        {/* Top bar */}
+        <div class="navbar bg-base-200 px-2 pt-[env(safe-area-inset-top)]">
+          <label class="btn btn-square btn-ghost" onClick={() => setDrawerOpen(true)}>
+            <Menu size={22} />
+          </label>
+          <span class="text-lg font-bold mx-auto">{open && category === "docs" ? open.name.replace(/\.md$/, "") : cat.label}</span>
+          <span class="w-11" />
         </div>
 
-        {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>
-        )}
+        <div class="max-w-md w-full mx-auto px-4 pb-[env(safe-area-inset-bottom)]">
+          {category === "links" && <LinkList links={content.links} />}
+          {category === "monitor" && (
+            <div class="flex flex-col gap-3 mt-4">
+              {content.monitors.map((it) => <MonitorCard s={it} />)}
+            </div>
+          )}
+          {category === "exec" && content.exec.map((it) => <ScriptCard s={it} />)}
+          {category === "docs" &&
+            (open ? (
+              <DocView doc={open} onBack={() => setOpenDoc(null)} />
+            ) : (
+              <DocsView docs={docs} onOpen={(d) => setOpenDoc(d.name)} />
+            ))}
+        </div>
+      </div>
+
+      {/* Sidebar */}
+      <div class="drawer-side z-20">
+        <label class="drawer-overlay" onClick={() => setDrawerOpen(false)} />
+        <nav class="bg-base-200 min-h-full w-56 p-3 pt-[calc(env(safe-area-inset-top)+1rem)] flex flex-col gap-1">
+          {CATEGORIES.map((c) => (
+            <button
+              class={`btn btn-ghost justify-start ${c.id === category ? "btn-primary" : ""}`}
+              onClick={() => {
+                setCategory(c.id);
+                setOpenDoc(null);
+                setDrawerOpen(false);
+              }}
+            >
+              <c.icon size={18} /> {c.label}
+            </button>
+          ))}
+        </nav>
       </div>
     </div>
   );