Skip to content

fix: add clear back navigation when viewing direct messages #38136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Hardik301002 wants to merge 2 commits into from
Closed

fix: add clear back navigation when viewing direct messages #38136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0228686
Fix missing navigation items in collapsed header view
Hardik301002 Jan 10, 2026
9d28efb
Add back button to direct message header
Hardik301002 Jan 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions apps/meteor/client/navbar/NavBarControls/NavBarControlsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,19 @@ const NavBarControlsSection = () => {
const callAction = useMediaCallAction();

if (isMobile) {
return (
<NavBarSection>
{(showOmnichannel || callAction) && <NavBarControlsWithData />}
<NavBarGroup aria-label={t('Workspace_and_user_preferences')}>
<NavBarItemAdministrationMenu />
{user ? <UserMenu user={user} /> : <NavBarItemLoginPage />}
</NavBarGroup>
</NavBarSection>
);
}
return (
<NavBarSection>
{callAction && <NavBarVoipGroup />}
{showOmnichannel && <NavBarOmnichannelGroup />}
{(showOmnichannel || callAction) && <NavBarControlsWithData />}
<NavBarGroup aria-label={t('Workspace_and_user_preferences')}>
<NavBarItemAdministrationMenu />
{user ? <UserMenu user={user} /> : <NavBarItemLoginPage />}
</NavBarGroup>
</NavBarSection>
);
}


return (
<NavBarSection>
Expand Down
25 changes: 23 additions & 2 deletions apps/meteor/client/views/room/Header/RoomHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import { Header, HeaderContent, HeaderContentRow, HeaderToolbar } from '@rocket.
import type { ReactNode } from 'react';
import { Suspense } from 'react';
import { useTranslation } from 'react-i18next';
import { IconButton } from '@rocket.chat/fuselage';
import { useHistory } from 'react-router-dom';


import FederatedRoomOriginServer from './FederatedRoomOriginServer';
import ParentRoom from './ParentRoom';
Expand Down Expand Up @@ -33,10 +36,28 @@ export type RoomHeaderProps = {

const RoomHeader = ({ room, slots = {} }: RoomHeaderProps) => {
const { t } = useTranslation();
const history = useHistory();

const isDirectMessage = room?.t === 'd';

const handleBack = () => {
history.push('/');
};


return (
<Header>
{slots?.start}
<Header>
{isDirectMessage && (
<IconButton
icon='chevron-left'
small
aria-label={t('Back')}
title={t('Back')}
onClick={handleBack}
/>
)}
{slots?.start}
Comment on lines +49 to +59
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# First, let's read the file to see the actual indentation at lines 49-59
head -60 apps/meteor/client/views/room/Header/RoomHeader.tsx | tail -20

Repository: RocketChat/Rocket.Chat

Length of output: 365

🏁 Script executed:

# Let's see a bit more context (lines 40-70) to understand the indentation pattern
head -70 apps/meteor/client/views/room/Header/RoomHeader.tsx | tail -35

Repository: RocketChat/Rocket.Chat

Length of output: 818

🏁 Script executed:

# Check if there's a prettier or eslint config to understand the project's indentation standard
find . -maxdepth 2 -type f \( -name ".prettierrc*" -o -name ".eslintrc*" -o -name "prettier.config.*" -o -name "eslint.config.*" \) | head -10

Repository: RocketChat/Rocket.Chat

Length of output: 79

🏁 Script executed:

# Check the prettier configuration
cat .prettierrc

Repository: RocketChat/Rocket.Chat

Length of output: 303

Fix indentation to use tabs throughout.

Lines 49-59 use spaces instead of tabs, violating the project's Prettier configuration (useTabs: true). The rest of the component correctly uses tabs (see line 60+). The back button placement before slots?.start is intentional and appropriate.

🔧 Proposed fix for indentation 
-	   <Header>
-	    {isDirectMessage && (
-		  <IconButton
-			icon='chevron-left'
-			small
-			aria-label={t('Back')}
-			title={t('Back')}
-			onClick={handleBack}
-		  />
-  )}
-	    {slots?.start}
+		<Header>
+			{isDirectMessage && (
+				<IconButton
+					icon='chevron-left'
+					small
+					aria-label={t('Back')}
+					title={t('Back')}
+					onClick={handleBack}
+				/>
+			)}
+			{slots?.start}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Header>
{isDirectMessage && (
<IconButton
icon='chevron-left'
small
aria-label={t('Back')}
title={t('Back')}
onClick={handleBack}
/>
)}
{slots?.start}
<Header>
{isDirectMessage && (
<IconButton
icon='chevron-left'
small
aria-label={t('Back')}
title={t('Back')}
onClick={handleBack}
/>
)}
{slots?.start}
🤖 Prompt for AI Agents 
In @apps/meteor/client/views/room/Header/RoomHeader.tsx around lines 49 - 59,
Several lines in the RoomHeader JSX (the Header block containing the
isDirectMessage conditional and IconButton) use spaces instead of tabs; update
the indentation for that block to use tabs consistently (replace leading spaces
on the lines containing Header, the isDirectMessage conditional, IconButton
props like icon/aria-label/title/onClick, and the slots?.start line) so the file
follows the project's useTabs: true Prettier rule while keeping the existing
structure and handlers (isDirectMessage, IconButton, handleBack, slots?.start)
unchanged.


<ParentRoom room={room} />
{slots?.preContent}
<HeaderContent>
Expand Down
Loading