feat: add support for right-side composer sidebar and update related types

components/email/email-composer.tsx

@@ -1105,6 +1105,7 @@ export function EmailComposer({
         name="composer-sidebar"
         className="hidden md:flex shrink-0 h-full overflow-hidden border-r border-border"
       />
+      {/* Right-side composer sidebar slot is rendered after the main content div below. */}
     <div
       className="flex flex-col h-full bg-background relative flex-1 min-w-0"
       data-tour="composer"
@@ -1679,6 +1680,10 @@ export function EmailComposer({
         </div>
       )}
     </div>
+      <PluginSlot
+        name="composer-sidebar-right"
+        className="hidden md:flex shrink-0 h-full overflow-hidden border-l border-border"
+      />
     </div>
   );
 }

lib/__tests__/plugin-store.test.ts

@@ -48,6 +48,7 @@ function resetStore() {
       'email-footer': [],
       'composer-toolbar': [],
       'composer-sidebar': [],
+      'composer-sidebar-right': [],
       'sidebar-widget': [],
       'email-detail-sidebar': [],
       'settings-section': [],

lib/plugin-api.ts

@@ -612,7 +612,8 @@ export function createPluginAPI(plugin: InstalledPlugin): PluginAPI {
 
       registerComposerSidebar: (widget: SidebarWidget) => {
         requirePermission(plugin, 'ui:composer-sidebar');
-        return registerSlot(plugin.id, 'composer-sidebar', widget.render as React.ComponentType<Record<string, unknown>>, widget.order ?? 100);
+        const slot = widget.side === 'right' ? 'composer-sidebar-right' : 'composer-sidebar';
+        return registerSlot(plugin.id, slot, widget.render as React.ComponentType<Record<string, unknown>>, widget.order ?? 100);
       },
 
       registerDetailSidebar: (widget: SidebarWidget) => {

lib/plugin-types.ts

@@ -110,6 +110,7 @@ export type SlotName =
   | 'email-footer'
   | 'composer-toolbar'
   | 'composer-sidebar'
+  | 'composer-sidebar-right'
   | 'sidebar-widget'
   | 'email-detail-sidebar'
   | 'settings-section'
@@ -159,6 +160,12 @@ export interface SidebarWidget {
   label: string;
   render: React.ComponentType;
   order?: number;
+  /**
+   * For composer sidebars, choose which side of the New Message dialog the
+   * panel renders on. Defaults to `'left'` for backwards compatibility.
+   * Ignored by other sidebar slots.
+   */
+  side?: 'left' | 'right';
 }
 
 export interface ContextMenuItem {

stores/plugin-store.ts

@@ -20,7 +20,7 @@ import { apiFetch } from '@/lib/browser-navigation';
 // ─── Slot State ──────────────────────────────────────────────
 
 const SLOT_NAMES: SlotName[] = [
-  'toolbar-actions', 'email-banner', 'email-footer', 'composer-toolbar', 'composer-sidebar',
+  'toolbar-actions', 'email-banner', 'email-footer', 'composer-toolbar', 'composer-sidebar', 'composer-sidebar-right',
   'sidebar-widget', 'email-detail-sidebar', 'settings-section', 'context-menu-email', 'navigation-rail-bottom',
   'calendar-event-actions', 'admin-plugin-page',
 ];