Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement mobile responsive layout for the messaging page, enabling toggling between the conversation list and chat view on smaller screens.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-20 02:41:07 +05:30
parent 9b6fbeb4fd
commit bf97061a38
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/message/MessagingPage.tsx
View File

@@ -163,6 +163,7 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
const [isStartingConversation, setIsStartingConversation] = useState<string | null>(null);
const [isComposeOpen, setIsComposeOpen] = useState(false);
const [isReportModalOpen, setIsReportModalOpen] = useState(false);
const [showMobileChat, setShowMobileChat] = useState(false);
// Store converted avatar URLs by conversation ID
const [conversationAvatarUrls, setConversationAvatarUrls] = useState<Record<string, string>>({});
// Store converted file URLs by message ID (for S3-stored images/files)
@@ -314,6 +315,7 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
) {
initialConvHandledRef.current = initialConversationId;
selectConversation(initialConversationId);
setShowMobileChat(true);
}
}, [initialConversationId, conversations, isLoading, selectConversation]);
@@ -687,8 +689,8 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
{/* Main content */}
<div className="flex h-[700px]">
{/* Left sidebar - Conversation list */}
<div className="w-[380px] border-r border-[#00293d]/10 flex-shrink-0 overflow-hidden flex flex-col">
{/* Left sidebar - Conversation list (hidden on mobile when chat is open) */}
<div className={`w-full md:w-[380px] border-r border-[#00293d]/10 flex-shrink-0 overflow-hidden flex flex-col ${showMobileChat ? 'hidden md:flex' : 'flex'}`}>
{isLoading || isLoadingAgents ? (
<div className="flex-1 flex items-center justify-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#00293d]" />
@@ -779,7 +781,7 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
{filteredConversations.map((conversation) => (
<div
key={conversation.id}
onClick={() => selectConversation(conversation.id)}
onClick={() => { selectConversation(conversation.id); setShowMobileChat(true); }}
className="relative flex items-start gap-3 p-4 rounded-[15px] cursor-pointer transition-colors hover:bg-[#00293d]/5"
style={{ border: '1px solid rgba(0, 41, 61, 0.1)' }}
>
@@ -837,10 +839,20 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
)}
</div>
{/* Right panel - Chat area */}
<div className="flex-1 flex flex-col p-4">
{/* Right panel - Chat area (full width on mobile, hidden when no conversation on mobile) */}
<div className={`flex-1 flex flex-col p-4 ${showMobileChat ? 'flex' : 'hidden md:flex'}`}>
{currentConversation && selectedUserInfo ? (
<>
{/* Mobile back button */}
<button
onClick={() => setShowMobileChat(false)}
className="md:hidden flex items-center gap-2 mb-3 hover:opacity-70 transition-opacity cursor-pointer"
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#00293D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="font-fractul font-medium text-[14px] text-[#00293D]">Back</span>
</button>
{/* Chat header */}
<ChatHeader
{...selectedUserInfo}