initial commit after split

webui/src/components/Card.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+
+type CardProps = {
+  title?: React.ReactNode;
+  children: React.ReactNode;
+  actions?: React.ReactNode;
+  collapsible?: boolean;
+};
+
+export default function Card({ title, children, actions, collapsible = false }: CardProps) {
+  const [collapsed, setCollapsed] = useState(false);
+  const hasHeader = Boolean(title || actions || collapsible);
+  const body = <div className="card-body">{children}</div>;
+  const shouldRenderBody = !collapsible || !collapsed;
+
+  return (
+    <section className={`card${collapsible ? " card-collapsible" : ""}${collapsed ? " is-collapsed" : ""}`}>
+      {hasHeader && (
+        <header className="card-header">
+          {title && (typeof title === "string" ? <h2>{title}</h2> : <div className="card-title-node">{title}</div>)}
+          {(actions || collapsible) && (
+            <div className="card-actions">
+              {actions}
+              {collapsible && (
+                <button
+                  type="button"
+                  className="card-collapse-toggle"
+                  aria-label={collapsed ? "Show content" : "Show header only"}
+                  aria-expanded={!collapsed}
+                  title={collapsed ? "Show content" : "Show header only"}
+                  onClick={() => setCollapsed((value) => !value)}
+                >
+                  <ChevronDown size={18} strokeWidth={2.4} aria-hidden="true" />
+                </button>
+              )}
+            </div>
+          )}
+        </header>
+      )}
+      {shouldRenderBody && (collapsible ? <div className="card-collapse-region">{body}</div> : body)}
+    </section>
+  );
+}