Add emoji confetti bursts and component playground.

Support app.relay.emoji_confetti on jumbo emoji clicks with canvas physics,
per-emoji particle profiles, and a fixed overlay that does not affect scroll.
Also add a Vite playground for live component previews and theme hover preview.
This commit is contained in:
2026-07-29 20:40:36 +10:00
parent ea7642f0bb
commit 0da4f0d6cb
48 changed files with 3689 additions and 46 deletions

View File

@@ -0,0 +1,37 @@
import { KeyboardEvent, MouseEvent, useCallback } from 'react';
import { Room } from 'matrix-js-sdk';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { resolveClickedEmoji } from './resolveClickedEmoji';
import { sendEmojiConfettiEvent } from './sendEmojiConfetti';
import { useEmojiConfetti } from './useEmojiConfetti';
export function useJumboEmojiConfetti(room: Room) {
const mx = useMatrixClient();
const { bursts, removeBurst, triggerLocalBurst, registerOwnEventId } = useEmojiConfetti(room);
const handleJumboEmojiClick = useCallback(
(targetEventId: string, body: string, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {
const clicked = resolveClickedEmoji(event, body);
if (!clicked) return;
const emojis = [clicked.emoji];
triggerLocalBurst(targetEventId, emojis, clicked.origin);
sendEmojiConfettiEvent(mx, room.roomId, targetEventId, emojis)
.then((response) => {
const eventId = response?.event_id;
if (eventId) registerOwnEventId(eventId);
})
.catch((error) => {
console.error('[emoji-confetti] Failed to send confetti event:', error);
});
},
[mx, registerOwnEventId, room.roomId, triggerLocalBurst]
);
return {
bursts,
removeBurst,
handleJumboEmojiClick,
};
}