fix: hanging notifications
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
.notifications {
|
.notifications {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: var(--space-5);
|
right: var(--space-5);
|
||||||
bottom: var(--space-5);
|
top: var(--space-5);
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -4,20 +4,17 @@ import { NotificationType, Notification } from '../types';
|
|||||||
export function useNotifications() {
|
export function useNotifications() {
|
||||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||||
const hovered = useRef<Set<number>>(new Set());
|
const hovered = useRef<Set<number>>(new Set());
|
||||||
|
const nextId = useRef(0); // monotonically increasing counter
|
||||||
|
|
||||||
const notify = useCallback(
|
const notify = useCallback(
|
||||||
(message: string, type: NotificationType = 'error', dspName?: string) => {
|
(message: string, type: NotificationType = 'error', dspName?: string) => {
|
||||||
const id = Date.now();
|
const id = nextId.current++;
|
||||||
|
|
||||||
const fullMessage = dspName ? `${dspName}: ${message}` : message;
|
const fullMessage = dspName ? `${dspName}: ${message}` : message;
|
||||||
|
|
||||||
setNotifications((prev) => [
|
setNotifications((prev) => [
|
||||||
...prev,
|
...prev,
|
||||||
{
|
{ id, message: fullMessage, type },
|
||||||
id,
|
|
||||||
message: fullMessage,
|
|
||||||
type,
|
|
||||||
},
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const removeLater = () => {
|
const removeLater = () => {
|
||||||
@@ -25,7 +22,6 @@ export function useNotifications() {
|
|||||||
setTimeout(removeLater, 1000);
|
setTimeout(removeLater, 1000);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -35,6 +31,7 @@ export function useNotifications() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const removeNotification = useCallback((id: number) => {
|
const removeNotification = useCallback((id: number) => {
|
||||||
|
hovered.current.delete(id); // prevent leaking stale hover state
|
||||||
setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, removing: true } : n)));
|
setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, removing: true } : n)));
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user