The notification bell

A badge counting what you have not yet seen, and a panel listing recent events with their category, severity dot and a one-click way into the record.

What it is

The bell exists in two mounts — the sidebar footer on desktop and the mobile header — and both read the same shared state, so the badge always agrees. The panel shows the last 30 days of in-app rows, offers Mark all read, a one-tap sound mute, and a dismissible card offering desktop alerts.

Also called: alerts icon · what did I miss · notification panel · inbox badge

See it
The notification bell
CustomerBuildingAmountStatus
Ronan PetschBarndominium$12,410Approved
Sutter KlineHobby Shop$8,800Open
Sutter Kline30×40 Garage$10,320Sent
Sutter Kline40×64 Shop$5,950Open
Ronan PetschEquipment Storage$11,080Sent
The sidebar bell with a red count, panel open above it showing category-dotted rows and the mute speaker. NotificationBell.tsx. Sample data — no customer information appears here.
How it works
  1. 1The panel is portaled to the body and positioned off the bell's measured viewport rect: it flips above when there is no room below, right-aligns then clamps into the viewport, and caps its own height.
  2. 2Opening the panel refreshes immediately instead of waiting for the next poll tick.
  3. 3Clicking a row marks it read and navigates to its link.
  4. 4The toaster's '+N more' pill opens whichever bell mount is actually laid out.
Why we built it

The header records the duplication it replaced: 'pre-2.0 it ran a private 60s loop from BOTH mounts, sidebar + mobile header, doubling every request.' The portal-and-measure architecture exists because 'the bell lives in the sidebar footer at the very bottom of the screen', so a naive dropdown opened off-screen.

The problem
  • Two mounts double-polling and disagreeing
  • A dropdown that could not fit below the trigger
Sound familiar?
What you get
One truthful badge everywhere
Recent history you can click straight into
What's inside

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →