From 99df61484b162ec627868eafc8c22a41fbecb7ca Mon Sep 17 00:00:00 2001
From: TerrifiedBug <admin@terrifiedbug.com>
Date: Tue, 10 Mar 2026 14:08:40 +0000
Subject: [PATCH] ui: card layout for shared components with collapsible kind
 sections

Replace table rows with card grid on the shared components list page
to match the visual style used elsewhere in the library. Group the
component catalog on the create page into collapsible Source/Transform/Sink
sections so the long list is easier to navigate.
---
 .../library/shared-components/new/page.tsx    | 156 ++++++++++++++----
 .../library/shared-components/page.tsx        |  40 +++--
 2 files changed, 148 insertions(+), 48 deletions(-)

diff --git a/src/app/(dashboard)/library/shared-components/new/page.tsx b/src/app/(dashboard)/library/shared-components/new/page.tsx
index c4ecfb5..7d0595a 100644
--- a/src/app/(dashboard)/library/shared-components/new/page.tsx
+++ b/src/app/(dashboard)/library/shared-components/new/page.tsx
@@ -8,7 +8,7 @@ import { useEnvironmentStore } from "@/stores/environment-store";
 import { VECTOR_CATALOG } from "@/lib/vector/catalog";
 import { toast } from "sonner";
 import Link from "next/link";
-import { ArrowLeft, Loader2, Plus, Search } from "lucide-react";
+import { ArrowLeft, ChevronDown, Loader2, Plus, Search } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -22,12 +22,18 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import { SchemaForm } from "@/components/config-forms/schema-form";
+import { cn } from "@/lib/utils";
 
 import type { VectorComponentDef } from "@/lib/vector/types";
 
 /* ------------------------------------------------------------------ */
-/*  Kind badge styling                                                 */
+/*  Kind styling                                                       */
 /* ------------------------------------------------------------------ */
 
 const kindVariant: Record<string, string> = {
@@ -38,6 +44,23 @@ const kindVariant: Record<string, string> = {
   sink: "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300",
 };
 
+const kindSectionConfig: Record<string, { label: string; accent: string }> = {
+  source: {
+    label: "Sources",
+    accent: "text-emerald-600 dark:text-emerald-400",
+  },
+  transform: {
+    label: "Transforms",
+    accent: "text-sky-600 dark:text-sky-400",
+  },
+  sink: {
+    label: "Sinks",
+    accent: "text-orange-600 dark:text-orange-400",
+  },
+};
+
+const KIND_ORDER = ["source", "transform", "sink"] as const;
+
 /* ------------------------------------------------------------------ */
 /*  Page Component                                                     */
 /* ------------------------------------------------------------------ */
@@ -71,6 +94,16 @@ export default function NewSharedComponentPage() {
     );
   }, [search]);
 
+  const groupedCatalog = useMemo(
+    () =>
+      KIND_ORDER.map((kind) => ({
+        kind,
+        ...kindSectionConfig[kind],
+        items: filteredCatalog.filter((c) => c.kind === kind),
+      })),
+    [filteredCatalog],
+  );
+
   const createMutation = useMutation(
     trpc.sharedComponent.create.mutationOptions({
       onSuccess: (sc) => {
@@ -162,42 +195,30 @@ export default function NewSharedComponentPage() {
             />
           </div>
 
-          {/* Component grid */}
-          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-            {filteredCatalog.map((comp) => (
-              <Card
-                key={`${comp.kind}-${comp.type}`}
-                className="cursor-pointer transition-colors hover:bg-accent/50"
-                onClick={() => handleSelectComponent(comp)}
-              >
-                <CardHeader className="pb-2">
-                  <div className="flex items-start justify-between gap-2">
-                    <CardTitle className="text-sm">
-                      {comp.displayName}
-                    </CardTitle>
-                    <Badge
-                      variant="outline"
-                      className={kindVariant[comp.kind] ?? ""}
-                    >
-                      {comp.kind}
-                    </Badge>
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  <p className="text-xs text-muted-foreground line-clamp-2">
-                    {comp.description}
-                  </p>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-
-          {filteredCatalog.length === 0 && (
+          {/* Component sections by kind */}
+          {filteredCatalog.length === 0 ? (
             <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
               <p className="text-muted-foreground">
                 No components match your search.
               </p>
             </div>
+          ) : (
+            <div className="space-y-3">
+              {groupedCatalog.map((group) => {
+                if (group.items.length === 0) return null;
+                return (
+                  <CatalogKindSection
+                    key={group.kind}
+                    label={group.label}
+                    accent={group.accent}
+                    badgeClass={kindVariant[group.kind] ?? ""}
+                    count={group.items.length}
+                    items={group.items}
+                    onSelect={handleSelectComponent}
+                  />
+                );
+              })}
+            </div>
           )}
         </>
       )}
@@ -289,3 +310,72 @@ export default function NewSharedComponentPage() {
     </div>
   );
 }
+
+/* ------------------------------------------------------------------ */
+/*  Catalog Kind Section (collapsible)                                 */
+/* ------------------------------------------------------------------ */
+
+function CatalogKindSection({
+  label,
+  accent,
+  badgeClass,
+  count,
+  items,
+  onSelect,
+}: {
+  label: string;
+  accent: string;
+  badgeClass: string;
+  count: number;
+  items: VectorComponentDef[];
+  onSelect: (comp: VectorComponentDef) => void;
+}) {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-2 rounded-lg border bg-muted/40 px-4 py-3 text-left transition-colors hover:bg-muted/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+        <ChevronDown
+          className={cn(
+            "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
+            !open && "-rotate-90",
+          )}
+        />
+        <span className={cn("text-sm font-semibold", accent)}>{label}</span>
+        <Badge variant="secondary" className="ml-auto text-xs">
+          {count}
+        </Badge>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="mt-2 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {items.map((comp) => (
+            <Card
+              key={`${comp.kind}-${comp.type}`}
+              className="cursor-pointer transition-colors hover:bg-accent/50"
+              onClick={() => onSelect(comp)}
+            >
+              <CardHeader className="pb-2">
+                <div className="flex items-start justify-between gap-2">
+                  <CardTitle className="text-sm">
+                    {comp.displayName}
+                  </CardTitle>
+                  <Badge
+                    variant="outline"
+                    className={badgeClass}
+                  >
+                    {comp.kind}
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <p className="text-xs text-muted-foreground line-clamp-2">
+                  {comp.description}
+                </p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
diff --git a/src/app/(dashboard)/library/shared-components/page.tsx b/src/app/(dashboard)/library/shared-components/page.tsx
index 4e509df..3f8ec66 100644
--- a/src/app/(dashboard)/library/shared-components/page.tsx
+++ b/src/app/(dashboard)/library/shared-components/page.tsx
@@ -12,6 +12,12 @@ import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { PageHeader } from "@/components/page-header";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import {
   Collapsible,
   CollapsibleContent,
@@ -216,26 +222,30 @@ function KindSection({
         </Badge>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="mt-1 divide-y rounded-lg border">
+        <div className="mt-2 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
           {items.map((sc) => (
-            <button
+            <Card
               key={sc.id}
+              className="cursor-pointer transition-colors hover:bg-accent/50"
               onClick={() => onItemClick(sc.id)}
-              className="flex w-full cursor-pointer items-center gap-4 px-4 py-3 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
             >
-              <Link2 className="h-4 w-4 shrink-0 text-muted-foreground" />
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-medium">{sc.name}</p>
+              <CardHeader className="pb-2">
+                <div className="flex items-start justify-between gap-2">
+                  <CardTitle className="text-sm">{sc.name}</CardTitle>
+                  <Badge variant="outline" className={cn("text-xs", badgeClass)}>
+                    v{sc.version}
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent>
                 <p className="text-xs text-muted-foreground">{sc.componentType}</p>
-              </div>
-              <div className="flex items-center gap-3 shrink-0 text-xs text-muted-foreground">
-                <span>{sc.linkedPipelineCount} linked</span>
-                <Badge variant="outline" className={cn("text-xs", badgeClass)}>
-                  v{sc.version}
-                </Badge>
-                <span className="w-16 text-right">{formatRelativeTime(sc.updatedAt)}</span>
-              </div>
-            </button>
+                <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
+                  <Link2 className="h-3 w-3" />
+                  <span>{sc.linkedPipelineCount} linked</span>
+                  <span className="ml-auto">{formatRelativeTime(sc.updatedAt)}</span>
+                </div>
+              </CardContent>
+            </Card>
           ))}
         </div>
       </CollapsibleContent>