flotilla/src/routes/settings/alerts/+page.svelte

<script lang="ts">
  import cx from "classnames"
  import {sleep} from "@welshman/lib"
  import {Capacitor} from "@capacitor/core"
  import {Badge} from "@capawesome/capacitor-badge"
  import Bell from "@assets/icons/bell.svg?dataurl"
  import {preventDefault} from "@lib/html"
  import FieldInline from "@lib/components/FieldInline.svelte"
  import ToggleInput from "@lib/components/ToggleInput.svelte"
  import Spinner from "@lib/components/Spinner.svelte"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import PageContent from "@lib/components/PageContent.svelte"
  import {pushToast} from "@app/toast"
  import {clearBadges} from "@app/notifications"
  import {Push} from "@app/push"
  import {Mail} from "@app/mail"
  import {notificationSettings} from "@app/settings"
  import {emailNotificationState} from "@app/push/adapters/common"

  const clearError = () => {
    if ($emailNotificationState.error) {
      emailNotificationState.set({...emailNotificationState.get(), error: undefined})
    }
  }

  const reset = () => {
    settings = {...notificationSettings.get()}
    clearError()
  }

  const onsubmit = preventDefault(async () => {
    loading = true

    try {
      if (!settings.badge) {
        clearBadges()
      }

      let permission = "granted"

      if (settings.push) {
        permission = await Push.request()

        if (!permission.startsWith("granted")) {
          await sleep(300)

          settings.push = false

          return pushToast({
            theme: "error",
            message: `Failed to request notification permissions (${permission}).`,
          })
        }
      }

      // Handle email notification registration
      if (settings.email && settings.emailAddress) {
        try {
          await Mail.register(settings.emailAddress, settings.emailFrequency)
          await Mail.enable()
        } catch (e) {
          settings.email = false
          await sleep(300)
          return pushToast({
            theme: "error",
            message: `Failed to enable email notifications.`,
            action: {
              message: "Details",
              onclick: () =>
                emailNotificationState.set({...emailNotificationState.get(), error: undefined}),
            },
          })
        }
      } else if (!settings.email) {
        await Mail.disable()
      }

      notificationSettings.set(settings)

      pushToast({message: "Your settings have been saved!"})
    } finally {
      loading = false
    }
  })

  let loading = $state(false)
  let settings = $state({...notificationSettings.get()})
</script>

<form {onsubmit}>
  <PageContent>
    <div class="card flex flex-col gap-4 shadow-md">
      <strong class="flex items-center gap-3 text-lg">
        <Icon icon={Bell} />
        Alert Settings
      </strong>
      {#await Badge.isSupported()}
        <!-- pass -->
      {:then { isSupported }}
        {#if isSupported}
          <FieldInline>
            {#snippet label()}
              <p>Show badge for unread alerts</p>
            {/snippet}
            {#snippet input()}
              <ToggleInput bind:checked={settings.badge} />
            {/snippet}
          </FieldInline>
        {/if}
      {/await}
      {#if !Capacitor.isNativePlatform()}
        <FieldInline>
          {#snippet label()}
            <p>Play sound for new activity</p>
          {/snippet}
          {#snippet input()}
            <ToggleInput bind:checked={settings.sound} />
          {/snippet}
        </FieldInline>
      {/if}
      <FieldInline>
        {#snippet label()}
          <p>Enable push notifications</p>
        {/snippet}
        {#snippet input()}
          <ToggleInput bind:checked={settings.push} />
        {/snippet}
      </FieldInline>
    </div>
    <div
      class={cx("card bg-surface flex flex-col gap-4 shadow-md", {
        "pointer-events-none opacity-50": !settings.badge && !settings.sound && !settings.push,
      })}>
      <strong class="text-lg">Alert Types</strong>
      <FieldInline>
        {#snippet label()}
          <p>Notify me about new activity</p>
        {/snippet}
        {#snippet input()}
          <ToggleInput bind:checked={settings.spaces} />
        {/snippet}
      </FieldInline>
      <FieldInline>
        {#snippet label()}
          <p>Always notify me when mentioned</p>
        {/snippet}
        {#snippet input()}
          <ToggleInput bind:checked={settings.mentions} />
        {/snippet}
      </FieldInline>
      <FieldInline>
        {#snippet label()}
          <p>Notify me about new messages</p>
        {/snippet}
        {#snippet input()}
          <ToggleInput bind:checked={settings.messages} />
        {/snippet}
      </FieldInline>
    </div>
    <div class="card bg-surface flex flex-col gap-4 shadow-md">
      <strong class="text-lg">Email Digest Settings</strong>
      <FieldInline>
        {#snippet label()}
          <p>Receive email digest of missed activity</p>
        {/snippet}
        {#snippet input()}
          <ToggleInput bind:checked={settings.email} />
        {/snippet}
      </FieldInline>
      {#if settings.email}
        <FieldInline>
          {#snippet label()}
            <p>Email address</p>
          {/snippet}
          {#snippet input()}
            <input
              type="email"
              class="input input-bordered w-full"
              bind:value={settings.emailAddress}
              oninput={clearError}
              placeholder="you@example.com" />
          {/snippet}
        </FieldInline>
        <FieldInline>
          {#snippet label()}
            <p>Frequency</p>
          {/snippet}
          {#snippet input()}
            <select
              class="select select-bordered"
              bind:value={settings.emailFrequency}
              onchange={clearError}>
              <option value="daily">Daily</option>
              <option value="weekly">Weekly</option>
            </select>
          {/snippet}
        </FieldInline>
      {/if}
      {#if $emailNotificationState.error}
        <div class="text-sm text-red-500 bg-red-50 rounded-lg p-3">
          {$emailNotificationState.error}
        </div>
      {/if}
    </div>
    <div class="card sticky -bottom-3 shadow-md flex flex-row items-center justify-between gap-4">
      <Button class="button button-neutral" onclick={reset} disabled={loading}
        >Discard Changes</Button>
      <Button type="submit" class="button button-primary" disabled={loading}>
        <Spinner {loading}>Save Changes</Spinner>
      </Button>
    </div>
  </PageContent>
</form>