useAttention

"use client"

import * as React from "react"
import { useAttention } from "@/lib/use-attention"
import { Button } from "@/components/ui/button"

/*
 * Notifications and sound stay off until the person turns them on here; the hook never asks for permission itself,
 * so the button does, from the click. The title badge clears as soon as this window gets focus again.
 */
export default function Example() {
  const [notify, setNotify] = React.useState(false)
  const attention = useAttention({ notify })
  const canNotify = attention.permission === "granted"
  return (
    <div className="flex flex-col items-start gap-3 text-sm">
      <p>
        Waiting on you: <strong>{attention.count}</strong>. Switch to another tab, then look at this one’s title.
      </p>
      <div className="flex flex-wrap gap-2">
        <Button size="sm" variant="outline" onClick={() => attention.signal({ kind: "approval", title: "Approve: raise the export batch size", body: "Relay is waiting on you." })}>
          An approval arrives
        </Button>
        <Button size="sm" variant="outline" onClick={() => attention.signal({ kind: "finished", title: "Nightly import finished", body: "1,204 rows, no errors." })}>
          Work finishes
        </Button>
        <Button size="sm" variant="ghost" onClick={attention.clear}>
          Clear
        </Button>
      </div>
      <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
        {attention.permission === "unsupported" && <span>This browser has no system notifications.</span>}
        {attention.permission === "default" && (
          <Button size="xs" variant="outline" onClick={() => attention.requestPermission()}>
            Allow system notifications
          </Button>
        )}
        {attention.permission === "denied" && <span>System notifications are blocked in this browser’s settings.</span>}
        {canNotify && (
          <label className="inline-flex items-center gap-1.5">
            <input type="checkbox" checked={notify} onChange={(e) => setNotify(e.target.checked)} />
            Send a system notification for each one
          </label>
        )}
      </div>
    </div>
  )
}