feat: add image filters, update some logic and workflow

tests/unit/__snapshots__/constants.test.ts.snap

@@ -3,20 +3,26 @@
 exports[`Application Constants Logic > Global Contract (Snapshot) > should match the previous configuration snapshot 1`] = `
 {
   "IMAGE_SETTINGS": {
-    "BRIGHTNESS_MAX": 100,
+    "BRIGHTNESS_DEFAULT": 100,
+    "BRIGHTNESS_DIVIDER": 100,
+    "BRIGHTNESS_MAX": 200,
     "BRIGHTNESS_MIN": 0,
-    "CHROMA_MAX": 300,
-    "CHROMA_MIN": 0,
-    "CONTRAST_MAX": 150,
-    "CONTRAST_MIN": 50,
+    "CONTRAST_DEFAULT": 0,
+    "CONTRAST_MAX": 100,
+    "CONTRAST_MIN": -100,
     "DEFAULT_BACKGROUND_IMAGE": "./backgrounds/b1.jpg",
-    "DEFAULT_BRIGHTNESS": 100,
-    "DEFAULT_CHROMA": 100,
-    "DEFAULT_CONTRAST": 100,
-    "DEFAULT_HUE": 0,
+    "HUE_DEFAULT": 0,
     "HUE_MAX": 360,
     "HUE_MIN": 0,
+    "LUMINANCE_DEFAULT": 0,
+    "LUMINANCE_DIVIDER": 100,
+    "LUMINANCE_MAX": 100,
+    "LUMINANCE_MIN": -100,
     "MAX_FILE_SIZE": 10485760,
+    "SATURATION_DEFAULT": 0,
+    "SATURATION_DIVIDER": 10,
+    "SATURATION_MAX": 50,
+    "SATURATION_MIN": -20,
     "SUPPORTED_FORMATS": [
       "image/jpeg",
       "image/jpg",

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>

tests/unit/states/imageConfig.test.ts

@@ -7,7 +7,7 @@ describe("imageState", () => {
   });
 
   it("should create new instance with default values", () => {
-    expect(imageState.fullImage).toBeNull();
+    expect(imageState.fullImage).toBe("");
     expect(imageState.croppedImage).toBeUndefined();
     expect(imageState.cropRect).toStrictEqual({ left: 0, top: 0, right: 0, bottom: 0 });
   });