enh: option to toggle notification sound

src/lib/components/NotificationToast.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { settings } from '$lib/stores';
 	import DOMPurify from 'dompurify';
 
 	import { marked } from 'marked';
@@ -11,8 +12,10 @@
 	export let content: string;
 
 	onMount(() => {
-		const audio = new Audio(`/audio/notification.mp3`);
-		audio.play();
+		if ($settings?.notificationSound ?? true) {
+			const audio = new Audio(`/audio/notification.mp3`);
+			audio.play();
+		}
 	});
 </script>
 

src/lib/components/chat/Settings/Interface.svelte

@@ -32,6 +32,7 @@
 	let showUsername = false;
 	let richTextInput = true;
 	let largeTextAsFile = false;
+	let notificationSound = true;
 
 	let landingPageMode = '';
 	let chatBubble = true;
@@ -81,6 +82,11 @@
 		saveSettings({ showUpdateToast: showUpdateToast });
 	};
 
+	const toggleNotificationSound = async () => {
+		notificationSound = !notificationSound;
+		saveSettings({ notificationSound: notificationSound });
+	};
+
 	const toggleShowChangelog = async () => {
 		showChangelog = !showChangelog;
 		saveSettings({ showChangelog: showChangelog });
@@ -216,6 +222,8 @@
 		chatDirection = $settings.chatDirection ?? 'LTR';
 		userLocation = $settings.userLocation ?? false;
 
+		notificationSound = $settings.notificationSound ?? true;
+
 		hapticFeedback = $settings.hapticFeedback ?? false;
 
 		imageCompression = $settings.imageCompression ?? false;
@@ -371,6 +379,28 @@
 				</div>
 			</div>
 
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs">
+						{$i18n.t('Notification Sound')}
+					</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							toggleNotificationSound();
+						}}
+						type="button"
+					>
+						{#if notificationSound === true}
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
+						{:else}
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
+						{/if}
+					</button>
+				</div>
+			</div>
+
 			{#if $user.role === 'admin'}
 				<div>
 					<div class=" py-0.5 flex w-full justify-between">