From dd7d13f41bcaa78afd1b474f34769554d31b1e00 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 6 Aug 2025 00:03:11 +0200
Subject: [PATCH] refactor: Improve chat component layout and message handling

- Ensure the chat header is always present to maintain layout consistency, even when no peer is selected.
- Update message display logic to only scroll to the bottom when new messages arrive, enhancing user experience.
- Refactor message input and display sections for better responsiveness and usability across devices.
---
 src/components/nostr/ChatComponent.vue | 144 +++++++++++++------------
 1 file changed, 77 insertions(+), 67 deletions(-)

diff --git a/src/components/nostr/ChatComponent.vue b/src/components/nostr/ChatComponent.vue
index 3b00cc2..2374a9d 100644
--- a/src/components/nostr/ChatComponent.vue
+++ b/src/components/nostr/ChatComponent.vue
@@ -192,66 +192,66 @@
 
         <!-- Chat Area -->
         <div class="flex-1 flex flex-col">
-          <div v-if="selectedPeer" class="flex-1 flex flex-col">
-            <!-- Chat Header -->
-            <div class="p-4 border-b">
-              <div class="flex items-center space-x-3">
-                <Avatar class="h-8 w-8">
-                  <AvatarImage v-if="getPeerAvatar(selectedPeer)" :src="getPeerAvatar(selectedPeer)!" />
-                  <AvatarFallback>{{ getPeerInitials(selectedPeer) }}</AvatarFallback>
-                </Avatar>
-                <div>
-                  <h3 class="font-medium">{{ selectedPeer.username || 'Unknown User' }}</h3>
-                  <p class="text-sm text-muted-foreground">
-                    {{ formatPubkey(selectedPeer.pubkey) }}
+          <!-- Chat Header - Always present to maintain layout -->
+          <div class="p-4 border-b" :class="{ 'h-16': !selectedPeer }">
+            <div v-if="selectedPeer" class="flex items-center space-x-3">
+              <Avatar class="h-8 w-8">
+                <AvatarImage v-if="getPeerAvatar(selectedPeer)" :src="getPeerAvatar(selectedPeer)!" />
+                <AvatarFallback>{{ getPeerInitials(selectedPeer) }}</AvatarFallback>
+              </Avatar>
+              <div>
+                <h3 class="font-medium">{{ selectedPeer.username || 'Unknown User' }}</h3>
+                <p class="text-sm text-muted-foreground">
+                  {{ formatPubkey(selectedPeer.pubkey) }}
+                </p>
+              </div>
+            </div>
+            <div v-else class="h-8"></div>
+          </div>
+
+          <!-- Messages -->
+          <ScrollArea v-if="selectedPeer" class="flex-1 p-4" ref="messagesScrollArea">
+            <div class="space-y-4" ref="messagesContainer">
+              <div
+                v-for="message in currentMessages"
+                :key="message.id"
+                :class="[
+                  'flex',
+                  message.sent ? 'justify-end' : 'justify-start'
+                ]"
+              >
+                <div
+                  :class="[
+                    'max-w-xs lg:max-w-md px-4 py-2 rounded-lg',
+                    message.sent
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted'
+                  ]"
+                >
+                  <p class="text-sm">{{ message.content }}</p>
+                  <p class="text-xs opacity-70 mt-1">
+                    {{ formatTime(message.created_at) }}
                   </p>
                 </div>
               </div>
             </div>
+            <!-- Hidden element at bottom for scrolling -->
+            <div ref="scrollTarget" class="h-1" />
+          </ScrollArea>
 
-            <!-- Messages -->
-            <ScrollArea class="flex-1 p-4">
-              <div class="space-y-4">
-                <div
-                  v-for="message in currentMessages"
-                  :key="message.id"
-                  :class="[
-                    'flex',
-                    message.sent ? 'justify-end' : 'justify-start'
-                  ]"
-                >
-                  <div
-                    :class="[
-                      'max-w-xs lg:max-w-md px-4 py-2 rounded-lg',
-                      message.sent
-                        ? 'bg-primary text-primary-foreground'
-                        : 'bg-muted'
-                    ]"
-                  >
-                    <p class="text-sm">{{ message.content }}</p>
-                    <p class="text-xs opacity-70 mt-1">
-                      {{ formatTime(message.created_at) }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div ref="messagesEndRef" />
-            </ScrollArea>
-
-            <!-- Message Input -->
-            <div class="p-4 border-t">
-              <form @submit.prevent="sendMessage" class="flex space-x-2">
-                <Input
-                  v-model="messageInput"
-                  placeholder="Type a message..."
-                  :disabled="!isConnected || !selectedPeer"
-                  class="flex-1"
-                />
-                <Button type="submit" :disabled="!isConnected || !selectedPeer || !messageInput.trim()">
-                  <Send class="h-4 w-4" />
-                </Button>
-              </form>
-            </div>
+          <!-- Message Input -->
+          <div v-if="selectedPeer" class="p-4 border-t">
+            <form @submit.prevent="sendMessage" class="flex space-x-2">
+              <Input
+                v-model="messageInput"
+                placeholder="Type a message..."
+                :disabled="!isConnected || !selectedPeer"
+                class="flex-1"
+              />
+              <Button type="submit" :disabled="!isConnected || !selectedPeer || !messageInput.trim()">
+                <Send class="h-4 w-4" />
+              </Button>
+            </form>
           </div>
 
           <!-- No Peer Selected -->
@@ -300,9 +300,12 @@ interface ChatMessage {
 const peers = ref<Peer[]>([])
 const selectedPeer = ref<Peer | null>(null)
 const messageInput = ref('')
-const messagesEndRef = ref<HTMLDivElement | null>(null)
+
 const isLoading = ref(false)
 const showChat = ref(false)
+const messagesScrollArea = ref<HTMLElement | null>(null)
+const messagesContainer = ref<HTMLElement | null>(null)
+const scrollTarget = ref<HTMLElement | null>(null)
 
 // Mobile detection
 const isMobile = ref(false)
@@ -400,10 +403,8 @@ const selectPeer = async (peer: Peer) => {
   // Subscribe to messages from this peer
   await subscribeToPeer(peer.pubkey)
   
-  // Scroll to bottom after messages load
-  nextTick(() => {
-    scrollToBottom()
-  })
+  // Don't scroll when selecting a peer - let user see existing messages
+  // Only scroll when new messages arrive
 }
 
 const sendMessage = async () => {
@@ -423,9 +424,15 @@ const sendMessage = async () => {
 }
 
 const scrollToBottom = () => {
-  if (messagesEndRef.value) {
-    messagesEndRef.value.scrollIntoView({ behavior: 'smooth' })
-  }
+  nextTick(() => {
+    if (scrollTarget.value) {
+      // Scroll to the hidden target element at the bottom
+      scrollTarget.value.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'end'
+      })
+    }
+  })
 }
 
 const formatPubkey = (pubkey: string) => {
@@ -466,9 +473,12 @@ onUnmounted(() => {
 })
 
 // Watch for new messages and scroll to bottom
-watch(currentMessages, () => {
-  nextTick(() => {
-    scrollToBottom()
-  })
+watch(currentMessages, (newMessages, oldMessages) => {
+  // Only scroll if messages were added (not just peer selection)
+  if (newMessages.length > 0 && oldMessages && newMessages.length > oldMessages.length) {
+    nextTick(() => {
+      scrollToBottom()
+    })
+  }
 })
 </script> 
\ No newline at end of file