refactor(web): avoid duplicate sidebar toggle names on narrow close

Hide the header toggle while the narrow in-sidebar close is shown, and
unmount that in-sidebar control as soon as the sidebar starts closing so
collapse transitions do not leave two "Open sidebar" buttons.

Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>

Author: cursoragent

packages/web/src/components/CalendarHeader/CalendarHeader.tsx

@@ -3,9 +3,14 @@ import { type FC } from "react";
 import { reloadLocation } from "@web/common/utils/browser/browser-navigation.util";
 import { ArrowButton } from "@web/components/Button/ArrowButton";
 import { SelectView } from "@web/components/SelectView/SelectView";
+import { useIsNarrowSidebarLayout } from "@web/components/Sidebar/hooks/useIsNarrowSidebarLayout";
 import { useVersionCheck } from "@web/components/Sidebar/SidebarActions/useVersionCheck";
 import { SidebarToggleButton } from "@web/components/Sidebar/SidebarToggleButton";
 import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
+import {
+  selectIsSidebarOpen,
+  useViewStore,
+} from "@web/events/stores/view.store";
 
 interface Props {
   /** Left-aligned heading text (e.g. "June 2026" or "Wednesday, July 1"). */
@@ -38,6 +43,11 @@ export const CalendarHeader: FC<Props> = ({
   showNavigation = true,
 }) => {
   const { isUpdateAvailable } = useVersionCheck();
+  const isSidebarOpen = useViewStore(selectIsSidebarOpen);
+  const isNarrowLayout = useIsNarrowSidebarLayout();
+  // On narrow layouts the open sidebar hosts its own close control; keep a
+  // single "Close sidebar" name in the accessibility tree.
+  const showHeaderSidebarToggle = !isNarrowLayout || !isSidebarOpen;
 
   return (
     <div className="flex h-12 w-full shrink-0 items-center gap-3 text-text-muted">
@@ -80,9 +90,11 @@ export const CalendarHeader: FC<Props> = ({
         ) : null}
       </div>
 
-      <div className="z-2 ml-auto flex shrink-0 items-center pr-5">
-        <SidebarToggleButton />
-      </div>
+      {showHeaderSidebarToggle ? (
+        <div className="z-2 flex shrink-0 items-center pr-5">
+          <SidebarToggleButton />
+        </div>
+      ) : null}
     </div>
   );
 };

packages/web/src/components/Sidebar/SidebarShell.test.tsx

@@ -76,7 +76,7 @@ describe("SidebarShell", () => {
     await user.click(closeButton);
 
     expect(
-      screen.getByRole("button", { name: "Open sidebar" }),
-    ).toBeInTheDocument();
+      screen.queryByRole("button", { name: "Close sidebar" }),
+    ).not.toBeInTheDocument();
   });
 });

packages/web/src/components/Sidebar/SidebarShell.tsx

@@ -1,6 +1,10 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 import { ID_SIDEBAR } from "@web/common/constants/web.constants";
 import { type ShortcutOverlaySection } from "@web/components/Shortcuts/ShortcutOverlay/ShortcutsOverlay";
+import {
+  selectIsSidebarOpen,
+  useViewStore,
+} from "@web/events/stores/view.store";
 import { useIsNarrowSidebarLayout } from "./hooks/useIsNarrowSidebarLayout";
 import { ShortcutsOverlay } from "./ShortcutsOverlay/ShortcutsOverlay";
 import { SidebarActions } from "./SidebarActions/SidebarActions";
@@ -29,6 +33,10 @@ export function SidebarShell({
   ...props
 }: SidebarShellProps) {
   const isNarrowLayout = useIsNarrowSidebarLayout();
+  const isSidebarOpen = useViewStore(selectIsSidebarOpen);
+  // Only while open: during the collapse transition the shell stays mounted,
+  // and a still-rendered toggle would duplicate the header's "Open sidebar".
+  const showSidebarClose = isNarrowLayout && isSidebarOpen;
 
   return (
     <aside
@@ -37,7 +45,7 @@ export function SidebarShell({
       className="relative flex h-full w-full min-w-0 flex-col overflow-hidden bg-surface-panel pt-5 text-text"
       id={ID_SIDEBAR}
     >
-      {isNarrowLayout ? (
+      {showSidebarClose ? (
         <div className="flex shrink-0 items-center justify-end px-5 pb-2">
           <SidebarToggleButton />
         </div>

packages/web/src/components/Sidebar/hooks/useIsNarrowSidebarLayout.ts

@@ -8,12 +8,11 @@ import { SIDEBAR_AUTO_COLLAPSE_BREAKPOINT } from "@web/components/AuthenticatedL
  * control.
  */
 export function useIsNarrowSidebarLayout() {
-  const [isNarrow, setIsNarrow] = useState(() => {
-    if (typeof window === "undefined") return false;
-    return !window.matchMedia(
-      `(min-width: ${SIDEBAR_AUTO_COLLAPSE_BREAKPOINT}px)`,
-    ).matches;
-  });
+  const [isNarrow, setIsNarrow] = useState(
+    () =>
+      !window.matchMedia(`(min-width: ${SIDEBAR_AUTO_COLLAPSE_BREAKPOINT}px)`)
+        .matches,
+  );
 
   useLayoutEffect(() => {
     const query = window.matchMedia(

packages/web/src/views/Life/LifeView.test.tsx

@@ -389,24 +389,21 @@ describe("LifeView", () => {
       name: "Sidebar",
     });
 
-    const closeButtons = screen.getAllByRole("button", {
+    const inSidebarClose = screen.getByRole("button", {
       name: "Close sidebar",
     });
-    const inSidebarClose = closeButtons.find((button) =>
-      sidebar.contains(button),
-    );
-    expect(inSidebarClose).toBeTruthy();
+    expect(sidebar.contains(inSidebarClose)).toBe(true);
 
-    await user.click(inSidebarClose!);
+    await user.click(inSidebarClose);
 
     // Collapse keeps the panel mounted until the width transition ends; the
-    // toggle label flipping off "Close" is the observable close signal in jsdom.
+    // header "Open sidebar" control returning is the observable close signal.
     expect(
       screen.queryByRole("button", { name: "Close sidebar" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.getAllByRole("button", { name: "Open sidebar" }).length,
-    ).toBeGreaterThan(0);
+      screen.getByRole("button", { name: "Open sidebar" }),
+    ).toBeInTheDocument();
   });
 
   it("shows the privacy tooltip on the date of birth label", async () => {