Centralize shared WebUI structural primitives

webui/src/components/Card.tsx

@@ -1,15 +1,20 @@
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useState, type HTMLAttributes, type ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 import { usePlatformLanguage } from "../i18n/LanguageContext";
 import type { PlatformInterfaceIdentityProps } from "../types";
 
-type CardProps = PlatformInterfaceIdentityProps & {
+export type CardProps = PlatformInterfaceIdentityProps & Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
   title?: ReactNode;
   children: ReactNode;
   actions?: ReactNode;
+  afterBody?: ReactNode;
   collapsible?: boolean;
   collapseKey?: string;
   persistCollapse?: boolean;
+  as?: "section" | "article";
+  headerClassName?: string;
+  bodyClassName?: string;
+  actionsClassName?: string;
 };
 
 function resolveCollapseStorageKey(collapsible: boolean, persistCollapse: boolean, collapseKey: string | undefined, title: ReactNode): string | null {
@@ -39,13 +44,32 @@ function writeCollapseState(storageKey: string | null, collapsed: boolean): void
     // localStorage may be unavailable in private or restricted contexts.
   }}
 
-export default function Card({ title, children, actions, collapsible = false, collapseKey, persistCollapse = true, interfaceId, helpContextId, helpModuleId, helpTopicId }: CardProps) {
+export default function Card({
+  title,
+  children,
+  actions,
+  afterBody,
+  collapsible = false,
+  collapseKey,
+  persistCollapse = true,
+  as = "section",
+  className = "",
+  headerClassName = "",
+  bodyClassName = "",
+  actionsClassName = "",
+  interfaceId,
+  helpContextId,
+  helpModuleId,
+  helpTopicId,
+  ...props
+}: CardProps) {
   const { translateText } = usePlatformLanguage();
+  const Element = as;
   const storageKey = resolveCollapseStorageKey(collapsible, persistCollapse, collapseKey, title);
   const [collapseState, setCollapseState] = useState(() => ({ storageKey, collapsed: readCollapseState(storageKey) }));
   const collapsed = collapseState.storageKey === storageKey ? collapseState.collapsed : readCollapseState(storageKey);
   const hasHeader = Boolean(title || actions || collapsible);
-  const body = <div className="card-body">{children}</div>;
+  const body = <div className={["card-body", bodyClassName].filter(Boolean).join(" ")}>{children}</div>;
   const shouldRenderBody = !collapsible || !collapsed;
   const collapseLabel = translateText(collapsed ? "i18n:govoplan-core.show_content.0528d8d2" : "i18n:govoplan-core.show_header_only.24afefca");
 
@@ -60,8 +84,9 @@ export default function Card({ title, children, actions, collapsible = false, co
   }
 
   return (
-    <section
-      className={`card${collapsible ? " card-collapsible" : ""}${collapsed ? " is-collapsed" : ""}`}
+    <Element
+      {...props}
+      className={["card", collapsible ? "card-collapsible" : "", collapsed ? "is-collapsed" : "", className].filter(Boolean).join(" ")}
       data-help-scope="interface"
       data-interface-id={interfaceId}
       data-help-context-id={helpContextId}
@@ -70,10 +95,10 @@ export default function Card({ title, children, actions, collapsible = false, co
       data-help-key={typeof title === "string" ? title : undefined}
     >
       {hasHeader &&
-      <header className="card-header">
+      <header className={["card-header", headerClassName].filter(Boolean).join(" ")}>
           {title && (typeof title === "string" ? <h2>{translateText(title)}</h2> : <div className="card-title-node">{title}</div>)}
           {(actions || collapsible) &&
-        <div className="card-actions">
+        <div className={["card-actions", actionsClassName].filter(Boolean).join(" ")}>
               {actions}
               {collapsible &&
           <button
@@ -91,7 +116,7 @@ export default function Card({ title, children, actions, collapsible = false, co
         }
         </header>
       }
-      {shouldRenderBody && (collapsible ? <div className="card-collapse-region">{body}</div> : body)}
-    </section>);
+      {shouldRenderBody && (collapsible ? <div className="card-collapse-region">{body}{afterBody}</div> : <>{body}{afterBody}</>)}
+    </Element>);
 
 }