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.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01KPw21NEpWeTGu6swVASmBt

1 files changed, 11 insertions, 4 deletions

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,