refactor(settings): move settings sync to component

2 files changed, 92 insertions, 80 deletions

diff --git a/src/lib/Settings/Categories/SettingSync.svelte b/src/lib/Settings/Categories/SettingSync.svelte
new file mode 100644
index 00000000..54962b44
--- /dev/null
+++ b/src/lib/Settings/Categories/SettingSync.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { options } from '$lib/Notification/options';
+	import root from '$lib/Utility/root';
+	import identity from '$stores/identity';
+	import settings from '$stores/settings';
+	import { getNotificationsContext } from 'svelte-notifications';
+	import SettingHint from '../SettingHint.svelte';
+	import locale from '$stores/locale';
+
+	const { addNotification } = getNotificationsContext();
+</script>
+
+{#if !$settings.settingsSync}
+	<button
+		on:click={() => {
+			$settings.settingsSync = true;
+
+			fetch(root(`/api/configuration?id=${$identity.id}`)).then((response) => {
+				if (response.ok) {
+					response.json().then((data) => {
+						if (data && data.configuration) {
+							$settings = data.configuration;
+
+							addNotification(
+								options({
+									heading: 'Pulled remote configuration'
+								})
+							);
+						} else {
+							fetch(root(`/api/configuration`), {
+								method: 'PUT',
+								body: JSON.stringify($settings)
+							}).then((response) => {
+								if (response.ok)
+									addNotification(
+										options({
+											heading: 'Created remote configuration'
+										})
+									);
+							});
+						}
+					});
+				}
+			});
+		}}
+	>
+		{$locale().settings.settingsSync.buttons.pull.title}
+	</button>
+	<SettingHint lineBreak>
+		{$locale().settings.settingsSync.buttons.pull.hint}
+	</SettingHint>
+	<p />
+	<button
+		on:click={() => {
+			$settings.settingsSync = true;
+
+			fetch(root(`/api/configuration`), {
+				method: 'PUT',
+				body: JSON.stringify($settings)
+			}).then((response) => {
+				if (response.ok)
+					addNotification(
+						options({
+							heading: 'Settings Sync',
+							description: 'Pushed local configuration to remote'
+						})
+					);
+			});
+		}}
+	>
+		{$locale().settings.settingsSync.buttons.push.title}
+	</button>
+	<SettingHint lineBreak>
+		{$locale().settings.settingsSync.buttons.push.hint}
+	</SettingHint>
+{:else}
+	<button
+		on:click={() => {
+			$settings.settingsSync = false;
+
+			addNotification(
+				options({
+					heading: 'Settings sync disabled'
+				})
+			);
+		}}
+	>
+		{$locale().settings.settingsSync.buttons.disable}
+	</button>
+{/if}
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index b682cb39..45b55ad4 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -16,8 +16,7 @@
 	import locale from '$stores/locale.js';
 	import settings from '$stores/settings';
 	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
-	import root from '$lib/Utility/root';
-	import identity from '$stores/identity.js';
+	import SettingSync from '$lib/Settings/Categories/SettingSync.svelte';
 
 	export let data;
 
@@ -69,84 +68,7 @@
 	<LogInRestricted />
 {:else}
 	<Category title={$locale().settings.settingsSync.title} id="sync" open={false}>
-		{#if !$settings.settingsSync}
-			<button
-				on:click={() => {
-					$settings.settingsSync = true;
-
-					fetch(root(`/api/configuration?id=${$identity.id}`)).then((response) => {
-						if (response.ok) {
-							response.json().then((data) => {
-								if (data && data.configuration) {
-									$settings = data.configuration;
-
-									addNotification(
-										options({
-											heading: 'Pulled remote configuration'
-										})
-									);
-								} else {
-									fetch(root(`/api/configuration`), {
-										method: 'PUT',
-										body: JSON.stringify($settings)
-									}).then((response) => {
-										if (response.ok)
-											addNotification(
-												options({
-													heading: 'Created remote configuration'
-												})
-											);
-									});
-								}
-							});
-						}
-					});
-				}}
-			>
-				{$locale().settings.settingsSync.buttons.pull.title}
-			</button>
-			<SettingHint lineBreak>
-				{$locale().settings.settingsSync.buttons.pull.hint}
-			</SettingHint>
-			<p />
-			<button
-				on:click={() => {
-					$settings.settingsSync = true;
-
-					fetch(root(`/api/configuration`), {
-						method: 'PUT',
-						body: JSON.stringify($settings)
-					}).then((response) => {
-						if (response.ok)
-							addNotification(
-								options({
-									heading: 'Settings Sync',
-									description: 'Pushed local configuration to remote'
-								})
-							);
-					});
-				}}
-			>
-				{$locale().settings.settingsSync.buttons.push.title}
-			</button>
-			<SettingHint lineBreak>
-				{$locale().settings.settingsSync.buttons.push.hint}
-			</SettingHint>
-		{:else}
-			<button
-				on:click={() => {
-					$settings.settingsSync = false;
-
-					addNotification(
-						options({
-							heading: 'Settings sync disabled'
-						})
-					);
-				}}
-			>
-				{$locale().settings.settingsSync.buttons.disable}
-			</button>
-		{/if}
+		<SettingSync />
 	</Category>
 	<Category title={$locale().settings.rssFeeds.title} id="feeds">
 		<button