GerbilManager/gerbil-manager-web/src/components/PushToggle.tsx

/**
 * Schalter „Benachrichtigungen aktivieren" (Web-Push / PWA).
 * Rendert nichts, wenn Push nicht unterstützt wird ODER der Server keine VAPID-Schlüssel hat
 * (z. B. im e2e-Mock) — so bleibt die UI dort unverändert.
 */
import { useEffect, useState } from 'react'
import { de } from '../strings/de'
import { useToast } from './toast'
import { disablePush, enablePush, fetchPushConfig, isPushSupported, isSubscribed } from '../push'

export default function PushToggle() {
  const t = de.feedback.tickets
  const toast = useToast()
  const [available, setAvailable] = useState(false)
  const [subscribed, setSubscribed] = useState(false)
  const [busy, setBusy] = useState(false)

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      if (!isPushSupported()) return
      const cfg = await fetchPushConfig()
      if (cancelled || !cfg.enabled) return
      setAvailable(true)
      setSubscribed(await isSubscribed())
    })()
    return () => {
      cancelled = true
    }
  }, [])

  if (!available) return null

  async function toggle() {
    setBusy(true)
    try {
      if (subscribed) {
        await disablePush()
        setSubscribed(false)
        toast.success(t.pushDisabledToast)
      } else {
        const res = await enablePush()
        if (res === 'enabled') {
          setSubscribed(true)
          toast.success(t.pushEnabledToast)
        } else if (res === 'denied') {
          toast.error(t.pushDenied)
        } else {
          toast.error(t.pushUnavailable)
        }
      }
    } catch {
      toast.error(t.pushUnavailable)
    } finally {
      setBusy(false)
    }
  }

  return (
    <button type="button" className="btn tickets-push-toggle" onClick={toggle} disabled={busy}>
      {subscribed ? `🔕 ${t.pushDisable}` : `🔔 ${t.pushEnable}`}
    </button>
  )
}