feat(settings): settings sync category

4 files changed, 89 insertions, 74 deletions

diff --git a/src/lib/Locale/english.ts b/src/lib/Locale/english.ts
index 34052e21..c12187fe 100644
--- a/src/lib/Locale/english.ts
+++ b/src/lib/Locale/english.ts
@@ -138,6 +138,9 @@ const English: Locale = {
 		languages: {
 			english: 'English',
 			japanese: 'Japanese'
+		},
+		settingsSync: {
+			title: 'Settings Sync'
 		}
 	},
 	user: {
diff --git a/src/lib/Locale/japanese.ts b/src/lib/Locale/japanese.ts
index 562b9fd5..33d4dc01 100644
--- a/src/lib/Locale/japanese.ts
+++ b/src/lib/Locale/japanese.ts
@@ -139,6 +139,9 @@ const Japanese: Locale = {
 		languages: {
 			english: '英語',
 			japanese: '日本語'
+		},
+		settingsSync: {
+			title: 'クロスプラットフォーム設定同期'
 		}
 	},
 	user: {
diff --git a/src/lib/Locale/layout.ts b/src/lib/Locale/layout.ts
index 5c32ceb3..ce78d6db 100644
--- a/src/lib/Locale/layout.ts
+++ b/src/lib/Locale/layout.ts
@@ -141,6 +141,9 @@ export interface Locale {
 			english: LocaleValue;
 			japanese: LocaleValue;
 		};
+		settingsSync: {
+			title: LocaleValue;
+		};
 	};
 	user: {
 		badges: {
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 4b0cb91b..f45fa5cd 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -68,80 +68,86 @@
 {#if data.user === undefined}
 	<LogInRestricted />
 {:else}
-	{#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'
-											})
-										);
-								});
-							}
-						});
-					}
-				});
-			}}
-		>
-			Enable Settings Sync &amp; Pull Remote Configuration
-		</button>
-		<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'
-							})
-						);
-				});
-			}}
-		>
-			Enable &amp; Push Local Configuration
-		</button>
-	{:else}
-		<button
-			on:click={() => {
-				$settings.settingsSync = false;
-
-				addNotification(
-					options({
-						heading: 'Settings sync disabled'
-					})
-				);
-			}}
-		>
-			Disable Settings Sync &amp; Keep Local Configuration
-		</button>
-	{/if}
-
-	<p />
-
+	<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'
+												})
+											);
+									});
+								}
+							});
+						}
+					});
+				}}
+			>
+				Pull Remote Configuration
+			</button>
+			<SettingHint lineBreak>
+				Enable settings sync and overwrite any local settings with your remote configuration
+			</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'
+								})
+							);
+					});
+				}}
+			>
+				Push Local Configuration
+			</button>
+			<SettingHint lineBreak>
+				Enable settings sync and overwrite any remote configuration with your local settings
+			</SettingHint>
+		{:else}
+			<button
+				on:click={() => {
+					$settings.settingsSync = false;
+
+					addNotification(
+						options({
+							heading: 'Settings sync disabled'
+						})
+					);
+				}}
+			>
+				Disable &amp; Keep Local Configuration
+			</button>
+		{/if}
+	</Category>
 	<Category title={$locale().settings.rssFeeds.title} id="feeds">
 		<button
 			on:click={() => {