navigate to subgoal with one click and moved goalItem summary

playwright/tests/header-ui.spec.ts

@@ -0,0 +1,72 @@
+import { test, expect } from "@playwright/test";
+import { STORAGE_STATE } from "playwright/config/constants";
+
+test.describe("Header component", () => {
+  test.use({ storageState: STORAGE_STATE });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto("http://127.0.0.1:3000/");
+  });
+
+  test("should display the title correctly", async ({ page }) => {
+    await page.getByRole("button", { name: "Goals" }).click();
+    const heading = page.getByRole("heading");
+    await expect(heading).toHaveText("My goals");
+  });
+
+  test("should show search input when search icon is clicked", async ({ page }) => {
+    await page.getByRole("button", { name: "Goals" }).click();
+    const searchIcon = page.getByRole("img", { name: "zinzen search" });
+    await searchIcon.click();
+    const searchInput = page.getByPlaceholder("Search");
+    await expect(searchInput).toBeVisible();
+  });
+
+  test("should open settings dropdown when settings icon is clicked", async ({ page }) => {
+    const settingsIcon = page.getByRole("img", { name: "Settings" });
+    await settingsIcon.click();
+    const settingsDropdown = page.locator(".ant-dropdown");
+    await expect(settingsDropdown).toHaveCSS("display", "block");
+  });
+
+  test("should close settings dropdown when clicked outside", async ({ page }) => {
+    const settingsIcon = page.getByRole("img", { name: "Settings" });
+    await settingsIcon.click();
+    await page.locator("body").click({ position: { x: 0, y: 0 } });
+    const settingsDropdown = page.locator(".ant-dropdown");
+    await expect(settingsDropdown).toHaveCSS("display", "none");
+  });
+
+  test("should toggle dark mode when Switch Mode button is clicked", async ({ page }) => {
+    const settingsIcon = page.getByRole("img", { name: "Settings" });
+    await settingsIcon.click();
+
+    const darkModeSwitch = page.locator("div").filter({ hasText: /^Dark mode$/ });
+    await darkModeSwitch.click();
+    await expect(page.locator(".App-light")).toBeVisible();
+    await expect(page.locator(".App-dark")).not.toBeVisible();
+
+    await settingsIcon.click();
+    await darkModeSwitch.click();
+    await expect(page.locator(".App-light")).not.toBeVisible();
+    await expect(page.locator(".App-dark")).toBeVisible();
+  });
+
+  test("verify header icons visibility on specific pages", async ({ page }) => {
+    const checkHeaderItems = async () => {
+      const settingsIcon = page.getByRole("img", { name: "Settings" });
+      const lightModeIcon = page.getByRole("img", { name: "light mode" });
+      const searchIcon = page.getByRole("img", { name: "zinzen search" });
+
+      await expect(settingsIcon).toBeVisible();
+      await expect(lightModeIcon).toBeVisible();
+      await expect(searchIcon).not.toBeVisible();
+    };
+
+    await page.getByRole("button", { name: "Journal" }).click();
+    await checkHeaderItems();
+
+    await page.getByRole("button", { name: "Schedule" }).click();
+    await checkHeaderItems();
+  });
+});

playwright/userOnboarding.json

@@ -18,7 +18,7 @@
         },
         {
           "name": "darkMode",
-          "value": "off"
+          "value": "on"
         }
       ]
     }

src/components/GoalsComponents/GoalSublist/GoalSublist.scss

@@ -29,6 +29,12 @@
   flex-direction: column;
   justify-content: center;
 
+  .goal-item-summary-wrapper {
+    margin: 10px auto;
+    text-align: center;
+    padding: 0 24px;
+  }
+
   .mygoalsbutton-dark,
   .mygoalsbutton-light {
     display: none;

src/components/GoalsComponents/GoalSublist/GoalSublist.tsx

@@ -25,6 +25,7 @@ import GoalHistory from "./GoalHistory";
 import GoalsAccordion from "../GoalsAccordion";
 
 import "./GoalSublist.scss";
+import GoalItemSummary from "../MyGoal/GoalItemSummary/GoalItemSummary";
 
 export const GoalSublist = () => {
   const { t } = useTranslation();
@@ -86,6 +87,7 @@ export const GoalSublist = () => {
       <div className="sublist-content-container">
         <div className="sublist-content">
           <p className="sublist-title">{parentGoal && t(parentGoal?.title)}</p>
+          {parentGoal && <GoalItemSummary goal={parentGoal} />}
           <div className="sublist-list-container">
             {showAddGoal && <ConfigGoal action="Create" goal={createGoalObjectFromTags({})} />}
             <GoalsList

src/components/GoalsComponents/MyGoal/GoalItemSummary/BudgetSummary.tsx

@@ -0,0 +1,13 @@
+import useBudgetSummaryStore from "@src/hooks/useBudgetSummaryStore";
+import { GoalItem } from "@src/models/GoalItem";
+import React from "react";
+
+const BudgetSummary = ({ goal }: { goal: GoalItem }) => {
+  const { perDaySummary, onDaysSummary, timeConstraintsSummary, perWeekSummary } = useBudgetSummaryStore(goal);
+
+  const summaryParts = [perDaySummary, onDaysSummary, timeConstraintsSummary, perWeekSummary].filter(Boolean);
+
+  return <span>{summaryParts.join(", ")}</span>;
+};
+
+export default BudgetSummary;

src/components/GoalsComponents/MyGoal/GoalItemSummary/GoalItemSummary.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { GoalItem } from "@src/models/GoalItem";
+import BudgetSummary from "./BudgetSummary";
+import GoalSummary from "./GoalSummary";
+
+const GoalItemSummary = ({ goal }: { goal: GoalItem }) => {
+  const isBudget = goal.timeBudget !== undefined;
+
+  return (
+    <span className="goal-item-summary-wrapper">
+      {isBudget ? <BudgetSummary goal={goal} /> : <GoalSummary goal={goal} />}
+    </span>
+  );
+};
+
+export default GoalItemSummary;

src/components/GoalsComponents/MyGoal/GoalItemSummary/GoalSummary.tsx

@@ -0,0 +1,13 @@
+import useGoalSummaryStore from "@src/hooks/useGoalSummaryStore";
+import { GoalItem } from "@src/models/GoalItem";
+import React from "react";
+
+const GoalSummary = ({ goal }: { goal: GoalItem }) => {
+  const { sublistSummary, durationSummary, dueDateSummary, habitSummary } = useGoalSummaryStore(goal);
+
+  const summaryParts = [sublistSummary, durationSummary, dueDateSummary, habitSummary].filter(Boolean);
+
+  return <span>{summaryParts.join(", ")}</span>;
+};
+
+export default GoalSummary;