feat: quick emoji reactions on hover, in-app notification toasts, mention pulse audit
P5-17: MessageQuickReactions moved from 3-dots menu to hover toolbar; shows 5 recent emoji directly on hover. Clicking a quick-reaction also closes any open emoji picker (setEmojiBoardAnchor). Line separator removed from component. P5-7: LotusToastContainer slides in from bottom-right when window is focused — replaces OS notification for in-focus events. Correct room path (DM vs home) derived from mDirectAtom. Invite toast routes to inbox. 4s auto-dismiss. Full TDS styling via CSS custom properties. P5-8: Confirmed already implemented upstream (MentionHighlightPulse, 0.6s scale+glow, one-shot, prefers-reduced-motion). Marked complete. Code-review fixes: toast navigation used nonexistent /room/ route; emoji picker stayed open after toolbar quick-reaction. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,207 @@
|
||||
import React, { useEffect, useRef, CSSProperties } from 'react';
|
||||
import { useAtomValue, useSetAtom } from 'jotai';
|
||||
import { toastQueueAtom, dismissToastAtom, ToastNotif } from '../../state/toast';
|
||||
|
||||
// Inject the keyframe animation once
|
||||
const STYLE_ID = 'lotus-toast-keyframes';
|
||||
function ensureKeyframes() {
|
||||
if (document.getElementById(STYLE_ID)) return;
|
||||
const style = document.createElement('style');
|
||||
style.id = STYLE_ID;
|
||||
style.textContent = `
|
||||
@keyframes lotusToastIn {
|
||||
from { transform: translateX(120%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@keyframes lotusToastIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
type ToastCardProps = {
|
||||
toast: ToastNotif;
|
||||
};
|
||||
|
||||
function ToastCard({ toast }: ToastCardProps) {
|
||||
const dismiss = useSetAtom(dismissToastAtom);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
timerRef.current = setTimeout(() => {
|
||||
dismiss(toast.id);
|
||||
}, 4000);
|
||||
return () => {
|
||||
if (timerRef.current !== null) clearTimeout(timerRef.current);
|
||||
};
|
||||
}, [dismiss, toast.id]);
|
||||
|
||||
const handleCardClick = () => {
|
||||
// window.location.hash setter auto-prepends '#', so values must not include it
|
||||
window.location.hash = toast.hashPath ?? `/room/${toast.roomId}`;
|
||||
dismiss(toast.id);
|
||||
};
|
||||
|
||||
const handleDismiss = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
dismiss(toast.id);
|
||||
};
|
||||
|
||||
const cardStyle: CSSProperties = {
|
||||
position: 'relative',
|
||||
background: 'var(--lt-bg-card, #1a1a2e)',
|
||||
border: '1px solid var(--lt-border-color, rgba(255,255,255,0.1))',
|
||||
borderRadius: '12px',
|
||||
padding: '12px 14px',
|
||||
minWidth: '280px',
|
||||
maxWidth: '340px',
|
||||
boxShadow: 'var(--lt-box-glow-orange, 0 4px 16px rgba(0,0,0,0.4))',
|
||||
cursor: 'pointer',
|
||||
animation: 'lotusToastIn 0.2s ease-out both',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
const rowStyle: CSSProperties = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
marginRight: '20px',
|
||||
};
|
||||
|
||||
const avatarStyle: CSSProperties = {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '50%',
|
||||
objectFit: 'cover',
|
||||
flexShrink: 0,
|
||||
};
|
||||
|
||||
const initialsStyle: CSSProperties = {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '50%',
|
||||
background: 'var(--lt-accent-orange-dim, rgba(255,107,0,0.15))',
|
||||
border: '1px solid var(--lt-accent-orange-border, rgba(255,107,0,0.35))',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '10px',
|
||||
fontWeight: 700,
|
||||
color: 'var(--lt-accent-orange, #ff6b00)',
|
||||
flexShrink: 0,
|
||||
};
|
||||
|
||||
const nameStyle: CSSProperties = {
|
||||
color: 'var(--lt-accent-orange, #ff6b00)',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.85rem',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
};
|
||||
|
||||
const dismissBtnStyle: CSSProperties = {
|
||||
position: 'absolute',
|
||||
top: '8px',
|
||||
right: '10px',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: 'var(--lt-text-secondary, #7fa3bf)',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
lineHeight: 1,
|
||||
padding: '2px 4px',
|
||||
borderRadius: '4px',
|
||||
};
|
||||
|
||||
const bodyStyle: CSSProperties = {
|
||||
color: 'var(--lt-text-primary, #c4d9ee)',
|
||||
fontSize: '0.82rem',
|
||||
margin: '4px 0 2px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
};
|
||||
|
||||
const roomNameStyle: CSSProperties = {
|
||||
color: 'var(--lt-text-secondary, #7fa3bf)',
|
||||
fontSize: '0.75rem',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
};
|
||||
|
||||
const initials = toast.displayName
|
||||
.split(' ')
|
||||
.slice(0, 2)
|
||||
.map((w) => w[0] ?? '')
|
||||
.join('')
|
||||
.toUpperCase();
|
||||
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
style={cardStyle}
|
||||
onClick={handleCardClick}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') handleCardClick();
|
||||
}}
|
||||
aria-label={`Notification from ${toast.displayName} in ${toast.roomName}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
style={dismissBtnStyle}
|
||||
onClick={handleDismiss}
|
||||
aria-label="Dismiss notification"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<div style={rowStyle}>
|
||||
{toast.avatarUrl ? (
|
||||
<img src={toast.avatarUrl} alt="" style={avatarStyle} aria-hidden="true" />
|
||||
) : (
|
||||
<div style={initialsStyle} aria-hidden="true">
|
||||
{initials || '?'}
|
||||
</div>
|
||||
)}
|
||||
<span style={nameStyle}>{toast.displayName}</span>
|
||||
</div>
|
||||
<div style={bodyStyle}>{toast.body}</div>
|
||||
<div style={roomNameStyle}>{toast.roomName}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LotusToastContainer() {
|
||||
useEffect(() => {
|
||||
ensureKeyframes();
|
||||
}, []);
|
||||
|
||||
const toasts = useAtomValue(toastQueueAtom);
|
||||
|
||||
if (toasts.length === 0) return null;
|
||||
|
||||
const containerStyle: CSSProperties = {
|
||||
position: 'fixed',
|
||||
bottom: '1.5rem',
|
||||
right: '1.5rem',
|
||||
zIndex: 9997,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
pointerEvents: 'auto',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={containerStyle} aria-live="polite" aria-label="Notifications">
|
||||
{toasts.map((toast) => (
|
||||
<ToastCard key={toast.id} toast={toast} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user