feat: build local skills registry

2026-06-05 09:30:00 +02:00
parent f0a948aec9
commit 370aeec2a0
18 changed files with 1334 additions and 16 deletions
--- a/components/audits/audits-board.tsx
+++ b/components/audits/audits-board.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { useMemo } from "react";
+
+import { useQuery } from "convex/react";
+import { FunctionReturnType } from "convex/server";
+import { Files, SquarePen } from "lucide-react";
+import Link from "next/link";
+
+import { api } from "@/convex/_generated/api";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+
+type AuditsListResult = FunctionReturnType<typeof api.audits.list>;
+type AuditRow = NonNullable<AuditsListResult>[number];
+
+const statusText: Record<string, string> = {
+  draft: "Entwurf",
+  approved: "Freigegeben",
+  published: "Veröffentlicht",
+  deactivated: "Deaktiviert",
+};
+
+const fallbackStatus = "Unbekannt";
+
+function formatPageCount(pages: AuditRow["checkedPages"]) {
+  return `${pages.length} Seite${pages.length === 1 ? "" : "n"}`;
+}
+
+function getStatusLabel(status: AuditRow["status"]) {
+  return statusText[status] ?? fallbackStatus;
+}
+
+function AuditsBoardLoading() {
+  return (
+    <section className="space-y-4">
+      <header className="space-y-2">
+        <p className="text-sm text-muted-foreground">Interne Audit-Übersicht</p>
+        <h1 className="text-2xl font-semibold tracking-normal">Audits</h1>
+        <p className="text-sm text-muted-foreground">Audits werden geladen...</p>
+      </header>
+      <div className="rounded-lg border">
+        <div className="grid gap-2 p-3">
+          {Array.from({ length: 4 }, (_, index) => (
+            <Skeleton className="h-20 rounded-md" key={index} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export function AuditsBoard() {
+  const audits = useQuery(api.audits.list, { limit: 100 });
+  const rows = useMemo(() => {
+    if (!audits) {
+      return [];
+    }
+
+    return [...audits].sort((a, b) => b.createdAt - a.createdAt);
+  }, [audits]);
+
+  if (audits === undefined) {
+    return <AuditsBoardLoading />;
+  }
+
+  if (rows.length === 0) {
+    return (
+      <section className="space-y-4">
+        <header className="space-y-2">
+          <p className="text-sm text-muted-foreground">Interne Audit-Übersicht</p>
+          <h1 className="text-2xl font-semibold tracking-normal">Audits</h1>
+        </header>
+
+        <article className="rounded-lg border p-4">
+          <h2 className="text-sm font-medium">Noch keine Audits</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Sobald neue Audits angelegt wurden, erscheinen sie hier als kompakte
+            Zeilen.
+          </p>
+        </article>
+      </section>
+    );
+  }
+
+  return (
+    <section className="space-y-4">
+      <header className="space-y-2">
+        <p className="text-sm text-muted-foreground">Interne Audit-Übersicht</p>
+        <h1 className="text-2xl font-semibold tracking-normal">Audits</h1>
+      </header>
+
+      <section className="space-y-2">
+        <div className="grid grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_120px_120px_auto] gap-2 rounded-md border bg-muted/40 px-3 py-2 text-xs font-medium text-muted-foreground">
+          <span>Slug</span>
+          <span>Domain</span>
+          <span>Status</span>
+          <span>Seitenanzahl</span>
+          <span className="text-right">Aktion</span>
+        </div>
+
+        <div className="space-y-2">
+          {rows.map((audit: AuditRow) => (
+            <article
+              className="grid grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_120px_120px_auto] items-center gap-2 rounded-lg border px-3 py-2 text-sm"
+              key={audit._id}
+            >
+              <div className="min-w-0">
+                <p className="truncate font-medium">{audit.slug}</p>
+              </div>
+              <p className="truncate text-muted-foreground">{audit.checkedDomain}</p>
+              <Badge variant="secondary">{getStatusLabel(audit.status)}</Badge>
+              <p className="text-muted-foreground">
+                <span className="inline-flex items-center gap-1">
+                  <Files className="size-3.5" />
+                  {formatPageCount(audit.checkedPages)}
+                </span>
+              </p>
+              <div className="flex justify-end">
+                <Link
+                  className="inline-flex min-h-8 items-center gap-1 text-sm text-primary"
+                  href={`/dashboard/audits/${audit._id}`}
+                >
+                  <SquarePen className="size-4" />
+                  Öffnen
+                </Link>
+              </div>
+            </article>
+          ))}
+        </div>
+      </section>
+    </section>
+  );
+}