refactor: TmdbIntegration

src/lib/components/Integrations/TmdbIntegration.svelte

@@ -2,15 +2,10 @@
 	import { tmdbApi } from '../../apis/tmdb/tmdb-api';
 	import { user } from '../../stores/user.store';
 	import SelectField from '../SelectField.svelte';
-	import { createEventDispatcher } from 'svelte';
-	import Button from '../Button.svelte';
-	import { ArrowRight, Trash } from 'radix-icons-svelte';
+	import { Trash } from 'radix-icons-svelte';
 	import { derived } from 'svelte/store';
 	import classNames from 'classnames';
 
-	export let handleConnectTmdb: () => void;
-
-	const dispatch = createEventDispatcher<{ 'click-user': null }>();
 	const userId = derived(user, (user) => user?.settings.tmdb.userId);
 
 	$: connectedTmdbAccount = !!$userId && tmdbApi.getAccountDetails();
@@ -32,17 +27,10 @@
 
 {#await connectedTmdbAccount then tmdbAccount}
 	{#if tmdbAccount}
-		<SelectField value={tmdbAccount.username || ''} action={handleDisconnectTmdb} class="mb-4">
+		<SelectField value={tmdbAccount.username || ''} action={handleDisconnectTmdb}>
 			Connected to
 			<Trash slot="icon" let:size let:iconClass {size} class={classNames(iconClass, '')} />
 		</SelectField>
-	{:else}
-		<slot>
-			<div class="flex space-x-4">
-				<Button type="primary-dark" iconAfter={ArrowRight} on:clickOrSelect={handleConnectTmdb}>
-					Connect
-				</Button>
-			</div>
-		</slot>
 	{/if}
+	<slot connected={!!tmdbAccount} />
 {/await}

src/lib/pages/ManagePage.svelte

@@ -246,9 +246,19 @@
 							on:enter={scrollIntoView({ vertical: 64 })}
 						>
 							<h1 class="mb-4 header1">Tmdb Account</h1>
-							<TmdbIntegration
-								handleConnectTmdb={() => createModal(TmdbIntegrationConnectDialog, {})}
-							/>
+							<TmdbIntegration let:connected>
+								{#if !connected}
+									<div class="flex space-x-4 mt-4">
+										<Button
+											type="primary-dark"
+											iconAfter={ArrowRight}
+											on:clickOrSelect={() => createModal(TmdbIntegrationConnectDialog, {})}
+										>
+											Connect
+										</Button>
+									</div>
+								{/if}
+							</TmdbIntegration>
 
 							<!--{#await tmdbAccount then tmdbAccount}-->
 							<!--	{#if tmdbAccount}-->

src/lib/pages/OnboardingPage.svelte

@@ -82,8 +82,8 @@
 				preferences.
 			</div>
 
-			<TmdbIntegration handleConnectTmdb={() => tab.set(Tabs.TmdbConnect)}>
-				<Container direction="horizontal" class="flex space-x-4 *:flex-1">
+			<TmdbIntegration handleConnectTmdb={() => tab.set(Tabs.TmdbConnect)} let:connected>
+				{#if !connected}
 					{#if !$user?.settings.tmdb.userId}
 						<Button
 							type="primary-dark"
@@ -94,8 +94,11 @@
 							Connect
 						</Button>
 					{/if}
+				{/if}
+				<Container direction="horizontal" class="flex space-x-4 *:flex-1 mt-4">
+					<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
 					<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
-						{#if $user?.settings.tmdb.userId}
+						{#if connected}
 							Next
 						{:else}
 							Skip