pwa-homelab-mon/web/src/App.tsx

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, 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";

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;

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 [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);

  const refresh = useCallback(
    () =>
      client
        .listContent({})
        .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(() => {
    const tick = () =>
      syncDocs()
        .then(() => setDocs(localDocs()))
        .catch(() => {});
    tick();
    const id = setInterval(tick, 5000);
    return () => clearInterval(id);
  }, []);

  const open = docs.find((d) => d.name === openDoc);

  return (
    <div class="min-h-screen flex flex-col">
      {/* Desktop only: tab row top-left */}
      <div class="bg-base-200 px-4 py-2 hidden md:block">
        <div class="max-w-4xl mx-auto flex items-center gap-2">
          <span class="text-lg font-bold mr-4">Homelab</span>
          {CATEGORIES.map((c) => (
            <button
              class={`btn btn-sm ${c.id === category ? "btn-primary" : "btn-ghost"}`}
              onClick={() => {
                setCategory(c.id);
                setOpenDoc(null);
              }}
            >
              <c.icon size={18} /> {c.label}
            </button>
          ))}
        </div>
      </div>

      <div
        class={`flex-1 w-full mx-auto px-4 pb-24 md:pb-6 pt-[env(safe-area-inset-top)] ${
          category === "services" ? "max-w-5xl" : "max-w-md"
        }`}
      >
        {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 === "services" && (
          <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" &&
          (open ? (
            <DocView doc={open} onBack={() => setOpenDoc(null)} />
          ) : (
            <DocsView docs={docs} onOpen={(d) => setOpenDoc(d.name)} />
          ))}
      </div>

      {/* 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);
            }}
          >
            <c.icon size={26} />
            <span class="dock-label text-xs">{c.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}