refactor(settings): move rss feeds to component

2 files changed, 50 insertions, 42 deletions

diff --git a/src/lib/Settings/Categories/RSSFeeds.svelte b/src/lib/Settings/Categories/RSSFeeds.svelte
new file mode 100644
index 00000000..7217324c
--- /dev/null
+++ b/src/lib/Settings/Categories/RSSFeeds.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { options } from '$lib/Notification/options';
+	import { getNotificationsContext } from 'svelte-notifications';
+	import { env } from '$env/dynamic/public';
+	import locale from '$stores/locale';
+	import SettingHint from '../SettingHint.svelte';
+	import tooltip from '$lib/Tooltip/tooltip';
+
+	export let user: any;
+
+	const { addNotification } = getNotificationsContext();
+</script>
+
+<button
+	on:click={() => {
+		addNotification(
+			options({
+				heading: 'RSS feed URL copied to clipboard'
+			})
+		);
+		navigator.clipboard.writeText(
+			`https://${
+				env.PUBLIC_ANILIST_REDIRECT_URI?.includes('192.168') ? '192.168.1.60:5173' : 'due.moe'
+			}/feeds/activity-notifications?token=${user.accessToken}&refresh=${user.refreshToken}`
+		);
+	}}
+>
+	{$locale().settings.rssFeeds.buttons.copyToClipboard}
+</button>
+Your AniList notifications RSS feed URL
+<SettingHint lineBreak>
+	This <a
+		href={'#'}
+		on:click={(e) => e.preventDefault()}
+		target="_blank"
+		title={$locale().settings.rssFeeds.tooltips.rss}
+		use:tooltip
+		data-tooltip-above>RSS</a
+	>
+	feed will return the currently logged in AniList user's notification feed for external consumption.
+	<br />
+	Do not share this link with <b>anyone</b>!
+</SettingHint>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 45b55ad4..c21d6746 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -1,27 +1,22 @@
 <script lang="ts">
 	/* eslint svelte/no-at-html-tags: "off" */
 
-	import SettingHint from '$lib/Settings/SettingHint.svelte';
 	import Attributions from '$lib/Settings/Categories/Attributions.svelte';
-	import { env } from '$env/dynamic/public';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import Display from '$lib/Settings/Categories/Display.svelte';
 	import Calculation from '$lib/Settings/Categories/Calculation.svelte';
 	import Debug from '$lib/Settings/Categories/Debug.svelte';
 	import Cache from '$lib/Settings/Categories/Cache.svelte';
 	import Category from '$lib/Settings/Category.svelte';
-	import { getNotificationsContext } from 'svelte-notifications';
-	import { options } from '$lib/Notification/options.js';
 	import tooltip from '$lib/Tooltip/tooltip';
 	import locale from '$stores/locale.js';
 	import settings from '$stores/settings';
 	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
 	import SettingSync from '$lib/Settings/Categories/SettingSync.svelte';
+	import RssFeeds from '$lib/Settings/Categories/RSSFeeds.svelte';
 
 	export let data;
 
-	const { addNotification } = getNotificationsContext();
-
 	// const pruneUnresolved = async () => {
 	// 	const unresolved = await chapterDatabase.chapters.where('chapters').equals(-1).toArray();
 	// 	const ids = unresolved.map((m) => m.id);
@@ -71,49 +66,19 @@
 		<SettingSync />
 	</Category>
 	<Category title={$locale().settings.rssFeeds.title} id="feeds">
-		<button
-			on:click={() => {
-				addNotification(
-					options({
-						heading: 'RSS feed URL copied to clipboard'
-					})
-				);
-				navigator.clipboard.writeText(
-					`https://${
-						env.PUBLIC_ANILIST_REDIRECT_URI?.includes('192.168') ? '192.168.1.60:5173' : 'due.moe'
-					}/feeds/activity-notifications?token=${data.user.accessToken}&refresh=${
-						data.user.refreshToken
-					}`
-				);
-			}}
-		>
-			{$locale().settings.rssFeeds.buttons.copyToClipboard}
-		</button>
-		Your AniList notifications RSS feed URL
-		<SettingHint lineBreak>
-			This <a
-				href={'#'}
-				on:click={(e) => e.preventDefault()}
-				target="_blank"
-				title={$locale().settings.rssFeeds.tooltips.rss}
-				use:tooltip
-				data-tooltip-above>RSS</a
-			>
-			feed will return the currently logged in AniList user's notification feed for external consumption.
-			<br />
-			Do not share this link with <b>anyone</b>!
-		</SettingHint>
+		<RssFeeds user={data.user} />
 	</Category>
 	<Category title={$locale().settings.display.title}><Display /></Category>
 	<Category title={$locale().settings.calculation.title}><Calculation /></Category>
 	<Category title={$locale().settings.cache.title}><Cache /></Category>
 	<Category id="debug">
-		<summary
-			>{$locale().settings.debug.title}<button
+		<summary>
+			{$locale().settings.debug.title}<button
 				class="smaller-button button-badge badge-info"
 				title={$locale().settings.debug.tooltips.version}
-				use:tooltip>{data.commit.slice(0, 7)}</button
-			></summary
+				use:tooltip
+				>{data.commit.slice(0, 7)}
+			</button></summary
 		>
 
 		<Debug />