malice

<script lang="ts">

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

  import type { MessageSoundMode } from './message-sound-model';

  import { messageSound, playMessageSound, saveMessageSound, uploadMessageSound } from './message-sound';

  let busy = false;

  let soundBusy = false;

  let soundError = '';

  let fileInput: HTMLInputElement;

  const SOUND_MODES: { id: MessageSoundMode; label: string }[] = [

    { id: 'all', label: 'All messages' },

    { id: 'mentions_dms', label: 'Mentions and DMs' },

    { id: 'off', label: 'Off' }

  ];

  async function guarded(task: () => Promise<void>): Promise<void> {

    if (soundBusy) return;

    soundBusy = true;

    soundError = '';

    try {

      await task();

    } catch (cause) {

      soundError = cause instanceof Error ? cause.message : 'Could not save the sound settings.';

    } finally {

      soundBusy = false;

    }

  }

  async function upload(event: Event): Promise<void> {

    const input = event.currentTarget as HTMLInputElement;

    const file = input.files?.[0];

    input.value = '';

    if (file) await guarded(() => uploadMessageSound(file));

  }

  $: 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>

  <div class="sound-modes" role="radiogroup" aria-label="Message sound">

    {#each SOUND_MODES as option (option.id)}

      <button

        type="button"

        role="radio"

        aria-checked={$messageSound.mode === option.id}

        class:active={$messageSound.mode === option.id}

        disabled={soundBusy}

        on:click={() => void guarded(() => saveMessageSound({ ...$messageSound, mode: option.id }))}

      >

        {option.label}

      </button>

    {/each}

  </div>

  <div class="sound-actions">

    <button type="button" class="ghost-btn" on:click={() => void playMessageSound()}>Play</button>

    <button type="button" class="ghost-btn" disabled={soundBusy} on:click={() => fileInput.click()}>Upload sound</button>

    <button

      type="button"

      class="ghost-btn"

      disabled={soundBusy || $messageSound.sound === null}

      on:click={() => void guarded(() => saveMessageSound({ ...$messageSound, sound: null }))}

    >

      Reset

    </button>

    <input bind:this={fileInput} type="file" accept="audio/*" hidden on:change={(e) => void upload(e)} />

  </div>

  {#if soundError}

    <p class="sound-error" role="alert">{soundError}</p>

  {/if}

</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); }

  .sound-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

  .sound-modes button { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: var(--r-sm); padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; transition: color var(--pop), border-color var(--pop), background var(--pop); }

  .sound-modes button:hover:not(:disabled) { color: var(--text); }

  .sound-modes button.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

  .sound-modes button:disabled { cursor: wait; }

  .sound-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

  .sound-error { margin: 8px 0 0; color: var(--danger); font-size: 13px; }

</style>