Recipe: updates bell and panel

function UpdatesBell() {
    const [open, setOpen] = useState(false)
    const { logs } = useChangelog({ limit: 10 })
    const { unreadCount, markAllSeen } = useUnreadCount()

    function toggle() {
        setOpen((value) => !value)
        if (!open) markAllSeen()
    }

    return (
        <div className='updates'>
            <button onClick={toggle} aria-expanded={open}>
                Updates {unreadCount > 0 && <b>{unreadCount}</b>}
            </button>
            {open && (
                <section>
                    {logs.map((log) => <article key={log.id}>{log.title}</article>)}
                </section>
            )}
        </div>
    )
}