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

@@ -192,10 +192,9 @@
 
         <!-- Chat Area -->
         <div class="flex-1 flex flex-col">
-          <div v-if="selectedPeer" class="flex-1 flex flex-col">
+          <!-- Chat Header - Always present to maintain layout -->
-            <!-- Chat Header -->
+          <div class="p-4 border-b" :class="{ 'h-16': !selectedPeer }">
-            <div class="p-4 border-b">
+            <div v-if="selectedPeer" class="flex items-center space-x-3">
-              <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>
@@ -207,11 +206,12 @@
                 </p>
               </div>
             </div>
+            <div v-else class="h-8"></div>
           </div>
 
           <!-- Messages -->
-            <ScrollArea class="flex-1 p-4">
+          <ScrollArea v-if="selectedPeer" class="flex-1 p-4" ref="messagesScrollArea">
-              <div class="space-y-4">
+            <div class="space-y-4" ref="messagesContainer">
               <div
                 v-for="message in currentMessages"
                 :key="message.id"
@@ -235,11 +235,12 @@
                 </div>
               </div>
             </div>
-              <div ref="messagesEndRef" />
+            <!-- Hidden element at bottom for scrolling -->
+            <div ref="scrollTarget" class="h-1" />
           </ScrollArea>
 
           <!-- Message Input -->
-            <div class="p-4 border-t">
+          <div v-if="selectedPeer" class="p-4 border-t">
             <form @submit.prevent="sendMessage" class="flex space-x-2">
               <Input
                 v-model="messageInput"
@@ -252,7 +253,6 @@
               </Button>
             </form>
           </div>
-          </div>
 
           <!-- No Peer Selected -->
           <div v-else class="flex-1 flex items-center justify-center">
@@ -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
+  // Don't scroll when selecting a peer - let user see existing messages
-  nextTick(() => {
+  // Only scroll when new messages arrive
-    scrollToBottom()
-  })
 }
 
 const sendMessage = async () => {
@@ -423,9 +424,15 @@ const sendMessage = async () => {
 }
 
 const scrollToBottom = () => {
-  if (messagesEndRef.value) {
+  nextTick(() => {
-    messagesEndRef.value.scrollIntoView({ behavior: 'smooth' })
+    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, () => {
+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>