From 728365f2faca00c86d8e8ee063e7b9c7edab2828 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Tue, 4 Nov 2025 15:25:14 +0530
Subject: [PATCH] feat(messages): Enhance mobile responsiveness for messaging
 interface

- Add responsive design for messages page with mobile-first approach
- Implement dynamic layout changes for conversation list and message view
- Add mobile-specific navigation between conversation list and message view
- Adjust font sizes, padding, and button visibility for smaller screens
- Improve UI/UX for mobile users with back button and condensed labels
- Hide/show conversation list and message view based on selected conversation
- Reduce text and button sizes for better mobile readability
- Add mobile-specific back navigation for conversations
---
 app/protected/messages/page.tsx          | 46 +++++++++++++++++++-----
 components/messages/ConversationList.tsx |  8 ++---
 components/messages/MessageInput.tsx     |  8 ++---
 components/messages/TypingIndicator.tsx  | 12 +------
 hooks/useMessages.ts                     | 19 ++++++++--
 5 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/app/protected/messages/page.tsx b/app/protected/messages/page.tsx
index 8e4ee619..5e7c9a00 100644
--- a/app/protected/messages/page.tsx
+++ b/app/protected/messages/page.tsx
@@ -59,11 +59,12 @@ export default function MessagesPage() {
         <div className="max-w-7xl mx-auto flex items-center justify-between">
           <div className="flex items-center gap-3">
             <MessageSquare className="h-6 w-6 text-primary" />
-            <h1 className="text-2xl font-bold">Messages</h1>
+            <h1 className="text-xl md:text-2xl font-bold">Messages</h1>
           </div>
           <Button onClick={() => setShowNewMessage(true)} className="gap-2">
             <Plus className="h-4 w-4" />
-            New Message
+            <span className="hidden sm:inline">New Message</span>
+            <span className="sm:hidden">New</span>
           </Button>
         </div>
       </div>
@@ -71,8 +72,11 @@ export default function MessagesPage() {
       {/* Main Content */}
       <div className="flex-1 overflow-hidden">
         <div className="max-w-7xl mx-auto h-full flex">
-          {/* Sidebar - Conversation List */}
-          <div className="w-80 border-r flex flex-col bg-background">
+          {/* Sidebar - Conversation List (Hidden on mobile when conversation is selected) */}
+          <div className={`
+            w-full md:w-80 md:border-r flex flex-col bg-background
+            ${selectedConversationId ? 'hidden md:flex' : 'flex'}
+          `}>
             {/* Search */}
             <div className="p-3 border-b">
               <div className="relative">
@@ -97,12 +101,36 @@ export default function MessagesPage() {
             </div>
           </div>
 
-          {/* Main Area - Conversation View */}
-          <div className="flex-1 bg-background flex flex-col">
+          {/* Main Area - Conversation View (Hidden on mobile when no conversation selected) */}
+          <div className={`
+            flex-1 bg-background flex flex-col
+            ${selectedConversationId ? 'flex' : 'hidden md:flex'}
+          `}>
             {selectedConversationId && selectedConversation && (
-              <div className="border-b p-4 bg-muted/50 flex-shrink-0">
-                <div className="flex items-center gap-3">
-                  <h2 className="font-semibold">{conversationName}</h2>
+              <div className="border-b p-3 md:p-4 bg-muted/50 flex-shrink-0">
+                <div className="flex items-center gap-2 md:gap-3">
+                  {/* Back button for mobile */}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="md:hidden"
+                    onClick={() => setSelectedConversationId(null)}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="m15 18-6-6 6-6"/>
+                    </svg>
+                  </Button>
+                  <h2 className="font-semibold text-sm md:text-base truncate">{conversationName}</h2>
                   {!selectedConversation.is_group && selectedConversation.other_user && selectedConversation.other_user.id ? (
                     <UserStatusIndicator 
                       userId={selectedConversation.other_user.id}
diff --git a/components/messages/ConversationList.tsx b/components/messages/ConversationList.tsx
index 67fe22c1..cbf17c25 100644
--- a/components/messages/ConversationList.tsx
+++ b/components/messages/ConversationList.tsx
@@ -111,24 +111,24 @@ export function ConversationList({ conversations, selectedId, onSelect, loading
 
             <div className="flex-1 min-w-0">
               <div className="flex items-center justify-between mb-1">
-                <span className={cn('font-semibold truncate', conversation.unread_count > 0 && 'text-primary')}>
+                <span className={cn('font-semibold truncate text-sm md:text-base', conversation.unread_count > 0 && 'text-primary')}>
                   {name}
                 </span>
                 {conversation.last_message_at && (
-                  <span className="text-xs text-muted-foreground flex-shrink-0 ml-2">
+                  <span className="text-[10px] md:text-xs text-muted-foreground flex-shrink-0 ml-2">
                     {formatDistanceToNow(new Date(conversation.last_message_at), { addSuffix: true })}
                   </span>
                 )}
               </div>
               <div className="flex items-center justify-between">
                 <p className={cn(
-                  'text-sm truncate',
+                  'text-xs md:text-sm truncate',
                   conversation.unread_count > 0 ? 'font-medium text-foreground' : 'text-muted-foreground'
                 )}>
                   {conversation.last_message_content || 'No messages yet'}
                 </p>
                 {conversation.unread_count > 0 && (
-                  <Badge variant="default" className="ml-2 flex-shrink-0">
+                  <Badge variant="default" className="ml-2 flex-shrink-0 text-xs">
                     {conversation.unread_count}
                   </Badge>
                 )}
diff --git a/components/messages/MessageInput.tsx b/components/messages/MessageInput.tsx
index c3ccaa43..566f274c 100644
--- a/components/messages/MessageInput.tsx
+++ b/components/messages/MessageInput.tsx
@@ -90,7 +90,7 @@ export function MessageInput({ onSend, disabled, placeholder = 'Type a message..
   }, [content, isTyping, onTyping])
 
   return (
-    <form onSubmit={handleSubmit} className="border-t bg-background p-3">
+    <form onSubmit={handleSubmit} className="border-t bg-background p-2 md:p-3">
       <div className="flex gap-2 items-end max-w-full">
         <Textarea
           ref={textareaRef}
@@ -99,14 +99,14 @@ export function MessageInput({ onSend, disabled, placeholder = 'Type a message..
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
           disabled={disabled || sending}
-          className="min-h-[44px] max-h-[120px] resize-none flex-1"
+          className="min-h-[40px] md:min-h-[44px] max-h-[120px] resize-none flex-1 text-sm md:text-base"
           rows={1}
         />
         <Button
           type="submit"
           size="icon"
           disabled={!content.trim() || sending || disabled}
-          className="flex-shrink-0 h-11 w-11"
+          className="flex-shrink-0 h-10 w-10 md:h-11 md:w-11"
         >
           {sending ? (
             <Loader2 className="h-4 w-4 animate-spin" />
@@ -115,7 +115,7 @@ export function MessageInput({ onSend, disabled, placeholder = 'Type a message..
           )}
         </Button>
       </div>
-      <p className="text-xs text-muted-foreground mt-1.5">
+      <p className="text-[10px] md:text-xs text-muted-foreground mt-1 md:mt-1.5 hidden sm:block">
         Press Enter to send, Shift+Enter for new line
       </p>
     </form>
diff --git a/components/messages/TypingIndicator.tsx b/components/messages/TypingIndicator.tsx
index 01c170cd..eee93492 100644
--- a/components/messages/TypingIndicator.tsx
+++ b/components/messages/TypingIndicator.tsx
@@ -9,16 +9,6 @@ interface TypingIndicatorProps {
 export function TypingIndicator({ usernames }: TypingIndicatorProps) {
   if (usernames.length === 0) return null
 
-  const getTypingText = () => {
-    if (usernames.length === 1) {
-      return `${usernames[0]} is typing...`
-    } else if (usernames.length === 2) {
-      return `${usernames[0]} and ${usernames[1]} are typing...`
-    } else {
-      return `${usernames[0]} and ${usernames.length - 1} others are typing...`
-    }
-  }
-
   return (
     <div className="flex items-center gap-2 px-4 py-2 text-sm text-muted-foreground">
       <div className="flex gap-1">
@@ -26,7 +16,7 @@ export function TypingIndicator({ usernames }: TypingIndicatorProps) {
         <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
         <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
       </div>
-      <span>{getTypingText()}</span>
+      <span>Typing...</span>
     </div>
   )
 }
diff --git a/hooks/useMessages.ts b/hooks/useMessages.ts
index 2e3a98d7..def11e1a 100644
--- a/hooks/useMessages.ts
+++ b/hooks/useMessages.ts
@@ -42,6 +42,8 @@ export function useMessages(conversationId: string | null) {
 
     const supabase = createClient()
     
+    console.log('📡 Setting up message subscription for conversation:', conversationId)
+    
     const subscription = supabase
       .channel(`messages:${conversationId}`)
       .on(
@@ -53,6 +55,8 @@ export function useMessages(conversationId: string | null) {
           filter: `conversation_id=eq.${conversationId}`
         },
         async (payload) => {
+          console.log('🔔 New message received via realtime:', payload)
+          
           // Fetch the complete message with sender details
           const { data } = await supabase
             .from('messages')
@@ -70,6 +74,8 @@ export function useMessages(conversationId: string | null) {
             .single()
 
           if (data) {
+            console.log('📨 Fetched complete message data:', data)
+            
             // Decrypt the message content
             const decryptResponse = await fetch('/api/messages/decrypt', {
               method: 'POST',
@@ -79,11 +85,17 @@ export function useMessages(conversationId: string | null) {
             
             const { decrypted } = await decryptResponse.json()
             const decryptedMessage = { ...data, content: decrypted }
+            
+            console.log('🔓 Decrypted message:', decrypted)
 
             setMessages(prev => {
               // Avoid duplicates
               const exists = prev.some(msg => msg.id === data.id)
-              if (exists) return prev
+              if (exists) {
+                console.log('⚠️ Message already exists, skipping')
+                return prev
+              }
+              console.log('✅ Adding new message to state')
               return [...prev, decryptedMessage as Message]
             })
             // Mark as read
@@ -91,9 +103,12 @@ export function useMessages(conversationId: string | null) {
           }
         }
       )
-      .subscribe()
+      .subscribe((status) => {
+        console.log('Message subscription status:', status)
+      })
 
     return () => {
+      console.log('🔌 Unsubscribing from messages')
       subscription.unsubscribe()
     }
   }, [conversationId])