Skip to content

feat(calendar): replace event-edit drawer with anchored popover - #275

Merged
h4yfans merged 1 commit into
mainfrom
happy-hodgkin-9cd980
Apr 18, 2026
Merged

feat(calendar): replace event-edit drawer with anchored popover#275
h4yfans merged 1 commit into
mainfrom
happy-hodgkin-9cd980

Conversation

@h4yfans

@h4yfans h4yfans commented Apr 18, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Clicking a calendar event now opens a compact popover anchored to the clicked chip instead of the full right-side drawer — title, location, start/end date+time, all-day toggle, notes, Save/Cancel. One component (CalendarEventPopover) handles both create and edit modes.
  • Start/end rows reuse the same DatePickerContent widget already shipped in task due-dates, so there's one calendar + time picker in the app.
  • Toolbar "+ New Event" now opens the same popover, anchored to the button rect.
  • Delete calendar-event-editor-drawer.tsx (~160 LOC gone).

Why

The drawer felt disconnected from the chip the user just clicked — especially in day/week, where it shoves the grid aside. Screenshot reference in the task description shows the macOS-Calendar-style anchored popover we matched.

Architecture

  • New types.ts extracts CalendarEventDraft and adds AnchorRect.
  • New popover-position.ts extracts the anchor-rect positioning helper, shared with the existing marquee CalendarQuickCreateDialog.
  • Chip onClick signature: (item) => void(item, rect) => void. Thread through day / week / month / year views.
  • Toolbar onCreateEvent captures its button's getBoundingClientRect() and passes up.
  • Nested Radix Popover inside the outer Dialog uses an onPointerDownOutside / onInteractOutside escape hatch that checks [data-radix-popper-content-wrapper], so clicking into the date picker doesn't dismiss the outer popover.

Test plan

  • pnpm typecheck:node
  • pnpm typecheck:web
  • pnpm --filter @memry/desktop lint — 0 errors
  • pnpm --filter @memry/desktop test — all 4 calendar-page tests pass; all 16 quick-create tests pass
  • calendar-page.test.tsx assertions updated from drawer (heading "New Event", Close button) to popover (role="dialog" with aria-label="Create calendar event", Cancel button)
  • Manual smoke via pnpm dev — click event in day/week/month → popover appears next to chip; edit datetime via nested DatePickerContent; Save persists and refetches range; Escape / click-outside / Cancel dismiss; toolbar + New Event opens popover anchored to button; marquee "Add details" opens popover at the same anchor with prefilled title.

Click an existing calendar event now opens a compact popover anchored to the
clicked chip instead of the full right-side drawer. The popover exposes
title, location, start/end date+time (via the shared DatePickerContent used
in task due-dates), all-day toggle, and notes.

Scope:
- New CalendarEventPopover component handles both create and edit modes.
- Extract AnchorRect + CalendarEventDraft into a shared types.ts.
- Extract computePopoverPosition into popover-position.ts, shared with the
  marquee quick-create dialog (DRY).
- Thread (item, rect) through chip -> day/week/month/year views -> shell.
- Toolbar "+ New Event" now anchors the popover to the button rect.
- Delete calendar-event-editor-drawer.tsx (netting ~160 LOC removed).

Nested Radix popover inside the Dialog (for the date/time pickers) is kept
open via an onPointerDownOutside/onInteractOutside escape hatch checking
[data-radix-popper-content-wrapper].
@h4yfans
h4yfans merged commit 2d5a64d into main Apr 18, 2026
5 checks passed
@h4yfans
h4yfans deleted the happy-hodgkin-9cd980 branch April 18, 2026 14:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant