Spaces:
Running
Running
File size: 1,611 Bytes
94004a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | /**
* NotificationPanel — bell icon in the header that opens the
* Notifications tab in the footer status bar.
*/
import React, { useState, useEffect, useCallback } from 'react';
import { Bell } from 'lucide-react';
import { API } from '../api/client';
import './NotificationPanel.css';
export default function NotificationPanel() {
const [count, setCount] = useState(0);
const [hasErrors, setHasErrors] = useState(false);
const [hasWarns, setHasWarns] = useState(false);
const fetchCount = useCallback(async () => {
try {
const res = await fetch(`${API}/system/notifications`);
if (res.ok) {
const data = await res.json();
const notifs = data.notifications || [];
setCount(notifs.length);
setHasErrors(notifs.some(n => n.level === 'error'));
setHasWarns(notifs.some(n => n.level === 'warn'));
}
} catch {
// Backend not ready
}
}, []);
useEffect(() => {
fetchCount();
const iv = setInterval(fetchCount, 30000);
return () => clearInterval(iv);
}, [fetchCount]);
const openNotifications = () => {
window.dispatchEvent(new CustomEvent('omni:open-notifications'));
};
return (
<button
className={`notif-trigger ${count > 0 ? 'notif-trigger--has-items' : ''}`}
onClick={openNotifications}
aria-label={`Notifications (${count})`}
title="Notifications"
>
<Bell size={14} />
{count > 0 && (
<span className={`notif-badge ${hasErrors ? '' : hasWarns ? 'notif-badge--warn' : ''}`}>
{count}
</span>
)}
</button>
);
}
|