feat(dashboard): integrates persisted expand/collapse state

Author: wgordon17

src/app/components/dashboard/ActionsTab.tsx

@@ -1,14 +1,15 @@
-import { createMemo, For, Show } from "solid-js";
+import { createEffect, createMemo, For, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 import type { WorkflowRun } from "../../services/api";
 import { config } from "../../stores/config";
-import { viewState, setViewState, setTabFilter, resetTabFilter, resetAllTabFilters, ignoreItem, unignoreItem, type ActionsFilterField } from "../../stores/view";
+import { viewState, setViewState, setTabFilter, resetTabFilter, resetAllTabFilters, ignoreItem, unignoreItem, toggleExpandedRepo, setAllExpanded, pruneExpandedRepos, type ActionsFilterField } from "../../stores/view";
 import WorkflowSummaryCard from "./WorkflowSummaryCard";
 import IgnoreBadge from "./IgnoreBadge";
 import SkeletonRows from "../shared/SkeletonRows";
 import FilterChips from "../shared/FilterChips";
 import type { FilterChipGroupDef } from "../shared/FilterChips";
 import ChevronIcon from "../shared/ChevronIcon";
+import ExpandCollapseButtons from "../shared/ExpandCollapseButtons";
 
 interface ActionsTabProps {
   workflowRuns: WorkflowRun[];
@@ -116,17 +117,22 @@ const actionsFilterGroups: FilterChipGroupDef[] = [
 ];
 
 export default function ActionsTab(props: ActionsTabProps) {
-  const [expandedRepos, setExpandedRepos] = createStore<Record<string, boolean>>({});
   const [expandedWorkflows, setExpandedWorkflows] = createStore<Record<string, boolean>>({});
 
-  function toggleRepo(repoFullName: string) {
-    setExpandedRepos(repoFullName, (v) => !v);
-  }
-
   function toggleWorkflow(key: string) {
     setExpandedWorkflows(key, (v) => !v);
   }
 
+  const activeRepoNames = createMemo(() =>
+    [...new Set(props.workflowRuns.map((r) => r.repoFullName))]
+  );
+
+  createEffect(() => {
+    const names = activeRepoNames();
+    if (names.length === 0) return;
+    pruneExpandedRepos("actions", names);
+  });
+
   function handleIgnore(run: WorkflowRun) {
     ignoreItem({
       id: String(run.id),
@@ -180,7 +186,7 @@ export default function ActionsTab(props: ActionsTabProps) {
   return (
     <div class="divide-y divide-base-300">
       {/* Toolbar */}
-      <div class="flex flex-wrap items-center gap-3 px-4 py-2 bg-base-100">
+      <div class="flex flex-wrap items-center gap-3 px-4 py-2 border-b border-base-300 bg-base-100">
         <label class="flex items-center gap-1.5 text-sm text-base-content/70 cursor-pointer select-none">
           <input
             type="checkbox"
@@ -198,6 +204,10 @@ export default function ActionsTab(props: ActionsTabProps) {
           onResetAll={() => resetAllTabFilters("actions")}
         />
         <div class="flex-1" />
+        <ExpandCollapseButtons
+          onExpandAll={() => setAllExpanded("actions", repoGroups().map((g) => g.repoFullName), true)}
+          onCollapseAll={() => setAllExpanded("actions", repoGroups().map((g) => g.repoFullName), false)}
+        />
         <IgnoreBadge
           items={viewState.ignoredItems.filter((i) => i.type === "workflowRun")}
           onUnignore={unignoreItem}
@@ -224,7 +234,7 @@ export default function ActionsTab(props: ActionsTabProps) {
       <Show when={repoGroups().length > 0}>
         <For each={repoGroups()}>
           {(repoGroup) => {
-            const isExpanded = () => !!expandedRepos[repoGroup.repoFullName];
+            const isExpanded = () => !!viewState.expandedRepos.actions[repoGroup.repoFullName];
 
             const sortedWorkflows = createMemo(() =>
               sortWorkflowsByStatus(repoGroup.workflows)
@@ -249,7 +259,7 @@ export default function ActionsTab(props: ActionsTabProps) {
               <div class="bg-base-100">
                 {/* Repo header */}
                 <button
-                  onClick={() => toggleRepo(repoGroup.repoFullName)}
+                  onClick={() => toggleExpandedRepo("actions", repoGroup.repoFullName)}
                   aria-expanded={isExpanded()}
                   class="w-full flex items-center gap-2 px-4 py-2.5 text-left text-sm font-semibold text-base-content bg-base-200/60 border-y border-base-300 hover:bg-base-200 transition-colors"
                 >

src/app/components/dashboard/IssuesTab.tsx

@@ -1,7 +1,6 @@
 import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
-import { createStore } from "solid-js/store";
 import { config } from "../../stores/config";
-import { viewState, setSortPreference, setTabFilter, resetTabFilter, resetAllTabFilters, ignoreItem, unignoreItem, type IssueFilterField } from "../../stores/view";
+import { viewState, setSortPreference, setTabFilter, resetTabFilter, resetAllTabFilters, ignoreItem, unignoreItem, toggleExpandedRepo, setAllExpanded, pruneExpandedRepos, type IssueFilterField } from "../../stores/view";
 import type { Issue } from "../../services/api";
 import ItemRow from "./ItemRow";
 import IgnoreBadge from "./IgnoreBadge";
@@ -13,6 +12,7 @@ import type { FilterChipGroupDef } from "../shared/FilterChips";
 import RoleBadge from "../shared/RoleBadge";
 import SkeletonRows from "../shared/SkeletonRows";
 import ChevronIcon from "../shared/ChevronIcon";
+import ExpandCollapseButtons from "../shared/ExpandCollapseButtons";
 import { deriveInvolvementRoles } from "../../lib/format";
 import { groupByRepo, computePageLayout, slicePageGroups } from "../../lib/grouping";
 
@@ -54,11 +54,6 @@ const sortOptions: SortOption[] = [
 
 export default function IssuesTab(props: IssuesTabProps) {
   const [page, setPage] = createSignal(0);
-  const [expandedRepos, setExpandedRepos] = createStore<Record<string, boolean>>({});
-
-  function toggleRepo(repoFullName: string) {
-    setExpandedRepos(repoFullName, (v) => !v);
-  }
 
   const sortPref = createMemo(() => {
     const pref = viewState.sortPreferences["issues"];
@@ -141,14 +136,14 @@ export default function IssuesTab(props: IssuesTabProps) {
     if (page() > max) setPage(max);
   });
 
-  // Auto-expand first group on initial mount
-  let hasAutoExpanded = false;
+  const activeRepoNames = createMemo(() =>
+    [...new Set(props.issues.map((i) => i.repoFullName))]
+  );
+
   createEffect(() => {
-    const groups = pageGroups();
-    if (!hasAutoExpanded && groups.length > 0) {
-      hasAutoExpanded = true;
-      setExpandedRepos(groups[0].repoFullName, true);
-    }
+    const names = activeRepoNames();
+    if (names.length === 0) return;
+    pruneExpandedRepos("issues", names);
   });
 
   function handleSort(field: string, direction: "asc" | "desc") {
@@ -193,6 +188,10 @@ export default function IssuesTab(props: IssuesTabProps) {
           }}
         />
         <div class="flex-1" />
+        <ExpandCollapseButtons
+          onExpandAll={() => setAllExpanded("issues", repoGroups().map((g) => g.repoFullName), true)}
+          onCollapseAll={() => setAllExpanded("issues", repoGroups().map((g) => g.repoFullName), false)}
+        />
         <IgnoreBadge
           items={viewState.ignoredItems.filter((i) => i.type === "issue")}
           onUnignore={unignoreItem}
@@ -234,7 +233,7 @@ export default function IssuesTab(props: IssuesTabProps) {
           <div class="divide-y divide-base-300">
             <For each={pageGroups()}>
               {(repoGroup) => {
-                const isExpanded = () => !!expandedRepos[repoGroup.repoFullName];
+                const isExpanded = () => !!viewState.expandedRepos.issues[repoGroup.repoFullName];
 
                 const roleSummary = createMemo(() => {
                   const counts: Record<string, number> = {};
@@ -252,7 +251,7 @@ export default function IssuesTab(props: IssuesTabProps) {
                 return (
                   <div class="bg-base-100">
                     <button
-                      onClick={() => toggleRepo(repoGroup.repoFullName)}
+                      onClick={() => toggleExpandedRepo("issues", repoGroup.repoFullName)}
                       aria-expanded={isExpanded()}
                       class="w-full flex items-center gap-2 px-4 py-2.5 text-left text-sm font-semibold text-base-content bg-base-200/60 border-y border-base-300 hover:bg-base-200 transition-colors"
                     >

src/app/components/dashboard/PullRequestsTab.tsx

@@ -1,9 +1,9 @@
 import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
-import { createStore } from "solid-js/store";
 import { config } from "../../stores/config";
-import { viewState, setSortPreference, ignoreItem, unignoreItem, setTabFilter, resetTabFilter, resetAllTabFilters, type PullRequestFilterField } from "../../stores/view";
+import { viewState, setSortPreference, ignoreItem, unignoreItem, setTabFilter, resetTabFilter, resetAllTabFilters, toggleExpandedRepo, setAllExpanded, pruneExpandedRepos, type PullRequestFilterField } from "../../stores/view";
 import type { PullRequest } from "../../services/api";
 import { deriveInvolvementRoles, prSizeCategory } from "../../lib/format";
+import ExpandCollapseButtons from "../shared/ExpandCollapseButtons";
 import ItemRow from "./ItemRow";
 import StatusDot from "../shared/StatusDot";
 import IgnoreBadge from "./IgnoreBadge";
@@ -119,11 +119,6 @@ const sortOptions: SortOption[] = [
 
 export default function PullRequestsTab(props: PullRequestsTabProps) {
   const [page, setPage] = createSignal(0);
-  const [expandedRepos, setExpandedRepos] = createStore<Record<string, boolean>>({});
-
-  function toggleRepo(repoFullName: string) {
-    setExpandedRepos(repoFullName, (v) => !v);
-  }
 
   const sortPref = createMemo(() => {
     const pref = viewState.sortPreferences["pullRequests"];
@@ -230,14 +225,14 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
     if (page() > max) setPage(max);
   });
 
-  // Auto-expand first group on initial load
-  let hasAutoExpanded = false;
+  const activeRepoNames = createMemo(() =>
+    [...new Set(props.pullRequests.map((pr) => pr.repoFullName))]
+  );
+
   createEffect(() => {
-    const groups = pageGroups();
-    if (!hasAutoExpanded && groups.length > 0) {
-      hasAutoExpanded = true;
-      setExpandedRepos(groups[0].repoFullName, true);
-    }
+    const names = activeRepoNames();
+    if (names.length === 0) return;
+    pruneExpandedRepos("pullRequests", names);
   });
 
   function handleSort(field: string, direction: "asc" | "desc") {
@@ -282,6 +277,10 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
           }}
         />
         <div class="flex-1" />
+        <ExpandCollapseButtons
+          onExpandAll={() => setAllExpanded("pullRequests", repoGroups().map((g) => g.repoFullName), true)}
+          onCollapseAll={() => setAllExpanded("pullRequests", repoGroups().map((g) => g.repoFullName), false)}
+        />
         <IgnoreBadge
           items={viewState.ignoredItems.filter((i) => i.type === "pullRequest")}
           onUnignore={unignoreItem}
@@ -323,7 +322,7 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
           <div class="divide-y divide-base-300">
             <For each={pageGroups()}>
               {(repoGroup) => {
-                const isExpanded = () => !!expandedRepos[repoGroup.repoFullName];
+                const isExpanded = () => !!viewState.expandedRepos.pullRequests[repoGroup.repoFullName];
 
                 const summaryMeta = createMemo(() => {
                   const checks = { success: 0, failure: 0, pending: 0, conflict: 0 };
@@ -354,7 +353,7 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
                 return (
                   <div class="bg-base-100">
                     <button
-                      onClick={() => toggleRepo(repoGroup.repoFullName)}
+                      onClick={() => toggleExpandedRepo("pullRequests", repoGroup.repoFullName)}
                       aria-expanded={isExpanded()}
                       class="w-full flex items-center gap-2 px-4 py-2.5 text-left text-sm font-semibold text-base-content bg-base-200/60 border-y border-base-300 hover:bg-base-200 transition-colors"
                     >

tests/components/ActionsTab.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from "@solidjs/testing-library";
 import userEvent from "@testing-library/user-event";
 import ActionsTab from "../../src/app/components/dashboard/ActionsTab";
 import * as viewStore from "../../src/app/stores/view";
+import { viewState } from "../../src/app/stores/view";
 import { makeWorkflowRun, resetViewStore } from "../helpers/index";
 
 beforeEach(() => {
@@ -295,4 +296,110 @@ describe("ActionsTab", () => {
     screen.getByRole("checkbox");
     screen.getByText("Show PR runs");
   });
+
+  it("Expand all button expands all repo groups", async () => {
+    const user = userEvent.setup();
+    const runs = [
+      makeWorkflowRun({ repoFullName: "owner/repo-a", workflowId: 1, name: "CI-A", displayTitle: "run-a" }),
+      makeWorkflowRun({ repoFullName: "owner/repo-b", workflowId: 2, name: "CI-B", displayTitle: "run-b" }),
+    ];
+    render(() => <ActionsTab workflowRuns={runs} />);
+
+    // Both groups collapsed by default
+    expect(screen.queryByText("run-a")).toBeNull();
+    expect(screen.queryByText("run-b")).toBeNull();
+
+    await user.click(screen.getByRole("button", { name: /Expand all/i }));
+
+    // After expand all, workflow names visible (repos expanded)
+    expect(screen.getAllByText("CI-A").length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText("CI-B").length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("Collapse all button collapses all repo groups", async () => {
+    const user = userEvent.setup();
+    const runs = [
+      makeWorkflowRun({ repoFullName: "owner/repo-a", workflowId: 1, name: "CI-A" }),
+      makeWorkflowRun({ repoFullName: "owner/repo-b", workflowId: 2, name: "CI-B" }),
+    ];
+    render(() => <ActionsTab workflowRuns={runs} />);
+
+    // Expand all first
+    await user.click(screen.getByRole("button", { name: /Expand all/i }));
+    expect(screen.getAllByText("CI-A").length).toBeGreaterThanOrEqual(1);
+
+    // Collapse all
+    await user.click(screen.getByRole("button", { name: /Collapse all/i }));
+
+    // Repo groups collapsed — workflow names hidden
+    expect(screen.queryByText("CI-A")).toBeNull();
+    expect(screen.queryByText("CI-B")).toBeNull();
+  });
+
+  it("workflow card expansion is independent of repo-level expand/collapse all", async () => {
+    const user = userEvent.setup();
+    const runs = [
+      makeWorkflowRun({ repoFullName: "owner/repo", workflowId: 1, name: "CI", displayTitle: "my-unique-run" }),
+    ];
+    render(() => <ActionsTab workflowRuns={runs} />);
+
+    // Expand repo
+    await user.click(screen.getByRole("button", { name: /Expand all/i }));
+    // Expand workflow card
+    const cards = screen.getAllByText("CI");
+    await user.click(cards[0]);
+    // Run row now visible
+    screen.getByText("my-unique-run");
+
+    // Collapse all repos, then expand again
+    await user.click(screen.getByRole("button", { name: /Collapse all/i }));
+    await user.click(screen.getByRole("button", { name: /Expand all/i }));
+
+    // Workflow card expansion is local state — it resets when repo collapses/re-renders
+    // The key assertion: repo expand/collapse does not affect workflow-level state in viewState
+    // (workflow state is local, not persisted)
+    expect(viewState.expandedRepos.actions["owner/repo"]).toBe(true);
+  });
+
+  it("expanded repo state persists in viewState", async () => {
+    const user = userEvent.setup();
+    const runs = [
+      makeWorkflowRun({ repoFullName: "owner/repo", workflowId: 1, name: "CI" }),
+    ];
+    render(() => <ActionsTab workflowRuns={runs} />);
+
+    // Initially not expanded
+    expect(viewState.expandedRepos.actions["owner/repo"]).toBeFalsy();
+
+    // Click repo header to expand
+    await user.click(screen.getByText("owner/repo"));
+
+    // viewState updated
+    expect(viewState.expandedRepos.actions["owner/repo"]).toBe(true);
+
+    // Click again to collapse
+    await user.click(screen.getByText("owner/repo"));
+    expect(viewState.expandedRepos.actions["owner/repo"]).toBeFalsy();
+  });
+
+  it("expanded state survives component unmount and remount", async () => {
+    const user = userEvent.setup();
+    const runs = [
+      makeWorkflowRun({ repoFullName: "owner/repo", workflowId: 1, name: "CI", displayTitle: "unique-title" }),
+    ];
+
+    // First render — expand repo
+    const { unmount } = render(() => <ActionsTab workflowRuns={runs} />);
+    await user.click(screen.getByText("owner/repo"));
+    expect(viewState.expandedRepos.actions["owner/repo"]).toBe(true);
+
+    // Unmount
+    unmount();
+
+    // Re-render — viewState persists so repo should still be expanded
+    render(() => <ActionsTab workflowRuns={runs} />);
+    // Workflow name visible means the repo group is expanded
+    expect(screen.getAllByText("CI").length).toBeGreaterThanOrEqual(1);
+    expect(viewState.expandedRepos.actions["owner/repo"]).toBe(true);
+  });
 });