From 063c12d32448f76384d6741500b40ed6b7058ad0 Mon Sep 17 00:00:00 2001
From: James <james@jongsma.me>
Date: Thu, 19 Mar 2026 22:45:54 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20member=20cards=20not=20rendering=20?=
 =?UTF-8?q?=E2=80=94=20broken=20nested=20template=20literal;=20rewrite=20a?=
 =?UTF-8?q?s=20renderMemberCard=20helper=20with=20safe=20string=20concat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 portal/templates/app/project.html | 32 ++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/portal/templates/app/project.html b/portal/templates/app/project.html
index d96158f..dad1baf 100644
--- a/portal/templates/app/project.html
+++ b/portal/templates/app/project.html
@@ -1274,6 +1274,28 @@
     let allGlobalOrgs = [];
 
     let _dealOrgsMap = {};
+    function imgErr(img) {
+      const w = img.parentElement;
+      w.className = 'w-11 h-11 rounded-full shrink-0 overflow-hidden bg-[#c9a84c]/20 flex items-center justify-center';
+      w.innerHTML = '<span class="text-[#c9a84c] font-semibold">' + escHtml(img.dataset.initial || '?') + '</span>';
+    }
+    function renderMemberCard(dealOrgId, m, mi) {
+      const initial = (m.name || m.email || '?')[0].toUpperCase();
+      let avatarHtml;
+      if (m.photo) {
+        avatarHtml = '<div class="w-11 h-11 rounded-full shrink-0 overflow-hidden">'
+          + '<img src="' + escHtml(m.photo) + '" class="w-full h-full object-cover" data-initial="' + escHtml(initial) + '" onerror="imgErr(this)">'
+          + '</div>';
+      } else {
+        avatarHtml = '<div class="w-11 h-11 rounded-full shrink-0 overflow-hidden bg-[#c9a84c]/20 flex items-center justify-center">'
+          + '<span class="text-[#c9a84c] font-semibold">' + escHtml(initial) + '</span></div>';
+      }
+      const nameHtml = '<div class="text-sm font-medium truncate" style="color:var(--ds-tx)">' + escHtml(m.name || m.email || '') + '</div>';
+      const titleHtml = m.title ? '<div class="text-xs truncate" style="color:var(--ds-tx3)">' + escHtml(m.title) + '</div>' : '';
+      return '<div class="flex items-center gap-3 cursor-pointer hover:opacity-80 transition" onclick="openPersonPanel(\'' + dealOrgId + '\', ' + mi + ')">'
+        + avatarHtml + '<div class="min-w-0">' + nameHtml + titleHtml + '</div></div>';
+    }
+
     async function loadOrgs() {
       try {
         const res = await fetchAPI('/api/projects/' + projectID + '/orgs');
@@ -1349,15 +1371,7 @@
             <!-- Members -->
             <div class="border-t px-6 py-4" style="border-color:var(--ds-bd)">
               <div class="grid gap-3" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))">
-                ${members.map((m, mi) => `<div class="flex items-center gap-3 cursor-pointer hover:opacity-80 transition" onclick="openPersonPanel('${o.deal_org_id}', ${mi})">
-                  <div class="w-11 h-11 rounded-full shrink-0 overflow-hidden ${m.photo ? '' : 'bg-[#c9a84c]/20 flex items-center justify-center'}">
-                    ${m.photo ? `<img src="${escHtml(m.photo)}" class="w-full h-full object-cover" onerror="this.parentElement.className='w-11 h-11 rounded-full shrink-0 overflow-hidden bg-[#c9a84c]/20 flex items-center justify-center';this.replaceWith(Object.assign(document.createElement('span'),{className:'text-[#c9a84c] font-semibold',textContent:'${(m.name||m.email||'?')[0].toUpperCase()}'}))">` : `<span class="text-[#c9a84c] font-semibold">${(m.name||m.email||'?')[0].toUpperCase()}</span>`}
-                  </div>
-                  <div class="min-w-0">
-                    <div class="text-sm font-medium truncate" style="color:var(--ds-tx)">${escHtml(m.name||m.email)}</div>
-                    ${m.title ? `<div class="text-xs truncate" style="color:var(--ds-tx3)">${escHtml(m.title)}</div>` : ''}
-                  </div>
-                </div>`).join('')}
+                ${members.map((m, mi) => renderMemberCard(o.deal_org_id, m, mi)).join('')}
                 <div class="flex items-center gap-3 cursor-pointer hover:opacity-80 transition" onclick="openPersonPanel('${o.deal_org_id}', -1)">
                   <div class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center text-xl" style="background:var(--ds-hv);color:var(--ds-tx2)">+</div>
                   <span class="text-sm" style="color:var(--ds-tx3)">Add person</span>