feat(ui): adds ExpandCollapseButtons shared component

Author: wgordon17

src/app/components/shared/ExpandCollapseButtons.tsx

@@ -0,0 +1,53 @@
+export interface ExpandCollapseButtonsProps {
+  onExpandAll: () => void;
+  onCollapseAll: () => void;
+}
+
+export default function ExpandCollapseButtons(props: ExpandCollapseButtonsProps) {
+  return (
+    <div class="flex items-center gap-1">
+      <button
+        class="btn btn-ghost btn-xs"
+        title="Expand all"
+        aria-label="Expand all"
+        onClick={() => props.onExpandAll()}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width={1.5}
+          stroke="currentColor"
+          class="h-4 w-4"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5"
+          />
+        </svg>
+      </button>
+      <button
+        class="btn btn-ghost btn-xs"
+        title="Collapse all"
+        aria-label="Collapse all"
+        onClick={() => props.onCollapseAll()}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width={1.5}
+          stroke="currentColor"
+          class="h-4 w-4"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m4.5 18.75 7.5-7.5 7.5 7.5m-15-6 7.5-7.5 7.5 7.5"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}

tests/components/ExpandCollapseButtons.test.tsx

@@ -0,0 +1,25 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@solidjs/testing-library";
+import ExpandCollapseButtons from "../../src/app/components/shared/ExpandCollapseButtons";
+
+describe("ExpandCollapseButtons", () => {
+  it("renders both buttons with correct aria-labels", () => {
+    render(() => <ExpandCollapseButtons onExpandAll={() => {}} onCollapseAll={() => {}} />);
+    expect(screen.getByRole("button", { name: "Expand all" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Collapse all" })).toBeTruthy();
+  });
+
+  it("calls onExpandAll when expand button is clicked", () => {
+    const onExpandAll = vi.fn();
+    render(() => <ExpandCollapseButtons onExpandAll={onExpandAll} onCollapseAll={() => {}} />);
+    fireEvent.click(screen.getByRole("button", { name: "Expand all" }));
+    expect(onExpandAll).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onCollapseAll when collapse button is clicked", () => {
+    const onCollapseAll = vi.fn();
+    render(() => <ExpandCollapseButtons onExpandAll={() => {}} onCollapseAll={onCollapseAll} />);
+    fireEvent.click(screen.getByRole("button", { name: "Collapse all" }));
+    expect(onCollapseAll).toHaveBeenCalledTimes(1);
+  });
+});