Release v0.1.2

webui/src/components/Card.tsx

@@ -1,19 +1,60 @@
-import { useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 
 type CardProps = {
-  title?: React.ReactNode;
-  children: React.ReactNode;
-  actions?: React.ReactNode;
+  title?: ReactNode;
+  children: ReactNode;
+  actions?: ReactNode;
   collapsible?: boolean;
+  collapseKey?: string;
+  persistCollapse?: boolean;
 };
 
-export default function Card({ title, children, actions, collapsible = false }: CardProps) {
-  const [collapsed, setCollapsed] = useState(false);
+function resolveCollapseStorageKey(collapsible: boolean, persistCollapse: boolean, collapseKey: string | undefined, title: ReactNode): string | null {
+  if (!collapsible || !persistCollapse) return null;
+  if (collapseKey) return `govoplan.card.collapsed:${collapseKey}`;
+  if (typeof window === "undefined" || typeof title !== "string") return null;
+  const normalizedTitle = title.trim();
+  if (!normalizedTitle) return null;
+  return `govoplan.card.collapsed:${window.location.pathname}:${normalizedTitle}`;
+}
+
+function readCollapseState(storageKey: string | null): boolean {
+  if (!storageKey || typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(storageKey) === "1";
+  } catch {
+    return false;
+  }
+}
+
+function writeCollapseState(storageKey: string | null, collapsed: boolean): void {
+  if (!storageKey || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(storageKey, collapsed ? "1" : "0");
+  } catch {
+    // localStorage may be unavailable in private or restricted contexts.
+  }
+}
+
+export default function Card({ title, children, actions, collapsible = false, collapseKey, persistCollapse = true }: CardProps) {
+  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 shouldRenderBody = !collapsible || !collapsed;
 
+  useEffect(() => {
+    setCollapseState({ storageKey, collapsed: readCollapseState(storageKey) });
+  }, [storageKey]);
+
+  function toggleCollapsed() {
+    const nextCollapsed = !collapsed;
+    writeCollapseState(storageKey, nextCollapsed);
+    setCollapseState({ storageKey, collapsed: nextCollapsed });
+  }
+
   return (
     <section className={`card${collapsible ? " card-collapsible" : ""}${collapsed ? " is-collapsed" : ""}`}>
       {hasHeader && (
@@ -29,7 +70,7 @@ export default function Card({ title, children, actions, collapsible = false }:
                   aria-label={collapsed ? "Show content" : "Show header only"}
                   aria-expanded={!collapsed}
                   title={collapsed ? "Show content" : "Show header only"}
-                  onClick={() => setCollapsed((value) => !value)}
+                  onClick={toggleCollapsed}
                 >
                   <ChevronDown size={18} strokeWidth={2.4} aria-hidden="true" />
                 </button>