feat: add image filters, update some logic and workflow

tests/unit/components/layout/SettingsGrid.test.ts

@@ -1,12 +1,48 @@
 import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
 import { describe, expect, it } from "vitest";
 import SettingsGridTest from "./SettingsGridTest.svelte";
 
 describe("SettingsGrid.svelte", () => {
-  it("should render without crashing", () => {
-    render(SettingsGridTest);
-    expect(screen.getByTestId("item1")).toBeInTheDocument();
-    expect(screen.getByTestId("item2")).toBeInTheDocument();
-    expect(screen.getByTestId("item3")).toBeInTheDocument();
+  describe("initial state", () => {
+    it("should render with collapsed state by default", () => {
+      render(SettingsGridTest);
+      expect(screen.queryByText("Item 1")).not.toBeInTheDocument();
+      expect(screen.queryByText("Item 2")).not.toBeInTheDocument();
+      expect(screen.queryByText("Item 3")).not.toBeInTheDocument();
+    });
+
+    it("should display the label", () => {
+      render(SettingsGridTest);
+      expect(screen.getByText("Test Grid")).toBeInTheDocument();
+    });
+
+    it("should render expand button", () => {
+      render(SettingsGridTest);
+      const expandButton = screen.getByRole("button", { name: "Expand" });
+      expect(expandButton).toBeInTheDocument();
+    });
+  });
+
+  describe("expand/collapse behavior", () => {
+    it("should show children when expand button is clicked", async () => {
+      const user = userEvent.setup();
+      render(SettingsGridTest);
+      const expandButton = screen.getByRole("button", { name: "Expand" });
+      await user.click(expandButton);
+      expect(screen.getByText("Item 1")).toBeInTheDocument();
+      expect(screen.getByText("Item 2")).toBeInTheDocument();
+      expect(screen.getByText("Item 3")).toBeInTheDocument();
+    });
+
+    it("should hide children when expand button is clicked twice", async () => {
+      const user = userEvent.setup();
+      render(SettingsGridTest);
+      const expandButton = screen.getByRole("button", { name: "Expand" });
+      await user.click(expandButton);
+      expect(screen.getByText("Item 1")).toBeInTheDocument();
+      await user.click(expandButton);
+      expect(screen.queryByText("Item 1")).not.toBeInTheDocument();
+    });
   });
 });

tests/unit/components/layout/SettingsGridTest.svelte

@@ -1,8 +1,9 @@
 <script>
   import SettingsGrid from "$components/layout/SettingsGrid.svelte";
+  import Icon from "~icons/lucide/settings";
 </script>
 
-<SettingsGrid>
+<SettingsGrid label="Test Grid" icon={Icon}>
   <div data-testid="item1">Item 1</div>
   <div data-testid="item2">Item 2</div>
   <div data-testid="item3">Item 3</div>