feat: unified dashboard

web/src/App.tsx

@@ -1,7 +1,7 @@
 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 { BookOpen, 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";
@@ -16,8 +16,7 @@ const client = createClient(
 );
 
 const CATEGORIES = [
-  { id: "links", label: "Links", icon: LinkIcon },
-  { id: "monitor", label: "Monitor", icon: Gauge },
+  { id: "dashboard", label: "Dashboard", icon: LinkIcon },
   { id: "services", label: "Services", icon: Server },
   { id: "exec", label: "Exec", icon: Play },
   { id: "docs", label: "Docs", icon: BookOpen },
@@ -29,7 +28,7 @@ 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">
+    <div class="flex flex-col gap-2">
       {links.map((l) => (
         <a
           href={l.url}
@@ -109,7 +108,7 @@ function Nav({
 }) {
   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">
+      <div class="max-w-4xl mx-auto flex items-center justify-center gap-2">
         <span class="text-lg font-bold mr-4">Homelab</span>
         {CATEGORIES.map((c) => (
           <button
@@ -185,15 +184,19 @@ function MainScreen({
   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 === "services" || category === "dashboard"
+          ? "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} />
-          ))}
+      {category === "dashboard" && (
+        <div class="flex flex-row gap-2 justify-center mt-4">
+          <LinkList links={content.links} />
+          <div class="flex flex-col gap-2">
+            {content.monitors.map((it) => (
+              <MonitorCard s={it} />
+            ))}
+          </div>
         </div>
       )}
       {category === "exec" && (
@@ -230,7 +233,7 @@ export function App() {
     exec: [],
     services: [],
   });
-  const [category, setCategory] = useState<Category>("monitor");
+  const [category, setCategory] = useState<Category>("dashboard");
   const [docs, setDocs] = useState(localDocs());
   const [openDoc, setOpenDoc] = useState<string | null>(null);