117 lines
3.9 KiB
Svelte
117 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import cx from "classnames"
|
|
import {sleep} from '@welshman/lib'
|
|
import Inbox from "@assets/icons/inbox.svg?dataurl"
|
|
import Bell from "@assets/icons/bell.svg?dataurl"
|
|
import {preventDefault} from "@lib/html"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import {pushToast} from "@app/util/toast"
|
|
import {Alerts, clearBadges} from "@app/util/notifications"
|
|
import {userSettingsValues} from "@app/core/state"
|
|
import {publishSettings} from "@app/core/commands"
|
|
|
|
const reset = () => {
|
|
settings = {...$userSettingsValues}
|
|
}
|
|
|
|
const onAlertsBadgeChange = () => {
|
|
if (!settings.alerts_badge) {
|
|
clearBadges()
|
|
}
|
|
}
|
|
|
|
const onAlertsPushChange = () => {
|
|
settings.alerts_spaces = settings.alerts_push
|
|
settings.alerts_mentions = settings.alerts_push
|
|
settings.alerts_messages = settings.alerts_push
|
|
|
|
if (settings.alerts_push) {
|
|
Alerts.request().then(permissions => {
|
|
if (permissions !== "granted") {
|
|
sleep(300).then(() => {
|
|
settings.alerts_push = false
|
|
|
|
pushToast({
|
|
theme: 'error',
|
|
message: "Failed to request notification permissions.",
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
const onsubmit = preventDefault(async () => {
|
|
await publishSettings($state.snapshot(settings))
|
|
|
|
if (settings.alerts_push) {
|
|
await Alerts.start()
|
|
} else {
|
|
await Alerts.stop()
|
|
}
|
|
|
|
pushToast({message: "Your settings have been saved!"})
|
|
})
|
|
|
|
let settings = $state({...$userSettingsValues})
|
|
</script>
|
|
|
|
<form class="content column gap-4" {onsubmit}>
|
|
<div class="card2 bg-alt col-4 shadow-md">
|
|
<strong class="text-lg">Alert Settings</strong>
|
|
<div class="flex justify-between">
|
|
<p>Show badge for unread alerts</p>
|
|
<input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_badge} onchange={onAlertsBadgeChange} />
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<p>Play sound for new activity</p>
|
|
<input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_sound} />
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<p>Enable push notifications</p>
|
|
<input type="checkbox" class="toggle toggle-primary" bind:checked={settings.alerts_push} onchange={onAlertsPushChange} />
|
|
</div>
|
|
<div
|
|
class={cx("card2 bg-alt col-4 shadow-md", {
|
|
"pointer-events-none opacity-50": !settings.alerts_push,
|
|
})}>
|
|
<strong class="text-lg">Push Notifications</strong>
|
|
<div class="flex items-center justify-between">
|
|
<strong class="flex items-center gap-3">
|
|
<Icon icon={Inbox} />
|
|
Space Activity
|
|
</strong>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<p>Notify me about new activity</p>
|
|
<input
|
|
type="checkbox"
|
|
class="toggle toggle-primary"
|
|
bind:checked={settings.alerts_spaces} />
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<p>Always notify me when mentioned</p>
|
|
<input type="checkbox" class="toggle toggle-primary" checked={settings.alerts_mentions} />
|
|
</div>
|
|
<!-- todo: add list of muted spaces -->
|
|
<div class="flex items-center justify-between">
|
|
<strong class="flex items-center gap-3">
|
|
<Icon icon={Bell} />
|
|
Direct Messages
|
|
</strong>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<p>Notify me about new messages</p>
|
|
<input
|
|
type="checkbox"
|
|
class="toggle toggle-primary"
|
|
bind:checked={settings.alerts_messages} />
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex flex-row items-center justify-between gap-4">
|
|
<Button class="btn btn-neutral" onclick={reset}>Discard Changes</Button>
|
|
<Button type="submit" class="btn btn-primary">Save Changes</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|