From dd4676cec7d73fe0f9fa209517a622abd36f307e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 7 Feb 2026 15:32:11 +0000
Subject: [PATCH 1/8] Add calendar/contacts toggle to the right sidebar panel

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
---
 .../message-list/lib/main.tsx                 |  13 +-
 .../lib/sidebar-calendar-day-view.tsx         | 159 ++++++++++++++++++
 .../lib/sidebar-view-switcher.tsx             | 109 ++++++++++++
 .../message-list/lib/sidebar-view-toggle.tsx  |  33 ++++
 .../message-list/styles/message-list.less     | 157 +++++++++++++++++
 5 files changed, 462 insertions(+), 9 deletions(-)
 create mode 100644 app/internal_packages/message-list/lib/sidebar-calendar-day-view.tsx
 create mode 100644 app/internal_packages/message-list/lib/sidebar-view-switcher.tsx
 create mode 100644 app/internal_packages/message-list/lib/sidebar-view-toggle.tsx

diff --git a/app/internal_packages/message-list/lib/main.tsx b/app/internal_packages/message-list/lib/main.tsx
index 534c1678d7..5ad748995c 100644
--- a/app/internal_packages/message-list/lib/main.tsx
+++ b/app/internal_packages/message-list/lib/main.tsx
@@ -9,8 +9,7 @@ import {
 
 import { MessageListHiddenMessagesToggle } from './message-list-hidden-messages-toggle';
 import MessageList from './message-list';
-import { SidebarPluginContainer } from './sidebar-plugin-container';
-import { SidebarParticipantPicker } from './sidebar-participant-picker';
+import { SidebarViewSwitcher } from './sidebar-view-switcher';
 
 export function activate() {
   if (AppEnv.isMainWindow()) {
@@ -18,10 +17,7 @@ export function activate() {
     ComponentRegistry.register(MessageList, {
       location: WorkspaceStore.Location.MessageList,
     });
-    ComponentRegistry.register(SidebarParticipantPicker, {
-      location: WorkspaceStore.Location.MessageListSidebar,
-    });
-    ComponentRegistry.register(SidebarPluginContainer, {
+    ComponentRegistry.register(SidebarViewSwitcher, {
       location: WorkspaceStore.Location.MessageListSidebar,
     });
     ComponentRegistry.register(MessageListHiddenMessagesToggle, {
@@ -33,7 +29,7 @@ export function activate() {
     ComponentRegistry.register(MessageList, { location: WorkspaceStore.Location.Center });
 
     // We need to locate the thread and focus it so that the MessageList displays it
-    DatabaseStore.find<Thread>(Thread, threadId).then(thread =>
+    DatabaseStore.find<Thread>(Thread, threadId).then((thread) =>
       Actions.setFocus({ collection: 'thread', item: thread })
     );
 
@@ -48,6 +44,5 @@ export function activate() {
 
 export function deactivate() {
   ComponentRegistry.unregister(MessageList);
-  ComponentRegistry.unregister(SidebarPluginContainer);
-  ComponentRegistry.unregister(SidebarParticipantPicker);
+  ComponentRegistry.unregister(SidebarViewSwitcher);
 }
diff --git a/app/internal_packages/message-list/lib/sidebar-calendar-day-view.tsx b/app/internal_packages/message-list/lib/sidebar-calendar-day-view.tsx
new file mode 100644
index 0000000000..50d3412770
--- /dev/null
+++ b/app/internal_packages/message-list/lib/sidebar-calendar-day-view.tsx
@@ -0,0 +1,159 @@
+import moment, { Moment } from 'moment';
+import React from 'react';
+import {
+  Rx,
+  DatabaseStore,
+  AccountStore,
+  Calendar,
+  Event,
+  Actions,
+  localized,
+} from 'mailspring-exports';
+import { RetinaImg, ScrollRegion } from 'mailspring-component-kit';
+import {
+  CalendarDataSource,
+  EventOccurrence,
+} from '../../main-calendar/lib/core/calendar-data-source';
+import { Disposable } from 'rx-core';
+
+const DISABLED_CALENDARS = 'mailspring.disabledCalendars';
+
+interface SidebarCalendarDayViewState {
+  focusedMoment: Moment;
+  events: EventOccurrence[];
+  disabledCalendars: string[];
+}
+
+export class SidebarCalendarDayView extends React.Component<{}, SidebarCalendarDayViewState> {
+  static displayName = 'SidebarCalendarDayView';
+
+  _dataSource = new CalendarDataSource();
+  _configDisposable?: Disposable;
+  _eventDisposable?: Disposable;
+
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      focusedMoment: moment(),
+      events: [],
+      disabledCalendars: AppEnv.config.get(DISABLED_CALENDARS) || [],
+    };
+  }
+
+  componentDidMount() {
+    this._configDisposable = Rx.Observable.fromConfig<string[] | undefined>(
+      DISABLED_CALENDARS
+    ).subscribe((disabledCalendars) => {
+      this.setState({ disabledCalendars: disabledCalendars || [] }, () => {
+        this._subscribeToEvents();
+      });
+    });
+    this._subscribeToEvents();
+  }
+
+  componentWillUnmount() {
+    this._configDisposable?.dispose();
+    this._eventDisposable?.dispose();
+  }
+
+  _subscribeToEvents() {
+    this._eventDisposable?.dispose();
+
+    const { focusedMoment, disabledCalendars } = this.state;
+    const startOfDay = focusedMoment.clone().startOf('day');
+    const endOfDay = focusedMoment.clone().endOf('day');
+
+    this._eventDisposable = this._dataSource
+      .buildObservable({
+        disabledCalendars,
+        startUnix: startOfDay.unix(),
+        endUnix: endOfDay.unix(),
+      })
+      .subscribe(({ events }) => {
+        const sorted = events
+          .filter((e) => !e.isCancelled)
+          .sort((a, b) => {
+            if (a.isAllDay && !b.isAllDay) return -1;
+            if (!a.isAllDay && b.isAllDay) return 1;
+            return a.start - b.start;
+          });
+        this.setState({ events: sorted });
+      });
+  }
+
+  _onClickToday = () => {
+    this.setState({ focusedMoment: moment() }, () => this._subscribeToEvents());
+  };
+
+  _onClickPrevDay = () => {
+    this.setState({ focusedMoment: this.state.focusedMoment.clone().subtract(1, 'day') }, () =>
+      this._subscribeToEvents()
+    );
+  };
+
+  _onClickNextDay = () => {
+    this.setState({ focusedMoment: this.state.focusedMoment.clone().add(1, 'day') }, () =>
+      this._subscribeToEvents()
+    );
+  };
+
+  _onClickEvent = (event: EventOccurrence) => {
+    Actions.focusCalendarEvent({ id: event.id, start: event.start });
+  };
+
+  _formatEventTime(event: EventOccurrence) {
+    if (event.isAllDay) {
+      return localized('All Day');
+    }
+    const start = moment.unix(event.start).format('LT');
+    const end = moment.unix(event.end).format('LT');
+    return `${start} - ${end}`;
+  }
+
+  _isToday() {
+    return this.state.focusedMoment.isSame(moment(), 'day');
+  }
+
+  render() {
+    const { focusedMoment, events } = this.state;
+    const isToday = this._isToday();
+    const dateLabel = isToday ? localized('Today') : focusedMoment.format('ddd, MMM D');
+
+    return (
+      <div className="sidebar-calendar-day-view">
+        <div className="sidebar-calendar-header">
+          <button className="btn btn-small btn-nav" onClick={this._onClickPrevDay}>
+            <RetinaImg name="toolbar-chevron-left.png" mode={RetinaImg.Mode.ContentIsMask} />
+          </button>
+          <span
+            className="sidebar-calendar-date"
+            onClick={this._onClickToday}
+            title={localized('Go to today')}
+          >
+            {dateLabel}
+          </span>
+          <button className="btn btn-small btn-nav" onClick={this._onClickNextDay}>
+            <RetinaImg name="toolbar-chevron-right.png" mode={RetinaImg.Mode.ContentIsMask} />
+          </button>
+        </div>
+        <ScrollRegion className="sidebar-calendar-events">
+          {events.length === 0 ? (
+            <div className="sidebar-calendar-empty">{localized('No events')}</div>
+          ) : (
+            events.map((event) => (
+              <div
+                key={event.id}
+                className={`sidebar-calendar-event ${event.isPending ? 'pending' : ''}`}
+                onClick={() => this._onClickEvent(event)}
+              >
+                <div className="event-time">{this._formatEventTime(event)}</div>
+                <div className="event-title">{event.title || localized('(No title)')}</div>
+                {event.location ? <div className="event-location">{event.location}</div> : null}
+              </div>
+            ))
+          )}
+        </ScrollRegion>
+      </div>
+    );
+  }
+}
diff --git a/app/internal_packages/message-list/lib/sidebar-view-switcher.tsx b/app/internal_packages/message-list/lib/sidebar-view-switcher.tsx
new file mode 100644
index 0000000000..216d62eb67
--- /dev/null
+++ b/app/internal_packages/message-list/lib/sidebar-view-switcher.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { PropTypes, FocusedContactsStore, Contact } from 'mailspring-exports';
+import { InjectedComponentSet } from 'mailspring-component-kit';
+import { SidebarViewToggle, SidebarView } from './sidebar-view-toggle';
+import { SidebarParticipantPicker } from './sidebar-participant-picker';
+import { SidebarCalendarDayView } from './sidebar-calendar-day-view';
+
+class FocusedContactStorePropsContainer extends React.Component<
+  { children: React.ReactElement<any> },
+  { sortedContacts: Contact[]; focusedContact: Contact }
+> {
+  static displayName = 'FocusedContactStorePropsContainer';
+
+  unsubscribe: () => void;
+
+  constructor(props) {
+    super(props);
+    this.state = this._getStateFromStores();
+  }
+
+  componentDidMount() {
+    this.unsubscribe = FocusedContactsStore.listen(this._onChange);
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
+  }
+
+  _onChange = () => {
+    this.setState(this._getStateFromStores());
+  };
+
+  _getStateFromStores() {
+    return {
+      sortedContacts: FocusedContactsStore.sortedContacts(),
+      focusedContact: FocusedContactsStore.focusedContact(),
+    };
+  }
+
+  render() {
+    let classname = 'sidebar-section';
+    let inner = null;
+    if (this.state.focusedContact) {
+      classname += ' visible';
+      inner = React.cloneElement(this.props.children, this.state);
+    }
+    return <div className={classname}>{inner}</div>;
+  }
+}
+
+const SidebarPluginContainerInner = (props) => {
+  return (
+    <InjectedComponentSet
+      className="sidebar-contact-card"
+      key={props.focusedContact.email}
+      matching={{ role: 'MessageListSidebar:ContactCard' }}
+      direction="column"
+      exposedProps={{
+        contact: props.focusedContact,
+      }}
+    />
+  );
+};
+
+SidebarPluginContainerInner.propTypes = {
+  focusedContact: PropTypes.object,
+};
+
+export class SidebarViewSwitcher extends React.Component<{}, { selectedView: SidebarView }> {
+  static displayName = 'SidebarViewSwitcher';
+
+  static containerStyles = {
+    order: 0,
+    flexShrink: 0,
+    minWidth: 150,
+    maxWidth: 300,
+  };
+
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      selectedView: 'contacts',
+    };
+  }
+
+  _onSelectView = (view: SidebarView) => {
+    this.setState({ selectedView: view });
+  };
+
+  render() {
+    const { selectedView } = this.state;
+
+    return (
+      <div className="sidebar-view-switcher">
+        <SidebarViewToggle selectedView={selectedView} onSelectView={this._onSelectView} />
+        {selectedView === 'contacts' ? (
+          <div className="sidebar-contacts-view">
+            <SidebarParticipantPicker />
+            <FocusedContactStorePropsContainer>
+              <SidebarPluginContainerInner />
+            </FocusedContactStorePropsContainer>
+          </div>
+        ) : (
+          <SidebarCalendarDayView />
+        )}
+      </div>
+    );
+  }
+}
diff --git a/app/internal_packages/message-list/lib/sidebar-view-toggle.tsx b/app/internal_packages/message-list/lib/sidebar-view-toggle.tsx
new file mode 100644
index 0000000000..c194f88ae9
--- /dev/null
+++ b/app/internal_packages/message-list/lib/sidebar-view-toggle.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { localized } from 'mailspring-exports';
+
+export type SidebarView = 'contacts' | 'calendar';
+
+interface SidebarViewToggleProps {
+  selectedView: SidebarView;
+  onSelectView: (view: SidebarView) => void;
+}
+
+export class SidebarViewToggle extends React.Component<SidebarViewToggleProps> {
+  static displayName = 'SidebarViewToggle';
+
+  render() {
+    const { selectedView, onSelectView } = this.props;
+    return (
+      <div className="sidebar-view-toggle">
+        <button
+          className={`toggle-btn ${selectedView === 'contacts' ? 'active' : ''}`}
+          onClick={() => onSelectView('contacts')}
+        >
+          {localized('Contacts')}
+        </button>
+        <button
+          className={`toggle-btn ${selectedView === 'calendar' ? 'active' : ''}`}
+          onClick={() => onSelectView('calendar')}
+        >
+          {localized('Calendar')}
+        </button>
+      </div>
+    );
+  }
+}
diff --git a/app/internal_packages/message-list/styles/message-list.less b/app/internal_packages/message-list/styles/message-list.less
index 33ad158d5b..e5ca30c85a 100644
--- a/app/internal_packages/message-list/styles/message-list.less
+++ b/app/internal_packages/message-list/styles/message-list.less
@@ -814,3 +814,160 @@ body.platform-win32 {
     width: 1px;
   }
 }
+
+///////////////////////////
+// sidebar-view-switcher //
+///////////////////////////
+.sidebar-view-switcher {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sidebar-view-toggle {
+  display: flex;
+  padding: 8px 8px 4px 8px;
+  gap: 0;
+  flex-shrink: 0;
+
+  .toggle-btn {
+    flex: 1;
+    padding: 4px 8px;
+    font-size: 11px;
+    font-weight: @font-weight-semi-bold;
+    text-align: center;
+    border: 1px solid @border-color-primary;
+    background: transparent;
+    color: @text-color-subtle;
+    cursor: pointer;
+    transition: background 0.1s ease, color 0.1s ease;
+
+    &:first-child {
+      border-radius: @border-radius-base 0 0 @border-radius-base;
+      border-right: none;
+    }
+    &:last-child {
+      border-radius: 0 @border-radius-base @border-radius-base 0;
+    }
+    &.active {
+      background: @background-primary;
+      color: @text-color;
+      border-color: @border-color-primary;
+    }
+    &:hover:not(.active) {
+      background: fade(@background-primary, 50%);
+    }
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.sidebar-contacts-view {
+  flex: 1;
+  overflow: auto;
+}
+
+///////////////////////////////
+// sidebar-calendar-day-view //
+///////////////////////////////
+.sidebar-calendar-day-view {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.sidebar-calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  flex-shrink: 0;
+
+  .btn-nav {
+    padding: 2px 6px;
+    background: transparent;
+    border: 1px solid @border-color-primary;
+    border-radius: @border-radius-base;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 10px;
+      height: 10px;
+    }
+
+    &:hover {
+      background: fade(@background-primary, 50%);
+    }
+  }
+
+  .sidebar-calendar-date {
+    font-size: 12px;
+    font-weight: @font-weight-semi-bold;
+    color: @text-color;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.sidebar-calendar-events {
+  flex: 1;
+  overflow: auto;
+}
+
+.sidebar-calendar-empty {
+  padding: 20px 15px;
+  text-align: center;
+  color: @text-color-very-subtle;
+  font-size: 12px;
+}
+
+.sidebar-calendar-event {
+  padding: 8px 10px;
+  margin: 0 5px 4px 5px;
+  border-radius: @border-radius-base;
+  border: 1px solid @border-color-primary;
+  background: @background-primary;
+  cursor: pointer;
+  transition: background 0.1s ease;
+
+  &:hover {
+    background: darken(@background-primary, 3%);
+  }
+
+  &.pending {
+    opacity: 0.7;
+    border-style: dashed;
+  }
+
+  .event-time {
+    font-size: 10px;
+    font-weight: @font-weight-semi-bold;
+    color: @text-color-subtle;
+    margin-bottom: 2px;
+  }
+
+  .event-title {
+    font-size: 12px;
+    color: @text-color;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .event-location {
+    font-size: 10px;
+    color: @text-color-very-subtle;
+    margin-top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

From 123f2c154586784b8c93b98779bdb0d45d011151 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 7 Feb 2026 20:06:48 +0000
Subject: [PATCH 2/8] Use AgendaView in sidebar and rename Contacts tab to
 Participants

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
---
 .../message-list/lib/sidebar-agenda-view.tsx  | 125 ++++++++++++++
 .../lib/sidebar-calendar-day-view.tsx         | 159 ------------------
 .../lib/sidebar-view-switcher.tsx             |  10 +-
 .../message-list/lib/sidebar-view-toggle.tsx  |   8 +-
 .../message-list/styles/message-list.less     | 126 +++++---------
 5 files changed, 175 insertions(+), 253 deletions(-)
 create mode 100644 app/internal_packages/message-list/lib/sidebar-agenda-view.tsx
 delete mode 100644 app/internal_packages/message-list/lib/sidebar-calendar-day-view.tsx

diff --git a/app/internal_packages/message-list/lib/sidebar-agenda-view.tsx b/app/internal_packages/message-list/lib/sidebar-agenda-view.tsx
new file mode 100644
index 0000000000..be0875afbe
--- /dev/null
+++ b/app/internal_packages/message-list/lib/sidebar-agenda-view.tsx
@@ -0,0 +1,125 @@
+import moment, { Moment } from 'moment';
+import React from 'react';
+import { Rx, DatabaseStore, Calendar, Actions, localized } from 'mailspring-exports';
+import {
+  CalendarDataSource,
+  EventOccurrence,
+  FocusedEventInfo,
+} from '../../main-calendar/lib/core/calendar-data-source';
+import { AgendaView } from '../../main-calendar/lib/core/agenda-view';
+import { CalendarView } from '../../main-calendar/lib/core/calendar-constants';
+import { CalendarEventPopover } from '../../main-calendar/lib/core/calendar-event-popover';
+import { Disposable } from 'rx-core';
+
+const DISABLED_CALENDARS = 'mailspring.disabledCalendars';
+
+interface SidebarAgendaViewState {
+  focusedMoment: Moment;
+  selectedEvents: EventOccurrence[];
+  focusedEvent: FocusedEventInfo | null;
+  disabledCalendars: string[];
+  calendars: Calendar[];
+}
+
+export class SidebarAgendaView extends React.Component<{}, SidebarAgendaViewState> {
+  static displayName = 'SidebarAgendaView';
+
+  _dataSource = new CalendarDataSource();
+  _configDisposable?: Disposable;
+  _calDisposable?: Disposable;
+
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      focusedMoment: moment(),
+      selectedEvents: [],
+      focusedEvent: null,
+      disabledCalendars: AppEnv.config.get(DISABLED_CALENDARS) || [],
+      calendars: [],
+    };
+  }
+
+  componentDidMount() {
+    this._configDisposable = Rx.Observable.fromConfig<string[] | undefined>(
+      DISABLED_CALENDARS
+    ).subscribe((disabledCalendars) => {
+      this.setState({ disabledCalendars: disabledCalendars || [] });
+    });
+
+    const calQuery = DatabaseStore.findAll<Calendar>(Calendar);
+    this._calDisposable = Rx.Observable.fromQuery(calQuery).subscribe((calendars) => {
+      this.setState({ calendars });
+    });
+  }
+
+  componentWillUnmount() {
+    this._configDisposable?.dispose();
+    this._calDisposable?.dispose();
+  }
+
+  _getReadOnlyCalendarIds(): Set<string> {
+    const ids = new Set<string>();
+    for (const cal of this.state.calendars) {
+      if (cal.readOnly) {
+        ids.add(cal.id);
+      }
+    }
+    return ids;
+  }
+
+  _onChangeFocusedMoment = (m: Moment) => {
+    this.setState({ focusedMoment: m, focusedEvent: null });
+  };
+
+  _onChangeView = () => {
+    // No-op in the sidebar — we always show the agenda view
+  };
+
+  _onEventClick = (e: React.MouseEvent, event: EventOccurrence) => {
+    this.setState({ selectedEvents: [event], focusedEvent: null });
+  };
+
+  _onEventDoubleClick = (event: EventOccurrence) => {
+    const el = document.getElementById(event.id);
+    if (!el) return;
+    Actions.openPopover(<CalendarEventPopover event={event} />, {
+      originRect: el.getBoundingClientRect(),
+      direction: 'left',
+      fallbackDirection: 'right',
+      closeOnAppBlur: false,
+    });
+  };
+
+  _onEventFocused = (event: EventOccurrence) => {
+    this._onEventDoubleClick(event);
+  };
+
+  // No-ops for drag and mouse handlers — not needed in sidebar
+  _noopMouseHandler = () => {};
+  _noopDragStart = () => {};
+
+  render() {
+    return (
+      <div className="sidebar-agenda-view">
+        <AgendaView
+          dataSource={this._dataSource}
+          disabledCalendars={this.state.disabledCalendars}
+          focusedMoment={this.state.focusedMoment}
+          focusedEvent={this.state.focusedEvent}
+          selectedEvents={this.state.selectedEvents}
+          onChangeView={this._onChangeView}
+          onChangeFocusedMoment={this._onChangeFocusedMoment}
+          onEventClick={this._onEventClick}
+          onEventDoubleClick={this._onEventDoubleClick}
+          onEventFocused={this._onEventFocused}
+          onCalendarMouseUp={this._noopMouseHandler}
+          onCalendarMouseDown={this._noopMouseHandler}
+          onCalendarMouseMove={this._noopMouseHandler}
+          dragState={null}
+          onEventDragStart={this._noopDragStart}
+          readOnlyCalendarIds={this._getReadOnlyCalendarIds()}
+        />
+      </div>
+    );
+  }
+}
diff --git a/app/internal_packages/message-list/lib/sidebar-calendar-day-view.tsx b/app/internal_packages/message-list/lib/sidebar-calendar-day-view.tsx
deleted file mode 100644
index 50d3412770..0000000000
--- a/app/internal_packages/message-list/lib/sidebar-calendar-day-view.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import moment, { Moment } from 'moment';
-import React from 'react';
-import {
-  Rx,
-  DatabaseStore,
-  AccountStore,
-  Calendar,
-  Event,
-  Actions,
-  localized,
-} from 'mailspring-exports';
-import { RetinaImg, ScrollRegion } from 'mailspring-component-kit';
-import {
-  CalendarDataSource,
-  EventOccurrence,
-} from '../../main-calendar/lib/core/calendar-data-source';
-import { Disposable } from 'rx-core';
-
-const DISABLED_CALENDARS = 'mailspring.disabledCalendars';
-
-interface SidebarCalendarDayViewState {
-  focusedMoment: Moment;
-  events: EventOccurrence[];
-  disabledCalendars: string[];
-}
-
-export class SidebarCalendarDayView extends React.Component<{}, SidebarCalendarDayViewState> {
-  static displayName = 'SidebarCalendarDayView';
-
-  _dataSource = new CalendarDataSource();
-  _configDisposable?: Disposable;
-  _eventDisposable?: Disposable;
-
-  constructor(props: {}) {
-    super(props);
-    this.state = {
-      focusedMoment: moment(),
-      events: [],
-      disabledCalendars: AppEnv.config.get(DISABLED_CALENDARS) || [],
-    };
-  }
-
-  componentDidMount() {
-    this._configDisposable = Rx.Observable.fromConfig<string[] | undefined>(
-      DISABLED_CALENDARS
-    ).subscribe((disabledCalendars) => {
-      this.setState({ disabledCalendars: disabledCalendars || [] }, () => {
-        this._subscribeToEvents();
-      });
-    });
-    this._subscribeToEvents();
-  }
-
-  componentWillUnmount() {
-    this._configDisposable?.dispose();
-    this._eventDisposable?.dispose();
-  }
-
-  _subscribeToEvents() {
-    this._eventDisposable?.dispose();
-
-    const { focusedMoment, disabledCalendars } = this.state;
-    const startOfDay = focusedMoment.clone().startOf('day');
-    const endOfDay = focusedMoment.clone().endOf('day');
-
-    this._eventDisposable = this._dataSource
-      .buildObservable({
-        disabledCalendars,
-        startUnix: startOfDay.unix(),
-        endUnix: endOfDay.unix(),
-      })
-      .subscribe(({ events }) => {
-        const sorted = events
-          .filter((e) => !e.isCancelled)
-          .sort((a, b) => {
-            if (a.isAllDay && !b.isAllDay) return -1;
-            if (!a.isAllDay && b.isAllDay) return 1;
-            return a.start - b.start;
-          });
-        this.setState({ events: sorted });
-      });
-  }
-
-  _onClickToday = () => {
-    this.setState({ focusedMoment: moment() }, () => this._subscribeToEvents());
-  };
-
-  _onClickPrevDay = () => {
-    this.setState({ focusedMoment: this.state.focusedMoment.clone().subtract(1, 'day') }, () =>
-      this._subscribeToEvents()
-    );
-  };
-
-  _onClickNextDay = () => {
-    this.setState({ focusedMoment: this.state.focusedMoment.clone().add(1, 'day') }, () =>
-      this._subscribeToEvents()
-    );
-  };
-
-  _onClickEvent = (event: EventOccurrence) => {
-    Actions.focusCalendarEvent({ id: event.id, start: event.start });
-  };
-
-  _formatEventTime(event: EventOccurrence) {
-    if (event.isAllDay) {
-      return localized('All Day');
-    }
-    const start = moment.unix(event.start).format('LT');
-    const end = moment.unix(event.end).format('LT');
-    return `${start} - ${end}`;
-  }
-
-  _isToday() {
-    return this.state.focusedMoment.isSame(moment(), 'day');
-  }
-
-  render() {
-    const { focusedMoment, events } = this.state;
-    const isToday = this._isToday();
-    const dateLabel = isToday ? localized('Today') : focusedMoment.format('ddd, MMM D');
-
-    return (
-      <div className="sidebar-calendar-day-view">
-        <div className="sidebar-calendar-header">
-          <button className="btn btn-small btn-nav" onClick={this._onClickPrevDay}>
-            <RetinaImg name="toolbar-chevron-left.png" mode={RetinaImg.Mode.ContentIsMask} />
-          </button>
-          <span
-            className="sidebar-calendar-date"
-            onClick={this._onClickToday}
-            title={localized('Go to today')}
-          >
-            {dateLabel}
-          </span>
-          <button className="btn btn-small btn-nav" onClick={this._onClickNextDay}>
-            <RetinaImg name="toolbar-chevron-right.png" mode={RetinaImg.Mode.ContentIsMask} />
-          </button>
-        </div>
-        <ScrollRegion className="sidebar-calendar-events">
-          {events.length === 0 ? (
-            <div className="sidebar-calendar-empty">{localized('No events')}</div>
-          ) : (
-            events.map((event) => (
-              <div
-                key={event.id}
-                className={`sidebar-calendar-event ${event.isPending ? 'pending' : ''}`}
-                onClick={() => this._onClickEvent(event)}
-              >
-                <div className="event-time">{this._formatEventTime(event)}</div>
-                <div className="event-title">{event.title || localized('(No title)')}</div>
-                {event.location ? <div className="event-location">{event.location}</div> : null}
-              </div>
-            ))
-          )}
-        </ScrollRegion>
-      </div>
-    );
-  }
-}
diff --git a/app/internal_packages/message-list/lib/sidebar-view-switcher.tsx b/app/internal_packages/message-list/lib/sidebar-view-switcher.tsx
index 216d62eb67..0cafb40b52 100644
--- a/app/internal_packages/message-list/lib/sidebar-view-switcher.tsx
+++ b/app/internal_packages/message-list/lib/sidebar-view-switcher.tsx
@@ -3,7 +3,7 @@ import { PropTypes, FocusedContactsStore, Contact } from 'mailspring-exports';
 import { InjectedComponentSet } from 'mailspring-component-kit';
 import { SidebarViewToggle, SidebarView } from './sidebar-view-toggle';
 import { SidebarParticipantPicker } from './sidebar-participant-picker';
-import { SidebarCalendarDayView } from './sidebar-calendar-day-view';
+import { SidebarAgendaView } from './sidebar-agenda-view';
 
 class FocusedContactStorePropsContainer extends React.Component<
   { children: React.ReactElement<any> },
@@ -79,7 +79,7 @@ export class SidebarViewSwitcher extends React.Component<{}, { selectedView: Sid
   constructor(props: {}) {
     super(props);
     this.state = {
-      selectedView: 'contacts',
+      selectedView: 'participants',
     };
   }
 
@@ -93,15 +93,15 @@ export class SidebarViewSwitcher extends React.Component<{}, { selectedView: Sid
     return (
       <div className="sidebar-view-switcher">
         <SidebarViewToggle selectedView={selectedView} onSelectView={this._onSelectView} />
-        {selectedView === 'contacts' ? (
-          <div className="sidebar-contacts-view">
+        {selectedView === 'participants' ? (
+          <div className="sidebar-participants-view">
             <SidebarParticipantPicker />
             <FocusedContactStorePropsContainer>
               <SidebarPluginContainerInner />
             </FocusedContactStorePropsContainer>
           </div>
         ) : (
-          <SidebarCalendarDayView />
+          <SidebarAgendaView />
         )}
       </div>
     );
diff --git a/app/internal_packages/message-list/lib/sidebar-view-toggle.tsx b/app/internal_packages/message-list/lib/sidebar-view-toggle.tsx
index c194f88ae9..f5c9f25edb 100644
--- a/app/internal_packages/message-list/lib/sidebar-view-toggle.tsx
+++ b/app/internal_packages/message-list/lib/sidebar-view-toggle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { localized } from 'mailspring-exports';
 
-export type SidebarView = 'contacts' | 'calendar';
+export type SidebarView = 'participants' | 'calendar';
 
 interface SidebarViewToggleProps {
   selectedView: SidebarView;
@@ -16,10 +16,10 @@ export class SidebarViewToggle extends React.Component<SidebarViewToggleProps> {
     return (
       <div className="sidebar-view-toggle">
         <button
-          className={`toggle-btn ${selectedView === 'contacts' ? 'active' : ''}`}
-          onClick={() => onSelectView('contacts')}
+          className={`toggle-btn ${selectedView === 'participants' ? 'active' : ''}`}
+          onClick={() => onSelectView('participants')}
         >
-          {localized('Contacts')}
+          {localized('Participants')}
         </button>
         <button
           className={`toggle-btn ${selectedView === 'calendar' ? 'active' : ''}`}
diff --git a/app/internal_packages/message-list/styles/message-list.less b/app/internal_packages/message-list/styles/message-list.less
index e5ca30c85a..b69dd94d8d 100644
--- a/app/internal_packages/message-list/styles/message-list.less
+++ b/app/internal_packages/message-list/styles/message-list.less
@@ -863,111 +863,67 @@ body.platform-win32 {
   }
 }
 
-.sidebar-contacts-view {
+.sidebar-participants-view {
   flex: 1;
   overflow: auto;
 }
 
-///////////////////////////////
-// sidebar-calendar-day-view //
-///////////////////////////////
-.sidebar-calendar-day-view {
+///////////////////////////
+// sidebar-agenda-view   //
+///////////////////////////
+.sidebar-agenda-view {
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow: hidden;
-}
-
-.sidebar-calendar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px;
-  flex-shrink: 0;
 
-  .btn-nav {
-    padding: 2px 6px;
-    background: transparent;
-    border: 1px solid @border-color-primary;
-    border-radius: @border-radius-base;
-    cursor: pointer;
+  // The AgendaView is designed for full-width calendar window — adapt it for
+  // the narrow sidebar panel (150-300px).
+  .calendar-view.agenda-view {
     display: flex;
-    align-items: center;
-    justify-content: center;
+    flex-direction: column;
+    height: 100%;
 
-    img {
-      width: 10px;
-      height: 10px;
-    }
-
-    &:hover {
-      background: fade(@background-primary, 50%);
+    // Hide the top-banner (injected component area) in the sidebar
+    .top-banner {
+      display: none;
     }
-  }
 
-  .sidebar-calendar-date {
-    font-size: 12px;
-    font-weight: @font-weight-semi-bold;
-    color: @text-color;
-    cursor: pointer;
+    // Compact the header controls for narrow width
+    .calendar-header-controls {
+      padding: 4px 6px;
 
-    &:hover {
-      text-decoration: underline;
+      .title {
+        font-size: 11px;
+      }
     }
-  }
-}
-
-.sidebar-calendar-events {
-  flex: 1;
-  overflow: auto;
-}
-
-.sidebar-calendar-empty {
-  padding: 20px 15px;
-  text-align: center;
-  color: @text-color-very-subtle;
-  font-size: 12px;
-}
 
-.sidebar-calendar-event {
-  padding: 8px 10px;
-  margin: 0 5px 4px 5px;
-  border-radius: @border-radius-base;
-  border: 1px solid @border-color-primary;
-  background: @background-primary;
-  cursor: pointer;
-  transition: background 0.1s ease;
+    // Make the scroll region fill available space
+    .agenda-scroll-region {
+      flex: 1;
+    }
 
-  &:hover {
-    background: darken(@background-primary, 3%);
-  }
+    // Tighten the day headers for sidebar
+    .agenda-day-header {
+      padding: 6px 8px;
+      font-size: 11px;
+    }
 
-  &.pending {
-    opacity: 0.7;
-    border-style: dashed;
-  }
+    // Compact event cards for narrow width
+    .agenda-event {
+      padding: 4px 6px;
 
-  .event-time {
-    font-size: 10px;
-    font-weight: @font-weight-semi-bold;
-    color: @text-color-subtle;
-    margin-bottom: 2px;
-  }
+      .agenda-event-time {
+        font-size: 10px;
+      }
 
-  .event-title {
-    font-size: 12px;
-    color: @text-color;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+      .agenda-event-title {
+        font-size: 11px;
+      }
 
-  .event-location {
-    font-size: 10px;
-    color: @text-color-very-subtle;
-    margin-top: 2px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+      .agenda-event-location {
+        font-size: 10px;
+      }
+    }
   }
 }

From b98f9c8951bedfc72ae0f2c5ebe50b7493fd19ba Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 7 Feb 2026 21:16:42 +0000
Subject: [PATCH 3/8] Fix sidebar agenda header: hide view picker, center date
 navigation

- 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
---
 .../message-list/styles/message-list.less     | 82 +++++++++++--------
 1 file changed, 49 insertions(+), 33 deletions(-)

diff --git a/app/internal_packages/message-list/styles/message-list.less b/app/internal_packages/message-list/styles/message-list.less
index b69dd94d8d..12bf585f9e 100644
--- a/app/internal_packages/message-list/styles/message-list.less
+++ b/app/internal_packages/message-list/styles/message-list.less
@@ -282,7 +282,9 @@ body.platform-win32 {
     .message-item-white-wrap {
       background: @background-primary;
       border: 0;
-      box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08);
+      box-shadow:
+        0 0 0.5px rgba(0, 0, 0, 0.28),
+        0 1px 1.5px rgba(0, 0, 0, 0.08);
       border-radius: 4px;
     }
 
@@ -390,8 +392,11 @@ body.platform-win32 {
       position: relative;
       border-top: 1px solid @border-color-divider;
       background-color: darken(@background-primary, 2%);
-      box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1), 0 -0.5px 0 rgba(0, 0, 0, 0.1),
-        0.5px 0 0 rgba(0, 0, 0, 0.1), -0.5px 0 0 rgba(0, 0, 0, 0.1);
+      box-shadow:
+        0 0.5px 0 rgba(0, 0, 0, 0.1),
+        0 -0.5px 0 rgba(0, 0, 0, 0.1),
+        0.5px 0 0 rgba(0, 0, 0, 0.1),
+        -0.5px 0 0 rgba(0, 0, 0, 0.1);
     }
   }
 
@@ -433,7 +438,9 @@ body.platform-win32 {
     }
 
     .message-actions-wrap {
-      transition: opacity 100ms, width 150ms;
+      transition:
+        opacity 100ms,
+        width 150ms;
       transition-delay: 50ms, 0ms;
       transition-timing-function: ease-in-out;
       opacity: 1;
@@ -554,7 +561,9 @@ body.platform-win32 {
     z-index: 2;
 
     border: 0;
-    box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08);
+    box-shadow:
+      0 0 0.5px rgba(0, 0, 0, 0.28),
+      0 1px 1.5px rgba(0, 0, 0, 0.08);
     border-top: 1px dashed @border-color-divider;
     border-radius: 0 0 4px 4px;
     background: @background-primary;
@@ -840,7 +849,9 @@ body.platform-win32 {
     background: transparent;
     color: @text-color-subtle;
     cursor: pointer;
-    transition: background 0.1s ease, color 0.1s ease;
+    transition:
+      background 0.1s ease,
+      color 0.1s ease;
 
     &:first-child {
       border-radius: @border-radius-base 0 0 @border-radius-base;
@@ -889,41 +900,46 @@ body.platform-win32 {
       display: none;
     }
 
-    // Compact the header controls for narrow width
-    .calendar-header-controls {
-      padding: 4px 6px;
+    // Adapt the header controls for the narrow sidebar
+    .header-controls {
+      padding: 6px 8px;
+      position: relative;
 
-      .title {
-        font-size: 11px;
+      // Hide the Day/Week/Month/Agenda view picker — not useful in the sidebar
+      .view-controls {
+        display: none;
       }
-    }
 
-    // Make the scroll region fill available space
-    .agenda-scroll-region {
-      flex: 1;
-    }
-
-    // Tighten the day headers for sidebar
-    .agenda-day-header {
-      padding: 6px 8px;
-      font-size: 11px;
-    }
+      // Hide the absolutely-positioned "Today" button to avoid overlap
+      > .btn {
+        display: none;
+      }
 
-    // Compact event cards for narrow width
-    .agenda-event {
-      padding: 4px 6px;
+      .center-controls {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
 
-      .agenda-event-time {
-        font-size: 10px;
+        .title {
+          width: auto;
+          font-size: 13px;
+          text-align: center;
+        }
       }
+    }
 
-      .agenda-event-title {
-        font-size: 11px;
-      }
+    // Constrain the event list for narrow width
+    .agenda-event-list {
+      padding: 0 8px 12px;
+    }
 
-      .agenda-event-location {
-        font-size: 10px;
-      }
+    // Let the time column wrap instead of using a fixed 130px width
+    .agenda-event-time {
+      width: auto;
+      min-width: 0;
+      flex-shrink: 1;
+      white-space: nowrap;
     }
   }
 }

From 6449e59c727af3c9e4a484e9e67a32c723db40da Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 8 Feb 2026 04:37:44 +0000
Subject: [PATCH 4/8] Add mailspring-calendar class wrapper so agenda styles
 apply

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
---
 .../message-list/lib/sidebar-agenda-view.tsx                 | 2 +-
 app/internal_packages/message-list/styles/message-list.less  | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/internal_packages/message-list/lib/sidebar-agenda-view.tsx b/app/internal_packages/message-list/lib/sidebar-agenda-view.tsx
index be0875afbe..d6c33f6f6b 100644
--- a/app/internal_packages/message-list/lib/sidebar-agenda-view.tsx
+++ b/app/internal_packages/message-list/lib/sidebar-agenda-view.tsx
@@ -100,7 +100,7 @@ export class SidebarAgendaView extends React.Component<{}, SidebarAgendaViewStat
 
   render() {
     return (
-      <div className="sidebar-agenda-view">
+      <div className="sidebar-agenda-view mailspring-calendar">
         <AgendaView
           dataSource={this._dataSource}
           disabledCalendars={this.state.disabledCalendars}
diff --git a/app/internal_packages/message-list/styles/message-list.less b/app/internal_packages/message-list/styles/message-list.less
index 12bf585f9e..4997230050 100644
--- a/app/internal_packages/message-list/styles/message-list.less
+++ b/app/internal_packages/message-list/styles/message-list.less
@@ -929,6 +929,11 @@ body.platform-win32 {
       }
     }
 
+    // Ensure the scroll region fills available space
+    .agenda-scroll-region {
+      flex: 1;
+    }
+
     // Constrain the event list for narrow width
     .agenda-event-list {
       padding: 0 8px 12px;

From 38cd36c03f316e459590f06a994391147f5fefd9 Mon Sep 17 00:00:00 2001
From: Ben Gotow <ben@foundry376.com>
Date: Sat, 7 Feb 2026 22:45:01 -0600
Subject: [PATCH 5/8] Expose the calendar pacakge in the main window

---
 .../main-calendar/lib/main.tsx                | 26 ++++++++++---------
 .../main-calendar/package.json                |  1 +
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/app/internal_packages/main-calendar/lib/main.tsx b/app/internal_packages/main-calendar/lib/main.tsx
index 119b48ebce..5c4fceed85 100644
--- a/app/internal_packages/main-calendar/lib/main.tsx
+++ b/app/internal_packages/main-calendar/lib/main.tsx
@@ -17,18 +17,20 @@ const Notice = () =>
 Notice.displayName = 'Notice';
 
 export function activate() {
-  ComponentRegistry.register(MailspringCalendar, {
-    location: WorkspaceStore.Location.Center,
-  });
-  ComponentRegistry.register(Notice, {
-    location: WorkspaceStore.Sheet.Main.Header,
-  });
-  ComponentRegistry.register(QuickEventButton, {
-    location: WorkspaceStore.Location.Center.Toolbar,
-  });
-  ComponentRegistry.register(EventSearchBar, {
-    location: WorkspaceStore.Location.Center.Toolbar,
-  });
+  if (AppEnv.getWindowType() === 'calendar') {
+    ComponentRegistry.register(MailspringCalendar, {
+      location: WorkspaceStore.Location.Center,
+    });
+    ComponentRegistry.register(Notice, {
+      location: WorkspaceStore.Sheet.Main.Header,
+    });
+    ComponentRegistry.register(QuickEventButton, {
+      location: WorkspaceStore.Location.Center.Toolbar,
+    });
+    ComponentRegistry.register(EventSearchBar, {
+      location: WorkspaceStore.Location.Center.Toolbar,
+    });
+  }
 }
 
 export function deactivate() {
diff --git a/app/internal_packages/main-calendar/package.json b/app/internal_packages/main-calendar/package.json
index 4f39fdcff6..2deb9f7a77 100644
--- a/app/internal_packages/main-calendar/package.json
+++ b/app/internal_packages/main-calendar/package.json
@@ -11,6 +11,7 @@
     "mailspring": "*"
   },
   "windowTypes": {
+    "default": true,
     "calendar": true
   }
 }

From 01aa6a5bcb834005a3b74d0237e7493bc7fa1c8f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 8 Feb 2026 04:46:45 +0000
Subject: [PATCH 6/8] Stack agenda event time/title/location vertically in
 sidebar

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
---
 .../message-list/styles/message-list.less     | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/internal_packages/message-list/styles/message-list.less b/app/internal_packages/message-list/styles/message-list.less
index 4997230050..cccba239df 100644
--- a/app/internal_packages/message-list/styles/message-list.less
+++ b/app/internal_packages/message-list/styles/message-list.less
@@ -939,12 +939,23 @@ body.platform-win32 {
       padding: 0 8px 12px;
     }
 
-    // Let the time column wrap instead of using a fixed 130px width
-    .agenda-event-time {
-      width: auto;
-      min-width: 0;
-      flex-shrink: 1;
-      white-space: nowrap;
+    // Stack event content vertically: color-bar on the left, then
+    // time / title / location stacked top-to-bottom instead of the
+    // two-column (time | details) layout used in the full calendar.
+    .agenda-event {
+      flex-wrap: wrap;
+
+      .agenda-event-time {
+        width: auto;
+        flex-basis: auto;
+        flex-shrink: 1;
+      }
+
+      .agenda-event-details {
+        flex-basis: 100%;
+        // Indent to align with the time text (past the color-bar + its margin)
+        padding-left: 16px;
+      }
     }
   }
 }

From 99bbb1dfcdd25eeb30e921329036c47e4158fb2e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 8 Feb 2026 04:49:30 +0000
Subject: [PATCH 7/8] Push prev/next arrows to edges of sidebar header

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
---
 app/internal_packages/message-list/styles/message-list.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/internal_packages/message-list/styles/message-list.less b/app/internal_packages/message-list/styles/message-list.less
index cccba239df..639383dcb6 100644
--- a/app/internal_packages/message-list/styles/message-list.less
+++ b/app/internal_packages/message-list/styles/message-list.less
@@ -918,11 +918,12 @@ body.platform-win32 {
       .center-controls {
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: space-between;
         width: 100%;
 
         .title {
           width: auto;
+          flex: 1;
           font-size: 13px;
           text-align: center;
         }

From af8c72356f17a74bc79bc0a489b2c80cf873e36f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 8 Feb 2026 04:57:13 +0000
Subject: [PATCH 8/8] Use CSS grid for sidebar agenda events to stack time
 above details

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
---
 .../message-list/styles/message-list.less     | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/app/internal_packages/message-list/styles/message-list.less b/app/internal_packages/message-list/styles/message-list.less
index 639383dcb6..ae1551d1c1 100644
--- a/app/internal_packages/message-list/styles/message-list.less
+++ b/app/internal_packages/message-list/styles/message-list.less
@@ -941,21 +941,30 @@ body.platform-win32 {
     }
 
     // Stack event content vertically: color-bar on the left, then
-    // time / title / location stacked top-to-bottom instead of the
-    // two-column (time | details) layout used in the full calendar.
+    // time above title/location on the right, with no gap.
     .agenda-event {
-      flex-wrap: wrap;
-
+      // Keep the default row flex — color-bar and content side by side.
+      // The content after the bar becomes a vertical column.
       .agenda-event-time {
         width: auto;
-        flex-basis: auto;
-        flex-shrink: 1;
+        flex: none;
       }
 
       .agenda-event-details {
         flex-basis: 100%;
-        // Indent to align with the time text (past the color-bar + its margin)
-        padding-left: 16px;
+      }
+
+      // Wrap time + details in a column so they stack tightly
+      // after the color-bar. We achieve this by making the event
+      // itself a CSS grid: [bar] [stacked-content].
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-rows: auto auto;
+      column-gap: 0;
+
+      .agenda-event-color-bar {
+        grid-row: 1 / -1;
+        margin-right: 8px;
       }
     }
   }