feat(chat-list): add click-to-select functionality for chats

- Enable mouse click on chat list items to open conversations (using OpenTUI's onMouse callback)
- Fix "two actives" bug where both selected and clicked chats showed highlights
- Add updateSelectionAndActive() method to properly update all row styling when using cached list
- Convert dynamic imports to static imports for cleaner code:
  - ChatListManager.ts: destroyConversationScrollBox
  - SessionCreate.ts: showQRCode
  - index.ts: setRenderer, showQRCode, chatListManager, getClient

Author: muhammedaksam

src/index.ts

@@ -32,6 +32,10 @@ import { filterChats, isArchived } from "./utils/filterChats"
 import { pollingService } from "./services/PollingService"
 import { ConfigView } from "./views/ConfigView"
 import type { CliRenderer } from "@opentui/core"
+import { setRenderer } from "./state/RendererContext"
+import { showQRCode } from "./views/QRCodeView"
+import { chatListManager } from "./views/ChatListManager"
+import { getClient } from "./client"
 
 /**
  * Run the configuration wizard using the TUI
@@ -131,7 +135,6 @@ async function main() {
   const renderer = await createCliRenderer({ exitOnCtrlC: true })
 
   // Set renderer context for imperative API usage
-  const { setRenderer } = await import("./state/RendererContext")
   setRenderer(renderer)
 
   let config: WahaTuiConfig | null = null
@@ -193,7 +196,7 @@ async function main() {
 
   // Fetch WAHA version and tier info
   try {
-    const client = (await import("./client")).getClient()
+    const client = getClient()
     const { data: versionInfo } = await client.observability.versionControllerGet()
     if (versionInfo?.tier) {
       appState.setState({ wahaTier: versionInfo.tier })
@@ -226,13 +229,9 @@ async function main() {
     appState.setCurrentSession(DEFAULT_SESSION)
     appState.setCurrentView("qr")
     // Trigger QR code loading
-    const { showQRCode } = await import("./views/QRCodeView")
     await showQRCode(DEFAULT_SESSION)
   }
 
-  // Import ChatListManager for optimized rendering
-  const { chatListManager } = await import("./views/ChatListManager")
-
   // Set up reactive rendering
   function renderApp(forceRebuild: boolean = false) {
     const state = appState.getState()

src/views/ChatListManager.ts

@@ -22,7 +22,7 @@ import {
 } from "../utils/formatters"
 import { debugLog } from "../utils/debug"
 import { appState } from "../state/AppState"
-import { loadMessages, loadContacts } from "./ConversationView"
+import { loadMessages, loadContacts, destroyConversationScrollBox } from "./ConversationView"
 import { ROW_HEIGHT } from "../utils/chatListScroll"
 
 interface ChatRowData {
@@ -88,6 +88,9 @@ class ChatListManager {
     // CASE 1: exact same content (no changes)
     if (this.scrollBox && newContentHash === this.currentChatsHash) {
       debugLog("ChatListManager", "Using cached chat list (exact match)")
+      // Still need to update selection/active styling as those may have changed
+      const state = appState.getState()
+      this.updateSelectionAndActive(state.selectedChatIndex, state.currentChatId, chats)
       return this.scrollBox
     }
 
@@ -188,6 +191,10 @@ class ChatListManager {
       }
     }
 
+    // Capture index and chat reference for click handler closure
+    const chatIndex = index
+    const chatRef = chat
+
     // Create chat row box
     // Use simple ID to enable in-place updates (no hash in ID)
     const rowId = `chat-row-${index}`
@@ -204,26 +211,32 @@ class ChatListManager {
         : isCurrentChat
           ? WhatsAppTheme.activeBg
           : WhatsAppTheme.panelDark,
-    })
-
-    // Handle click to open chat using the filtered chat
-    const chatIndex = index // Capture for closure
-    const chatRef = chat // Capture chat reference for closure
-    chatRow.on("click", async () => {
-      const currentState = appState.getState()
-      appState.setSelectedChatIndex(chatIndex)
-      if (chatRef && currentState.currentSession) {
-        appState.setCurrentView("conversation")
-        appState.setCurrentChat(chatRef.id)
-
-        // When switching chats, we want to start polling for messages immediately
-        // BUT we need to be careful not to create circular dependency imports
-        // PollingService imports ConversationView, so ConversationView/ChatListManager shouldn't import PollingService if possible
-        // Ideally PollingService observes state changes.
-
-        await loadMessages(currentState.currentSession, chatRef.id)
-        await loadContacts(currentState.currentSession)
-      }
+      // Handle click (mouse down) to open chat
+      onMouse: (event) => {
+        if (event.type === "down") {
+          const currentState = appState.getState()
+          if (chatRef && currentState.currentSession) {
+            // Extract chat ID properly (handle _serialized property)
+            const chatId =
+              typeof chatRef.id === "string"
+                ? chatRef.id
+                : (chatRef.id as { _serialized: string })._serialized
+
+            debugLog("ChatListManager", `Clicked chat: ${chatRef.name || chatId}`)
+
+            // Destroy old scroll box before loading new messages
+            destroyConversationScrollBox()
+
+            // Set current chat first (this changes view to "conversation")
+            appState.setCurrentChat(chatId)
+            appState.setSelectedChatIndex(chatIndex)
+
+            // Load contacts and messages
+            loadContacts(currentState.currentSession)
+            loadMessages(currentState.currentSession, chatId)
+          }
+        }
+      },
     })
 
     // Avatar
@@ -375,6 +388,44 @@ class ChatListManager {
     }
   }
 
+  /**
+   * Update selection and active (current chat) highlighting for all rows
+   * This handles both selectedChatIndex and currentChatId changes
+   */
+  private updateSelectionAndActive(
+    newSelectedIndex: number,
+    currentChatId: string | null,
+    chats: ChatSummary[]
+  ): void {
+    if (!this.scrollBox) return
+
+    // Update all rows to reflect current selection and active state
+    for (let index = 0; index < chats.length; index++) {
+      const rowData = this.chatRows.get(index)
+      if (!rowData) continue
+
+      const chat = chats[index]
+      const chatId =
+        typeof chat.id === "string" ? chat.id : (chat.id as { _serialized: string })._serialized
+
+      const isSelected = index === newSelectedIndex
+      const isCurrentChat = currentChatId === chatId
+
+      // Update background color
+      rowData.box.backgroundColor = isSelected
+        ? WhatsAppTheme.selectedBg
+        : isCurrentChat
+          ? WhatsAppTheme.activeBg
+          : WhatsAppTheme.panelDark
+
+      // Update text attributes
+      rowData.avatarText.attributes = isSelected ? TextAttributes.BOLD : TextAttributes.NONE
+      rowData.nameText.attributes = isSelected ? TextAttributes.BOLD : TextAttributes.NONE
+    }
+
+    this.currentSelectedIndex = newSelectedIndex
+  }
+
   /**
    * Update selection highlight - only changes styles, doesn't rebuild
    */

src/views/SessionCreate.ts

@@ -7,6 +7,7 @@ import { getClient } from "../client"
 import { appState } from "../state/AppState"
 import type { SessionCreateRequest } from "@muhammedaksam/waha-node"
 import { debugLog } from "../utils/debug"
+import { showQRCode } from "./QRCodeView"
 
 export async function createNewSession(sessionName: string = "default"): Promise<void> {
   try {
@@ -31,7 +32,6 @@ export async function createNewSession(sessionName: string = "default"): Promise
         console.log(`✅ Session exists and needs QR scan`)
 
         // Show QR code in TUI
-        const { showQRCode } = await import("../views/QRCodeView")
         await showQRCode(name)
       } else {
         console.log(`✅ Session already exists with status: ${existingSession.status}`)
@@ -57,7 +57,6 @@ export async function createNewSession(sessionName: string = "default"): Promise
 
     if (session.status === "SCAN_QR_CODE") {
       // Show QR code in TUI
-      const { showQRCode } = await import("../views/QRCodeView")
       await showQRCode(session.name)
     }