From e1a75e71ab3dc36f82d02b2180859a34447f9569 Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Thu, 27 Aug 2026 03:55:34 +0300
Subject: [PATCH] fix: Enhance safe DOM rendering for teacher conversations
 list and auto-selection of active chat

---
 backend/app/Views/TeacherPortal.php | 49 ++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 11 deletions(-)

diff --git a/backend/app/Views/TeacherPortal.php b/backend/app/Views/TeacherPortal.php
index 13d2c41..916fe93 100644
--- a/backend/app/Views/TeacherPortal.php
+++ b/backend/app/Views/TeacherPortal.php
@@ -677,22 +677,38 @@ class TeacherPortal
             }
         }
 
+        function escapeHtml(str) {
+            if (!str) return '';
+            const div = document.createElement('div');
+            div.textContent = str;
+            return div.innerHTML;
+        }
+
         function renderConversations(convs) {
             const container = document.getElementById('conv_list_container');
+            if (!container) return;
             if (!convs || convs.length === 0) {
                 container.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px;">لا يوجد طلاب مسجلون حالياً. سيظهر الطلاب هنا فور تسجيلهم.</div>';
                 return;
             }
 
-            container.innerHTML = convs.map(c => `
-                <div class="conv-item ${c.user_id === activeRecipientId ? 'active' : ''}" onclick="selectConversation(${c.user_id}, '${c.full_name}')">
+            container.innerHTML = '';
+            convs.forEach(c => {
+                const item = document.createElement('div');
+                item.className = 'conv-item' + (c.user_id === activeRecipientId ? ' active' : '');
+                item.dataset.userId = c.user_id;
+                item.onclick = function() {
+                    selectConversation(c.user_id, c.full_name);
+                };
+                item.innerHTML = `
                     <div class="conv-name">
-                        <span>${c.full_name}</span>
+                        <span>${escapeHtml(c.full_name)}</span>
                         ${c.unread_count > 0 ? `<span class="unread-badge">${c.unread_count}</span>` : ''}
                     </div>
-                    <div class="conv-preview">${c.last_message || 'محادثة جديدة'}</div>
-                </div>
-            `).join('');
+                    <div class="conv-preview">${escapeHtml(c.last_message || 'محادثة جديدة')}</div>
+                `;
+                container.appendChild(item);
+            });
 
             // Auto-select first conversation if none is selected
             if (!activeRecipientId && convs.length > 0) {
@@ -702,22 +718,33 @@ class TeacherPortal
 
         async function selectConversation(userId, name) {
             activeRecipientId = userId;
-            document.getElementById('active_chat_user_name').textContent = name;
+            const nameEl = document.getElementById('active_chat_user_name');
+            if (nameEl) nameEl.textContent = name;
+            
             const items = document.querySelectorAll('.conv-item');
+            items.forEach(el => {
+                if (parseInt(el.dataset.userId) === userId) {
+                    el.classList.add('active');
+                } else {
+                    el.classList.remove('active');
+                }
+            });
             
             const token = localStorage.getItem('saqel_teacher_jwt');
+            if (!token) return;
             try {
                 const res = await fetch(`/api/chat/messages?other_user_id=${userId}`, {
                     headers: { 'Authorization': 'Bearer ' + token }
                 });
                 const data = await res.json();
-                if (res.ok && data.status === 'success') {
+                if (res.ok && data.status === 'success' && data.data) {
                     const messagesArea = document.getElementById('chat_messages_area');
                     messagesArea.innerHTML = '';
-                    if (data.data.messages.length === 0) {
-                        messagesArea.innerHTML = '<div style="text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 60px;">بدء المحادثة مع الطالب ' + name + ' — اكتب رسالتك بالأسفل.</div>';
+                    const msgs = data.data.messages || [];
+                    if (msgs.length === 0) {
+                        messagesArea.innerHTML = '<div style="text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 60px;">بدء المحادثة مع الطالب ' + escapeHtml(name) + ' — اكتب ردك بالأسفل.</div>';
                     } else {
-                        data.data.messages.forEach(msg => appendChatMessage(msg));
+                        msgs.forEach(msg => appendChatMessage(msg));
                     }
                 }
             } catch (e) {