Add calendar/contacts toggle to the right sidebar panel by bengotow · Pull Request #2593 · Foundry376/Mailspring

bengotow · 2026-02-07T15:35:13Z

Replace the separate SidebarParticipantPicker and SidebarPluginContainer
registrations with a unified SidebarViewSwitcher that provides a segmented
control at the top of the right panel. Users can switch between "Contacts"
(the existing participant profile view) and "Calendar" (a compact agenda-
style day view showing today's events with day-by-day navigation).

New components:

SidebarViewToggle: segmented control for switching views
SidebarCalendarDayView: compact event list using CalendarDataSource
SidebarViewSwitcher: orchestrates toggle + both views

https://claude.ai/code/session_016hcccJaZPjExmSfK8Bff8V

indent-staging · 2026-02-07T15:35:17Z

Issues

3 potential issues found:

sidebar-plugin-container.tsx is now dead code — it's no longer imported by main.tsx or any other file. Its logic was duplicated into sidebar-view-switcher.tsx. Consider deleting it or importing from it instead of duplicating.
localized and CalendarView are imported but unused in sidebar-agenda-view.tsx.
_onEventDoubleClick in SidebarAgendaView uses document.getElementById(event.id), but AgendaView renders event elements with id={\${event.id}-${dayKey}`}, so the lookup will always return null. This is currently dead code since AgendaViewhandles double-click internally, but if the AgendaView ever delegates to the parent'sonEventDoubleClick`, the popover will silently fail to open.

Resolved (3 issues)

Clicking a calendar event in the sidebar fires Actions.focusCalendarEvent, but this action is ActionScopeWindow and the only listener (MailspringCalendar) is not mounted when viewing the message list. The click handler does nothing — the events appear interactive (cursor: pointer, click handler) but have no effect. (fixed by commit 123f2c1)
DatabaseStore, AccountStore, Calendar, and Event are imported in sidebar-calendar-day-view.tsx but never used — all data fetching goes through CalendarDataSource. (fixed by commit 123f2c1)
componentDidMount subscribes to events twice on initial mount. Rx.Observable.fromConfig emits synchronously, so the config callback on line 48 calls _subscribeToEvents(), and then line 51 calls it again redundantly. Remove the explicit _subscribeToEvents() call on line 51. (fixed by commit 123f2c1)

Summary

This PR replaces the two separate sidebar registrations (SidebarParticipantPicker and SidebarPluginContainer) with a unified SidebarViewSwitcher that adds a segmented toggle at the top of the right panel. Users can switch between "Participants" (existing participant profile view) and "Calendar" (a multi-day agenda view wrapping the AgendaView component from main-calendar). Double-clicking an event opens a CalendarEventPopover directly in the sidebar.

main.tsx (message-list): Registers single SidebarViewSwitcher instead of two separate components; updates deactivate to match
sidebar-view-toggle.tsx (new): Segmented control with "Participants" and "Calendar" buttons
sidebar-agenda-view.tsx (new): Wraps AgendaView from main-calendar with sidebar-specific state management for disabled calendars, read-only calendar IDs, and event selection
sidebar-view-switcher.tsx (new): Orchestrates the toggle and both views; duplicates FocusedContactStorePropsContainer and SidebarPluginContainerInner from sidebar-plugin-container.tsx
message-list.less: Adds styles for the toggle and sidebar-specific LESS overrides — hides the view picker and "Today" button, centers date navigation, and adapts event cards for the narrow panel width
main-calendar/package.json: Adds "default": true to windowTypes so the calendar package loads in the main window (needed for sidebar imports)
main-calendar/lib/main.tsx: Guards component registrations behind getWindowType() === 'calendar' so the full calendar UI only appears in the calendar window

CI Checks

Waiting for CI checks...

Rule Checks 3 rules evaluated, 3 passed, 0 failed

Passing rules

This is a longer title to see what happens when they are too long to fit
B
Ben Rule

Replace the separate SidebarParticipantPicker and SidebarPluginContainer registrations with a unified SidebarViewSwitcher that provides a segmented control at the top of the right panel. Users can switch between "Contacts" (the existing participant profile view) and "Calendar" (a compact agenda- style day view showing today's events with day-by-day navigation). New components: - SidebarViewToggle: segmented control for switching views - SidebarCalendarDayView: compact event list using CalendarDataSource - SidebarViewSwitcher: orchestrates toggle + both views https://claude.ai/code/session_016hcccJaZPjExmSfK8Bff8V

Replace the custom SidebarCalendarDayView with SidebarAgendaView that wraps the new AgendaView from main-calendar. The AgendaView provides a multi-day vertical scrolling event list that fits the sidebar well. Sidebar-specific LESS overrides compact the header, event cards, and day headers for the narrow panel width (150-300px). Also rename the "Contacts" tab to "Participants" to better match the existing participant profile terminology. https://claude.ai/code/session_016hcccJaZPjExmSfK8Bff8V

indent-staging · 2026-02-07T20:09:56Z

+  };
+
+  _onEventDoubleClick = (event: EventOccurrence) => {
+    const el = document.getElementById(event.id);


Dead code with a latent bug: AgendaView handles double-click internally via _onAgendaEventDoubleClick (line 184 of agenda-view.tsx) using e.currentTarget, and never calls this.props.onEventDoubleClick. So this handler is never invoked.

Additionally, if it were called, document.getElementById(event.id) would always return null because AgendaView renders event elements with day-unique IDs: id={\${event.id}-${dayKey}`}. The _onEventFocused` handler (line 93) delegates here, so it has the same issue.

Consider removing these handlers and passing no-ops, or fixing the lookup to match the actual DOM IDs.

indent-staging · 2026-02-07T20:09:57Z

@@ -0,0 +1,125 @@
+import moment, { Moment } from 'moment';
+import React from 'react';
+import { Rx, DatabaseStore, Calendar, Actions, localized } from 'mailspring-exports';


Unused imports: localized is imported here but never used in this file. Also CalendarView (line 10) is imported but unused.

Suggested change

import { Rx, DatabaseStore, Calendar, Actions, localized } from 'mailspring-exports';

import { Rx, DatabaseStore, Calendar, Actions } from 'mailspring-exports';

- Hide the Day/Week/Month/Agenda view-controls in the sidebar since we always show the agenda view - Hide the absolutely-positioned "Today" button that overlapped the date range title - Remove the fixed 275px title width so it sizes naturally and centers within the sidebar - Remove aggressive font-size overrides on event cards to preserve the original agenda-view styling - Reduce event-list padding and let the time column auto-size for the narrow sidebar width https://claude.ai/code/session_016hcccJaZPjExmSfK8Bff8V

The AgendaView's LESS styles are all scoped under .mailspring-calendar (the class from MailspringCalendar's KeyCommandsRegion). Since SidebarAgendaView renders AgendaView directly without that parent, none of the .agenda-day, .agenda-event, etc. styles were being applied. Fix by adding the mailspring-calendar class to the sidebar wrapper div, and add flex: 1 to .agenda-scroll-region so it fills the available space. https://claude.ai/code/session_016hcccJaZPjExmSfK8Bff8V

In the full calendar, agenda events use a horizontal two-column layout (time | title+location). In the narrow sidebar this caused time and title to run together on the same line. Use flex-wrap to stack the event content vertically: color-bar on the left, time on the first row, then title and location below, indented to align with the time. https://claude.ai/code/session_016hcccJaZPjExmSfK8Bff8V

Use space-between on .center-controls so the prev/next navigation buttons sit at the left and right edges of the panel, with the date range title centered between them via flex: 1. https://claude.ai/code/session_016hcccJaZPjExmSfK8Bff8V

Replace flex-wrap approach with a 2-column CSS grid on .agenda-event: the color bar spans all rows in the first column, while time and details stack vertically in the second column with no gap. This eliminates the blank space that appeared when details wrapped to a separate flex row. https://claude.ai/code/session_016hcccJaZPjExmSfK8Bff8V

codeCraft-Ritik

Well structured code, especially the separation of concerns

indent-staging bot reviewed Feb 7, 2026

View reviewed changes

Comment thread app/internal_packages/message-list/lib/sidebar-calendar-day-view.tsx Outdated

indent-staging bot reviewed Feb 7, 2026

View reviewed changes

Comment thread app/internal_packages/message-list/lib/sidebar-calendar-day-view.tsx Outdated

indent-staging bot reviewed Feb 7, 2026

View reviewed changes

Comment thread app/internal_packages/message-list/lib/sidebar-calendar-day-view.tsx Outdated

claude added 2 commits February 7, 2026 20:03

bengotow force-pushed the claude/calendar-view-toggle-SWxFv branch from 1b19c98 to 123f2c1 Compare February 7, 2026 20:06

indent-staging bot reviewed Feb 7, 2026

View reviewed changes

claude and others added 6 commits February 7, 2026 21:16

Expose the calendar pacakge in the main window

38cd36c

Push prev/next arrows to edges of sidebar header

99bbb1d

Use space-between on .center-controls so the prev/next navigation buttons sit at the left and right edges of the panel, with the date range title centered between them via flex: 1. https://claude.ai/code/session_016hcccJaZPjExmSfK8Bff8V

codeCraft-Ritik reviewed Feb 13, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add calendar/contacts toggle to the right sidebar panel#2593

Add calendar/contacts toggle to the right sidebar panel#2593
bengotow wants to merge 8 commits intomasterfrom
claude/calendar-view-toggle-SWxFv

bengotow commented Feb 7, 2026

Uh oh!

indent-staging bot commented Feb 7, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

indent-staging bot Feb 7, 2026

Uh oh!

indent-staging bot Feb 7, 2026

Uh oh!

codeCraft-Ritik left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	import { Rx, DatabaseStore, Calendar, Actions, localized } from 'mailspring-exports';
	import { Rx, DatabaseStore, Calendar, Actions } from 'mailspring-exports';

Conversation

bengotow commented Feb 7, 2026

Uh oh!

indent-staging bot commented Feb 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

indent-staging bot Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

indent-staging bot Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

codeCraft-Ritik left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

indent-staging bot commented Feb 7, 2026 •

edited

Loading