V0.7.0 avatar and user to user name update

.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

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": {

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;
         }

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"

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jama-frontend",
-  "version": "0.6.9",
+  "version": "0.7.0",
   "private": true,
   "scripts": {
     "dev": "vite",

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;

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}

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);
+}

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>
             )}