DarkSingularity/ds-chat
Private
Public Access
3
0
Fork 0
Code Releases 4 Activity

Redesign message list to Mattermost-style: left-aligned, always named

Browse Source 
Replaced the Slack/iMessage-style layout (your own messages right-aligned
in an accent-colored bubble, no name shown since you obviously know you
sent it) with a flat, uniformly left-aligned chat log matching Mattermost:
every message shows its sender's avatar and name, dropped only for
consecutive messages from the same sender in a row (grouping logic already
existed for other people's messages; now applies uniformly regardless of
who sent it). No more per-message "mine" background color, since real
Mattermost doesn't have one either -- messages are distinguished only by
the username label, with a hover-revealed row highlight and the existing
edit affordance (still author-only) taking the place of the old bubble.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ksmith
2026-08-14 11:48:59 -06:00
co-authored by Claude Sonnet 5
parent f43cf61ddd
commit 559adf9b7e
2 changed files with 75 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/MessageList.tsx
+32 -27
View File
@@ -37,21 +37,29 @@ export function MessageList({ messages, members, onEdit }: MessageListProps) {
{messages.map((msg, i) => {
const mine = msg.user_id === user?.id
const prev = messages[i - 1]
const showAvatar = !mine && (!prev || prev.user_id !== msg.user_id)
const showName = showAvatar
// Mattermost-style grouping: every message shows who sent it, but
// consecutive messages from the same sender only repeat the
// avatar/name/timestamp header on the first one in the run --
// applies uniformly, including to your own messages.
const isGroupStart = !prev || prev.user_id !== msg.user_id
const editing = editingId === msg.id
return (
<div key={msg.id} className={`message-row${mine ? ' message-row-mine' : ''}`}>
{!mine && (
<div className="message-avatar-slot">
{showAvatar && (
<UserAvatar username={msg.username} colorIndex={senderColorIndex(msg.username, members)} />
)}
</div>
)}
<div className="message-bubble-wrap">
{showName && <div className="message-author">{msg.username}</div>}
<div key={msg.id} className={`message-row${isGroupStart ? ' message-row-start' : ''}`}>
<div className="message-avatar-slot">
{isGroupStart && (
<UserAvatar username={msg.username} colorIndex={senderColorIndex(msg.username, members)} />
)}
</div>
<div className="message-content">
{isGroupStart && (
<div className="message-header">
<span className="message-author">{msg.username}</span>
<span className="message-time">
{new Date(msg.created_at).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
</span>
</div>
)}
{editing ? (
<input
autoFocus
@@ -65,25 +73,22 @@ export function MessageList({ messages, members, onEdit }: MessageListProps) {
onBlur={() => commitEdit(msg.id)}
/>
) : (
<div className={`message-bubble${mine ? ' message-bubble-mine' : ''}`}>
<div className="message-text">
{msg.content}
{mine && (
<button
type="button"
className="message-edit-link"
onClick={() => startEdit(msg)}
aria-label="Edit message"
>
Edit
</button>
)}
{msg.edited_at && <span className="message-edited"> (edited)</span>}
</div>
)}
<div className="message-time">
{new Date(msg.created_at).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
{msg.edited_at && <span className="message-edited"> (edited)</span>}
</div>
</div>
{mine && !editing && (
<button
type="button"
className="message-edit-link"
onClick={() => startEdit(msg)}
aria-label="Edit message"
>
Edit
</button>
)}
</div>
)
})}