@flamingo-stack/openframe-frontend-core 0.0.389 → 0.0.390-snapshot.20260709094308

package/src/components/features/time-tracker/time-tracker-header-button.tsx

@@ -1,8 +1,14 @@
 'use client'
 
 import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { useEffect, useRef } from 'react'
 import { cn } from '../../../utils/cn'
 import { ClockHistoryIcon } from '../../icons-v2-generated/date-and-time/clock-history-icon'
+import {
+  type AppLayoutDrawerHandle,
+  useAppLayoutDrawerContainer,
+  useAppLayoutDrawerCoordination,
+} from '../../navigation/app-layout-context'
 import { HeaderButton } from '../../navigation/header-button'
 import { OVERLAY_BACKDROP_CLASS } from '../../ui/drawer'
 import { TimeTrackerPanel } from './time-tracker-panel'
@@ -19,8 +25,11 @@ export interface TimeTrackerHeaderButtonProps {
  * Header affordance for the time tracker. Renders nothing unless wrapped in a
  * `<TimeTrackerProvider>`. The trigger is the standard `HeaderButton`; when a
  * session is active it also shows the live elapsed time. The popup is a Radix
- * Popover anchored under the button (not a modal/drawer), backed by the same
- * dim overlay as the Drawer so all panels darken the page identically.
+ * Popover anchored under the button (not a modal/drawer). Inside AppLayout the
+ * dim backdrop covers only the main content area (header and sidebar stay
+ * interactive) and the popup joins the layout's panel coordination — opening
+ * it closes any open in-layout drawer and vice versa. Outside AppLayout it
+ * falls back to a viewport-wide backdrop.
  */
 export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHeaderButtonProps) {
   const ctx = useOptionalTimeTracker()
@@ -29,10 +38,38 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
     runningSince: ctx?.runningSince,
     accumulatedMs: ctx?.accumulatedMs,
   })
+  const layoutContainer = useAppLayoutDrawerContainer()
+  const coordination = useAppLayoutDrawerCoordination()
+
+  const isOpen = ctx?.isOpen ?? false
+  const isOpenRef = useRef(isOpen)
+  isOpenRef.current = isOpen
+  const closeRef = useRef(ctx?.close)
+  closeRef.current = ctx?.close
+  // Stable handle: the same object must be registered AND passed as `self`
+  // to notifyDrawerDidOpen so the coordinator can skip it when closing the
+  // other panels.
+  const selfHandleRef = useRef<AppLayoutDrawerHandle | null>(null)
+  if (!selfHandleRef.current) {
+    selfHandleRef.current = {
+      close: () => {
+        if (isOpenRef.current) closeRef.current?.()
+      },
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) coordination?.notifyDrawerDidOpen(selfHandleRef.current ?? undefined)
+  }, [isOpen, coordination])
+
+  useEffect(() => {
+    if (!selfHandleRef.current) return
+    return coordination?.registerDrawer(selfHandleRef.current)
+  }, [coordination])
 
   if (!ctx) return null
 
-  const { isOpen, open, close, status } = ctx
+  const { open, close, status } = ctx
   const isPaused = status === 'paused'
   const isActive = status === 'tracking' || isPaused
 
@@ -72,13 +109,16 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
       </PopoverPrimitive.Trigger>
       {/* Popovers have no built-in overlay — portal a dim backdrop behind the
           panel. Clicks land on it (outside Content), so Radix still closes the
-          popover. Own Portal: Radix's Portal slots a single child. */}
-      <PopoverPrimitive.Portal>
+          popover. Own Portal: Radix's Portal slots a single child. Inside
+          AppLayout the backdrop portals into the main-area container (absolute,
+          AppLayoutDrawer-overlay tier) so header/sidebar stay undimmed and
+          interactive; standalone it dims the whole viewport. */}
+      <PopoverPrimitive.Portal container={layoutContainer ?? undefined}>
         <div
           aria-hidden="true"
           data-state={isOpen ? 'open' : 'closed'}
           className={cn(
-            'fixed inset-0 z-[1299]',
+            layoutContainer ? 'absolute inset-0 z-[102]' : 'fixed inset-0 z-[1299]',
             OVERLAY_BACKDROP_CLASS,
             'data-[state=open]:animate-in data-[state=open]:fade-in-0',
             'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',

package/src/components/navigation/app-header.tsx

@@ -251,16 +251,20 @@ function NotificationsHeaderButton({
   return (
     <HeaderButton
       icon={
-        <div className="relative w-4 h-4 md:w-6 md:h-6">
-          <BellIcon className="w-full h-full" />
-          {hasUnread && (
-            <span
-              className="absolute top-0 right-0 bg-ods-warning rounded-full w-1.5 h-1.5 md:w-2 md:h-2"
-            />
-          )}
-        </div>
+        isActive ? (
+          <XmarkIcon className="w-4 h-4 md:w-6 md:h-6" />
+        ) : (
+          <div className="relative w-4 h-4 md:w-6 md:h-6">
+            <BellIcon className="w-full h-full" />
+            {hasUnread && (
+              <span
+                className="absolute top-0 right-0 bg-ods-warning rounded-full w-1.5 h-1.5 md:w-2 md:h-2"
+              />
+            )}
+          </div>
+        )
       }
-      aria-label="Notifications"
+      aria-label={isActive ? 'Close notifications' : 'Notifications'}
       onClick={onClick}
       isActive={isActive}
       disabled={disabled || !onClick}

package/src/components/navigation/app-layout-context.ts

@@ -0,0 +1,46 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+
+/**
+ * Container element that wraps `<main>` and serves as the portal target for
+ * `AppLayoutDrawer`. Drawers rendered into this container sit on top of the
+ * main content area only — the sidebar and header remain visible and
+ * interactive. Null when AppLayout hasn't mounted (or when used outside of it).
+ *
+ * Lives in its own module (not app-layout.tsx) so in-layout panels
+ * (AppLayoutDrawer, NotificationDrawer, TimeTrackerHeaderButton) can consume
+ * these contexts without importing AppLayout itself — AppLayout renders those
+ * panels, so importing it back would create a module cycle.
+ */
+export const AppLayoutDrawerContainerContext = createContext<HTMLElement | null>(null)
+
+export function useAppLayoutDrawerContainer(): HTMLElement | null {
+  return useContext(AppLayoutDrawerContainerContext)
+}
+
+/**
+ * Coordination between AppLayout's in-layout panels (`AppLayoutDrawer`, the
+ * time-tracker popup) and the mobile burger menu. At most ONE of them may be
+ * open at a time — each dims the main area, so stacking them reads as broken:
+ *   - a panel that opens calls `notifyDrawerDidOpen(self)` so the layout
+ *     closes the burger menu AND every other registered panel;
+ *   - each panel registers a close handle so opening the menu via the burger
+ *     button (or another panel) closes it. Null outside of AppLayout.
+ */
+export interface AppLayoutDrawerHandle {
+  close: () => void
+}
+
+export interface AppLayoutDrawerCoordination {
+  /** `self` is skipped when closing the other registered panels. */
+  notifyDrawerDidOpen: (self?: AppLayoutDrawerHandle) => void
+  /** Returns an unregister cleanup. */
+  registerDrawer: (handle: AppLayoutDrawerHandle) => () => void
+}
+
+export const AppLayoutDrawerCoordinationContext = createContext<AppLayoutDrawerCoordination | null>(null)
+
+export function useAppLayoutDrawerCoordination(): AppLayoutDrawerCoordination | null {
+  return useContext(AppLayoutDrawerCoordinationContext)
+}

package/src/components/navigation/app-layout-drawer.tsx

@@ -14,7 +14,11 @@ import {
   OVERLAY_BACKDROP_CLASS,
   type DrawerSide,
 } from "../ui/drawer"
-import { useAppLayoutDrawerContainer, useAppLayoutDrawerCoordination } from "./app-layout"
+import {
+  type AppLayoutDrawerHandle,
+  useAppLayoutDrawerContainer,
+  useAppLayoutDrawerCoordination,
+} from "./app-layout-context"
 
 /**
  * AppLayoutDrawer is a Drawer variant that renders **inside** AppLayout's main
@@ -68,26 +72,32 @@ const AppLayoutDrawerRoot = ({
     [isControlled, onOpenChange],
   )
 
-  // Coordinate with AppLayout's mobile burger menu (the drawer covers it):
-  // opening the drawer closes the menu, and opening the menu closes the
-  // drawer via the registered close handle. Refs keep the registration
-  // effect independent of render-to-render identity changes.
+  // Coordinate with AppLayout's other in-layout panels and the mobile burger
+  // menu: opening this drawer closes them, and opening any of them closes
+  // this drawer via the registered close handle. Refs keep the handle
+  // identity stable across renders — the same object must be registered AND
+  // passed as `self` so the coordinator can skip it when closing the rest.
   const coordination = useAppLayoutDrawerCoordination()
   const openRef = React.useRef(open)
   openRef.current = open
   const handleOpenChangeRef = React.useRef(handleOpenChange)
   handleOpenChangeRef.current = handleOpenChange
+  const selfHandleRef = React.useRef<AppLayoutDrawerHandle | null>(null)
+  if (!selfHandleRef.current) {
+    selfHandleRef.current = {
+      close: () => {
+        if (openRef.current) handleOpenChangeRef.current(false)
+      },
+    }
+  }
 
   React.useEffect(() => {
-    if (open) coordination?.notifyDrawerDidOpen()
+    if (open) coordination?.notifyDrawerDidOpen(selfHandleRef.current ?? undefined)
   }, [open, coordination])
 
   React.useEffect(() => {
-    return coordination?.registerDrawer({
-      close: () => {
-        if (openRef.current) handleOpenChangeRef.current(false)
-      },
-    })
+    if (!selfHandleRef.current) return
+    return coordination?.registerDrawer(selfHandleRef.current)
   }, [coordination])
 
   return (

package/src/components/navigation/app-layout.tsx

@@ -1,50 +1,21 @@
 'use client'
 
-import { createContext, Suspense, useCallback, useContext, useMemo, useRef, useState } from 'react'
+import { Suspense, useCallback, useMemo, useRef, useState } from 'react'
 import { NavigationSidebarConfig } from '../../types/navigation'
 import { cn } from '../../utils'
 import { NotificationDrawer } from '../features/notifications/notification-drawer'
 import { AppHeader, AppHeaderProps } from './app-header'
+import {
+  AppLayoutDrawerContainerContext,
+  type AppLayoutDrawerCoordination,
+  AppLayoutDrawerCoordinationContext,
+  type AppLayoutDrawerHandle,
+} from './app-layout-context'
 import { MobileBurgerMenu, MobileBurgerMenuProps } from './mobile-burger-menu'
 import { NavigationSidebar } from './navigation-sidebar'
 
-/**
- * Container element that wraps `<main>` and serves as the portal target for
- * `AppLayoutDrawer`. Drawers rendered into this container sit on top of the
- * main content area only — the sidebar and header remain visible and
- * interactive. Null when AppLayout hasn't mounted (or when used outside of it).
- */
-const AppLayoutDrawerContainerContext = createContext<HTMLElement | null>(null)
-
-export function useAppLayoutDrawerContainer(): HTMLElement | null {
-  return useContext(AppLayoutDrawerContainerContext)
-}
-
-/**
- * Two-way coordination between AppLayout's mobile burger menu and in-layout
- * drawers (`AppLayoutDrawer`), which render above the menu (z-[103] vs
- * z-[101]) — the two must never be open at the same time:
- *   - a drawer that opens calls `notifyDrawerDidOpen` so the layout closes
- *     the menu (otherwise it would resurface once the drawer closes);
- *   - each drawer registers a close handle so opening the menu via the
- *     burger button closes any open drawer instead of hiding the menu
- *     underneath it. Null outside of AppLayout.
- */
-export interface AppLayoutDrawerHandle {
-  close: () => void
-}
-
-interface AppLayoutDrawerCoordination {
-  notifyDrawerDidOpen: () => void
-  /** Returns an unregister cleanup. */
-  registerDrawer: (handle: AppLayoutDrawerHandle) => () => void
-}
-
-const AppLayoutDrawerCoordinationContext = createContext<AppLayoutDrawerCoordination | null>(null)
-
-export function useAppLayoutDrawerCoordination(): AppLayoutDrawerCoordination | null {
-  return useContext(AppLayoutDrawerCoordinationContext)
-}
+export { useAppLayoutDrawerContainer, useAppLayoutDrawerCoordination } from './app-layout-context'
+export type { AppLayoutDrawerHandle } from './app-layout-context'
 
 export interface AppLayoutProps {
   children: React.ReactNode
@@ -113,7 +84,14 @@ export function AppLayout({
   }, [])
 
   const drawerCoordination = useMemo<AppLayoutDrawerCoordination>(() => ({
-    notifyDrawerDidOpen: () => setMobileMenuOpen(false),
+    notifyDrawerDidOpen: (self) => {
+      setMobileMenuOpen(false)
+      // Only one in-layout panel may be open at a time — each dims the main
+      // area, so stacking them reads as broken.
+      for (const handle of drawerHandlesRef.current) {
+        if (handle !== self) handle.close()
+      }
+    },
     registerDrawer: (handle) => {
       drawerHandlesRef.current.add(handle)
       return () => drawerHandlesRef.current.delete(handle)