feat(web): extract DmListItem component with visual refinements
Extracts the inline DM list item rendering (~105 lines) from ChannelSidebar.tsx into a standalone component. Applies cohesive hover states, 6px border radius, 44px row height, and a selected- state accent bar matching ChannelItem's pattern.
This commit is contained in:
Jannis Braun
@@ -0,0 +1,187 @@
|
||||
import type { DmChannel, User } from '@backspace/shared';
|
||||
import { Avatar } from '../ui/Avatar';
|
||||
import { Tooltip } from '../ui/Tooltip';
|
||||
import { parseFederatedUsername, isSelf } from '../../utils/identity';
|
||||
import { formatDmTimestamp, formatDmPreview } from '../../utils/dmFormatters';
|
||||
|
||||
interface DmListItemProps {
|
||||
dm: DmChannel;
|
||||
isActive: boolean;
|
||||
isUnread: boolean;
|
||||
user: User;
|
||||
onSelect: (id: string) => void;
|
||||
onClose: (id: string) => void;
|
||||
onLeave: (id: string) => void;
|
||||
onContextMenu?: (e: React.MouseEvent, id: string) => void;
|
||||
}
|
||||
|
||||
export function DmListItem({ dm, isActive, isUnread, user, onSelect, onClose, onLeave, onContextMenu }: DmListItemProps) {
|
||||
const otherMembers = dm.members.filter(m => !isSelf(m, user));
|
||||
const isGroup = !!dm.ownerId;
|
||||
if (otherMembers.length === 0 && !isGroup) return null;
|
||||
|
||||
const firstOther = isGroup ? null : otherMembers[0];
|
||||
const { baseName, domain } = parseFederatedUsername(firstOther?.username ?? '');
|
||||
const displayName = isGroup
|
||||
? (otherMembers.length > 0
|
||||
? otherMembers.map(m => m.displayName ?? parseFederatedUsername(m.username).baseName).join(', ')
|
||||
: 'Empty Group')
|
||||
: firstOther?.displayName ?? baseName;
|
||||
|
||||
const handleClick = () => onSelect(dm.id);
|
||||
const handleClose = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (isGroup) {
|
||||
onLeave(dm.id);
|
||||
} else {
|
||||
onClose(dm.id);
|
||||
}
|
||||
};
|
||||
const handleContextMenu = onContextMenu
|
||||
? (e: React.MouseEvent) => onContextMenu(e, dm.id)
|
||||
: undefined;
|
||||
|
||||
// ── State-driven classes ──────────────────────────────────────────────
|
||||
// Container: 6px radius (up from 4px), 44px height (up from 42px)
|
||||
const containerClass = `relative flex items-center gap-3 px-2 h-[44px] rounded-[6px] cursor-pointer transition-colors group ${
|
||||
isActive
|
||||
? 'bg-interactive-selected text-white'
|
||||
: isUnread
|
||||
? 'text-white hover:bg-interactive-hover'
|
||||
: 'text-txt-tertiary hover:bg-interactive-hover hover:text-txt-secondary'
|
||||
}`;
|
||||
|
||||
// Name: font-semibold for unread (deliberately NOT font-bold — design decision)
|
||||
const nameClass = `text-[15px] truncate leading-tight ${
|
||||
isActive ? 'text-white font-medium'
|
||||
: isUnread ? 'text-white font-semibold'
|
||||
: 'text-txt-tertiary group-hover:text-txt-secondary font-medium'
|
||||
}`;
|
||||
|
||||
// Timestamp: brightens on hover and lifts for unread/selected
|
||||
const timestampClass = `text-[11px] ml-auto flex-shrink-0 ${
|
||||
isActive || isUnread
|
||||
? 'text-txt-secondary'
|
||||
: 'text-txt-tertiary group-hover:text-txt-secondary'
|
||||
}`;
|
||||
|
||||
// Preview: brightens on hover and lifts for unread/selected
|
||||
const previewClass = `text-[12px] truncate leading-tight mt-0.5 ${
|
||||
isActive || isUnread
|
||||
? 'text-txt-secondary'
|
||||
: 'text-txt-tertiary group-hover:text-txt-secondary'
|
||||
}`;
|
||||
|
||||
// Federation badge: brightens with parent
|
||||
const fedBadgeClass = `flex-shrink-0 ${
|
||||
isActive || isUnread
|
||||
? 'text-txt-secondary/60'
|
||||
: 'text-txt-tertiary/60 group-hover:text-txt-secondary/60'
|
||||
}`;
|
||||
|
||||
// Close button: always visible when selected, hover-reveal otherwise
|
||||
const closeClass = `${
|
||||
isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
|
||||
} text-txt-tertiary hover:text-txt-primary transition-opacity flex-shrink-0 ml-1`;
|
||||
|
||||
// ── Preview text ──────────────────────────────────────────────────────
|
||||
const preview = formatDmPreview(dm.lastMessage ?? null);
|
||||
let previewText: string | null = null;
|
||||
if (isGroup) {
|
||||
const lastMsg = dm.lastMessage;
|
||||
const senderName = (lastMsg && 'user' in lastMsg ? lastMsg.user?.displayName : undefined)
|
||||
?? dm.members.find(m => m.id === lastMsg?.userId)?.displayName
|
||||
?? 'Unknown';
|
||||
previewText = preview
|
||||
? `${senderName}: ${preview}`
|
||||
: `${dm.members.length} Members`;
|
||||
} else {
|
||||
previewText = preview;
|
||||
}
|
||||
|
||||
const itemJsx = (
|
||||
<div
|
||||
onClick={handleClick}
|
||||
className={containerClass}
|
||||
>
|
||||
{/* Selected accent bar */}
|
||||
{isActive && (
|
||||
<div
|
||||
className="absolute -left-[2px] top-1/2 -translate-y-1/2 w-[3px] bg-white rounded-r-full"
|
||||
style={{ height: '55%', opacity: 0.7 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Unread indicator */}
|
||||
{isUnread && (
|
||||
<div className="absolute -left-1 w-1 h-2 bg-white rounded-r-full" />
|
||||
)}
|
||||
|
||||
{/* Avatar */}
|
||||
{isGroup ? (
|
||||
<div className="relative w-8 h-8 flex-shrink-0">
|
||||
{otherMembers.slice(0, 2).map((m, i) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className="absolute rounded-full overflow-hidden border-2 border-surface-channel"
|
||||
style={{
|
||||
width: 22, height: 22,
|
||||
left: i * 10,
|
||||
top: i * 6,
|
||||
zIndex: 2 - i,
|
||||
}}
|
||||
>
|
||||
<Avatar src={m.avatar} name={m.displayName ?? parseFederatedUsername(m.username).baseName} size={22} userId={m.homeUserId ?? m.id} user={m} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Avatar src={otherMembers[0]?.avatar} name={otherMembers[0]?.displayName ?? parseFederatedUsername(otherMembers[0]?.username ?? '').baseName} size={32} status={otherMembers[0]?.status as any} userId={otherMembers[0]?.homeUserId ?? otherMembers[0]?.id} user={otherMembers[0]} />
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1 min-w-0">
|
||||
<span className={nameClass}>
|
||||
{displayName}
|
||||
</span>
|
||||
{!isGroup && domain && (
|
||||
<Tooltip content={firstOther?.username ?? ''} position="top">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" className={fedBadgeClass}>
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
|
||||
</svg>
|
||||
</Tooltip>
|
||||
)}
|
||||
{dm.lastMessage && (
|
||||
<span className={timestampClass}>
|
||||
{formatDmTimestamp(dm.lastMessage.createdAt)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{previewText && (
|
||||
<div className={previewClass}>
|
||||
{previewText}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Close / Leave button */}
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className={closeClass}
|
||||
title={isGroup ? 'Leave Group DM' : 'Close DM'}
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Group DMs get a context menu wrapper
|
||||
if (isGroup && handleContextMenu) {
|
||||
return <div onContextMenu={handleContextMenu}>{itemJsx}</div>;
|
||||
}
|
||||
|
||||
return itemJsx;
|
||||
}
|
||||
Reference in New Issue
Block a user