feat(calendar): replace event-edit drawer with anchored popover - #275
Merged
Conversation
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].
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
CalendarEventPopover) handles both create and edit modes.DatePickerContentwidget already shipped in task due-dates, so there's one calendar + time picker in the app.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
types.tsextractsCalendarEventDraftand addsAnchorRect.popover-position.tsextracts the anchor-rect positioning helper, shared with the existing marqueeCalendarQuickCreateDialog.onClicksignature:(item) => void→(item, rect) => void. Thread through day / week / month / year views.onCreateEventcaptures its button'sgetBoundingClientRect()and passes up.onPointerDownOutside/onInteractOutsideescape 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 errorspnpm --filter @memry/desktop test— all 4 calendar-page tests pass; all 16 quick-create tests passcalendar-page.test.tsxassertions updated from drawer (heading "New Event",Closebutton) to popover (role="dialog"witharia-label="Create calendar event",Cancelbutton)pnpm dev— click event in day/week/month → popover appears next to chip; edit datetime via nestedDatePickerContent; Save persists and refetches range; Escape / click-outside / Cancel dismiss; toolbar+ New Eventopens popover anchored to button; marquee "Add details" opens popover at the same anchor with prefilled title.