diff --git a/frontend/src/components/list/MessageList.tsx b/frontend/src/components/list/MessageList.tsx index 83a9061..1688dc0 100644 --- a/frontend/src/components/list/MessageList.tsx +++ b/frontend/src/components/list/MessageList.tsx @@ -35,15 +35,23 @@ function initials(p: Address | undefined): string { // Past this many characters the sender column switches to first names only. const SENDERS_FULL_MAX = 25; +// A lone sender's name longer than this is cut to one character less plus "...". +const SINGLE_SENDER_MAX = 22; -// The sender column's text: full names joined, or — when that would run past -// SENDERS_FULL_MAX — each sender's first word ("Alice Smith" -> "Alice", a bare -// address -> its local part). The user's own accounts are always `me`. +// The sender column's text. A single sender shows in full, or cut at +// SINGLE_SENDER_MAX. Several show as full names joined, or — when that would run +// past SENDERS_FULL_MAX — each sender's first word ("Alice Smith" -> "Alice", a +// bare address -> its local part). The user's own accounts are always `me`. export function senderNames( senders: Address[], isMe: (a: Address) => boolean, me: string, ): string { + if (senders.length === 1) { + const [a] = senders; + const name = isMe(a) ? me : a.name || a.email; + return name.length > SINGLE_SENDER_MAX ? `${name.slice(0, SINGLE_SENDER_MAX - 1)}...` : name; + } const full = senders.map((a) => (isMe(a) ? me : a.name || a.email)).join(", "); if (full.length <= SENDERS_FULL_MAX) return full; return senders diff --git a/frontend/src/test/senderNames.test.ts b/frontend/src/test/senderNames.test.ts index 4d11ab5..b14725f 100644 --- a/frontend/src/test/senderNames.test.ts +++ b/frontend/src/test/senderNames.test.ts @@ -29,4 +29,15 @@ describe("senderNames", () => { ); expect(out).toBe("Alice, me, Bob, carol.jones"); }); + + it("cuts a lone sender past 22 characters to 21 plus three dots", () => { + expect( + senderNames([addr("Global Entertainment News", "n@x.com")], me, "me"), + ).toBe("Global Entertainment ..."); + // exactly 22 stays whole + expect( + senderNames([addr("Twenty-two chars long!", "n@x.com")], me, "me"), + ).toBe("Twenty-two chars long!"); + expect(senderNames([addr("", "me@example.com")], me, "me")).toBe("me"); + }); });