[codex] Redesign planner sidebar someday sections (#1817)

* feat(web): redesign planner sidebar

* chore(web): trim sidebar redesign diff

* chore: revert skills lock update

* test(web): remove temporary sidebar assertions

* test(web): stabilize sidebar ci checks

* fix(web): address someday sidebar review

Author: Uarmagan

e2e/someday/delete-someday-event-mouse.spec.ts

@@ -5,6 +5,7 @@ import {
   expectSomedayEventMissing,
   expectSomedayEventVisible,
   fillTitleAndSaveEventForm,
+  openSomedayEventForEditingWithMouse,
   openSomedayEventFormWithMouse,
   prepareCalendarPage,
 } from "../utils/event-test-utils";
@@ -21,7 +22,7 @@ test("should delete a someday event using mouse interaction", async ({
   await fillTitleAndSaveEventForm(page, title);
   await expectSomedayEventVisible(page, title);
 
-  await page.locator("#sidebar").getByRole("button", { name: title }).click();
+  await openSomedayEventForEditingWithMouse(page, title);
   await deleteEventWithMouse(page);
 
   await expectSomedayEventMissing(page, title);

e2e/someday/update-someday-event-mouse.spec.ts

@@ -4,6 +4,7 @@ import {
   expectSomedayEventMissing,
   expectSomedayEventVisible,
   fillTitleAndSaveEventForm,
+  openSomedayEventForEditingWithMouse,
   openSomedayEventFormWithMouse,
   prepareCalendarPage,
   updateEventTitle,
@@ -21,7 +22,7 @@ test("should update a someday event using mouse interaction", async ({
   await fillTitleAndSaveEventForm(page, title);
   await expectSomedayEventVisible(page, title);
 
-  await page.locator("#sidebar").getByRole("button", { name: title }).click();
+  await openSomedayEventForEditingWithMouse(page, title);
 
   const updatedTitle = updateEventTitle("Someday Event");
   await fillTitleAndSaveEventForm(page, updatedTitle);

e2e/utils/event-test-utils.ts

@@ -315,7 +315,8 @@ export const openSomedayEventFormWithMouse = async (
   section: SomedaySection,
 ) => {
   await ensureSidebarOpen(page);
-  const addButtonName = section === "week" ? "Add to week" : "Add to month";
+  const addButtonName =
+    section === "week" ? "Add item to week" : "Add item to month";
   await page
     .locator("#sidebar")
     .getByRole("button", { name: addButtonName })
@@ -421,6 +422,24 @@ export const openEventForEditingWithMouse = async (
     : new Error(`Unable to open event "${eventTitle}" for mouse editing.`);
 };
 
+export const openSomedayEventForEditingWithMouse = async (
+  page: Page,
+  eventTitle: string,
+) => {
+  await ensureSidebarOpen(page);
+
+  const titleInput = getFormTitleInput(page);
+  const eventButton = page
+    .locator("#sidebar")
+    .getByRole("button", { name: eventTitle })
+    .last();
+
+  await eventButton.waitFor({ state: "visible", timeout: FORM_TIMEOUT });
+  await eventButton.scrollIntoViewIfNeeded();
+  await eventButton.click();
+  await expect(titleInput).toHaveValue(eventTitle, { timeout: FORM_TIMEOUT });
+};
+
 export const deleteEventWithMouse = async (page: Page) => {
   const form = page.getByRole("form");
   await expect(form).toBeVisible();

packages/web/src/auth/google/hooks/useConnectGoogle/useConnectGoogle.types.ts

@@ -4,6 +4,12 @@ export type GoogleUiState = "checking" | "repairing" | GoogleConnectionState;
 
 export type CommandActionIcon = "CloudArrowUpIcon";
 
+export type GoogleAccountSummaryStatus = {
+  label: string;
+  isHealthy: boolean;
+  isLoading: boolean;
+} | null;
+
 export type GoogleUiConfig = {
   commandAction: {
     label: string;

packages/web/src/auth/google/hooks/useConnectGoogle/useConnectGoogle.util.test.ts

@@ -0,0 +1,44 @@
+import { getGoogleAccountSummaryStatus } from "./useConnectGoogle.util";
+import { describe, expect, it } from "bun:test";
+
+describe("getGoogleAccountSummaryStatus", () => {
+  it("returns no account summary status when Google is not connected", () => {
+    expect(getGoogleAccountSummaryStatus("NOT_CONNECTED")).toBeNull();
+  });
+
+  it("returns healthy copy for connected Google", () => {
+    expect(getGoogleAccountSummaryStatus("HEALTHY")).toEqual({
+      isHealthy: true,
+      isLoading: false,
+      label: "Synced with Google",
+    });
+  });
+
+  it.each([
+    "IMPORTING",
+    "repairing",
+  ] as const)("returns syncing copy for %s", (state) => {
+    expect(getGoogleAccountSummaryStatus(state)).toEqual({
+      isHealthy: false,
+      isLoading: false,
+      label: "Syncing...",
+    });
+  });
+
+  it("marks checking as loading", () => {
+    expect(getGoogleAccountSummaryStatus("checking")).toEqual({
+      isHealthy: false,
+      isLoading: true,
+      label: "Syncing...",
+    });
+  });
+
+  it("separates reconnect and repair copy", () => {
+    expect(getGoogleAccountSummaryStatus("RECONNECT_REQUIRED")?.label).toBe(
+      "Reconnect needed",
+    );
+    expect(getGoogleAccountSummaryStatus("ATTENTION")?.label).toBe(
+      "Repair needed",
+    );
+  });
+});

packages/web/src/auth/google/hooks/useConnectGoogle/useConnectGoogle.util.ts

@@ -1,11 +1,13 @@
 import { theme } from "@web/common/styles/theme";
 import {
   type CommandActionIcon,
+  type GoogleAccountSummaryStatus,
   type GoogleUiConfig,
   type GoogleUiState,
 } from "./useConnectGoogle.types";
 
 const COMMAND_ICON: CommandActionIcon = "CloudArrowUpIcon";
+const SYNCING_ACCOUNT_SUMMARY_LABEL = "Syncing...";
 type RepairDialog = NonNullable<GoogleUiConfig["sidebarStatus"]["dialog"]>;
 
 const buildRepairDialog = (onRepairGoogle: () => void): RepairDialog => ({
@@ -118,3 +120,43 @@ export const getGoogleConnectionConfig = (
       };
   }
 };
+
+export const getGoogleAccountSummaryStatus = (
+  state: GoogleUiState,
+): GoogleAccountSummaryStatus => {
+  switch (state) {
+    case "HEALTHY":
+      return {
+        isHealthy: true,
+        isLoading: false,
+        label: "Synced with Google",
+      };
+    case "IMPORTING":
+    case "repairing":
+      return {
+        isHealthy: false,
+        isLoading: false,
+        label: SYNCING_ACCOUNT_SUMMARY_LABEL,
+      };
+    case "checking":
+      return {
+        isHealthy: false,
+        isLoading: true,
+        label: SYNCING_ACCOUNT_SUMMARY_LABEL,
+      };
+    case "RECONNECT_REQUIRED":
+      return {
+        isHealthy: false,
+        isLoading: false,
+        label: "Reconnect needed",
+      };
+    case "ATTENTION":
+      return {
+        isHealthy: false,
+        isLoading: false,
+        label: "Repair needed",
+      };
+    case "NOT_CONNECTED":
+      return null;
+  }
+};

packages/web/src/components/PlannerSidebar/PlannerAccountSummary/PlannerAccountSummary.test.tsx

@@ -1,16 +1,25 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { type GoogleUiState } from "@web/auth/google/hooks/useConnectGoogle/useConnectGoogle.types";
 import { beforeEach, describe, expect, it, mock } from "bun:test";
 
 const mockOpenModal = mock();
 let mockEmail: string | undefined;
+let mockGoogleState: GoogleUiState = "NOT_CONNECTED";
+const mockUseConnectGoogle = mock(() => ({
+  state: mockGoogleState,
+}));
 
 mock.module("@web/auth/compass/user/hooks/useUser", () => ({
   useUser: () => ({
     email: mockEmail,
   }),
 }));
 
+mock.module("@web/auth/google/hooks/useConnectGoogle/useConnectGoogle", () => ({
+  useConnectGoogle: mockUseConnectGoogle,
+}));
+
 mock.module("@web/components/AuthModal/hooks/useAuthModal", () => ({
   useAuthModal: () => ({
     openModal: mockOpenModal,
@@ -19,6 +28,7 @@ mock.module("@web/components/AuthModal/hooks/useAuthModal", () => ({
 
 mock.module("@phosphor-icons/react", () => ({
   InfoIcon: () => <span aria-hidden="true">info</span>,
+  PlusIcon: () => <span aria-hidden="true">plus</span>,
 }));
 
 const { PlannerAccountSummary } =
@@ -27,7 +37,9 @@ const { PlannerAccountSummary } =
 describe("PlannerAccountSummary", () => {
   beforeEach(() => {
     mockEmail = undefined;
+    mockGoogleState = "NOT_CONNECTED";
     mockOpenModal.mockClear();
+    mockUseConnectGoogle.mockClear();
   });
 
   it("shows a sign up prompt for temporary accounts", async () => {
@@ -44,6 +56,7 @@ describe("PlannerAccountSummary", () => {
     expect(screen.getByText("Temporary account")).toBeTruthy();
     expect(screen.getByText("Sign up")).toBeTruthy();
     expect(mockOpenModal).toHaveBeenCalledWith("signUp");
+    expect(mockUseConnectGoogle).not.toHaveBeenCalled();
   });
 
   it("shows a plain account identity for authenticated accounts", () => {
@@ -52,7 +65,73 @@ describe("PlannerAccountSummary", () => {
     render(<PlannerAccountSummary />);
 
     expect(screen.getByText("ugur@example.com")).toBeTruthy();
-    expect(screen.queryByText("Changes saved")).toBeNull();
     expect(screen.queryByRole("button")).toBeNull();
+    expect(mockUseConnectGoogle).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows the Google sync status without a status landmark when synced", () => {
+    mockEmail = "ugur@example.com";
+    mockGoogleState = "HEALTHY";
+
+    render(<PlannerAccountSummary />);
+
+    expect(screen.getByText("Synced with Google")).toBeTruthy();
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+
+  it("shows a syncing label while Google is importing", () => {
+    mockEmail = "ugur@example.com";
+    mockGoogleState = "IMPORTING";
+
+    render(<PlannerAccountSummary />);
+
+    expect(screen.getByText("Syncing...")).toBeTruthy();
+  });
+
+  it("shows the syncing label while Google repair is running", () => {
+    mockEmail = "ugur@example.com";
+    mockGoogleState = "repairing";
+
+    render(<PlannerAccountSummary />);
+
+    expect(screen.getByText("Syncing...")).toBeTruthy();
+  });
+
+  it("shows syncing copy before Google metadata loads", () => {
+    mockEmail = "ugur@example.com";
+    mockGoogleState = "checking";
+
+    render(<PlannerAccountSummary />);
+
+    expect(screen.getByText("Syncing...")).toBeTruthy();
+  });
+
+  it("shows repair copy when Google sync needs attention", () => {
+    mockEmail = "ugur@example.com";
+    mockGoogleState = "ATTENTION";
+
+    render(<PlannerAccountSummary />);
+
+    expect(screen.getByText("Repair needed")).toBeTruthy();
+    expect(screen.queryByText("Reconnect needed")).toBeNull();
+  });
+
+  it("shows reconnect copy only when Google credentials need reconnecting", () => {
+    mockEmail = "ugur@example.com";
+    mockGoogleState = "RECONNECT_REQUIRED";
+
+    render(<PlannerAccountSummary />);
+
+    expect(screen.getByText("Reconnect needed")).toBeTruthy();
+  });
+
+  it("hides the sync line when Google is not connected", () => {
+    mockEmail = "ugur@example.com";
+    mockGoogleState = "NOT_CONNECTED";
+
+    render(<PlannerAccountSummary />);
+
+    expect(screen.queryByText("Synced with Google")).toBeNull();
+    expect(screen.queryByText("Reconnect needed")).toBeNull();
   });
 });