Mathis/memegoat
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Activity

feat: improve message scrolling and enhance conversation header UX

Browse Source 
- Fixed auto-scrolling to the latest message by targeting the correct scroll container.
- Updated the conversation header to include a clickable link to the recipient's profile.
This commit is contained in:
Mathis HERRIOT
2026-01-29 15:57:25 +01:00
parent 9eb5a60fb2
commit d271cc215b
1 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/app/(dashboard)/messages/page.tsx
View File

@@ -151,7 +151,12 @@ export default function MessagesPage() {
React.useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
const scrollContainer = scrollRef.current.querySelector(
"[data-slot='scroll-area-viewport']",
);
if (scrollContainer) {
scrollContainer.scrollTop = scrollContainer.scrollHeight;
}
}
}, []);
@@ -334,19 +339,24 @@ export default function MessagesPage() {
{activeConv ? (
<>
{/* Header */}
<div className="p-4 border-b flex items-center gap-3">
<Avatar className="h-8 w-8">
<AvatarImage src={activeConv.recipient.avatarUrl} />
<AvatarFallback>
{activeConv.recipient.username[0].toUpperCase()}
</AvatarFallback>
</Avatar>
<div>
<h3 className="font-bold leading-none">
{activeConv.recipient.displayName || activeConv.recipient.username}
</h3>
<span className="text-xs text-green-500 font-medium">En ligne</span>
</div>
<div className="p-4 border-b flex items-center justify-between">
<Link
href={`/user/${activeConv.recipient.username}`}
className="flex items-center gap-3 hover:opacity-80 transition-opacity"
>
<Avatar className="h-8 w-8">
<AvatarImage src={activeConv.recipient.avatarUrl} />
<AvatarFallback>
{activeConv.recipient.username[0].toUpperCase()}
</AvatarFallback>
</Avatar>
<div>
<h3 className="font-bold leading-none">
{activeConv.recipient.displayName || activeConv.recipient.username}
</h3>
<span className="text-xs text-green-500 font-medium">En ligne</span>
</div>
</Link>
</div>
{/* Messages */}