From 081844413bb033ca664945529ea251ab9502506a Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Mon, 18 May 2026 15:12:51 -0300
Subject: [PATCH 01/18] chore(storybook): expose DDPCommon stub on meteor mock
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`client/lib/sdk/ddpProtocol.ts` destructures `parseDDP` and
`stringifyDDP` from `DDPCommon` at module load. Without a matching
entry in the meteor mock any story whose bundle reaches the SDK
chain crashes with:

  Cannot destructure property 'parseDDP' of 'DDPCommon' as it is undefined

Add a narrow `DDPCommon` no-op (parseDDP/stringifyDDP) so the
destructuring resolves. Scoped change — does not re-introduce the
broader SDKClient stub.
---
 apps/meteor/.storybook/mocks/meteor.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/.storybook/mocks/meteor.ts b/apps/meteor/.storybook/mocks/meteor.ts
index e3f0e0a979e70..7fdd0161454fe 100644
--- a/apps/meteor/.storybook/mocks/meteor.ts
+++ b/apps/meteor/.storybook/mocks/meteor.ts
@@ -29,6 +29,11 @@ export const Meteor = {
 	users: {},
 };
 
+export const DDPCommon = {
+	parseDDP: () => undefined,
+	stringifyDDP: () => '',
+};
+
 export const Tracker = {
 	autorun: () => ({
 		stop: () => {},
@@ -94,5 +99,3 @@ export const Session = {
 	get: () => {},
 	set: () => {},
 };
-
-export const DDPCommon = {};

From 723450d5807ea920a947e19bc60958ec2c15ff5a Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Mon, 18 May 2026 15:12:57 -0300
Subject: [PATCH 02/18] feat(ui): add HorizontalDivider wrapper around fuselage
 Divider

Thin wrapper that forces `vertical={false}` on `@rocket.chat/fuselage`
Divider, providing a single horizontal-only entrypoint for callers
that want to express intent at the type level without re-implementing
the visual style.
---
 .../components/HorizontalDivider/HorizontalDivider.tsx    | 8 ++++++++
 apps/meteor/client/components/HorizontalDivider/index.ts  | 1 +
 2 files changed, 9 insertions(+)
 create mode 100644 apps/meteor/client/components/HorizontalDivider/HorizontalDivider.tsx
 create mode 100644 apps/meteor/client/components/HorizontalDivider/index.ts

diff --git a/apps/meteor/client/components/HorizontalDivider/HorizontalDivider.tsx b/apps/meteor/client/components/HorizontalDivider/HorizontalDivider.tsx
new file mode 100644
index 0000000000000..8e44ec39a1287
--- /dev/null
+++ b/apps/meteor/client/components/HorizontalDivider/HorizontalDivider.tsx
@@ -0,0 +1,8 @@
+import { Divider } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+type HorizontalDividerProps = Omit<ComponentProps<typeof Divider>, 'vertical'>;
+
+const HorizontalDivider = (props: HorizontalDividerProps) => <Divider {...props} vertical={false} />;
+
+export default HorizontalDivider;
diff --git a/apps/meteor/client/components/HorizontalDivider/index.ts b/apps/meteor/client/components/HorizontalDivider/index.ts
new file mode 100644
index 0000000000000..dc7f5fe8b5e2d
--- /dev/null
+++ b/apps/meteor/client/components/HorizontalDivider/index.ts
@@ -0,0 +1 @@
+export { default } from './HorizontalDivider';

From 96b6ceb43e5ab396d257969ea5a7edaffc03a34d Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Tue, 19 May 2026 13:10:40 -0300
Subject: [PATCH 03/18] feat(ui-voip): add inline mount mode to MediaCallWidget

The widget is currently a floating, draggable portal. The sidebar
rail needs to host the same widget anchored inside a slot, so add a
slot-based mount mechanism and let the widget render in place without
dragging or border styles.

Slot mechanism
- `MediaCallWidgetSlotContext`: shared context exposing the active
  slot element + an `inline` boolean.
- `MediaCallWidgetSlot`: drop-in component that registers its own
  `<div>` as the target. Removing it from the tree restores the
  floating portal automatically. The slot aligns its child to the
  top so the anchored widget keeps its intrinsic height instead of
  stretching to the container.
- `MediaCallProvider`: hosts the slot state above the view provider
  so consumers in `children` and the widget itself share the same
  context value. `MediaCallProvider` now wraps `children` with
  `MediaCallViewProvider` so `useMediaCallView` resolves in the app
  tree.
- `MediaCallViewProvider`: when a slot is registered the widget is
  rendered via `createPortal(widget, slot)`; otherwise it falls back
  to the previous `AnchorPortal` mount.

Widget composition
- `WidgetBase`: inline branch drops the fixed positioning, border,
  and z-index. Background, border-radius, shadow and width are kept
  so the anchored render looks the same as the floating one.
- `Widget`: read inline from context, skip drag wiring when inline.
- `WidgetHandle`: hide itself when inline (drag is disabled).
- `NewCall`: render the numeric Keypad below the autocomplete when
  inline so the dialer matches the sidebar layout in the design.

Visibility rules
- Only "undock" the widget for active call states (calling, ringing,
  ongoing). When the slot is gone and the session is idle the widget
  renders nothing instead of popping out as a floating NewCall.

Snapshot tests regenerated to reflect the inline-aware render tree.
---
 .../src/components/MediaCallWidgetSlot.tsx    | 19 +++++++++++
 .../ui-voip/src/components/Widget/Widget.tsx  | 34 +++++++++++++------
 .../src/components/Widget/WidgetHandle.tsx    |  7 ++++
 .../Widget/__snapshots__/Widget.spec.tsx.snap |  2 +-
 packages/ui-voip/src/components/index.ts      |  1 +
 .../src/context/MediaCallWidgetSlotContext.ts | 19 +++++++++++
 packages/ui-voip/src/index.ts                 |  2 ++
 .../src/providers/MediaCallProvider.tsx       | 26 ++++++++++----
 .../ui-voip/src/providers/useMediaSession.ts  |  6 ++++
 .../src/views/MediaCallWidget/NewCall.tsx     | 10 +++++-
 .../MediaCallWidget.spec.tsx.snap             | 12 +++----
 11 files changed, 112 insertions(+), 26 deletions(-)
 create mode 100644 packages/ui-voip/src/components/MediaCallWidgetSlot.tsx
 create mode 100644 packages/ui-voip/src/context/MediaCallWidgetSlotContext.ts

diff --git a/packages/ui-voip/src/components/MediaCallWidgetSlot.tsx b/packages/ui-voip/src/components/MediaCallWidgetSlot.tsx
new file mode 100644
index 0000000000000..6a00996d002d3
--- /dev/null
+++ b/packages/ui-voip/src/components/MediaCallWidgetSlot.tsx
@@ -0,0 +1,19 @@
+import { useLayoutEffect, useRef } from 'react';
+
+import { useMediaCallWidgetSlot } from '../context/MediaCallWidgetSlotContext';
+
+const slotStyle = { display: 'flex', alignItems: 'flex-start', flex: '0 0 auto', width: '100%' } as const;
+
+const MediaCallWidgetSlot = () => {
+	const ref = useRef<HTMLDivElement>(null);
+	const { setSlot } = useMediaCallWidgetSlot();
+
+	useLayoutEffect(() => {
+		setSlot(ref.current);
+		return () => setSlot(null);
+	}, [setSlot]);
+
+	return <div ref={ref} style={slotStyle} />;
+};
+
+export default MediaCallWidgetSlot;
diff --git a/packages/ui-voip/src/components/Widget/Widget.tsx b/packages/ui-voip/src/components/Widget/Widget.tsx
index 06e040949cd1b..f3f4bb9cd7db8 100644
--- a/packages/ui-voip/src/components/Widget/Widget.tsx
+++ b/packages/ui-voip/src/components/Widget/Widget.tsx
@@ -5,29 +5,36 @@ import type { ComponentProps, ReactNode } from 'react';
 import { useLayoutEffect } from 'react';
 
 import { DragContext } from './WidgetDraggableContext';
+import { useMediaCallWidgetSlot } from '../../context/MediaCallWidgetSlotContext';
 import { useDraggable } from '../../hooks';
 import { type LastKnownPosition } from '../../providers/useWidgetPositionTracker';
 
 // TODO: Initial position from the draggable api instead of style props
 // TODO: A11Y
-const WidgetBase = styled('div')`
-	position: fixed;
+const WidgetBase = styled('div', ({ inline: _inline, ...props }: { inline?: boolean }) => props)`
 	padding: 0;
-	right: 2em;
-	top: 11em;
 	display: flex;
 	flex-direction: column;
 	width: 248px;
 	min-height: 128px;
 	border-radius: 4px;
-	border: 1px solid ${Palette.stroke['stroke-dark'].toString()};
-	box-shadow:
-		0px 0px 1px 0px ${Palette.shadow['shadow-elevation-2x'].toString()},
-		0px 0px 12px 0px ${Palette.shadow['shadow-elevation-2y'].toString()};
 	background-color: ${Palette.surface['surface-tint'].toString()};
 	color: ${Palette.text['font-default'].toString()};
-	z-index: 100;
 	overflow: hidden;
+
+	${({ inline }) =>
+		inline
+			? ''
+			: `
+		position: fixed;
+		right: 2em;
+		top: 11em;
+		border: 1px solid ${Palette.stroke['stroke-dark'].toString()};
+		box-shadow:
+			0px 0px 1px 0px ${Palette.shadow['shadow-elevation-2x'].toString()},
+			0px 0px 12px 0px ${Palette.shadow['shadow-elevation-2y'].toString()};
+		z-index: 100;
+	`}
 `;
 
 export type WidgetProps = {
@@ -37,18 +44,23 @@ export type WidgetProps = {
 } & ComponentProps<typeof WidgetBase>;
 
 const Widget = ({ children, onChangePosition, restorePosition, ...props }: WidgetProps) => {
+	const { inline } = useMediaCallWidgetSlot();
 	const [draggableRef, boundingRef, handleRef] = useDraggable({ onChangePosition, restorePosition });
 
 	useLayoutEffect(() => {
+		if (inline) {
+			return;
+		}
 		boundingRef(document.body);
-	}, [boundingRef]);
+	}, [boundingRef, inline]);
 
 	return (
 		<DragContext.Provider value={{ draggableRef, boundingRef, handleRef }}>
 			<FocusScope autoFocus>
 				<WidgetBase
 					{...props}
-					ref={draggableRef}
+					inline={inline}
+					ref={inline ? undefined : draggableRef}
 					role='dialog'
 					aria-labelledby='rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info'
 				>
diff --git a/packages/ui-voip/src/components/Widget/WidgetHandle.tsx b/packages/ui-voip/src/components/Widget/WidgetHandle.tsx
index 059f063423df0..ff0288e3fabaf 100644
--- a/packages/ui-voip/src/components/Widget/WidgetHandle.tsx
+++ b/packages/ui-voip/src/components/Widget/WidgetHandle.tsx
@@ -3,6 +3,7 @@ import { Box, Icon, Palette } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 
 import { useDraggableWidget } from './WidgetDraggableContext';
+import { useMediaCallWidgetSlot } from '../../context/MediaCallWidgetSlotContext';
 
 const dragHandle = css`
 	cursor: grab;
@@ -21,6 +22,12 @@ const dragHandle = css`
 
 const WidgetHandle = (props: ComponentProps<typeof Box>) => {
 	const { handleRef } = useDraggableWidget();
+	const { inline } = useMediaCallWidgetSlot();
+
+	if (inline) {
+		return null;
+	}
+
 	return (
 		<Box height={20} display='flex' flexDirection='row' justifyContent='center' className={dragHandle} ref={handleRef} {...props}>
 			<Icon name='stacked-meatballs' size='x20' />
diff --git a/packages/ui-voip/src/components/Widget/__snapshots__/Widget.spec.tsx.snap b/packages/ui-voip/src/components/Widget/__snapshots__/Widget.spec.tsx.snap
index 041b73b7e6363..22c3c847638bf 100644
--- a/packages/ui-voip/src/components/Widget/__snapshots__/Widget.spec.tsx.snap
+++ b/packages/ui-voip/src/components/Widget/__snapshots__/Widget.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`renders FullWidget without crashing 1`] = `
     />
     <div
       aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-1rau14i"
+      class="rcx-css-186fl58"
       role="dialog"
     >
       <div
diff --git a/packages/ui-voip/src/components/index.ts b/packages/ui-voip/src/components/index.ts
index 0f4ee8b2011fe..1a74180bd381f 100644
--- a/packages/ui-voip/src/components/index.ts
+++ b/packages/ui-voip/src/components/index.ts
@@ -13,3 +13,4 @@ export { default as Timer } from './Timer';
 export { default as DevicePicker } from './DevicePicker';
 export { default as CallHistoryInternalUser } from './CallHistoryInternalUser';
 export { default as CallHistoryExternalUser } from './CallHistoryExternalUser';
+export { default as MediaCallWidgetSlot } from './MediaCallWidgetSlot';
diff --git a/packages/ui-voip/src/context/MediaCallWidgetSlotContext.ts b/packages/ui-voip/src/context/MediaCallWidgetSlotContext.ts
new file mode 100644
index 0000000000000..7f6611cca73b5
--- /dev/null
+++ b/packages/ui-voip/src/context/MediaCallWidgetSlotContext.ts
@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+export type MediaCallWidgetSlotContextValue = {
+	slot: HTMLElement | null;
+	inline: boolean;
+	setSlot: (element: HTMLElement | null) => void;
+};
+
+const defaultValue: MediaCallWidgetSlotContextValue = {
+	slot: null,
+	inline: false,
+	setSlot: () => undefined,
+};
+
+const MediaCallWidgetSlotContext = createContext<MediaCallWidgetSlotContextValue>(defaultValue);
+
+export const useMediaCallWidgetSlot = (): MediaCallWidgetSlotContextValue => useContext(MediaCallWidgetSlotContext);
+
+export default MediaCallWidgetSlotContext;
diff --git a/packages/ui-voip/src/index.ts b/packages/ui-voip/src/index.ts
index ab88f1020af61..08b3bff1db801 100644
--- a/packages/ui-voip/src/index.ts
+++ b/packages/ui-voip/src/index.ts
@@ -2,6 +2,7 @@ export { default as MediaCallProvider } from './providers/MediaCallProvider';
 
 export {
 	MediaCallInstanceContext,
+	useMediaCallView,
 	useWidgetExternalControls,
 	usePeekMediaSessionState,
 	usePeekMediaSessionPeerInfo,
@@ -10,6 +11,7 @@ export {
 export type { PeekMediaSessionStateReturn } from './context';
 export type { PeerInfo } from './context';
 export { useMediaCallAction, useMediaCallOpenRoomTracker } from './hooks';
+export { MediaCallWidgetSlot } from './components';
 
 export { CallHistoryContextualBar, MediaCallRoomActivity } from './views';
 export type { CallHistoryData } from './views';
diff --git a/packages/ui-voip/src/providers/MediaCallProvider.tsx b/packages/ui-voip/src/providers/MediaCallProvider.tsx
index 423ccadc6c3e2..eb5097c72912e 100644
--- a/packages/ui-voip/src/providers/MediaCallProvider.tsx
+++ b/packages/ui-voip/src/providers/MediaCallProvider.tsx
@@ -1,8 +1,11 @@
 import { AnchorPortal } from '@rocket.chat/ui-client';
 import type { ReactNode } from 'react';
+import { useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import MediaCallInstanceProvider from './MediaCallInstanceProvider';
 import MediaCallViewProvider from './MediaCallViewProvider';
+import MediaCallWidgetSlotContext from '../context/MediaCallWidgetSlotContext';
 import { MediaCallWidget } from '../views';
 import MediaCallPopout from '../views/MediaCallPopout';
 
@@ -11,15 +14,24 @@ export type MediaCallProviderProps = {
 };
 
 const MediaCallProvider = ({ children }: MediaCallProviderProps) => {
+	const [slot, setSlot] = useState<HTMLElement | null>(null);
+	const slotValue = useMemo(() => ({ slot, inline: slot !== null, setSlot }), [slot]);
+
 	return (
 		<MediaCallInstanceProvider>
-			<MediaCallViewProvider>
-				<AnchorPortal id='rcx-media-call-widget-portal'>
-					<MediaCallWidget />
-				</AnchorPortal>
-			</MediaCallViewProvider>
-			<MediaCallPopout />
-			{children}
+			<MediaCallWidgetSlotContext.Provider value={slotValue}>
+				<MediaCallViewProvider>
+					{slot ? (
+						createPortal(<MediaCallWidget />, slot)
+					) : (
+						<AnchorPortal id='rcx-media-call-widget-portal'>
+							<MediaCallWidget />
+						</AnchorPortal>
+					)}
+				</MediaCallViewProvider>
+				<MediaCallPopout />
+				{children}
+			</MediaCallWidgetSlotContext.Provider>
 		</MediaCallInstanceProvider>
 	);
 };
diff --git a/packages/ui-voip/src/providers/useMediaSession.ts b/packages/ui-voip/src/providers/useMediaSession.ts
index fb9f59a109507..7ded1ef7a47ac 100644
--- a/packages/ui-voip/src/providers/useMediaSession.ts
+++ b/packages/ui-voip/src/providers/useMediaSession.ts
@@ -73,6 +73,12 @@ const reducer = (
 		}
 
 		if (reducerState.state === 'new') {
+			// If a peer is supplied while the dialer is already open, replace the
+			// peer instead of toggling closed — keeps "Call rodrigo" working when
+			// the dialer is already mounted (e.g. inside the sidebar rail panel).
+			if (action.payload?.peerInfo) {
+				return { ...reducerState, peerInfo: action.payload.peerInfo };
+			}
 			return { ...reducerState, state: 'closed' };
 		}
 	}
diff --git a/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx b/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx
index 46f3edd5ed45b..754679868c5d2 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx
@@ -11,9 +11,11 @@ import {
 	WidgetContent,
 	DevicePicker,
 	ActionButton,
+	Keypad,
 } from '../../components';
 import { usePeerAutocomplete } from '../../context';
 import { useMediaCallView } from '../../context/MediaCallViewContext';
+import { useMediaCallWidgetSlot } from '../../context/MediaCallWidgetSlotContext';
 import { useWidgetExternalControls } from '../../context/useWidgetExternalControls';
 
 const NewCall = () => {
@@ -22,6 +24,7 @@ const NewCall = () => {
 	const { sessionState, onCall, onSelectPeer } = useMediaCallView();
 	const { peerInfo } = sessionState;
 	const { toggleWidget } = useWidgetExternalControls();
+	const { inline } = useMediaCallWidgetSlot();
 
 	const autocomplete = usePeerAutocomplete(onSelectPeer, peerInfo);
 
@@ -29,7 +32,7 @@ const NewCall = () => {
 		<Widget>
 			<WidgetHandle />
 			<WidgetHeader title={t('New_call')}>
-				<ActionButton tiny secondary={false} label={t('Close')} icon='cross' onClick={() => toggleWidget()} />
+				{!inline && <ActionButton tiny secondary={false} label={t('Close')} icon='cross' onClick={() => toggleWidget()} />}
 			</WidgetHeader>
 			<WidgetContent>
 				<PeerAutocomplete {...autocomplete} />
@@ -38,6 +41,11 @@ const NewCall = () => {
 						<PeerInfo {...peerInfo} />
 					</Box>
 				)}
+				{inline && (
+					<Box display='flex' justifyContent='center' mbs={12}>
+						<Keypad onKeyPress={autocomplete.onKeypadPress} />
+					</Box>
+				)}
 			</WidgetContent>
 			<WidgetFooter>
 				<ButtonGroup stretch>
diff --git a/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap b/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap
index 8249d8514cf0a..989f008cdad07 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap
+++ b/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`renders IncomingCall without crashing 1`] = `
     />
     <div
       aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-1rau14i"
+      class="rcx-css-186fl58"
       role="dialog"
     >
       <div
@@ -175,7 +175,7 @@ exports[`renders IncomingCallTransfer without crashing 1`] = `
     />
     <div
       aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-1rau14i"
+      class="rcx-css-186fl58"
       role="dialog"
     >
       <div
@@ -378,7 +378,7 @@ exports[`renders NewCall without crashing 1`] = `
     />
     <div
       aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-1rau14i"
+      class="rcx-css-186fl58"
       role="dialog"
     >
       <div
@@ -583,7 +583,7 @@ exports[`renders OngoingCall without crashing 1`] = `
     />
     <div
       aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-1rau14i"
+      class="rcx-css-186fl58"
       role="dialog"
     >
       <div
@@ -810,7 +810,7 @@ exports[`renders OutgoingCall without crashing 1`] = `
     />
     <div
       aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-1rau14i"
+      class="rcx-css-186fl58"
       role="dialog"
     >
       <div
@@ -959,7 +959,7 @@ exports[`renders OutgoingCallTransfer without crashing 1`] = `
     />
     <div
       aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-1rau14i"
+      class="rcx-css-186fl58"
       role="dialog"
     >
       <div

From f37fd7a05067fc4a778369e2752aada22f5518b1 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 20 May 2026 17:08:16 -0300
Subject: [PATCH 04/18] feat(sidebar): add SidebarRail component

44px-wide vertical navigation rail (Material Design "navigation rail"
pattern) matching the Figma "Local Sidebar / Collapsed" design.

Composes existing NavBar items (Home, Directory, Marketplace,
Administration menu, UserMenu) and adds rail-specific variants:
- `SidebarRailCreateNew`: pencil-box menu reusing `useCreateNewMenu`.
- `SidebarRailPhone`: phone icon that navigates to `/call-history`
  and reflects the route in its `pressed` state.
- `SidebarRailCallPanel`: Sidepanel-based second-level container
  hosting a `MediaCallWidgetSlot` for the dialer body.
- `SidebarRailCallRouteSync`: keeps the dialer open while on
  `/call-history` (bouncing back from `closed` to `new`) and closes
  it on leave when the dialer is idle.
- `SidebarRailHeader`: slim top bar reusing the Fuselage NavBar with
  the workspace 28px icon and the existing `NavBarNavigation`
  (search + back/forward), suppressing the legacy NavBar groups.
- `SidebarRailLoginPage`: icon-only login NavBarItem for the avatar
  slot when no user is signed in.
- `SidebarRailDivider`: horizontal divider with rail-specific tokens.

Includes an `Inbox` i18n key reused later and a Storybook file with
Anonymous, LoggedIn, WithUnreadBadge and WithCreatePermissions
variants.
---
 .../SidebarRail/SidebarRail.stories.tsx       | 64 +++++++++++++++++++
 .../sidebar/SidebarRail/SidebarRail.tsx       | 56 ++++++++++++++++
 .../SidebarRail/SidebarRailCallPanel.tsx      | 19 ++++++
 .../SidebarRail/SidebarRailCallRouteSync.tsx  | 31 +++++++++
 .../SidebarRail/SidebarRailCreateNew.tsx      | 22 +++++++
 .../SidebarRail/SidebarRailDivider.tsx        | 11 ++++
 .../sidebar/SidebarRail/SidebarRailHeader.tsx | 15 +++++
 .../SidebarRail/SidebarRailLoginPage.tsx      | 15 +++++
 .../sidebar/SidebarRail/SidebarRailPhone.tsx  | 38 +++++++++++
 .../client/sidebar/SidebarRail/index.ts       |  1 +
 10 files changed, 272 insertions(+)
 create mode 100644 apps/meteor/client/sidebar/SidebarRail/SidebarRail.stories.tsx
 create mode 100644 apps/meteor/client/sidebar/SidebarRail/SidebarRail.tsx
 create mode 100644 apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
 create mode 100644 apps/meteor/client/sidebar/SidebarRail/SidebarRailCallRouteSync.tsx
 create mode 100644 apps/meteor/client/sidebar/SidebarRail/SidebarRailCreateNew.tsx
 create mode 100644 apps/meteor/client/sidebar/SidebarRail/SidebarRailDivider.tsx
 create mode 100644 apps/meteor/client/sidebar/SidebarRail/SidebarRailHeader.tsx
 create mode 100644 apps/meteor/client/sidebar/SidebarRail/SidebarRailLoginPage.tsx
 create mode 100644 apps/meteor/client/sidebar/SidebarRail/SidebarRailPhone.tsx
 create mode 100644 apps/meteor/client/sidebar/SidebarRail/index.ts

diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRail.stories.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRail.stories.tsx
new file mode 100644
index 0000000000000..0db3df42492ae
--- /dev/null
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRail.stories.tsx
@@ -0,0 +1,64 @@
+import { Box } from '@rocket.chat/fuselage';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { SessionContext } from '@rocket.chat/ui-contexts';
+import type { SessionContextValue } from '@rocket.chat/ui-contexts';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactNode } from 'react';
+
+import SidebarRail from './SidebarRail';
+
+const sessionMock = (state: Record<string, unknown>): SessionContextValue => ({
+	query: (name) => [() => () => undefined, () => state[name]],
+	dispatch: () => undefined,
+});
+
+const baseRoot = () =>
+	mockAppRoot().withSetting('Layout_Show_Home_Button', true).withTranslations('en', 'core', {
+		Sidebar: 'Sidebar',
+		Home: 'Home',
+		Create_new: 'Create new',
+		Voice_Call: 'Voice Call',
+		Pages_and_actions: 'Pages and actions',
+		Workspace_and_user_preferences: 'Workspace and user preferences',
+	});
+
+export default {
+	title: 'Sidebar/SidebarRail',
+
+	component: SidebarRail,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	decorators: [
+		(Story) => (
+			<Box height='100vh' display='flex'>
+				<Story />
+			</Box>
+		),
+	],
+} satisfies Meta<typeof SidebarRail>;
+
+type Story = StoryObj<typeof SidebarRail>;
+
+export const Anonymous: Story = {
+	decorators: [baseRoot().buildStoryDecorator()],
+};
+
+export const LoggedIn: Story = {
+	decorators: [baseRoot().withJohnDoe().buildStoryDecorator()],
+};
+
+export const WithUnreadBadge: Story = {
+	decorators: [
+		baseRoot()
+			.withJohnDoe()
+			.wrap((children: ReactNode) => <SessionContext.Provider value={sessionMock({ unread: 5 })}>{children}</SessionContext.Provider>)
+			.buildStoryDecorator(),
+	],
+};
+
+export const WithCreatePermissions: Story = {
+	decorators: [
+		baseRoot().withJohnDoe().withPermission('create-c').withPermission('create-p').withPermission('create-d').buildStoryDecorator(),
+	],
+};
diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRail.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRail.tsx
new file mode 100644
index 0000000000000..c1468434ca808
--- /dev/null
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRail.tsx
@@ -0,0 +1,56 @@
+import { Box, NavBarGroup } from '@rocket.chat/fuselage';
+import { useUser } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SidebarRailCreateNew from './SidebarRailCreateNew';
+import SidebarRailDivider from './SidebarRailDivider';
+import SidebarRailLoginPage from './SidebarRailLoginPage';
+import SidebarRailPhone from './SidebarRailPhone';
+import NavBarItemDirectoryPage from '../../navbar/NavBarPagesGroup/NavBarItemDirectoryPage';
+import NavBarItemHomePage from '../../navbar/NavBarPagesGroup/NavBarItemHomePage';
+import NavBarItemMarketPlaceMenu from '../../navbar/NavBarPagesGroup/NavBarItemMarketPlaceMenu';
+import { NavBarItemAdministrationMenu, UserMenu } from '../../navbar/NavBarSettingsToolbar';
+
+const SidebarRail = () => {
+	const { t } = useTranslation();
+	const user = useUser();
+
+	return (
+		<Box
+			is='nav'
+			aria-label={t('Sidebar')}
+			className='rcx-sidebar-rail'
+			bg='surface-sidebar'
+			borderInlineEndWidth='default'
+			borderInlineEndStyle='solid'
+			borderInlineEndColor='stroke-light'
+			display='flex'
+			flexDirection='column'
+			alignItems='stretch'
+			width='x44'
+			height='full'
+		>
+			<Box flexGrow={1} minHeight={0} overflow='hidden auto' p={8}>
+				<NavBarGroup vertical aria-label={t('Pages_and_actions')}>
+					<SidebarRailCreateNew />
+					<NavBarItemHomePage title={t('Home')} />
+				</NavBarGroup>
+				<SidebarRailDivider />
+				<NavBarGroup vertical aria-label={t('Voice_Call')}>
+					<SidebarRailPhone />
+					<NavBarItemDirectoryPage title={t('Directory')} />
+					<NavBarItemMarketPlaceMenu />
+				</NavBarGroup>
+			</Box>
+			<Box p={8}>
+				<NavBarGroup vertical aria-label={t('Workspace_and_user_preferences')}>
+					<NavBarItemAdministrationMenu />
+					{user ? <UserMenu user={user} /> : <SidebarRailLoginPage />}
+				</NavBarGroup>
+			</Box>
+		</Box>
+	);
+};
+
+export default memo(SidebarRail);
diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
new file mode 100644
index 0000000000000..0d764fcf113aa
--- /dev/null
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
@@ -0,0 +1,19 @@
+import { Box, Sidepanel } from '@rocket.chat/fuselage';
+import { MediaCallWidgetSlot } from '@rocket.chat/ui-voip';
+import { useTranslation } from 'react-i18next';
+
+const SidebarRailCallPanel = () => {
+	const { t } = useTranslation();
+
+	return (
+		<Box width='x280' minWidth='x280'>
+			<Sidepanel role='complementary' aria-label={t('Calls')}>
+				<Box p={16}>
+					<MediaCallWidgetSlot />
+				</Box>
+			</Sidepanel>
+		</Box>
+	);
+};
+
+export default SidebarRailCallPanel;
diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallRouteSync.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallRouteSync.tsx
new file mode 100644
index 0000000000000..1c0fcc3b71747
--- /dev/null
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallRouteSync.tsx
@@ -0,0 +1,31 @@
+import { useMediaCallView, useWidgetExternalControls } from '@rocket.chat/ui-voip';
+import { useEffect } from 'react';
+
+type SidebarRailCallRouteSyncProps = {
+	currentRoutePath?: string;
+};
+
+const SidebarRailCallRouteSync = ({ currentRoutePath }: SidebarRailCallRouteSyncProps) => {
+	const { sessionState } = useMediaCallView();
+	const { toggleWidget } = useWidgetExternalControls();
+
+	useEffect(() => {
+		const onRoute = currentRoutePath?.includes('/call-history') ?? false;
+
+		// On /call-history: keep the dialer open. If the session is idle (closed)
+		// — initial load, an ended call, etc — bounce it back to `new`.
+		if (onRoute && sessionState.state === 'closed') {
+			toggleWidget();
+			return;
+		}
+
+		// Off /call-history: an idle dialer has no host, so close it.
+		if (!onRoute && sessionState.state === 'new') {
+			toggleWidget();
+		}
+	}, [currentRoutePath, sessionState.state, toggleWidget]);
+
+	return null;
+};
+
+export default SidebarRailCallRouteSync;
diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailCreateNew.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCreateNew.tsx
new file mode 100644
index 0000000000000..5299cfc77adc3
--- /dev/null
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCreateNew.tsx
@@ -0,0 +1,22 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCreateNewMenu } from '../../navbar/NavBarPagesGroup/hooks/useCreateNewMenu';
+
+type SidebarRailCreateNewProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const SidebarRailCreateNew = (props: SidebarRailCreateNewProps) => {
+	const { t } = useTranslation();
+
+	const sections = useCreateNewMenu();
+
+	if (sections.length === 0) {
+		return null;
+	}
+
+	return <GenericMenu icon='pencil-box' sections={sections} title={t('Create_new')} is={NavBarItem} placement='right-start' {...props} />;
+};
+
+export default SidebarRailCreateNew;
diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailDivider.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailDivider.tsx
new file mode 100644
index 0000000000000..60a4aa630bcfe
--- /dev/null
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRailDivider.tsx
@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import HorizontalDivider from '../../components/HorizontalDivider';
+
+type SidebarRailDividerProps = ComponentProps<typeof HorizontalDivider>;
+
+const SidebarRailDivider = (props: SidebarRailDividerProps) => (
+	<HorizontalDivider mbs={16} mbe={16} mi={4} borderBlockStartColor='stroke-light' {...props} />
+);
+
+export default SidebarRailDivider;
diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailHeader.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailHeader.tsx
new file mode 100644
index 0000000000000..27c15578474f5
--- /dev/null
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRailHeader.tsx
@@ -0,0 +1,15 @@
+import { Box, NavBar as NavBarComponent, NavBarSection } from '@rocket.chat/fuselage';
+
+import NavBarNavigation from '../../navbar/NavBarNavigation';
+
+const SidebarRailHeader = () => (
+	<NavBarComponent aria-label='header' style={{ paddingInline: '0.5rem' }}>
+		<NavBarSection>
+			<Box is='img' src='/images/logo/icon.svg' alt='Rocket.Chat' size='x28' />
+		</NavBarSection>
+		<NavBarNavigation />
+		<NavBarSection />
+	</NavBarComponent>
+);
+
+export default SidebarRailHeader;
diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailLoginPage.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailLoginPage.tsx
new file mode 100644
index 0000000000000..6eae2924116e4
--- /dev/null
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRailLoginPage.tsx
@@ -0,0 +1,15 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useSessionDispatch } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type SidebarRailLoginPageProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const SidebarRailLoginPage = (props: SidebarRailLoginPageProps) => {
+	const setForceLogin = useSessionDispatch('forceLogin');
+	const { t } = useTranslation();
+
+	return <NavBarItem {...props} icon='login' title={t('Login')} onClick={() => setForceLogin(true)} />;
+};
+
+export default SidebarRailLoginPage;
diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailPhone.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailPhone.tsx
new file mode 100644
index 0000000000000..4860c09674cba
--- /dev/null
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRailPhone.tsx
@@ -0,0 +1,38 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useCurrentRoutePath, useRouter } from '@rocket.chat/ui-contexts';
+import { useMediaCallAction } from '@rocket.chat/ui-voip';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type SidebarRailPhoneProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const SidebarRailPhone = (props: SidebarRailPhoneProps) => {
+	const { t } = useTranslation();
+	const callAction = useMediaCallAction();
+	const router = useRouter();
+	const currentRoute = useCurrentRoutePath();
+
+	const isActive = currentRoute?.includes('/call-history') ?? false;
+
+	const handleClick = useStableCallback(() => {
+		router.navigate('/call-history');
+	});
+
+	if (!callAction) {
+		return null;
+	}
+
+	return (
+		<NavBarItem
+			{...props}
+			title={t('Calls')}
+			icon='phone'
+			pressed={isActive}
+			aria-current={isActive ? 'page' : undefined}
+			onClick={handleClick}
+		/>
+	);
+};
+
+export default SidebarRailPhone;
diff --git a/apps/meteor/client/sidebar/SidebarRail/index.ts b/apps/meteor/client/sidebar/SidebarRail/index.ts
new file mode 100644
index 0000000000000..d7869b1253c9b
--- /dev/null
+++ b/apps/meteor/client/sidebar/SidebarRail/index.ts
@@ -0,0 +1 @@
+export { default } from './SidebarRail';

From e61286473ec362db5bec31c201ec3a360ab13d66 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 20 May 2026 17:08:16 -0300
Subject: [PATCH 05/18] feat(layout): gate SidebarRail behind USE_SIDEBAR_RAIL
 flag

When `USE_SIDEBAR_RAIL` is true (and the layout is not embedded /
mobile), replace the top horizontal `NavBar` with the slim
`SidebarRailHeader` and render `SidebarRail` as the first column of
`#rocket-chat`. The legacy NavBar path remains for the other cases
so the change is reversible by flipping a single constant.

- `sidebarRailFlag.ts`: dev-only constant, intended to be replaced
  by `useFeaturePreview('sidebarRail')` in a follow-up before any
  rollout.
- `LayoutWithSidebar.tsx`: pick the header, render the rail, and
  drive the secondary slot through a new `SecondaryPanel`. While on
  `/call-history` the slot renders the rail call panel; otherwise
  it falls back to the existing Sidebar / NavigationRegion feature
  preview split.
- `SecondaryPanel.tsx`: extracted into its own file to comply with
  `react/no-multi-comp`.
- `MainLayoutStyleTags.tsx`: extend the dark palette selector to
  cover `.rcx-sidebar-rail` so the rail keeps the dark surface in
  both themes.
---
 .../root/MainLayout/LayoutWithSidebar.tsx     | 29 +++++++----------
 .../root/MainLayout/MainLayoutStyleTags.tsx   |  2 +-
 .../views/root/MainLayout/SecondaryPanel.tsx  | 32 +++++++++++++++++++
 .../views/root/MainLayout/sidebarRailFlag.ts  |  1 +
 4 files changed, 45 insertions(+), 19 deletions(-)
 create mode 100644 apps/meteor/client/views/root/MainLayout/SecondaryPanel.tsx
 create mode 100644 apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts

diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
index a2ed06e110e50..67164a2fe7ab5 100644
--- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
+++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
@@ -1,5 +1,4 @@
 import { Box } from '@rocket.chat/fuselage';
-import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
 import type { IRouterPaths } from '@rocket.chat/ui-contexts';
 import { useLayout, useSetting, useCurrentRoutePath, useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactNode } from 'react';
@@ -8,17 +7,20 @@ import { useEffect, useRef } from 'react';
 import AccessibilityShortcut from './AccessibilityShortcut';
 import MainContent from './MainContent';
 import { MainLayoutStyleTags } from './MainLayoutStyleTags';
+import SecondaryPanel from './SecondaryPanel';
+import { USE_SIDEBAR_RAIL } from './sidebarRailFlag';
 import NavBar from '../../../navbar';
-import Sidebar from '../../../sidebar';
-import NavigationRegion from '../../navigation';
-import RoomsNavigationProvider from '../../navigation/providers/RoomsNavigationProvider';
+import SidebarRail from '../../../sidebar/SidebarRail';
+import SidebarRailCallRouteSync from '../../../sidebar/SidebarRail/SidebarRailCallRouteSync';
+import SidebarRailHeader from '../../../sidebar/SidebarRail/SidebarRailHeader';
 
 const INVALID_ROOM_NAME_PREFIXES = ['#', '?'] as const;
 
 export type LayoutWithSidebarProps = { children: ReactNode };
 
 const LayoutWithSidebar = ({ children }: LayoutWithSidebarProps) => {
-	const { isEmbedded: embeddedLayout } = useLayout();
+	const { isEmbedded: embeddedLayout, isMobile } = useLayout();
+	const showSidebarRail = USE_SIDEBAR_RAIL && !embeddedLayout && !isMobile;
 
 	const currentRoutePath = useCurrentRoutePath();
 	const router = useRouter();
@@ -56,25 +58,16 @@ const LayoutWithSidebar = ({ children }: LayoutWithSidebarProps) => {
 	return (
 		<>
 			<AccessibilityShortcut />
-			{!embeddedLayout && <NavBar />}
+			{!embeddedLayout && (showSidebarRail ? <SidebarRailHeader /> : <NavBar />)}
 			<Box
 				bg='surface-light'
 				id='rocket-chat'
 				className={[embeddedLayout ? 'embedded-view' : undefined, 'menu-nav'].filter(Boolean).join(' ')}
 			>
 				<MainLayoutStyleTags />
-				{!removeSidenav && (
-					<FeaturePreview feature='secondarySidebar'>
-						<FeaturePreviewOn>
-							<RoomsNavigationProvider>
-								<NavigationRegion />
-							</RoomsNavigationProvider>
-						</FeaturePreviewOn>
-						<FeaturePreviewOff>
-							<Sidebar />
-						</FeaturePreviewOff>
-					</FeaturePreview>
-				)}
+				{showSidebarRail && <SidebarRail />}
+				{showSidebarRail && <SidebarRailCallRouteSync currentRoutePath={currentRoutePath} />}
+				{!removeSidenav && <SecondaryPanel showSidebarRail={showSidebarRail} currentRoutePath={currentRoutePath} />}
 				<MainContent>{children}</MainContent>
 			</Box>
 		</>
diff --git a/apps/meteor/client/views/root/MainLayout/MainLayoutStyleTags.tsx b/apps/meteor/client/views/root/MainLayout/MainLayoutStyleTags.tsx
index 4b36a7502302d..18ebca25429b7 100644
--- a/apps/meteor/client/views/root/MainLayout/MainLayoutStyleTags.tsx
+++ b/apps/meteor/client/views/root/MainLayout/MainLayoutStyleTags.tsx
@@ -9,7 +9,7 @@ export const MainLayoutStyleTags = () => {
 	return (
 		<>
 			<PaletteStyleTag theme={theme} selector='.rcx-content--main, .rcx-tile' tagId={`main-palette-${theme}`} />
-			<PaletteStyleTag theme='dark' selector='.rcx-sidebar--main, .rcx-sidepanel, .rcx-navbar' tagId='sidebar-palette' />
+			<PaletteStyleTag theme='dark' selector='.rcx-sidebar--main, .rcx-sidebar-rail, .rcx-sidepanel, .rcx-navbar' tagId='sidebar-palette' />
 			{theme === 'dark' && <PaletteStyleTag selector='.rcx-content--main' palette={codeBlock} tagId='codeBlock-palette' />}
 		</>
 	);
diff --git a/apps/meteor/client/views/root/MainLayout/SecondaryPanel.tsx b/apps/meteor/client/views/root/MainLayout/SecondaryPanel.tsx
new file mode 100644
index 0000000000000..aab7112c670e4
--- /dev/null
+++ b/apps/meteor/client/views/root/MainLayout/SecondaryPanel.tsx
@@ -0,0 +1,32 @@
+import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
+
+import Sidebar from '../../../sidebar';
+import SidebarRailCallPanel from '../../../sidebar/SidebarRail/SidebarRailCallPanel';
+import NavigationRegion from '../../navigation';
+import RoomsNavigationProvider from '../../navigation/providers/RoomsNavigationProvider';
+
+type SecondaryPanelProps = {
+	showSidebarRail: boolean;
+	currentRoutePath?: string;
+};
+
+const SecondaryPanel = ({ showSidebarRail, currentRoutePath }: SecondaryPanelProps) => {
+	if (showSidebarRail && currentRoutePath?.includes('/call-history')) {
+		return <SidebarRailCallPanel />;
+	}
+
+	return (
+		<FeaturePreview feature='secondarySidebar'>
+			<FeaturePreviewOn>
+				<RoomsNavigationProvider>
+					<NavigationRegion />
+				</RoomsNavigationProvider>
+			</FeaturePreviewOn>
+			<FeaturePreviewOff>
+				<Sidebar />
+			</FeaturePreviewOff>
+		</FeaturePreview>
+	);
+};
+
+export default SecondaryPanel;
diff --git a/apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts b/apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts
new file mode 100644
index 0000000000000..eea625472d967
--- /dev/null
+++ b/apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts
@@ -0,0 +1 @@
+export const USE_SIDEBAR_RAIL = true;

From 2eb161488380a667b77f02a795abaa88cdc562b9 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 3 Jun 2026 13:48:44 -0300
Subject: [PATCH 06/18] feat(layout): make USE_SIDEBAR_RAIL a runtime window
 flag

Expose the SidebarRail flag on window.USE_SIDEBAR_RAIL (default false) so it can be toggled at runtime via a custom script, instead of a hardcoded build-time constant. Read on every render through isSidebarRailEnabled().
---
 .../root/MainLayout/LayoutWithSidebar.tsx     |  4 ++--
 .../views/root/MainLayout/sidebarRailFlag.ts  | 19 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
index 67164a2fe7ab5..0917eb8c9bc2b 100644
--- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
+++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
@@ -8,7 +8,7 @@ import AccessibilityShortcut from './AccessibilityShortcut';
 import MainContent from './MainContent';
 import { MainLayoutStyleTags } from './MainLayoutStyleTags';
 import SecondaryPanel from './SecondaryPanel';
-import { USE_SIDEBAR_RAIL } from './sidebarRailFlag';
+import { isSidebarRailEnabled } from './sidebarRailFlag';
 import NavBar from '../../../navbar';
 import SidebarRail from '../../../sidebar/SidebarRail';
 import SidebarRailCallRouteSync from '../../../sidebar/SidebarRail/SidebarRailCallRouteSync';
@@ -20,7 +20,7 @@ export type LayoutWithSidebarProps = { children: ReactNode };
 
 const LayoutWithSidebar = ({ children }: LayoutWithSidebarProps) => {
 	const { isEmbedded: embeddedLayout, isMobile } = useLayout();
-	const showSidebarRail = USE_SIDEBAR_RAIL && !embeddedLayout && !isMobile;
+	const showSidebarRail = isSidebarRailEnabled() && !embeddedLayout && !isMobile;
 
 	const currentRoutePath = useCurrentRoutePath();
 	const router = useRouter();
diff --git a/apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts b/apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts
index eea625472d967..d0ae673352a11 100644
--- a/apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts
+++ b/apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts
@@ -1 +1,18 @@
-export const USE_SIDEBAR_RAIL = true;
+declare global {
+	interface Window {
+		USE_SIDEBAR_RAIL?: boolean;
+	}
+}
+
+/**
+ * Feature flag for the collapsed SidebarRail navigation.
+ *
+ * Exposed on `window` so it can be toggled at runtime without a rebuild — e.g. from an
+ * admin custom script:
+ *
+ *   window.USE_SIDEBAR_RAIL = true;
+ *
+ * Read on every render, so the value applies on the next page load after being set.
+ * Defaults to `false`.
+ */
+export const isSidebarRailEnabled = (): boolean => window.USE_SIDEBAR_RAIL ?? false;

From b429ee53d0a3af0301a1f714af40595a2ecaec8c Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 3 Jun 2026 14:27:05 -0300
Subject: [PATCH 07/18] chore(lint): disable naming-convention for Window
 augmentation

The global Window interface augmentation must keep the lib name 'Window', which violates the I-prefix naming-convention rule. Disable the rule on that line.
---
 apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts b/apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts
index d0ae673352a11..ede40e22772ba 100644
--- a/apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts
+++ b/apps/meteor/client/views/root/MainLayout/sidebarRailFlag.ts
@@ -1,4 +1,5 @@
 declare global {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
 	interface Window {
 		USE_SIDEBAR_RAIL?: boolean;
 	}

From 3e5b327384c4afac23530c056edae60e28dee516 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 3 Jun 2026 14:37:32 -0300
Subject: [PATCH 08/18] test: align LayoutWithSidebar spec mocks with
 SidebarRail refactor

The spec still mocked the removed layout modules (Sidebar, NavigationRegion, FeaturePreview) while LayoutWithSidebar now imports SidebarRail, SidebarRailHeader, SidebarRailCallRouteSync and SecondaryPanel. The unmocked real SidebarRail pulled app/utils/client -> rocketchat.info into the jest graph, which jest cannot parse (SyntaxError). Mock the new imports instead.
---
 .../root/MainLayout/LayoutWithSidebar.spec.tsx | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.spec.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.spec.tsx
index f87e63732ae51..9574e6cd92c86 100644
--- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.spec.tsx
+++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.spec.tsx
@@ -1,7 +1,6 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { useCurrentRoutePath, useRouter } from '@rocket.chat/ui-contexts';
 import { render } from '@testing-library/react';
-import type { ReactNode } from 'react';
 
 import LayoutWithSidebar from './LayoutWithSidebar';
 
@@ -12,20 +11,11 @@ jest.mock('@rocket.chat/ui-contexts', () => ({
 }));
 
 jest.mock('../../../navbar', () => () => <div>NavBar</div>);
-jest.mock('../../../sidebar', () => () => <div>Sidebar</div>);
-jest.mock('../../navigation', () => () => <div>NavigationRegion</div>);
+jest.mock('../../../sidebar/SidebarRail', () => () => <div>SidebarRail</div>);
+jest.mock('../../../sidebar/SidebarRail/SidebarRailHeader', () => () => <div>SidebarRailHeader</div>);
+jest.mock('../../../sidebar/SidebarRail/SidebarRailCallRouteSync', () => () => <div>SidebarRailCallRouteSync</div>);
+jest.mock('./SecondaryPanel', () => () => <div>SecondaryPanel</div>);
 jest.mock('./AccessibilityShortcut', () => () => <div>AccessibilityShortcut</div>);
-jest.mock('../../navigation/providers/RoomsNavigationProvider', () => ({
-	__esModule: true,
-	default: ({ children }: { children: ReactNode }) => <>{children}</>,
-}));
-
-jest.mock('@rocket.chat/ui-client', () => ({
-	...jest.requireActual('@rocket.chat/ui-client'),
-	FeaturePreview: ({ children }: { children: ReactNode }) => <>{children}</>,
-	FeaturePreviewOn: ({ children }: { children: ReactNode }) => <>{children}</>,
-	FeaturePreviewOff: ({ children }: { children: ReactNode }) => <>{children}</>,
-}));
 
 const mockedUseCurrentRoutePath = useCurrentRoutePath as jest.MockedFunction<typeof useCurrentRoutePath>;
 const mockedUseRouter = useRouter as jest.MockedFunction<typeof useRouter>;

From 982a633b14eecf029f1b7814152ef5b4fe8b3427 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Mon, 8 Jun 2026 13:19:02 -0300
Subject: [PATCH 09/18] feat(ui-voip): show dialpad during active SIP calls
 (DMV-16)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Render the DTMF dialpad while a voice call is ongoing so users can
drive IVRs, conference bridges and other keypad-driven phone services.

- Gate the dialpad on `peerInfo.external` (SIP calls only) — internal
  user-to-user calls don't need DTMF.
- Inline (sidebar rail) renders the keypad permanently expanded;
  the floating widget keeps the collapsible toggle.
- `OngoingCallWithScreen`: show the dialpad when screen sharing is
  supported but hide it while a local share is active, preserving the
  screen-sharing layout.
- `Keypad` gains an `autoFocus` prop (default true) so the always-on
  inline keypad does not steal focus on mount; `useKeypad` exposes an
  `alwaysOpen` option for that layout.
- Cover the visibility rules with a unit test.
---
 .../ui-voip/src/components/Keypad/Keypad.tsx  |   5 +-
 .../src/components/Keypad/useKeypad.tsx       |  52 ++++++++
 packages/ui-voip/src/components/index.ts      |   1 +
 .../MediaCallWidget/MediaCallDialpad.tsx      |  34 ++++++
 .../src/views/MediaCallWidget/NewCall.tsx     |   2 +-
 .../OngoingCall.dialpad.spec.tsx              | 112 ++++++++++++++++++
 .../src/views/MediaCallWidget/OngoingCall.tsx |  42 +++----
 .../MediaCallWidget/OngoingCallWithScreen.tsx |   3 +
 8 files changed, 220 insertions(+), 31 deletions(-)
 create mode 100644 packages/ui-voip/src/components/Keypad/useKeypad.tsx
 create mode 100644 packages/ui-voip/src/views/MediaCallWidget/MediaCallDialpad.tsx
 create mode 100644 packages/ui-voip/src/views/MediaCallWidget/OngoingCall.dialpad.spec.tsx

diff --git a/packages/ui-voip/src/components/Keypad/Keypad.tsx b/packages/ui-voip/src/components/Keypad/Keypad.tsx
index cdceeed6229ed..98f6610fac3e3 100644
--- a/packages/ui-voip/src/components/Keypad/Keypad.tsx
+++ b/packages/ui-voip/src/components/Keypad/Keypad.tsx
@@ -5,6 +5,7 @@ import Key from './Key';
 
 export type KeypadProps = {
 	onKeyPress(key: string): void;
+	autoFocus?: boolean;
 };
 
 const DIGITS = [
@@ -22,8 +23,8 @@ const DIGITS = [
 	['#', ''],
 ];
 
-const Keypad = ({ onKeyPress }: KeypadProps) => (
-	<FocusScope autoFocus>
+const Keypad = ({ onKeyPress, autoFocus = true }: KeypadProps) => (
+	<FocusScope autoFocus={autoFocus}>
 		<Box display='flex' justifyContent='center' flexWrap='wrap' maxWidth={196}>
 			{DIGITS.map(([primaryDigit, alternativeDigit, longPressDigit]) => (
 				<Key
diff --git a/packages/ui-voip/src/components/Keypad/useKeypad.tsx b/packages/ui-voip/src/components/Keypad/useKeypad.tsx
new file mode 100644
index 0000000000000..e51c71a8ab64c
--- /dev/null
+++ b/packages/ui-voip/src/components/Keypad/useKeypad.tsx
@@ -0,0 +1,52 @@
+import { Divider, Box, TextInput, Field, FieldRow } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Keypad from './Keypad';
+
+type UseKeypad = {
+	element: ReactNode;
+	buttonProps: {
+		title: string;
+		onClick: () => void;
+	};
+};
+
+type UseKeypadOptions = {
+	// When `true` the keypad is always rendered (expanded) and does not steal focus on mount.
+	// Used by the inline (sidebar rail) layout where the dialpad is permanently visible.
+	alwaysOpen?: boolean;
+};
+
+export const useKeypad = (onPress: (tone: string) => void, { alwaysOpen = false }: UseKeypadOptions = {}): UseKeypad => {
+	const [open, setOpen] = useState(false);
+	const [inputValue, setInputValue] = useState('');
+	const { t } = useTranslation();
+
+	const element = (
+		<Box display='flex' justifyContent='center' alignItems='center' w='100%' flexDirection='column' mbe={8}>
+			<Field mbe={8}>
+				<FieldRow>
+					<TextInput value={inputValue} readOnly small mi={24} />
+				</FieldRow>
+			</Field>
+			<Keypad
+				autoFocus={!alwaysOpen}
+				onKeyPress={(...args) => {
+					setInputValue((inputValue) => inputValue + args[0]);
+					onPress(...args);
+				}}
+			/>
+			<Divider w='100%' />
+		</Box>
+	);
+
+	return {
+		element: alwaysOpen || open ? element : null,
+		buttonProps: {
+			title: open ? t('Close_dialpad') : t('Open_dialpad'),
+			onClick: () => setOpen((open) => !open),
+		},
+	};
+};
diff --git a/packages/ui-voip/src/components/index.ts b/packages/ui-voip/src/components/index.ts
index 1a74180bd381f..aaf620b1ad009 100644
--- a/packages/ui-voip/src/components/index.ts
+++ b/packages/ui-voip/src/components/index.ts
@@ -7,6 +7,7 @@ export * from './Actions';
 export { default as ToggleButton } from './ToggleButton';
 export { default as ActionButton } from './ActionButton';
 export { default as Keypad } from './Keypad/Keypad';
+export { useKeypad } from './Keypad/useKeypad';
 export { useInfoSlots } from './PeerInfo/useInfoSlots';
 export { default as PeerAutocomplete } from './PeerAutocomplete';
 export { default as Timer } from './Timer';
diff --git a/packages/ui-voip/src/views/MediaCallWidget/MediaCallDialpad.tsx b/packages/ui-voip/src/views/MediaCallWidget/MediaCallDialpad.tsx
new file mode 100644
index 0000000000000..0d154224153af
--- /dev/null
+++ b/packages/ui-voip/src/views/MediaCallWidget/MediaCallDialpad.tsx
@@ -0,0 +1,34 @@
+import { useKeypad } from '../../components';
+import { useMediaCallView } from '../../context/MediaCallViewContext';
+import { useMediaCallWidgetSlot } from '../../context/MediaCallWidgetSlotContext';
+
+/**
+ * Inline DTMF dialpad for the sidebar-rail call panel (DMV-16).
+ *
+ * Rendered inside the widget content rather than the footer action row, so it
+ * stays clear of footer-level features (e.g. AppActions) and can be added
+ * without editing shared footer markup — keeping this change isolated.
+ *
+ * Visible only when the widget is inline (sidebar rail), the call is external
+ * (SIP), and screen sharing is not active. Internal user-to-user calls don't
+ * need DTMF, and an active screen share must keep the available space.
+ */
+const MediaCallDialpad = () => {
+	const { sessionState, streams, onTone } = useMediaCallView();
+	const { peerInfo } = sessionState;
+	const { inline } = useMediaCallWidgetSlot();
+
+	// The keypad is permanently expanded inline, so it must not steal focus on mount.
+	const { element } = useKeypad(onTone, { alwaysOpen: true });
+
+	const isSip = !!peerInfo && 'number' in peerInfo;
+	const isScreenSharing = Boolean(streams?.localScreen?.active);
+
+	if (!inline || !isSip || isScreenSharing) {
+		return null;
+	}
+
+	return <>{element}</>;
+};
+
+export default MediaCallDialpad;
diff --git a/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx b/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx
index 754679868c5d2..893624c89359c 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx
@@ -43,7 +43,7 @@ const NewCall = () => {
 				)}
 				{inline && (
 					<Box display='flex' justifyContent='center' mbs={12}>
-						<Keypad onKeyPress={autocomplete.onKeypadPress} />
+						<Keypad autoFocus={false} onKeyPress={autocomplete.onKeypadPress} />
 					</Box>
 				)}
 			</WidgetContent>
diff --git a/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.dialpad.spec.tsx b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.dialpad.spec.tsx
new file mode 100644
index 0000000000000..52b190a0bdb32
--- /dev/null
+++ b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.dialpad.spec.tsx
@@ -0,0 +1,112 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import type { ComponentType, ReactNode } from 'react';
+
+import OngoingCall from './OngoingCall';
+import OngoingCallWithScreen from './OngoingCallWithScreen';
+import MediaCallViewContext from '../../context/MediaCallViewContext';
+import MediaCallWidgetSlotContext from '../../context/MediaCallWidgetSlotContext';
+import type { PeerInfo, SessionState } from '../../context/definitions';
+
+const externalPeer = { number: '+15551234567' } as PeerInfo;
+const internalPeer = { displayName: 'John Doe', userId: 'u1', username: 'john.doe' } as PeerInfo;
+
+type RenderOptions = {
+	peerInfo: PeerInfo;
+	inline?: boolean;
+	localScreenActive?: boolean;
+};
+
+const renderView = (Component: ComponentType, { peerInfo, inline = false, localScreenActive = false }: RenderOptions) => {
+	const sessionState = {
+		state: 'ongoing',
+		connectionState: 'CONNECTED',
+		peerInfo,
+		transferredBy: undefined,
+		hidden: false,
+		muted: false,
+		held: false,
+		remoteMuted: false,
+		remoteHeld: false,
+		callId: 'call-1',
+		supportedFeatures: ['audio', 'screen-share', 'hold', 'transfer'],
+	} as SessionState;
+
+	const streams = localScreenActive ? { localScreen: { active: true, stream: null } } : {};
+
+	const viewContextValue = {
+		sessionState,
+		onClickDirectMessage: undefined,
+		onMute: jest.fn(),
+		onHold: jest.fn(),
+		onDeviceChange: jest.fn(),
+		onForward: jest.fn(),
+		onTone: jest.fn(),
+		onEndCall: jest.fn(),
+		onCall: jest.fn(),
+		onAccept: jest.fn(),
+		onSelectPeer: jest.fn(),
+		onToggleScreenSharing: jest.fn(),
+		streams,
+		widgetPositionTracker: undefined,
+	} as any;
+
+	const slotContextValue = {
+		slot: inline ? document.createElement('div') : null,
+		inline,
+		setSlot: jest.fn(),
+	};
+
+	const Wrapper = ({ children }: { children: ReactNode }) => (
+		<MediaCallWidgetSlotContext.Provider value={slotContextValue}>
+			<MediaCallViewContext.Provider value={viewContextValue}>{children}</MediaCallViewContext.Provider>
+		</MediaCallWidgetSlotContext.Provider>
+	);
+
+	return render(
+		<Wrapper>
+			<Component />
+		</Wrapper>,
+		{ wrapper: mockAppRoot().build() },
+	);
+};
+
+describe('Ongoing call dialpad (DMV-16)', () => {
+	it('does not render the dialpad for internal (non-SIP) calls', () => {
+		renderView(OngoingCall, { peerInfo: internalPeer });
+
+		expect(screen.queryByRole('button', { name: 'Dialpad' })).not.toBeInTheDocument();
+		expect(screen.queryByRole('button', { name: '#' })).not.toBeInTheDocument();
+	});
+
+	it('renders a collapsible dialpad toggle for external (SIP) calls when floating', () => {
+		renderView(OngoingCall, { peerInfo: externalPeer, inline: false });
+
+		// floating: toggle button present, keypad collapsed by default
+		expect(screen.getByRole('button', { name: 'Dialpad' })).toBeInTheDocument();
+		expect(screen.queryByRole('button', { name: '#' })).not.toBeInTheDocument();
+	});
+
+	it('renders the dialpad expanded (no toggle) for external calls when inline', () => {
+		renderView(OngoingCall, { peerInfo: externalPeer, inline: true });
+
+		// inline: no toggle, the expanded keypad is mounted (the '#' key proves it)
+		expect(screen.queryByRole('button', { name: 'Dialpad' })).not.toBeInTheDocument();
+		expect(screen.getByRole('button', { name: '#' })).toBeInTheDocument();
+	});
+});
+
+describe('Ongoing call with screen share dialpad (DMV-16)', () => {
+	// The screen-share view only exposes the dialpad inline (sidebar rail), via <MediaCallDialpad />.
+	it('hides the inline dialpad while screen sharing is active', () => {
+		renderView(OngoingCallWithScreen, { peerInfo: externalPeer, inline: true, localScreenActive: true });
+
+		expect(screen.queryByRole('button', { name: '#' })).not.toBeInTheDocument();
+	});
+
+	it('shows the inline dialpad when screen sharing is supported but not active', () => {
+		renderView(OngoingCallWithScreen, { peerInfo: externalPeer, inline: true, localScreenActive: false });
+
+		expect(screen.getByRole('button', { name: '#' })).toBeInTheDocument();
+	});
+});
diff --git a/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx
index 04f5b77012fe5..95237a7311a8e 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx
@@ -1,7 +1,7 @@
-import { Box, ButtonGroup, Divider, Field, FieldRow, TextInput } from '@rocket.chat/fuselage';
-import { useState } from 'react';
+import { ButtonGroup } from '@rocket.chat/fuselage';
 import { useTranslation } from 'react-i18next';
 
+import MediaCallDialpad from './MediaCallDialpad';
 import {
 	ToggleButton,
 	PeerInfo,
@@ -14,19 +14,23 @@ import {
 	Timer,
 	DevicePicker,
 	ActionButton,
+	useKeypad,
 	useInfoSlots,
-	Keypad,
 } from '../../components';
 import { useMediaCallView } from '../../context/MediaCallViewContext';
+import { useMediaCallWidgetSlot } from '../../context/MediaCallWidgetSlotContext';
 
 const OngoingCall = () => {
 	const { t } = useTranslation();
 
 	const { sessionState, onMute, onHold, onForward, onEndCall, onTone, onClickDirectMessage } = useMediaCallView();
 	const { muted, held, remoteMuted, remoteHeld, peerInfo, connectionState, supportedFeatures } = sessionState;
+	const { inline } = useMediaCallWidgetSlot();
 
-	const [open, setOpen] = useState(false);
-	const [inputValue, setInputValue] = useState('');
+	// Floating widget keeps the collapsible DTMF toggle for external (SIP) calls.
+	// The inline (sidebar rail) dialpad is rendered by <MediaCallDialpad /> in the content instead.
+	const showDialpad = !!peerInfo && 'number' in peerInfo;
+	const { element: keypad, buttonProps: keypadButtonProps } = useKeypad(onTone);
 
 	const slots = useInfoSlots(muted, held, connectionState);
 	const remoteSlots = useInfoSlots(remoteMuted, remoteHeld);
@@ -53,33 +57,15 @@ const OngoingCall = () => {
 			</WidgetHeader>
 			<WidgetContent>
 				<PeerInfo {...peerInfo} slots={remoteSlots} remoteMuted={remoteMuted} />
+				<MediaCallDialpad />
 			</WidgetContent>
 			<WidgetInfo slots={slots} />
 			<WidgetFooter>
-				{open ? (
-					<Box display='flex' justifyContent='center' alignItems='center' w='100%' flexDirection='column' mbe={8}>
-						<Field mbe={8}>
-							<FieldRow>
-								<TextInput value={inputValue} readOnly small mi={24} />
-							</FieldRow>
-						</Field>
-						<Keypad
-							onKeyPress={(...args) => {
-								setInputValue((inputValue) => inputValue + args[0]);
-								onTone(...args);
-							}}
-						/>
-						<Divider w='100%' />
-					</Box>
-				) : null}
+				{keypad}
 				<ButtonGroup large>
-					<ActionButton
-						disabled={connecting || reconnecting}
-						icon='dialpad'
-						label={t('Dialpad')}
-						title={open ? t('Close_dialpad') : t('Open_dialpad')}
-						onClick={() => setOpen((open) => !open)}
-					/>
+					{showDialpad && !inline && (
+						<ActionButton disabled={connecting || reconnecting} icon='dialpad' label='Dialpad' {...keypadButtonProps} />
+					)}
 					<ToggleButton label={t('Mute')} icons={['mic', 'mic-off']} titles={[t('Mute'), t('Unmute')]} pressed={muted} onToggle={onMute} />
 					<ToggleButton
 						label={t('Hold')}
diff --git a/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx b/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
index e8a3aed87d14c..03d2d3679a42f 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
@@ -1,6 +1,7 @@
 import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { useTranslation } from 'react-i18next';
 
+import MediaCallDialpad from './MediaCallDialpad';
 import {
 	ToggleButton,
 	PeerInfo,
@@ -82,6 +83,8 @@ const OngoingCall = () => {
 				<CardWidgetContainer>
 					<PeerInfo {...peerInfo} slots={remoteSlots} remoteMuted={remoteMuted} />
 
+					<MediaCallDialpad />
+
 					{isPopout && (
 						<Box display='flex' flexDirection='column' gap={4}>
 							<Button onClick={onClosePopout} icon='arrow-from-cross-box' medium w='full'>

From 843f91717e23ca63ced8def80f884223c662ee0c Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Mon, 8 Jun 2026 18:20:58 -0300
Subject: [PATCH 10/18] fix(sidebar): drive call dialer from the panel, not a
 route watcher
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The SidebarRail call widget was driven by SidebarRailCallRouteSync, a
global effect that opened/closed the dialer by toggling the session
state in reaction to the current route. Because the toggle ran after
paint and could not tell a route-opened idle dialer from a
user-opened one, it produced three wrong behaviors:

- Leaving the telephony screen briefly popped the idle dialer out as a
  floating widget (the reported issue).
- Clicking the call icon on a message header off the telephony screen
  opened the prefilled dialer and the watcher immediately closed it
  again (flicker), instead of keeping it open like production.
- Finishing a call from the telephony screen left the panel empty
  instead of resetting it back to the dialer.

Make the call panel own the dialer lifecycle instead. Since the panel
only mounts on /call-history, the route logic is implicit:

- While mounted and idle, open the dialer (covers initial open and the
  post-call reset).
- On unmount, drop an idle dialer in the layout phase, in sync with the
  slot teardown, so it never leaks out as a floating widget.

Off the telephony screen the session is never forced into `new`, so the
header-initiated floating dialer is left untouched and widget visibility
falls out of (slot present) × (session state) declaratively. Remove
SidebarRailCallRouteSync and its test mock.
---
 .../SidebarRail/SidebarRailCallPanel.tsx      | 32 ++++++++++++++++++-
 .../SidebarRail/SidebarRailCallRouteSync.tsx  | 31 ------------------
 .../MainLayout/LayoutWithSidebar.spec.tsx     |  1 -
 .../root/MainLayout/LayoutWithSidebar.tsx     |  2 --
 4 files changed, 31 insertions(+), 35 deletions(-)
 delete mode 100644 apps/meteor/client/sidebar/SidebarRail/SidebarRailCallRouteSync.tsx

diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
index 0d764fcf113aa..97570cead6cf1 100644
--- a/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
@@ -1,10 +1,40 @@
 import { Box, Sidepanel } from '@rocket.chat/fuselage';
-import { MediaCallWidgetSlot } from '@rocket.chat/ui-voip';
+import { MediaCallWidgetSlot, useMediaCallView, useWidgetExternalControls } from '@rocket.chat/ui-voip';
+import { useLayoutEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const SidebarRailCallPanel = () => {
 	const { t } = useTranslation();
 
+	const {
+		sessionState: { state },
+	} = useMediaCallView();
+	const { toggleWidget } = useWidgetExternalControls();
+
+	const stateRef = useRef(state);
+	stateRef.current = state;
+
+	// The call panel hosts the dialer: while it is mounted and the session is idle
+	// (initial open, or right after a call ends) show the dialer instead of an empty
+	// panel. This is what "resets the bar" when a call finishes on the telephony screen.
+	useLayoutEffect(() => {
+		if (state === 'closed') {
+			toggleWidget();
+		}
+	}, [state, toggleWidget]);
+
+	// Leaving the telephony screen with only the idle dialer open must drop it, so it
+	// does not pop out as a floating widget. Running the teardown in the layout phase
+	// keeps it in sync with the slot unmount and avoids a one-frame flicker.
+	useLayoutEffect(
+		() => () => {
+			if (stateRef.current === 'new') {
+				toggleWidget();
+			}
+		},
+		[toggleWidget],
+	);
+
 	return (
 		<Box width='x280' minWidth='x280'>
 			<Sidepanel role='complementary' aria-label={t('Calls')}>
diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallRouteSync.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallRouteSync.tsx
deleted file mode 100644
index 1c0fcc3b71747..0000000000000
--- a/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallRouteSync.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useMediaCallView, useWidgetExternalControls } from '@rocket.chat/ui-voip';
-import { useEffect } from 'react';
-
-type SidebarRailCallRouteSyncProps = {
-	currentRoutePath?: string;
-};
-
-const SidebarRailCallRouteSync = ({ currentRoutePath }: SidebarRailCallRouteSyncProps) => {
-	const { sessionState } = useMediaCallView();
-	const { toggleWidget } = useWidgetExternalControls();
-
-	useEffect(() => {
-		const onRoute = currentRoutePath?.includes('/call-history') ?? false;
-
-		// On /call-history: keep the dialer open. If the session is idle (closed)
-		// — initial load, an ended call, etc — bounce it back to `new`.
-		if (onRoute && sessionState.state === 'closed') {
-			toggleWidget();
-			return;
-		}
-
-		// Off /call-history: an idle dialer has no host, so close it.
-		if (!onRoute && sessionState.state === 'new') {
-			toggleWidget();
-		}
-	}, [currentRoutePath, sessionState.state, toggleWidget]);
-
-	return null;
-};
-
-export default SidebarRailCallRouteSync;
diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.spec.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.spec.tsx
index 9574e6cd92c86..a292504aa4f13 100644
--- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.spec.tsx
+++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.spec.tsx
@@ -13,7 +13,6 @@ jest.mock('@rocket.chat/ui-contexts', () => ({
 jest.mock('../../../navbar', () => () => <div>NavBar</div>);
 jest.mock('../../../sidebar/SidebarRail', () => () => <div>SidebarRail</div>);
 jest.mock('../../../sidebar/SidebarRail/SidebarRailHeader', () => () => <div>SidebarRailHeader</div>);
-jest.mock('../../../sidebar/SidebarRail/SidebarRailCallRouteSync', () => () => <div>SidebarRailCallRouteSync</div>);
 jest.mock('./SecondaryPanel', () => () => <div>SecondaryPanel</div>);
 jest.mock('./AccessibilityShortcut', () => () => <div>AccessibilityShortcut</div>);
 
diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
index 0917eb8c9bc2b..d2c3fad3002b2 100644
--- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
+++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
@@ -11,7 +11,6 @@ import SecondaryPanel from './SecondaryPanel';
 import { isSidebarRailEnabled } from './sidebarRailFlag';
 import NavBar from '../../../navbar';
 import SidebarRail from '../../../sidebar/SidebarRail';
-import SidebarRailCallRouteSync from '../../../sidebar/SidebarRail/SidebarRailCallRouteSync';
 import SidebarRailHeader from '../../../sidebar/SidebarRail/SidebarRailHeader';
 
 const INVALID_ROOM_NAME_PREFIXES = ['#', '?'] as const;
@@ -66,7 +65,6 @@ const LayoutWithSidebar = ({ children }: LayoutWithSidebarProps) => {
 			>
 				<MainLayoutStyleTags />
 				{showSidebarRail && <SidebarRail />}
-				{showSidebarRail && <SidebarRailCallRouteSync currentRoutePath={currentRoutePath} />}
 				{!removeSidenav && <SecondaryPanel showSidebarRail={showSidebarRail} currentRoutePath={currentRoutePath} />}
 				<MainContent>{children}</MainContent>
 			</Box>

From 982e88d131b0ab762685628023e6daf8a08ead5e Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Mon, 8 Jun 2026 19:45:27 -0300
Subject: [PATCH 11/18] fix(ui-voip): keep the DTMF dialpad on internal
 floating calls

The DMV-16 change gated the floating widget's dialpad toggle on the
call being external (SIP), which removed it from internal user-to-user
calls and broke the voice-calls-ee e2e suite (acceptCall expects the
"Dialpad" button visible during an internal call).

The floating widget keeps its dialpad for every ongoing call, as before.
The SIP gate stays only on the inline sidebar dialpad (MediaCallDialpad),
which is the surface DMV-16 adds. The toggle is suppressed only while
inline so it doesn't duplicate the expanded inline keypad.
---
 .../OngoingCall.dialpad.spec.tsx              | 19 +++++++++++++------
 .../src/views/MediaCallWidget/OngoingCall.tsx | 10 ++++------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.dialpad.spec.tsx b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.dialpad.spec.tsx
index 52b190a0bdb32..99ffd6da7f0ec 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.dialpad.spec.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.dialpad.spec.tsx
@@ -72,17 +72,17 @@ const renderView = (Component: ComponentType, { peerInfo, inline = false, localS
 };
 
 describe('Ongoing call dialpad (DMV-16)', () => {
-	it('does not render the dialpad for internal (non-SIP) calls', () => {
-		renderView(OngoingCall, { peerInfo: internalPeer });
+	it('renders the collapsible dialpad toggle for any floating ongoing call (internal included)', () => {
+		renderView(OngoingCall, { peerInfo: internalPeer, inline: false });
 
-		expect(screen.queryByRole('button', { name: 'Dialpad' })).not.toBeInTheDocument();
+		// floating: toggle present for every call, keypad collapsed by default
+		expect(screen.getByRole('button', { name: 'Dialpad' })).toBeInTheDocument();
 		expect(screen.queryByRole('button', { name: '#' })).not.toBeInTheDocument();
 	});
 
-	it('renders a collapsible dialpad toggle for external (SIP) calls when floating', () => {
+	it('renders the collapsible dialpad toggle for external (SIP) calls when floating', () => {
 		renderView(OngoingCall, { peerInfo: externalPeer, inline: false });
 
-		// floating: toggle button present, keypad collapsed by default
 		expect(screen.getByRole('button', { name: 'Dialpad' })).toBeInTheDocument();
 		expect(screen.queryByRole('button', { name: '#' })).not.toBeInTheDocument();
 	});
@@ -90,10 +90,17 @@ describe('Ongoing call dialpad (DMV-16)', () => {
 	it('renders the dialpad expanded (no toggle) for external calls when inline', () => {
 		renderView(OngoingCall, { peerInfo: externalPeer, inline: true });
 
-		// inline: no toggle, the expanded keypad is mounted (the '#' key proves it)
+		// inline: no floating toggle, the expanded keypad is mounted (the '#' key proves it)
 		expect(screen.queryByRole('button', { name: 'Dialpad' })).not.toBeInTheDocument();
 		expect(screen.getByRole('button', { name: '#' })).toBeInTheDocument();
 	});
+
+	it('does not render the inline dialpad for internal (non-SIP) calls', () => {
+		renderView(OngoingCall, { peerInfo: internalPeer, inline: true });
+
+		expect(screen.queryByRole('button', { name: 'Dialpad' })).not.toBeInTheDocument();
+		expect(screen.queryByRole('button', { name: '#' })).not.toBeInTheDocument();
+	});
 });
 
 describe('Ongoing call with screen share dialpad (DMV-16)', () => {
diff --git a/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx
index 95237a7311a8e..cc26713cb2522 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx
@@ -27,9 +27,9 @@ const OngoingCall = () => {
 	const { muted, held, remoteMuted, remoteHeld, peerInfo, connectionState, supportedFeatures } = sessionState;
 	const { inline } = useMediaCallWidgetSlot();
 
-	// Floating widget keeps the collapsible DTMF toggle for external (SIP) calls.
-	// The inline (sidebar rail) dialpad is rendered by <MediaCallDialpad /> in the content instead.
-	const showDialpad = !!peerInfo && 'number' in peerInfo;
+	// The floating widget keeps its collapsible DTMF toggle for every ongoing call.
+	// The inline (sidebar rail) dialpad is rendered by <MediaCallDialpad /> in the content instead,
+	// so the toggle is only suppressed while inline to avoid showing both.
 	const { element: keypad, buttonProps: keypadButtonProps } = useKeypad(onTone);
 
 	const slots = useInfoSlots(muted, held, connectionState);
@@ -63,9 +63,7 @@ const OngoingCall = () => {
 			<WidgetFooter>
 				{keypad}
 				<ButtonGroup large>
-					{showDialpad && !inline && (
-						<ActionButton disabled={connecting || reconnecting} icon='dialpad' label='Dialpad' {...keypadButtonProps} />
-					)}
+					{!inline && <ActionButton disabled={connecting || reconnecting} icon='dialpad' label='Dialpad' {...keypadButtonProps} />}
 					<ToggleButton label={t('Mute')} icons={['mic', 'mic-off']} titles={[t('Mute'), t('Unmute')]} pressed={muted} onToggle={onMute} />
 					<ToggleButton
 						label={t('Hold')}

From c2ded8575bf5bec6686a134d14b5eaab4afeb665 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 1 Jul 2026 12:22:58 -0300
Subject: [PATCH 12/18] fix(ui-voip): add idempotent openDialer/closeDialer
 intents for the call panel

The sidebar call panel opened the idle dialer with the toggleWidget() toggle
whenever the session was 'closed'. React StrictMode double-invokes the layout
effect on mount, so the two toggles cancelled out (closed -> new -> closed) and
the dialer never showed in dev.

Add explicit, idempotent openDialer/closeDialer intents (reducer actions +
useMediaSession + external-control signals) that only act on the closed<->new
(idle dialer) transition and never touch an active call. SidebarRailCallPanel
uses them instead of toggleWidget, so repeated calls are safe. toggleWidget is
kept for genuine toggle affordances (e.g. the message toolbar call button).
---
 .../SidebarRail/SidebarRailCallPanel.tsx      | 18 ++++----
 .../src/context/MediaCallInstanceContext.ts   |  2 +
 .../src/context/useWidgetExternalControls.ts  | 13 +++++-
 .../src/providers/MediaCallViewProvider.tsx   | 19 ++++++++-
 .../ui-voip/src/providers/useMediaSession.ts  | 42 +++++++++++++++++++
 5 files changed, 84 insertions(+), 10 deletions(-)

diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
index 97570cead6cf1..c31a08cd1ddd0 100644
--- a/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
@@ -9,30 +9,32 @@ const SidebarRailCallPanel = () => {
 	const {
 		sessionState: { state },
 	} = useMediaCallView();
-	const { toggleWidget } = useWidgetExternalControls();
+	const { openDialer, closeDialer } = useWidgetExternalControls();
 
 	const stateRef = useRef(state);
 	stateRef.current = state;
 
 	// The call panel hosts the dialer: while it is mounted and the session is idle
 	// (initial open, or right after a call ends) show the dialer instead of an empty
-	// panel. This is what "resets the bar" when a call finishes on the telephony screen.
+	// panel. `openDialer` is idempotent (only acts on the "closed" state), so React
+	// StrictMode double-invoking this layout effect on mount is harmless.
 	useLayoutEffect(() => {
 		if (state === 'closed') {
-			toggleWidget();
+			openDialer();
 		}
-	}, [state, toggleWidget]);
+	}, [state, openDialer]);
 
 	// Leaving the telephony screen with only the idle dialer open must drop it, so it
-	// does not pop out as a floating widget. Running the teardown in the layout phase
-	// keeps it in sync with the slot unmount and avoids a one-frame flicker.
+	// does not pop out as a floating widget. The `state === 'new'` guard scopes this to
+	// the idle dialer (never an ongoing call) and skips StrictMode's fake unmount, where
+	// the just-issued open has not re-rendered yet.
 	useLayoutEffect(
 		() => () => {
 			if (stateRef.current === 'new') {
-				toggleWidget();
+				closeDialer();
 			}
 		},
-		[toggleWidget],
+		[closeDialer],
 	);
 
 	return (
diff --git a/packages/ui-voip/src/context/MediaCallInstanceContext.ts b/packages/ui-voip/src/context/MediaCallInstanceContext.ts
index 72eced82fa6b7..5fdbfdd32ca01 100644
--- a/packages/ui-voip/src/context/MediaCallInstanceContext.ts
+++ b/packages/ui-voip/src/context/MediaCallInstanceContext.ts
@@ -8,6 +8,8 @@ import type { PeerInfo } from './definitions';
 
 export type Signals = {
 	toggleWidget: { peerInfo?: PeerInfo };
+	openDialer: { peerInfo?: PeerInfo };
+	closeDialer: undefined;
 };
 
 export type AvailableViews = 'room' | 'popout' | 'widget';
diff --git a/packages/ui-voip/src/context/useWidgetExternalControls.ts b/packages/ui-voip/src/context/useWidgetExternalControls.ts
index 82aad94b9e650..968d38dfe497d 100644
--- a/packages/ui-voip/src/context/useWidgetExternalControls.ts
+++ b/packages/ui-voip/src/context/useWidgetExternalControls.ts
@@ -14,7 +14,18 @@ export const useWidgetExternalControls = () => {
 		[signalEmitter],
 	);
 
+	const openDialer = useCallback(
+		(peerInfo?: PeerInfo) => {
+			signalEmitter.emit('openDialer', { peerInfo });
+		},
+		[signalEmitter],
+	);
+
+	const closeDialer = useCallback(() => {
+		signalEmitter.emit('closeDialer', undefined);
+	}, [signalEmitter]);
+
 	const endCall = useCallback(() => getEndCall(instance)(), [instance]);
 
-	return { toggleWidget, endCall };
+	return { toggleWidget, openDialer, closeDialer, endCall };
 };
diff --git a/packages/ui-voip/src/providers/MediaCallViewProvider.tsx b/packages/ui-voip/src/providers/MediaCallViewProvider.tsx
index cc048229c93e0..1704f185d2e15 100644
--- a/packages/ui-voip/src/providers/MediaCallViewProvider.tsx
+++ b/packages/ui-voip/src/providers/MediaCallViewProvider.tsx
@@ -37,7 +37,7 @@ const MediaCallViewProvider = ({ children }: MediaCallViewProviderProps) => {
 
 	const { instance, audioElement, openRoomId, registerView, unregisterView } = useMediaCallInstance();
 
-	const { sessionState, toggleWidget, selectPeer } = useMediaSession(instance);
+	const { sessionState, toggleWidget, openDialer, closeDialer, selectPeer } = useMediaSession(instance);
 	const controls = useMediaSessionControls(instance);
 
 	useDesktopNotifications(sessionState);
@@ -228,6 +228,23 @@ const MediaCallViewProvider = ({ children }: MediaCallViewProviderProps) => {
 		),
 	);
 
+	useWidgetExternalControlSignalListener(
+		'openDialer',
+		useCallback(
+			({ peerInfo }) => {
+				openDialer(peerInfo);
+			},
+			[openDialer],
+		),
+	);
+
+	useWidgetExternalControlSignalListener(
+		'closeDialer',
+		useCallback(() => {
+			closeDialer();
+		}, [closeDialer]),
+	);
+
 	const { onChangePosition, getRestorePosition } = useWidgetPositionTracker();
 
 	useEffect(() => {
diff --git a/packages/ui-voip/src/providers/useMediaSession.ts b/packages/ui-voip/src/providers/useMediaSession.ts
index 7ded1ef7a47ac..a87ad32282f38 100644
--- a/packages/ui-voip/src/providers/useMediaSession.ts
+++ b/packages/ui-voip/src/providers/useMediaSession.ts
@@ -58,6 +58,13 @@ const reducer = (
 				type: 'toggleWidget';
 				payload: { peerInfo?: PeerInfo };
 		  }
+		| {
+				type: 'openDialer';
+				payload: { peerInfo?: PeerInfo };
+		  }
+		| {
+				type: 'closeDialer';
+		  }
 		| {
 				type: 'instance_updated';
 				payload: SessionState;
@@ -83,6 +90,29 @@ const reducer = (
 		}
 	}
 
+	// Idempotent intents (open/close the idle dialer). Unlike `toggleWidget`, calling
+	// them repeatedly is safe, so callers can express "ensure open/closed" without
+	// tracking the current state (e.g. StrictMode double-invoked effects).
+	if (action.type === 'openDialer') {
+		if (reducerState.state === 'closed') {
+			return { ...reducerState, state: 'new', peerInfo: action.payload?.peerInfo };
+		}
+
+		if (reducerState.state === 'new' && action.payload?.peerInfo) {
+			return { ...reducerState, peerInfo: action.payload.peerInfo };
+		}
+
+		return reducerState;
+	}
+
+	if (action.type === 'closeDialer') {
+		if (reducerState.state === 'new') {
+			return { ...reducerState, state: 'closed' };
+		}
+
+		return reducerState;
+	}
+
 	if (action.type === 'instance_updated') {
 		return { ...reducerState, ...action.payload };
 	}
@@ -109,6 +139,8 @@ const reducer = (
 export type MediaSessionStateWithWidgetControls = {
 	sessionState: SessionState;
 	toggleWidget: (peerInfo?: PeerInfo) => void;
+	openDialer: (peerInfo?: PeerInfo) => void;
+	closeDialer: () => void;
 	selectPeer: (peerInfo: PeerInfo) => void;
 };
 
@@ -247,6 +279,14 @@ export const useMediaSession = (instance?: MediaSignalingSession): MediaSessionS
 		dispatch({ type: 'toggleWidget', payload: { peerInfo } });
 	}, []);
 
+	const openDialer = useCallback((peerInfo?: PeerInfo) => {
+		dispatch({ type: 'openDialer', payload: { peerInfo } });
+	}, []);
+
+	const closeDialer = useCallback(() => {
+		dispatch({ type: 'closeDialer' });
+	}, []);
+
 	const selectPeer = useCallback((peerInfo: PeerInfo) => {
 		dispatch({ type: 'selectPeer', payload: { peerInfo } });
 	}, []);
@@ -262,6 +302,8 @@ export const useMediaSession = (instance?: MediaSignalingSession): MediaSessionS
 	return {
 		sessionState: mediaSession,
 		toggleWidget,
+		openDialer,
+		closeDialer,
 		selectPeer,
 	};
 };

From c40998215dab9c6ab8810756a4198d244f6f1106 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 1 Jul 2026 20:51:13 -0300
Subject: [PATCH 13/18] fix(ui-voip): keep the call panel dialer open after a
 call ends
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The null-instance sync paths dispatched `reset`, which wiped the idle
dialer state ('new') on the instance's autoSync emit right after a call
ended — leaving the sidebar call panel empty. Introduce a `call_cleared`
intent that tears down call-derived state but preserves a user-driven
idle dialer, mirroring the deeplink pre-fill fix. The genuine unmount
path (no instance) still fully resets.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ui-voip/src/providers/useMediaSession.ts  | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/ui-voip/src/providers/useMediaSession.ts b/packages/ui-voip/src/providers/useMediaSession.ts
index a87ad32282f38..27be3300877c4 100644
--- a/packages/ui-voip/src/providers/useMediaSession.ts
+++ b/packages/ui-voip/src/providers/useMediaSession.ts
@@ -20,6 +20,7 @@ const defaultSessionInfo: SessionState = {
 	startedAt: undefined,
 	hidden: false,
 	supportedFeatures: ['audio', 'transfer', 'hold'],
+	docked: false,
 };
 
 export const getExtensionFromInstanceContact = (contact: CallContact): string | undefined => {
@@ -50,6 +51,9 @@ const reducer = (
 		| {
 				type: 'reset';
 		  }
+		| {
+				type: 'call_cleared';
+		  }
 		| {
 				type: 'selectPeer';
 				payload: { peerInfo?: PeerInfo };
@@ -76,7 +80,8 @@ const reducer = (
 ): SessionState => {
 	if (action.type === 'toggleWidget') {
 		if (reducerState.state === 'closed') {
-			return { ...reducerState, state: 'new', peerInfo: action.payload?.peerInfo };
+			// Opened via a user action (room/user "call") — a free-floating composer, not docked.
+			return { ...reducerState, state: 'new', peerInfo: action.payload?.peerInfo, docked: false };
 		}
 
 		if (reducerState.state === 'new') {
@@ -84,7 +89,7 @@ const reducer = (
 			// peer instead of toggling closed — keeps "Call rodrigo" working when
 			// the dialer is already mounted (e.g. inside the sidebar rail panel).
 			if (action.payload?.peerInfo) {
-				return { ...reducerState, peerInfo: action.payload.peerInfo };
+				return { ...reducerState, peerInfo: action.payload.peerInfo, docked: false };
 			}
 			return { ...reducerState, state: 'closed' };
 		}
@@ -95,7 +100,9 @@ const reducer = (
 	// tracking the current state (e.g. StrictMode double-invoked effects).
 	if (action.type === 'openDialer') {
 		if (reducerState.state === 'closed') {
-			return { ...reducerState, state: 'new', peerInfo: action.payload?.peerInfo };
+			// Only the sidebar call panel uses openDialer; mark the dialer docked so it renders
+			// inside the panel slot and never floats once the panel unmounts.
+			return { ...reducerState, state: 'new', peerInfo: action.payload?.peerInfo, docked: true };
 		}
 
 		if (reducerState.state === 'new' && action.payload?.peerInfo) {
@@ -129,6 +136,18 @@ const reducer = (
 		return defaultSessionInfo;
 	}
 
+	// No active call on the instance. Tear down call-derived state, but preserve a user-driven
+	// idle compose widget ('new') — e.g. the sidebar call panel dialer, or a dial pad pre-filled
+	// from a desktop telephony deeplink — which the instance's autoSync emit would otherwise
+	// clobber right after it initializes (leaving the panel empty after a call ends).
+	if (action.type === 'call_cleared') {
+		if (reducerState.state === 'new') {
+			return reducerState;
+		}
+
+		return defaultSessionInfo;
+	}
+
 	if (action.type === 'status_updated' && reducerState.peerInfo && 'userId' in reducerState.peerInfo) {
 		return { ...reducerState, peerInfo: { ...reducerState.peerInfo, status: action.payload?.status } };
 	}
@@ -158,7 +177,7 @@ export const useMediaSession = (instance?: MediaSignalingSession): MediaSessionS
 		const updateSessionState = () => {
 			const instanceState = instance.getState();
 			if (!instanceState) {
-				dispatch({ type: 'reset' });
+				dispatch({ type: 'call_cleared' });
 				return;
 			}
 
@@ -169,7 +188,7 @@ export const useMediaSession = (instance?: MediaSignalingSession): MediaSessionS
 			const state = deriveWidgetStateFromCallState(callState, role);
 
 			if (!state) {
-				dispatch({ type: 'reset' });
+				dispatch({ type: 'call_cleared' });
 				return;
 			}
 

From 77e852bf7174e2a7a818cfa6c298a35895ded86a Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 1 Jul 2026 20:51:14 -0300
Subject: [PATCH 14/18] fix(ui-voip): don't float the docked call-panel dialer
 on navigation

Navigating away from the call-history panel unmounted its widget slot,
which reparented the idle dialer into the floating portal instead of
dismissing it. Mark dialers opened via `openDialer` (the panel) as
`docked` and skip rendering them once their slot is gone, so they
disappear with the panel. Free-floating composers opened via
`toggleWidget` (room/user "call" actions) are unaffected and still float.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/ui-voip/src/context/definitions.d.ts            | 5 +++++
 .../src/views/MediaCallWidget/MediaCallWidget.tsx        | 9 ++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/ui-voip/src/context/definitions.d.ts b/packages/ui-voip/src/context/definitions.d.ts
index 495bf5cf253fb..87a371740a6f0 100644
--- a/packages/ui-voip/src/context/definitions.d.ts
+++ b/packages/ui-voip/src/context/definitions.d.ts
@@ -32,6 +32,11 @@ interface IBaseSession {
 	startedAt?: Date;
 	hidden: boolean;
 	supportedFeatures: readonly CallFeature[];
+	// True when the idle dialer ('new') is docked inside a slot (the sidebar call panel)
+	// rather than opened as a free-floating composer. A docked dialer must never render as
+	// a floating widget: when its slot goes away (navigating off the panel) it disappears
+	// instead of popping out. Irrelevant for non-'new' states.
+	docked?: boolean;
 }
 
 interface IEmptySession extends IBaseSession {
diff --git a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
index ca4551c7c8bd8..5cd7e69ec90bd 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
@@ -1,12 +1,14 @@
 import { OngoingCall, NewCall, IncomingCall, OutgoingCall, IncomingCallTransfer, OutgoingCallTransfer } from '..';
 import OngoingCallWithScreen from './OngoingCallWithScreen';
+import { useMediaCallWidgetSlot } from '../../context/MediaCallWidgetSlotContext';
 import { useMediaCallView } from '../../context/MediaCallViewContext';
 import useRegisterView from '../../context/useRegisterView';
 
 const MediaCallWidget = () => {
 	const currentViews = useRegisterView('widget');
+	const { inline } = useMediaCallWidgetSlot();
 	const {
-		sessionState: { state, hidden, transferredBy, peerInfo, supportedFeatures },
+		sessionState: { state, hidden, transferredBy, peerInfo, supportedFeatures, docked },
 	} = useMediaCallView();
 
 	if (hidden || !currentViews.includes('widget')) {
@@ -20,6 +22,11 @@ const MediaCallWidget = () => {
 			}
 			return <OngoingCall />;
 		case 'new':
+			// A docked dialer belongs to the sidebar call panel slot. When that slot is gone
+			// (navigated off the panel) it must not pop out as a floating widget.
+			if (docked && !inline) {
+				return null;
+			}
 			return <NewCall />;
 		case 'ringing':
 			if (transferredBy) {

From 1e647559a3142510adc0b618ebfc15b6addf473c Mon Sep 17 00:00:00 2001
From: gabriellsh <henriques.gabriell@gmail.com>
Date: Thu, 2 Jul 2026 14:08:37 -0300
Subject: [PATCH 15/18] fix: Add missing sort button to SidebarRail

---
 .../sidebar/SidebarRail/SidebarRail.tsx       |  4 ++-
 .../sidebar/SidebarRail/SidebarRailSort.tsx   | 28 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 apps/meteor/client/sidebar/SidebarRail/SidebarRailSort.tsx

diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRail.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRail.tsx
index c1468434ca808..2c59b72f61681 100644
--- a/apps/meteor/client/sidebar/SidebarRail/SidebarRail.tsx
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRail.tsx
@@ -7,6 +7,7 @@ import SidebarRailCreateNew from './SidebarRailCreateNew';
 import SidebarRailDivider from './SidebarRailDivider';
 import SidebarRailLoginPage from './SidebarRailLoginPage';
 import SidebarRailPhone from './SidebarRailPhone';
+import SidebarRailSort from './SidebarRailSort';
 import NavBarItemDirectoryPage from '../../navbar/NavBarPagesGroup/NavBarItemDirectoryPage';
 import NavBarItemHomePage from '../../navbar/NavBarPagesGroup/NavBarItemHomePage';
 import NavBarItemMarketPlaceMenu from '../../navbar/NavBarPagesGroup/NavBarItemMarketPlaceMenu';
@@ -33,8 +34,9 @@ const SidebarRail = () => {
 		>
 			<Box flexGrow={1} minHeight={0} overflow='hidden auto' p={8}>
 				<NavBarGroup vertical aria-label={t('Pages_and_actions')}>
-					<SidebarRailCreateNew />
 					<NavBarItemHomePage title={t('Home')} />
+					<SidebarRailSort />
+					<SidebarRailCreateNew />
 				</NavBarGroup>
 				<SidebarRailDivider />
 				<NavBarGroup vertical aria-label={t('Voice_Call')}>
diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailSort.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailSort.tsx
new file mode 100644
index 0000000000000..9f5ac72bf00da
--- /dev/null
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRailSort.tsx
@@ -0,0 +1,28 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSortMenu } from '../../navbar/NavBarPagesGroup/hooks/useSortMenu';
+
+type SidebarRailSortProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const SidebarRailSort = (props: SidebarRailSortProps) => {
+	const { t } = useTranslation();
+
+	const sections = useSortMenu();
+
+	return (
+		<GenericMenu
+			icon='sort'
+			sections={sections}
+			title={t('Display')}
+			selectionMode='multiple'
+			is={NavBarItem}
+			placement='right-start'
+			{...props}
+		/>
+	);
+};
+
+export default SidebarRailSort;

From 70fd50257a3bb8d6bd4bd16a834c0c0b568350f4 Mon Sep 17 00:00:00 2001
From: gabriellsh <henriques.gabriell@gmail.com>
Date: Thu, 2 Jul 2026 15:19:18 -0300
Subject: [PATCH 16/18] fix: Widget disappearing on SidebarRail after ending a
 call

---
 packages/ui-voip/src/providers/MediaCallViewProvider.tsx     | 3 ++-
 packages/ui-voip/src/providers/useMediaSession.ts            | 3 ++-
 .../ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx    | 5 ++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/ui-voip/src/providers/MediaCallViewProvider.tsx b/packages/ui-voip/src/providers/MediaCallViewProvider.tsx
index 1704f185d2e15..729e81f971506 100644
--- a/packages/ui-voip/src/providers/MediaCallViewProvider.tsx
+++ b/packages/ui-voip/src/providers/MediaCallViewProvider.tsx
@@ -82,7 +82,8 @@ const MediaCallViewProvider = ({ children }: MediaCallViewProviderProps) => {
 	const onHold = () => controls.toggleHold();
 
 	const onCall = async () => {
-		if (sessionState.state !== 'new') {
+		// TODO: This is a workaround for the docked widget, which doesn't have a "closed" state.
+		if (sessionState.state !== 'new' && sessionState.state !== 'closed') {
 			console.error('Cannot start call in state', sessionState.state);
 			return;
 		}
diff --git a/packages/ui-voip/src/providers/useMediaSession.ts b/packages/ui-voip/src/providers/useMediaSession.ts
index 27be3300877c4..511e0950074d9 100644
--- a/packages/ui-voip/src/providers/useMediaSession.ts
+++ b/packages/ui-voip/src/providers/useMediaSession.ts
@@ -125,7 +125,8 @@ const reducer = (
 	}
 
 	if (action.type === 'selectPeer') {
-		if (reducerState.state !== 'new') {
+		// TODO: This is a workaround for the docked widget, which doesn't have a "closed" state.
+		if (reducerState.state !== 'closed' && reducerState.state !== 'new') {
 			return reducerState;
 		}
 
diff --git a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
index 5cd7e69ec90bd..27158128e9a4c 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
@@ -1,7 +1,7 @@
 import { OngoingCall, NewCall, IncomingCall, OutgoingCall, IncomingCallTransfer, OutgoingCallTransfer } from '..';
 import OngoingCallWithScreen from './OngoingCallWithScreen';
-import { useMediaCallWidgetSlot } from '../../context/MediaCallWidgetSlotContext';
 import { useMediaCallView } from '../../context/MediaCallViewContext';
+import { useMediaCallWidgetSlot } from '../../context/MediaCallWidgetSlotContext';
 import useRegisterView from '../../context/useRegisterView';
 
 const MediaCallWidget = () => {
@@ -40,6 +40,9 @@ const MediaCallWidget = () => {
 			return <OutgoingCall />;
 		case 'closed':
 		default:
+			if (inline) {
+				return <NewCall />;
+			}
 			return null;
 	}
 };

From 000a5e93bd26c7a4b1edf6b0c376fd3cd9ad0f8b Mon Sep 17 00:00:00 2001
From: gabriellsh <henriques.gabriell@gmail.com>
Date: Wed, 22 Jul 2026 16:36:40 -0300
Subject: [PATCH 17/18] fix: Widget state left as "new" and "docked" when
 leaving call panel (breaks telto links desktop integration)

---
 .../SidebarRail/SidebarRailCallPanel.tsx      | 21 +++++--------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
index c31a08cd1ddd0..3949043cd58bb 100644
--- a/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
+++ b/apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx
@@ -1,28 +1,19 @@
 import { Box, Sidepanel } from '@rocket.chat/fuselage';
-import { MediaCallWidgetSlot, useMediaCallView, useWidgetExternalControls } from '@rocket.chat/ui-voip';
-import { useLayoutEffect, useRef } from 'react';
+import { MediaCallWidgetSlot, useWidgetExternalControls } from '@rocket.chat/ui-voip';
+import { useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const SidebarRailCallPanel = () => {
 	const { t } = useTranslation();
-
-	const {
-		sessionState: { state },
-	} = useMediaCallView();
 	const { openDialer, closeDialer } = useWidgetExternalControls();
 
-	const stateRef = useRef(state);
-	stateRef.current = state;
-
 	// The call panel hosts the dialer: while it is mounted and the session is idle
 	// (initial open, or right after a call ends) show the dialer instead of an empty
 	// panel. `openDialer` is idempotent (only acts on the "closed" state), so React
 	// StrictMode double-invoking this layout effect on mount is harmless.
 	useLayoutEffect(() => {
-		if (state === 'closed') {
-			openDialer();
-		}
-	}, [state, openDialer]);
+		openDialer();
+	}, [openDialer]);
 
 	// Leaving the telephony screen with only the idle dialer open must drop it, so it
 	// does not pop out as a floating widget. The `state === 'new'` guard scopes this to
@@ -30,9 +21,7 @@ const SidebarRailCallPanel = () => {
 	// the just-issued open has not re-rendered yet.
 	useLayoutEffect(
 		() => () => {
-			if (stateRef.current === 'new') {
-				closeDialer();
-			}
+			closeDialer();
 		},
 		[closeDialer],
 	);

From 3b10fa1bf2dbc84e6df08ea4642edd755fda0411 Mon Sep 17 00:00:00 2001
From: gabriellsh <henriques.gabriell@gmail.com>
Date: Wed, 22 Jul 2026 16:37:10 -0300
Subject: [PATCH 18/18] fix: peerInfo overwritten with undefined value when
 opening Siderail call panel

---
 packages/ui-voip/src/providers/useMediaSession.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-voip/src/providers/useMediaSession.ts b/packages/ui-voip/src/providers/useMediaSession.ts
index 511e0950074d9..22b6139bd05e3 100644
--- a/packages/ui-voip/src/providers/useMediaSession.ts
+++ b/packages/ui-voip/src/providers/useMediaSession.ts
@@ -102,7 +102,7 @@ const reducer = (
 		if (reducerState.state === 'closed') {
 			// Only the sidebar call panel uses openDialer; mark the dialer docked so it renders
 			// inside the panel slot and never floats once the panel unmounts.
-			return { ...reducerState, state: 'new', peerInfo: action.payload?.peerInfo, docked: true };
+			return { ...reducerState, state: 'new', peerInfo: action.payload?.peerInfo || reducerState.peerInfo, docked: true };
 		}
 
 		if (reducerState.state === 'new' && action.payload?.peerInfo) {