From fd041ea95aa4665c2ee9910df0b91f6359059d91 Mon Sep 17 00:00:00 2001
From: Ricky Stretch <rick@stretchy.ca>
Date: Tue, 10 Mar 2026 23:52:42 -0400
Subject: [PATCH] V0.7.0 avatar and user to user name update

---
 .env.example                           |  2 +-
 backend/package.json                   |  2 +-
 backend/src/routes/groups.js           |  1 +
 build.sh                               |  2 +-
 frontend/package.json                  |  2 +-
 frontend/src/components/ChatWindow.css |  7 ++++++
 frontend/src/components/ChatWindow.jsx | 30 ++++++++++++++++++++------
 frontend/src/components/Sidebar.css    |  7 ++++++
 frontend/src/components/Sidebar.jsx    |  6 +++++-
 9 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/.env.example b/.env.example
index 90b39a9..6a2c14d 100644
--- a/.env.example
+++ b/.env.example
@@ -7,7 +7,7 @@ TZ=UTC
 # Copy this file to .env and customize
 
 # Image version to run (set by build.sh, or use 'latest')
-JAMA_VERSION=0.6.9
+JAMA_VERSION=0.7.0
 
 # Default admin credentials (used on FIRST RUN only)
 ADMIN_NAME=Admin User
diff --git a/backend/package.json b/backend/package.json
index 6c8795f..b0e17d4 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jama-backend",
-  "version": "0.6.9",
+  "version": "0.7.0",
   "description": "TeamChat backend server",
   "main": "src/index.js",
   "scripts": {
diff --git a/backend/src/routes/groups.js b/backend/src/routes/groups.js
index 1151725..8f4c145 100644
--- a/backend/src/routes/groups.js
+++ b/backend/src/routes/groups.js
@@ -92,6 +92,7 @@ router.get('/', authMiddleware, (req, res) => {
         const other = db.prepare('SELECT display_name, name, avatar FROM users WHERE id = ?').get(otherUserId);
         if (other) {
           g.peer_real_name = other.name;
+          g.peer_display_name = other.display_name || null; // null if no custom display name set
           g.peer_avatar = other.avatar || null;
           g.name = other.display_name || other.name;
         }
diff --git a/build.sh b/build.sh
index b50e187..2e55e63 100644
--- a/build.sh
+++ b/build.sh
@@ -13,7 +13,7 @@
 # ─────────────────────────────────────────────────────────────
 set -euo pipefail
 
-VERSION="${1:-0.6.9}"
+VERSION="${1:-0.7.0}"
 ACTION="${2:-}"
 REGISTRY="${REGISTRY:-}"
 IMAGE_NAME="jama"
diff --git a/frontend/package.json b/frontend/package.json
index c6d2863..93a1f86 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jama-frontend",
-  "version": "0.6.9",
+  "version": "0.7.0",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/components/ChatWindow.css b/frontend/src/components/ChatWindow.css
index 8e2c3e3..c56c034 100644
--- a/frontend/src/components/ChatWindow.css
+++ b/frontend/src/components/ChatWindow.css
@@ -69,6 +69,13 @@
   color: var(--text-secondary);
 }
 
+/* Real name in brackets in DM header */
+.chat-header-real-name {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-tertiary);
+}
+
 .readonly-badge {
   font-size: 11px;
   padding: 2px 8px;
diff --git a/frontend/src/components/ChatWindow.jsx b/frontend/src/components/ChatWindow.jsx
index bdeb289..c9758ba 100644
--- a/frontend/src/components/ChatWindow.jsx
+++ b/frontend/src/components/ChatWindow.jsx
@@ -183,15 +183,31 @@ export default function ChatWindow({ group, onBack, onGroupUpdated, onDirectMess
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6"/></svg>
           </button>
         )}
-        <div
-          className="group-icon-sm"
-          style={{ background: group.type === 'public' ? '#1a73e8' : '#a142f4' }}
-        >
-          {group.type === 'public' ? '#' : group.name[0]?.toUpperCase()}
-        </div>
+        {group.is_direct && group.peer_avatar ? (
+          <img
+            src={group.peer_avatar}
+            alt={group.name}
+            className="group-icon-sm"
+            style={{ objectFit: 'cover', padding: 0 }}
+          />
+        ) : (
+          <div
+            className="group-icon-sm"
+            style={{ background: group.type === 'public' ? '#1a73e8' : '#a142f4' }}
+          >
+            {group.type === 'public' ? '#' : group.is_direct ? (group.peer_real_name || group.name)[0]?.toUpperCase() : group.name[0]?.toUpperCase()}
+          </div>
+        )}
         <div className="flex-col flex-1 overflow-hidden">
           <div className="flex items-center gap-2">
-            <span className="chat-header-name">{group.name}</span>
+            {group.is_direct && group.peer_display_name ? (
+              <span className="chat-header-name">
+                {group.peer_display_name}
+                <span className="chat-header-real-name"> ({group.peer_real_name})</span>
+              </span>
+            ) : (
+              <span className="chat-header-name">{group.is_direct && group.peer_real_name ? group.peer_real_name : group.name}</span>
+            )}
             {group.is_readonly ? (
               <span className="readonly-badge">Read-only</span>
             ) : null}
diff --git a/frontend/src/components/Sidebar.css b/frontend/src/components/Sidebar.css
index 3632a0b..f66f1d2 100644
--- a/frontend/src/components/Sidebar.css
+++ b/frontend/src/components/Sidebar.css
@@ -223,3 +223,10 @@
   align-items: center;
   justify-content: center;
 }
+
+/* DM real name in brackets — smaller, muted */
+.dm-real-name {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--text-tertiary);
+}
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index 2f74165..4c45ed8 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -110,7 +110,11 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
         )}
         <div className="group-info flex-1 overflow-hidden">
           <div className="flex items-center justify-between">
-            <span className={`group-name truncate ${hasUnread ? 'unread-name' : ''}`}>{group.is_direct && group.peer_real_name ? group.peer_real_name : group.name}</span>
+            <span className={`group-name truncate ${hasUnread ? 'unread-name' : ''}`}>
+              {group.is_direct && group.peer_display_name
+                ? <>{group.peer_display_name}<span className="dm-real-name"> ({group.peer_real_name})</span></>
+                : group.is_direct && group.peer_real_name ? group.peer_real_name : group.name}
+            </span>
             {group.last_message_at && (
               <span className="group-time">{formatTime(group.last_message_at)}</span>
             )}