malice

<script lang="ts">

  import { disableNotifications, enableNotifications, notificationPermission, notificationsEnabled } from './notifications';

  let busy = false;

  $: denied = $notificationPermission === 'denied';

  $: unsupported = $notificationPermission === 'unsupported';

  $: on = $notificationsEnabled && $notificationPermission === 'granted';

  async function toggle(): Promise<void> {

    if (busy) return;

    busy = true;

    try {

      if (on) disableNotifications();

      else await enableNotifications();

    } finally {

      busy = false;

    }

  }

</script>

<section aria-label="Notifications">

  <div class="sec-head">

    <h3 class="sec-h">Notifications</h3>

    <span class="state" class:ok={on}>{unsupported ? 'Unavailable' : denied ? 'Blocked' : on ? 'On' : 'Off'}</span>

  </div>

  <button type="button" class="ghost-btn" disabled={busy || denied || unsupported} aria-pressed={on} on:click={() => void toggle()}>

    {on ? 'Turn off' : 'Turn on'}

  </button>

</section>

<style>

  section { margin-top: 18px; }

  .sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

  .sec-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; }

  .state { font-size: 12px; color: var(--muted); }

  .state.ok { color: var(--accent); }

</style>