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, Monitor } 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 { StoredDoc, 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>
  );
}

function ServiceList({
  services,
  refresh,
}: {
  services: Service[];
  refresh: () => void;
}) {
  const [searchQuery, setSearchQuery] = useState("");

  const filteredServices = services.filter((s) =>
    s.name.toLowerCase().includes(searchQuery.toLowerCase()),
  );
  return (
    <div class="flex flex-col gap-2 mt-4">
      <label className="input w-full">
        <svg
          className="h-[1em] opacity-50"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
          <g
            strokeLinejoin="round"
            strokeLinecap="round"
            strokeWidth="2.5"
            fill="none"
            stroke="currentColor"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.3-4.3"></path>
          </g>
        </svg>
        <input
          type="search"
          className="grow"
          placeholder="Filter"
          value={searchQuery}
          onInput={(e) => setSearchQuery(e.currentTarget.value)}
        />
      </label>
      <div class="grid gap-3 mt-2 md:grid-cols-2 lg:grid-cols-3">
        {filteredServices.map((s) => (
          <ServiceCard key={s.name} s={s} refresh={refresh} />
        ))}
      </div>
    </div>
  );
}

function Nav({
  category,
  setCategory,
  setOpenDoc,
}: {
  category: Category;
  setCategory: (c: Category) => void;
  setOpenDoc: (d: string | null) => void;
}) {
  return (
    <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>
  );
}

function MobileTopBar({ category }: { category: Category }) {
  const label = CATEGORIES.find((c) => c.id === category)?.label ?? "";
  return (
    <div class="bg-base-200 md:hidden px-4 pt-[calc(env(safe-area-inset-top)+0.5rem)] pb-2">
      <span class="text-lg font-bold">{label}</span>
    </div>
  );
}

function Footer({
  category,
  setCategory,
  setOpenDoc,
}: {
  category: Category;
  setCategory: (c: Category) => void;
  setOpenDoc: (d: string | null) => void;
}) {
  return (
    <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>
  );
}

function MainScreen({
  category,
  setOpenDoc,
  content,
  refresh,
  open,
  docs,
}: {
  category: Category;
  setOpenDoc: (d: string | null) => void;
  content: Content;
  refresh: () => void;
  open: StoredDoc | undefined;
  docs: StoredDoc[];
}) {
  return (
    <div
      class={`flex-1 w-full mx-auto px-4 pb-24 md:pb-6 pt-2 md: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" && (
        <div class="flex flex-col gap-3 mt-4">
          {content.exec.map((it) => (
            <ScriptCard s={it} />
          ))}
        </div>
      )}
      {category === "services" && (
        <ServiceList services={content.services} refresh={refresh} />
      )}
      {category === "docs" &&
        (open ? (
          <DocView doc={open} onBack={() => setOpenDoc(null)} />
        ) : (
          <DocsView docs={docs} onOpen={(d) => setOpenDoc(d.name)} />
        ))}
    </div>
  );
}

type Content = {
  links: Link[];
  monitors: Monitor[];
  exec: Item[];
  services: Service[];
};

export function App() {
  const [content, setContent] = useState<Content>({
    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">
      <Nav
        category={category}
        setCategory={setCategory}
        setOpenDoc={setOpenDoc}
      />

      <MobileTopBar category={category} />

      <MainScreen
        category={category}
        setOpenDoc={setOpenDoc}
        content={content}
        refresh={refresh}
        open={open}
        docs={docs}
      />

      <Footer
        category={category}
        setCategory={setCategory}
        setOpenDoc={setOpenDoc}
      />
    </div>
  );
}