ashwin/nxtgauge-frontend-solid
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(dashboard): add notification bell with unread count polling

Browse source 
- Add unreadCount state and polling interval (30s) to DashboardDesignPreview
- Fetch from GET /api/me/notifications/unread-count with auth
- Display orange dot badge on bell when unreadCount > 0
- Uses existing bell icon in header; integrates with notifications page

Implements PRD item: Notification bell on dashboard
This commit is contained in:
Ashwin Kumar 2026-04-06 15:06:29 +02:00
parent 3703d66df5
commit ed68a636f5
1 changed files with 32 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/admin/DashboardDesignPreview.tsx
View file

@ -1041,6 +1041,32 @@ export default function DashboardDesignPreview(props: {
}) {
const [isVerified, setIsVerified] = createSignal(false);
const [verificationPending, setVerificationPending] = createSignal(false);
const [unreadCount, setUnreadCount] = createSignal(0);
// Fetch unread notification count
const fetchUnreadCount = async () => {
try {
const token = getToken();
if (!token) return;
const res = await fetch('/api/me/notifications/unread-count', {
headers: { Authorization: `Bearer ${token}` },
credentials: 'include',
});
if (res.ok) {
const data = await res.json();
setUnreadCount(data.unread_count || 0);
}
} catch (e) {
console.error('Failed to fetch unread count:', e);
}
};
// Start polling on mount
onMount(() => {
fetchUnreadCount();
const interval = setInterval(fetchUnreadCount, 30000);
return () => clearInterval(interval);
});
const isProfessionalRoleKey = (roleKey: string) => {
const role = normalizeRoleKey(roleKey);
@ -6657,7 +6683,12 @@ export default function DashboardDesignPreview(props: {
</div>
</div>
<div style="display:flex;align-items:center;gap:8px">
<button type="button" style="width:34px;height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6B7280"><Bell size={16} /></button>
<button type="button" style="width:34px;height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6B7280;position:relative">
<Bell size={16} />
<Show when={unreadCount() > 0}>
<span style="position:absolute;top:-2px;right:-2px;width:8px;height:8px;background:#FF5E13;border-radius:50%;border:1px solid white"></span>
</Show>
</button>
<button type="button" style="width:34px;height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6B7280"><Settings size={16} /></button>
<button type="button" style="width:34px;height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6B7280"><User size={16} /></button>
</div>