feat(dashboard): add notification bell with unread count polling
- 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:
parent
3703d66df5
commit
ed68a636f5
1 changed files with 32 additions and 1 deletions
|
|
@ -1041,6 +1041,32 @@ export default function DashboardDesignPreview(props: {
|
||||||
}) {
|
}) {
|
||||||
const [isVerified, setIsVerified] = createSignal(false);
|
const [isVerified, setIsVerified] = createSignal(false);
|
||||||
const [verificationPending, setVerificationPending] = 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 isProfessionalRoleKey = (roleKey: string) => {
|
||||||
const role = normalizeRoleKey(roleKey);
|
const role = normalizeRoleKey(roleKey);
|
||||||
|
|
@ -6657,7 +6683,12 @@ export default function DashboardDesignPreview(props: {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display:flex;align-items:center;gap:8px">
|
<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"><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>
|
<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>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue