minstrel/web/src/lib/components/NotificationEmailCard.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import {
    getNotificationEmailSettings,
    updateNotificationEmailSettings,
    type NotificationEmailSettings
  } from '$lib/api/admin';
  import { errMessage } from '$lib/api/errors';
  import { pushToast } from '$lib/stores/toast.svelte';

  // When notification emails go out (M489 #5346). Nothing is emailed per
  // event: new music is a daily summary, everything else a batch.

  let saved = $state<NotificationEmailSettings | null>(null);
  let form = $state<NotificationEmailSettings | null>(null);
  let saving = $state(false);
  let loadError = $state(false);

  const dirty = $derived(
    !!saved &&
      !!form &&
      (saved.summary_hour !== form.summary_hour ||
        saved.batch_window_minutes !== form.batch_window_minutes)
  );

  const hours = Array.from({ length: 24 }, (_, h) => h);

  function hourLabel(h: number): string {
    return `${String(h).padStart(2, '0')}:00`;
  }

  async function load() {
    try {
      saved = await getNotificationEmailSettings();
      form = { ...saved };
      loadError = false;
    } catch {
      loadError = true;
    }
  }

  onMount(load);

  async function save() {
    if (!form) return;
    saving = true;
    try {
      saved = await updateNotificationEmailSettings(form);
      form = { ...saved };
      pushToast('Notification email schedule saved.');
    } catch (e) {
      // The server names the field it refused (#3937: errMessage, not
      // e.message, because the client throws a plain object).
      pushToast(errMessage(e), 'error');
    } finally {
      saving = false;
    }
  }
</script>

<section class="space-y-4 rounded-xl border border-border bg-surface p-5">
  <div>
    <h3 class="font-display text-lg font-medium text-text-primary">Notification emails</h3>
    <p class="mt-1 text-sm text-text-secondary">
      Nothing is emailed per event. Each person chooses which notifications reach their email in
      their own settings.
    </p>
  </div>

  {#if loadError}
    <p class="text-sm text-action-destructive">
      Couldn't load the email schedule.
      <button type="button" class="underline hover:no-underline" onclick={load}>Try again</button>
    </p>
  {:else if form === null}
    <p class="text-sm text-text-secondary">Loading the email schedule…</p>
  {:else}
    <div class="grid gap-4 sm:grid-cols-2">
      <label class="block">
        <span class="text-sm text-text-primary">New music summary</span>
        <span class="block text-xs text-text-secondary">
          Once a day at this hour, in each person's own timezone.
        </span>
        <select
          bind:value={form.summary_hour}
          class="mt-1 w-28 rounded border border-border bg-background px-2 py-1 text-sm
                 text-text-primary focus-visible:outline focus-visible:outline-2
                 focus-visible:outline-accent"
        >
          {#each hours as h (h)}
            <option value={h}>{hourLabel(h)}</option>
          {/each}
        </select>
      </label>

      <label class="block">
        <span class="text-sm text-text-primary">Batch everything else (minutes)</span>
        <span class="block text-xs text-text-secondary">
          One email this long after the first item, holding all that came in.
        </span>
        <input
          type="number"
          min="15"
          max="1440"
          bind:value={form.batch_window_minutes}
          class="mt-1 w-28 rounded border border-border bg-background px-2 py-1 text-sm
                 text-text-primary focus-visible:outline focus-visible:outline-2
                 focus-visible:outline-accent"
        />
      </label>
    </div>

    <div class="flex justify-end">
      <button
        type="button"
        class="rounded-md bg-action-secondary px-4 py-2 text-sm text-action-fg hover:opacity-90
               focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent
               disabled:cursor-not-allowed disabled:opacity-50"
        disabled={!dirty || saving}
        onclick={save}
      >
        {saving ? 'Saving…' : 'Save'}
      </button>
    </div>
  {/if}
</section>