feat: add notifications to settings

This is currently a mock as we have no notification mechanism in place.
Also, I need to figure out how to talk to Vervis' API first.

That being said, this step allows for translations at least.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "anvil",
-	"version": "0.0.13",
+	"version": "0.0.14",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "anvil",
-			"version": "0.0.13",
+			"version": "0.0.14",
 			"dependencies": {
 				"@floating-ui/dom": "1.6.8",
 				"@fontsource/spline-sans-mono": "5.0.20",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "anvil",
-	"version": "0.0.13",
+	"version": "0.0.14",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

src/lib/components/molecules/Settings.svelte

@@ -15,6 +15,7 @@ You should have received a copy of the GNU Affero General Public License along w
 	import SettingsAccount from './SettingsAccount.svelte';
 	import SettingsAppearance from './SettingsAppearance.svelte';
 	import SettingsKeys from './SettingsKeys.svelte';
+	import SettingsNotifications from './SettingsNotifications.svelte';
 	import SettingsSidebar from '../atoms/SettingsSidebar.svelte';
 	import SettingsProfile from './SettingsProfile.svelte';
 
@@ -36,5 +37,7 @@ You should have received a copy of the GNU Affero General Public License along w
 		<SettingsKeys />
 	{:else if activeSetting === 'appearance'}
 		<SettingsAppearance />
+	{:else if activeSetting === 'notifications'}
+		<SettingsNotifications />
 	{/if}
 </div>

src/lib/components/molecules/SettingsNotifications.svelte

@@ -0,0 +1,98 @@
+<!--
+SettingsNotifications molecule.
+Copyright (C) 2024 André Jaenisch
+SPDX-FileCopyrightText: 2024 André Jaenisch
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+	import { SlideToggle } from '@skeletonlabs/skeleton';
+	import { _ } from 'svelte-i18n';
+	import { Eye24, EyeClosed24, Mention24 } from 'svelte-octicons';
+
+	const username = 'jane';
+	const instance = 'server.com';
+	let defaultNofication = 'mentioned';
+	let isNotifiedOnMention = false;
+	let labelYes = 'On';
+	let labelNo = 'Off';
+</script>
+
+<div class="flex flex-col flex-1 gap-6 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token">
+	<div class="text-surface-500-400-token text-xl font-semibold">
+		{$_('settings.notifications.headline')}
+	</div>
+	<div class="flex flex-col gap-2">
+		<div class="text-surface-500-400-token font-semibold py-1">
+			{$_('settings.notifications.mentions.headline')}
+		</div>
+		<p class="text-sm leading-tight">
+			{@html $_('settings.notifications.mentions.intro', {
+				values: { blockElementOpen: '<strong>', blockElementClose: '</strong>', instance, username }
+			})}
+		</p>
+		<SlideToggle
+			class="flex gap-8"
+			name="mentions"
+			active="bg-primary-500"
+			size="sm"
+			bind:checked={isNotifiedOnMention}
+		>
+			{#if isNotifiedOnMention}
+				{$_('settings.notifications.mentions.labelYes')}
+			{:else}
+				{$_('settings.notifications.mentions.labelNo')}
+			{/if}
+		</SlideToggle>
+	</div>
+
+	<div class="flex flex-col gap-2">
+		<div class="text-surface-500-400-token font-semibold py-1">
+			{$_('settings.notifications.default.headline')}
+		</div>
+		<p class="text-sm text-surface-500-400-token leading-tight">
+			{$_('settings.notifications.default.intro')}
+		</p>
+		<div class="flex flex-col gap-2">
+			<label class="label flex items-center gap-2">
+				<input
+					type="radio"
+					class="me-2"
+					name="theme"
+					value="light"
+					checked={defaultNofication === 'all'}
+				/>
+				<Eye24 fill="currentColor" />
+				{$_('settings.notifications.default.notification.all')}
+			</label>
+			<label class="label flex items-center gap-2">
+				<input
+					type="radio"
+					class="me-2"
+					name="theme"
+					value="dark"
+					checked={defaultNofication === 'off'}
+				/>
+				<EyeClosed24 fill="currentColor" />
+				{$_('settings.notifications.default.notification.off')}
+			</label>
+			<label class="label flex items-center gap-2">
+				<input
+					type="radio"
+					class="me-2"
+					name="theme"
+					value="auto"
+					checked={defaultNofication === 'mentioned'}
+				/>
+				<Mention24 fill="currentColor" />
+				{$_('settings.notifications.default.notification.mentioned')}
+			</label>
+		</div>
+	</div>
+</div>

src/lib/i18n/locales/bg.json

@@ -206,7 +206,23 @@
 			}
 		},
 		"notifications": {
-			"label": ""
+			"default": {
+				"headline": "",
+				"intro": "",
+				"notification": {
+					"all": "",
+					"off": "",
+					"mentioned": ""
+				}
+			},
+			"headline": "",
+			"label": "",
+			"mentions": {
+				"headline": "",
+				"intro": "",
+				"labelNo": "",
+				"labelYes": ""
+			}
 		},
 		"profile": {
 			"avatar": {

src/lib/i18n/locales/de.json

@@ -206,7 +206,23 @@
 			}
 		},
 		"notifications": {
-            "label": ""
+			"default": {
+				"headline": "",
+				"intro": "",
+				"notification": {
+					"all": "",
+					"off": "",
+					"mentioned": ""
+				}
+			},
+			"headline": "",
+			"label": "",
+			"mentions": {
+				"headline": "",
+				"intro": "",
+				"labelNo": "",
+				"labelYes": ""
+			}
 		},
 		"profile": {
 			"avatar": {

src/lib/i18n/locales/en.json

@@ -206,7 +206,23 @@
 			}
 		},
 		"notifications": {
-			"label": "Notifications"
+			"default": {
+				"headline": "Default notification",
+				"intro": "The default notification setting for starred projects",
+				"notification": {
+					"all": "All activity",
+					"off": "Turn off",
+					"mentioned": "Mentions only"
+				}
+			},
+			"headline": "Notifications",
+			"label": "Notifications",
+			"mentions": {
+				"headline": "Mentions",
+				"intro": "Receive notifications when {blockElementOpen}@{username}@{instance}{blockElementClose} is mentioned.",
+				"labelNo": "Off",
+				"labelYes": "On"
+			}
 		},
 		"profile": {
 			"avatar": {

src/lib/i18n/locales/pl.json

@@ -206,7 +206,23 @@
 			}
 		},
 		"notifications": {
-			"label": ""
+			"default": {
+				"headline": "",
+				"intro": "",
+				"notification": {
+					"all": "",
+					"off": "",
+					"mentioned": ""
+				}
+			},
+			"headline": "",
+			"label": "",
+			"mentions": {
+				"headline": "",
+				"intro": "",
+				"labelNo": "",
+				"labelYes": ""
+			}
 		},
 		"profile": {
 			"avatar": {

stories/molecules/SettingsNotifications.stories.ts

@@ -0,0 +1,26 @@
+/* Stories for SettingsNotifications molecule.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import SettingsNotifications from '$lib/components/molecules/SettingsNotifications.svelte';
+
+const meta = {
+	title: 'Molecules/SettingsNotifications',
+	component: SettingsNotifications,
+	tags: ['autodocs']
+} satisfies Meta<SettingsNotifications>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

tests/components/molecules/SettingsNotifications.test.ts

@@ -0,0 +1,86 @@
+/* Component test for SettingsNotifications molecule.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/svelte';
+import { init, locale, register } from 'svelte-i18n';
+
+import SettingsNotifications from '../../../src/lib/components/molecules/SettingsNotifications.svelte';
+import enMessages from '../../../src/lib/i18n/locales/en.json';
+
+describe('SettingsNotifications.svelte', () => {
+	beforeEach(() => {
+		register('en', () => import('../../../src/lib/i18n/locales/en.json'));
+		init({ fallbackLocale: 'en', initialLocale: 'en' });
+		locale.set('en');
+	});
+
+	it('should mount', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		const { container } = render(SettingsNotifications);
+
+		// Assert
+		expect(container).toBeTruthy();
+	});
+
+	it('should have a slide toggle', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(SettingsNotifications);
+
+		// Assert
+		expect(
+			screen.getByLabelText(enMessages.settings.notifications.mentions.labelNo)
+		).toBeInTheDocument();
+	});
+
+	describe('when slide is toggled', () => {
+		it('should update the label', async () => {
+			// Arrange
+			// Nothing to prepare
+
+			// Act
+			render(SettingsNotifications);
+			const slideToggle = screen.getByLabelText(enMessages.settings.notifications.mentions.labelNo);
+			await slideToggle.click();
+
+			// Assert
+			expect(
+				screen.getByLabelText(enMessages.settings.notifications.mentions.labelYes)
+			).toBeInTheDocument();
+		});
+	});
+
+	it('should have a default notification radio group', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(SettingsNotifications);
+
+		// Assert
+		expect(
+			screen.getByLabelText(enMessages.settings.notifications.default.notification.all)
+		).toBeInTheDocument();
+		expect(
+			screen.getByLabelText(enMessages.settings.notifications.default.notification.off)
+		).toBeInTheDocument();
+		expect(
+			screen.getByLabelText(enMessages.settings.notifications.default.notification.mentioned)
+		).toBeInTheDocument();
+	});
+});