feat(ext): shared toast notification system
This commit is contained in:
26
extension/src/shared/toast.ts
Normal file
26
extension/src/shared/toast.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
export function showToast(
|
||||
message: string,
|
||||
type: 'success' | 'error' | 'info' = 'info',
|
||||
durationMs = 2500,
|
||||
): void {
|
||||
let container = document.querySelector<HTMLElement>('.relicario-toast-container');
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.className = 'relicario-toast-container';
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `relicario-toast relicario-toast--${type}`;
|
||||
toast.textContent = message;
|
||||
container.appendChild(toast);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => toast.classList.add('relicario-toast--visible'));
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('relicario-toast--visible');
|
||||
toast.addEventListener('transitionend', () => toast.remove(), { once: true });
|
||||
}, durationMs);
|
||||
}
|
||||
Reference in New Issue
Block a user