pretty search

2026-08-31 21:15:26 +05:00
parent fed9ad594c
commit 47e4066de5
7 changed files with 743 additions and 604 deletions
@@ -8,7 +8,7 @@ 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";
+import { StoredDoc, syncDocs } from "./docsStore";

 const client = createClient(
  HomelabService,
@@ -63,15 +63,45 @@ function ServiceList({
    s.name.toLowerCase().includes(searchQuery.toLowerCase()),
  );
  return (
-    <div>
+    <div class="flex flex-col gap-2 mt-4">
+      {/* 
      <input
-        type="text"
+        type="search"
+        class="gap-3"
        placeholder="Filter"
        className="input"
        value={searchQuery}
        onInput={(e) => setSearchQuery(e.currentTarget.value)}
      />
-      <div class="grid gap-3 mt-4 md:grid-cols-2 lg:grid-cols-3">
+      */}
+      <label className="input">
+        <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)}
+        />
+        <kbd className="kbd kbd-sm">⌘</kbd>
+        <kbd className="kbd kbd-sm">K</kbd>
+      </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} />
        ))}
@@ -80,13 +110,118 @@ function ServiceList({
  );
 }

+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 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-[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" && (
+        <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: Item[];
+  exec: Item[];
+  services: Service[];
+};
+
 export function App() {
-  const [content, setContent] = useState<{
-    links: Link[];
-    monitors: Item[];
-    exec: Item[];
-    services: Service[];
-  }>({
+  const [content, setContent] = useState<Content>({
    links: [],
    monitors: [],
    exec: [],
@@ -132,68 +267,26 @@ export function App() {

  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>
+      <Nav
+        category={category}
+        setCategory={setCategory}
+        setOpenDoc={setOpenDoc}
+      />

-      <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" && (
-          <ServiceList services={content.services} refresh={refresh} />
-        )}
-        {category === "docs" &&
-          (open ? (
-            <DocView doc={open} onBack={() => setOpenDoc(null)} />
-          ) : (
-            <DocsView docs={docs} onOpen={(d) => setOpenDoc(d.name)} />
-          ))}
-      </div>
+      <MainScreen
+        category={category}
+        setOpenDoc={setOpenDoc}
+        content={content}
+        refresh={refresh}
+        open={open}
+        docs={docs}
+      />

-      {/* 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>
+      <Footer
+        category={category}
+        setCategory={setCategory}
+        setOpenDoc={setOpenDoc}
+      />
    </div>
  );
 }