forge/Anvil
1
0
Fork 0
Code Pull requests Activity

feat: add notifications to settings

Browse source 
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>
This commit is contained in:
André Jaenisch 2024-08-14 17:13:07 +02:00
parent 119b681d4d
commit e95bb2e117
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
10 changed files with 549 additions and 272 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -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",

2
package.json
View file

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

3
src/lib/components/molecules/Settings.svelte
View file

@ -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>

98
src/lib/components/molecules/SettingsNotifications.svelte Normal file
View file

@ -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>

18
src/lib/i18n/locales/bg.json
View file

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

18
src/lib/i18n/locales/de.json
View file

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

18
src/lib/i18n/locales/en.json
View file

@ -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": {

18
src/lib/i18n/locales/pl.json
View file

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

26
stories/molecules/SettingsNotifications.stories.ts Normal file
View file

@ -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 = {};

86
tests/components/molecules/SettingsNotifications.test.ts Normal file
View file

@ -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();
});
});