Respect modal keyboard focus and show Now after a calendar scroll

Author: emir-karabeg

apps/sim/platform/AGENTS.md

@@ -30,7 +30,7 @@ Use `ActivityRow` for a first-line glyph or avatar, title/detail and centered tr
 
 Measure the actual scroll viewport with `ScrollArea`, or attach `useScrollEdges` directly to a native or Base UI scroll owner. Use the shared 16px mask only on edges with more content, updating after scroll, resize, input, reset or filtering. Insets establish resting layout; they cannot substitute for an edge fade. Home widgets and notification panels use `--ui-widget-max-size` as a ceiling, not a forced height. Keep the dashboard free to scroll and let each overflowing list or schedule scroll independently. Plain tooltips preview at most three lines; retain the complete accessible text. A structured people popover owns its content and uses the dropdown’s popup padding and row insets.
 
-Form dialogs use `Modal` or `MultiStepModal`. Pass a title, content, action labels and handlers. The shared borderless surface positions its title at the logical start and supplies one quiet Cancel/Back. Command search and previews use the same shadow and dismissal layer. Form controls cannot construct or style a form header, footer or Cancel button. Opening a dialog or advancing its step focuses the first available field. Confirmation dialogs focus Cancel, and read-only previews focus Close. Closing returns focus to the invoking control. Textareas scroll or grow within their owner and never show a manual resize handle. Recipient fields use the textarea’s height, type and inset. Each email tag occupies one text line with the recent row’s trailing remove action. Comma or Enter commits a draft, pasting a list commits its addresses, and Backspace from an empty draft removes the last tag.
+Form dialogs use `Modal` or `MultiStepModal`. Pass a title, content, action labels and handlers. The shared borderless surface positions its title at the logical start and supplies one quiet Cancel/Back. Command search and previews use the same shadow and dismissal layer. Form controls cannot construct or style a form header, footer or Cancel button. Opening a dialog or advancing its step focuses the first available field. Confirmation dialogs focus Cancel, and read-only previews focus Close. A nested dialog handles Escape one layer at a time. While a form is open, the global search shortcut leaves its draft and keyboard focus in place. Closing returns focus to the invoking control. Textareas scroll or grow within their owner and never show a manual resize handle. Recipient fields use the textarea’s height, type and inset. Each email tag occupies one text line with the recent row’s trailing remove action. Comma or Enter commits a draft, pasting a list commits its addresses, and Backspace from an empty draft removes the last tag.
 
 Use `useClipboard` / `CopyButton` for successful copy feedback and `useFeedbackExpiry` for temporary status. Copied indicators and transient notices dwell for four seconds; repeated events restart the timer. Pause an actionable notice during hover or focus and keep its action available in the stack afterward. Icon color changes use `--ui-motion-color` (120ms, zero under reduced motion). Do not put literal timers or CSS durations in product components.
 

apps/sim/platform/README.md

@@ -41,7 +41,7 @@ Shared and Platform still own different recipes; `catalog/evidence.json` preserv
 
 Workspace lists, sidebar items, recents and attachment batches accept typed arrays with stable item IDs. Use the named components for these collection masters: a Paper specimen's item count is sample data. An empty array renders zero items, and adding items preserves their registered row/card appearance. Each scroll viewport determines fades and controls from its actual contents. Chart labels, marks, inspected values and legends come from the same series. Supply raw numeric values and their units to data tables. The column schema determines alignment and which columns remain visible as the table narrows.
 
-The full fixture includes twenty sidebar workspaces, sixteen conversations, a twelve-message inbox and a calendar that scrolls from midnight to midnight even on empty days. Home and Chat share a reading width. The resting Home greeting aligns with the sidebar Home row. The shell uses one 12px inset above the organization and on both sides of the profile row. The Home inset scrolls away through the viewport edge fade. The collapsed sidebar control aligns with the expanded toolbar. Calendar events use the muted surface. An event with a provider URL opens in a new tab. The attendee control opens its own people popover. Now appears when the current time scrolls out of view or another day is selected. It restores today’s schedule and centers the current time.
+The full fixture includes twenty sidebar workspaces, sixteen conversations, a twelve-message inbox and a calendar that scrolls from midnight to midnight even on empty days. Home and Chat share a reading width. The resting Home greeting aligns with the sidebar Home row. The shell uses one 12px inset above the organization and on both sides of the profile row. The Home inset scrolls away through the viewport edge fade. The collapsed sidebar control aligns with the expanded toolbar. Calendar events use the muted surface. An event with a provider URL opens in a new tab. The attendee control opens its own people popover. Now appears when the calendar scrolls away from its resting position or another day is selected. It restores today’s schedule and centers the current time. Scrolling back to that position also hides Now.
 
 Start with the [component ownership map](docs/component-ownership.md) when choosing a primitive. Sidebar, recents and panel tabs use one row; form and command dialogs use one borderless surface. Copy confirmations and transient notifications last four seconds. The notification count uses the compact Invite button. Expanded notices share one subtle shadow around the list. A new notice pauses its expiry on hover or keyboard focus. Icon color transitions take 120ms and respect reduced motion. The [design contract](AGENTS.md) defines these rules.
 

apps/sim/platform/app/(shell)/_components/platform-shell/platform-shell.tsx

@@ -75,7 +75,9 @@ export function PlatformShell({ data, children }: PlatformShellProps) {
       )
         return
       event.preventDefault()
-      setCommand((previous) => !previous)
+      const modal = event.target instanceof Element ? event.target.closest('dialog:modal') : null
+      const canOpen = !modal || modal === drawerRef.current
+      setCommand((open) => !open && canOpen)
     }
     document.addEventListener('keydown', shortcut)
     return () => document.removeEventListener('keydown', shortcut)

apps/sim/platform/app/(shell)/home/_components/calendar/calendar-day.tsx

@@ -20,7 +20,7 @@ function timeSlot(startMinute: number, duration = 1) {
 export function CalendarDay({ calendar }: CalendarDayProps) {
   const [offset, setOffset] = useState(0)
   const [returnCount, setReturnCount] = useState(0)
-  const [timeVisible, setTimeVisible] = useState(true)
+  const [atNow, setAtNow] = useState(true)
   const viewport = useRef<HTMLDivElement>(null)
   const now = useRef<HTMLSpanElement>(null)
   const scrollEdges = useScrollEdges('vertical', { viewport, tabStop: true })
@@ -29,12 +29,25 @@ export function CalendarDay({ calendar }: CalendarDayProps) {
     const marker = now.current
     const root = viewport.current
     if (!marker || !root) return
-    root.scrollTop = marker.offsetTop + (marker.offsetHeight - root.clientHeight) / 2
-    const observer = new IntersectionObserver(([entry]) => setTimeVisible(entry.isIntersecting), {
-      root,
-    })
-    observer.observe(marker)
-    return () => observer.disconnect()
+    let restingTop = root.scrollTop
+    const atRest = () => Math.abs(root.scrollTop - restingTop) <= 1
+    const updatePosition = () => setAtNow(atRest())
+    const measure = () => {
+      const keepCentered = atRest()
+      const centered = marker.offsetTop + (marker.offsetHeight - root.clientHeight) / 2
+      restingTop = Math.max(0, Math.min(centered, root.scrollHeight - root.clientHeight))
+      if (keepCentered) root.scrollTop = restingTop
+      updatePosition()
+    }
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(root)
+    if (marker.parentElement) observer.observe(marker.parentElement)
+    root.addEventListener('scroll', updatePosition, { passive: true })
+    return () => {
+      observer.disconnect()
+      root.removeEventListener('scroll', updatePosition)
+    }
   }, [calendar.date, calendar.nowMinute, offset, returnCount])
 
   useLayoutEffect(() => {
@@ -55,7 +68,7 @@ export function CalendarDay({ calendar }: CalendarDayProps) {
       <div className={styles.toolbar}>
         <span data-type='T052'>{dayLabel}</span>
         <div className={styles.dayControls}>
-          {(offset !== 0 || !timeVisible) && (
+          {(offset !== 0 || !atNow) && (
             <Button variant='quiet' size='compact' onClick={returnToNow}>
               Now
             </Button>

apps/sim/platform/checks/conversation.spec.ts

@@ -48,6 +48,12 @@ test('Now restores today’s time after scrolling the calendar or viewing anothe
   await schedule.scrollIntoViewIfNeeded()
   await expect(currentTime).toBeInViewport()
   await expect(now).toHaveCount(0)
+  const restingTop = await schedule.evaluate((el) => el.scrollTop)
+  await schedule.evaluate((el) => el.scrollBy(0, 12))
+  await expect(currentTime).toBeInViewport()
+  await expect(now).toBeVisible()
+  await schedule.evaluate((el, top) => el.scrollTo(0, top), restingTop)
+  await expect(now).toHaveCount(0)
   await schedule.press('End')
   await expect(now).toBeVisible()
   await now.press('Enter')

apps/sim/platform/checks/shell.spec.ts

@@ -61,6 +61,33 @@ test('the sidebar keeps its reading position across route changes and a Settings
   await expect.poll(() => nav.evaluate((element) => element.scrollTop)).toBe(offset)
 })
 
+test('command search respects an open form and toggles within the navigation drawer', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 390, height: 800 })
+  await page.goto(`${origin}/home?state=full`)
+  await page.getByRole('button', { name: 'Expand sidebar' }).click()
+  const drawer = page.getByRole('dialog', { name: 'Navigation drawer' })
+  const organization = drawer.getByRole('button', { name: 'Organization menu', exact: true })
+  await organization.click()
+  await drawer.getByRole('button', { name: 'Invite', exact: true }).click()
+  const input = page.getByRole('textbox', { name: 'Email addresses' })
+  const search = page.getByRole('combobox', { name: 'Search the platform' })
+  await input.fill('member')
+  await input.press('ControlOrMeta+k')
+  await expect(search).toBeHidden()
+  await expect(input).toBeFocused()
+  await page.keyboard.type('@example.test')
+  await expect(input).toHaveValue('member@example.test')
+  await page.keyboard.press('Escape')
+  await expect(organization).toBeFocused()
+  await page.keyboard.press('ControlOrMeta+k')
+  await expect(search).toBeFocused()
+  await search.press('ControlOrMeta+k')
+  await expect(search).toBeHidden()
+  await expect(organization).toBeFocused()
+})
+
 test('a keyboard search navigates to the matching chat and shell edits survive the return trip', async ({
   page,
 }) => {