From a6ed8151a08f540a68fd5362884e4f9b888bca69 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 13 Oct 2026 05:31:05 +0000
Subject: Chat header: Add person is an icon. Adam's screenshot of the Bitcoin
 Community header: "Add person" wrapped onto two lines in a box twice the
 height of the bell and the door beside it. It is now a person with a plus,
 the same size and stroke as those (and lit while its panel is open), with
 "Add person" as its label and tooltip — in a community's header and a private
 group's. The form's own Add person button keeps its words. chat-layout-test
 finds the button by its label too; SHOT_PHONE=path saves the phone-width
 header.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KPw21NEpWeTGu6swVASmBt
---
 src/features/messages.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

(limited to 'src/features')

diff --git a/src/features/messages.js b/src/features/messages.js
index b09aa17..f4e01b7 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -9707,6 +9707,8 @@ export function messagesFeature(ctx) {
   const I_BOOST = ICON('<path d="M17 2.5l3.5 3.5-3.5 3.5"/><path d="M3.5 11.5v-1a4 4 0 0 1 4-4h13"/><path d="M7 21.5L3.5 18 7 14.5"/><path d="M20.5 12.5v1a4 4 0 0 1-4 4h-13"/>');
   const I_QUOTE = ICON('<path stroke="none" d="M7.2 17c.5 0 1-.3 1.2-.7l1.4-2.9c.1-.3.2-.6.2-.9V8c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4c0 .6.4 1 1 1h2l-1 2.1c-.5.9.2 1.9 1.2 1.9zm10 0c.5 0 1-.3 1.2-.7l1.4-2.9c.1-.3.2-.6.2-.9V8c0-.6-.4-1-1-1H16c-.6 0-1 .4-1 1v4c0 .6.4 1 1 1h2l-1 2.1c-.5.9.2 1.9 1.2 1.9z"/>', true);
   const I_HEART = (on) => ICON('<path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 1 0-7.8 7.8l1.1 1L12 21l7.7-7.7 1.1-1a5.5 5.5 0 0 0 0-7.7z"/>', on);
+  // a person with a plus: add someone to a group or community
+  const I_ADD_PERSON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 21v-1.5a4.5 4.5 0 0 0-4.5-4.5h-5A4.5 4.5 0 0 0 1 19.5V21"/><circle cx="8" cy="7.5" r="4"/><path d="M19.5 8v6"/><path d="M22.5 11h-6"/></svg>';
   const I_ZAP = ICON('<path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/>', true);
 
   function noteActions(pk, ev, { canZap }) {
@@ -13710,10 +13712,13 @@ export function messagesFeature(ctx) {
               ? '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0" fill="none"/></svg>'
               : '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13.7 21a2 2 0 0 1-3.4 0"/><path d="M18 8a6 6 0 0 0-9.3-5"/><path d="M6.3 6.3A6 6 0 0 0 6 8c0 7-3 9-3 9h15"/><path d="m2 2 20 20"/></svg>',
           }),
+          // a person with a plus, like the bell and the door beside it: the
+          // words wrapped onto two lines in a narrow header
           h('button', {
-            class: 'btn-sm', title: t('msgInviteTitle'),
+            class: 'btn-sm' + (ui.msgInvitePanel ? ' on' : ''), title: t('msgInviteTitle'), 'aria-label': t('msgAddPerson'),
             onClick: () => { ui.msgInvitePanel = !ui.msgInvitePanel; render(); },
-          }, t('msgAddPerson')),
+            html: I_ADD_PERSON,
+          }),
           // the door out — in the header where anyone looks for it, not in
           // the invite panel; one tap arms it, the second leaves
           jm.community_id === COMMUNITY.community_id ? null : h('button', {
@@ -14062,8 +14067,10 @@ export function messagesFeature(ctx) {
             h('div', { class: 'muted small' }, g.removed ? t('msgGroupGone') : t('msgMembers', { n: accounts.length })))),
         h('div', { class: 'row gap6', style: 'align-items:center' },
           admin ? h('button', {
-            class: 'btn-sm', onClick: () => { ui.msgMembers = !ui.msgMembers; dmSearcher.clear(false); render(); },
-          }, t('msgAddPerson')) : null,
+            class: 'btn-sm' + (ui.msgMembers ? ' on' : ''), title: t('msgAddPerson'), 'aria-label': t('msgAddPerson'),
+            onClick: () => { ui.msgMembers = !ui.msgMembers; dmSearcher.clear(false); render(); },
+            html: I_ADD_PERSON,
+          }) : null,
           // the door out: one tap arms it, the second leaves (same as a community)
           h('button', {
             class: 'btn-sm' + (ui.msgLeaveArm ? ' btn-danger' : ''), title: t('msgGroupLeave'), 'aria-label': t('msgGroupLeave'), disabled: ui.msgBusy,
-- 
cgit v1.2.3