feat(tools): descriptions

1 files changed, 30 insertions, 9 deletions

diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 1871ac98..2b2f1b39 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -15,13 +15,31 @@
 		browser && $page.url.searchParams.size !== 0
 			? $page.url.searchParams.get('tool') || 'default'
 			: 'default';
-	const tools: { [key: string]: string } = {
-		default: 'Tools',
-		wrapped: 'AniList Wrapped',
-		birthdays: "Today's Character Birthdays",
-		sequel_spy: 'Sequel Spy (Missing Prequel Finder)',
-		discussions: 'Episode Discussion Collector',
-		activity_history: 'Activity History Analyser'
+	const tools: { [key: string]: { name: string; description?: string } } = {
+		default: {
+			name: 'Tools',
+			description: 'A collection of tools to help you get the most out of AniList.'
+		},
+		wrapped: {
+			name: 'AniList Wrapped',
+			description: 'Instantly generate an AniList themed Wrapped for your profile'
+		},
+		birthdays: {
+			name: "Today's Character Birthdays",
+			description:
+				'Find and display the birthdays of all characters for today, or any other day of the year'
+		},
+		sequel_spy: {
+			name: 'Sequel Spy (Missing Prequel Finder)',
+			description: "Find media with prequels you haven't seen yet for any given simulcast season"
+		},
+		discussions: {
+			name: 'Episode Discussion Collector',
+			description: 'Find and display all episode discussions for a given user'
+		},
+		activity_history: {
+			name: 'Activity History Analyser'
+		}
 	};
 
 	$: {
@@ -59,7 +77,7 @@
 		>"?
 	</blockquote>
 {:else}
-	<HeadTitle route={tools[tool]} path={`/tools?tool=${tool}`} />
+	<HeadTitle route={tools[tool].name} path={`/tools?tool=${tool}`} />
 
 	{#if tool === 'default'}
 		<p>Select a tool to continue.</p>
@@ -68,7 +86,10 @@
 			{#each Object.keys(tools) as t}
 				{#if t !== 'default'}
 					<li>
-						<a href={`#`} on:click={() => (tool = t)}>{tools[t]}</a>
+						<a href={`#`} on:click={() => (tool = t)}>{tools[t].name}</a>
+						{#if tools[t].description}
+							<blockquote>{tools[t].description}</blockquote>
+						{/if}
 					</li>
 				{/if}
 			{/each}