fix: Tab transition animations

src/lib/components/Dialog/Dialog.svelte

@@ -3,6 +3,7 @@
 	import classNames from 'classnames';
 	import { fade } from 'svelte/transition';
 	import { modalStack } from '../Modal/modal.store';
+	import Panel from '../Panel.svelte';
 
 	export let size: 'sm' | 'full' | 'lg' | 'dynamic' = 'sm';
 
@@ -16,20 +17,12 @@
 		class="h-full flex items-center justify-center bg-primary-900/75 py-20 px-32"
 		transition:fade={{ duration: 100 }}
 		on:click|self={() => handleClose()}
+		on:keypress={() => {
+			/* For a11y*/
+		}}
 	>
-		<div
+		<Panel {size} class={$$restProps.class}>
-			class={classNames(
-				'bg-primary-800 rounded-2xl p-12 relative shadow-xl flex flex-col transition-[max-width]',
-				{
-					'flex-1 max-w-lg min-h-0 overflow-y-auto scrollbar-hide': size === 'sm',
-					'flex-1 h-full overflow-hidden': size === 'full',
-					'flex-1 max-w-[56rem] min-h-0 overflow-y-auto scrollbar-hide': size === 'lg',
-					'': size === 'dynamic'
-				},
-				$$restProps.class
-			)}
-		>
 			<slot close={handleClose} />
-		</div>
+		</Panel>
 	</div>
 </Modal>

src/lib/components/Dialog/EditProfileModal.svelte

@@ -103,8 +103,8 @@
 	}
 </script>
 
-<Dialog class="grid" size={$tab === Tabs.EditProfile ? 'sm' : 'dynamic'}>
+<Dialog class="grid" size={'dynamic'}>
-	<Tab {...tab} tab={Tabs.EditProfile} class="space-y-4">
+	<Tab {...tab} tab={Tabs.EditProfile} class="space-y-4 max-w-lg">
 		<h1 class="header2">Edit Profile</h1>
 		<TextField bind:value={name}>name</TextField>
 		<SelectField value={profilePictureTitle} on:clickOrSelect={() => tab.set(Tabs.ProfilePictures)}>
@@ -151,7 +151,7 @@
 		}}
 	>
 		<h1 class="header2 mb-6">Select Profile Picture</h1>
-		<Container direction="grid" gridCols={3} class="grid grid-cols-3 gap-4">
+		<Container direction="grid" gridCols={3} class="grid grid-cols-3 gap-4 w-max">
 			<ProfileIcon
 				url={profilePictures.ana}
 				on:clickOrSelect={() => setProfilePicture(profilePictures.ana)}

src/lib/components/Integrations/JellyfinIntegrationUsersDialog.svelte

@@ -15,9 +15,15 @@
 </script>
 
 <Dialog>
+	<h1 class="header1 mb-2">Users</h1>
+	<div class="space-y-4">
 		{#each users as user}
-		<SelectItem selected={user.Id === selectedUser?.Id} on:clickOrSelect={() => handleSelect(user)}>
+			<SelectItem
+				selected={user.Id === selectedUser?.Id}
+				on:clickOrSelect={() => handleSelect(user)}
+			>
 				{user.Name}
 			</SelectItem>
 		{/each}
+	</div>
 </Dialog>

src/lib/components/Panel.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import classNames from 'classnames';
+
+	export let size: 'sm' | 'full' | 'lg' | 'dynamic' = 'sm';
+</script>
+
+<div
+	class={classNames(
+		'bg-primary-800 rounded-2xl p-12 relative shadow-xl flex flex-col transition-[max-width]',
+		{
+			'flex-1 max-w-lg min-h-0 overflow-y-auto scrollbar-hide': size === 'sm',
+			'flex-1 h-full overflow-hidden': size === 'full',
+			'flex-1 max-w-[56rem] min-h-0 overflow-y-auto scrollbar-hide': size === 'lg',
+			'max-w-max overflow-hidden': size === 'dynamic'
+		},
+		$$restProps.class
+	)}
+>
+	<slot />
+</div>

src/lib/components/SelectItem.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <Container
-	class="flex items-center justify-between bg-primary-900 rounded-xl px-6 py-2.5 mb-4 font-medium
+	class="flex items-center justify-between bg-primary-900 rounded-xl px-6 py-2.5 font-medium
 		   border-2 border-transparent focus:border-primary-500 hover:border-primary-500 cursor-pointer group"
 	on:clickOrSelect
 	on:enter

src/lib/components/Tab/Tab.svelte

@@ -7,6 +7,7 @@
 	export let tab: number;
 	export let index: number = tab;
 	export let openTab: Writable<number>;
+	export let size: 'hug' | 'stretch' = 'hug';
 
 	let selectable: Selectable;
 
@@ -33,19 +34,24 @@
 </script>
 
 <Container
-	class={classNames(
+	class={classNames('col-start-1 col-end-1 row-start-1 row-end-1', {
-		$$restProps.class,
+		'absolute pointer-events-none left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2':
-		'transition-all col-start-1 col-end-1 row-start-1 row-end-1',
+			!active && size === 'hug',
-		{
+		'absolute pointer-events-none inset-0': !active && size === 'stretch',
-			'opacity-0 pointer-events-none absolute inset-0': !active,
+		'': active
-			'-translate-x-10': !active && $openTab >= index,
+	})}
-			'translate-x-10': !active && $openTab < index
-		}
-	)}
 	bind:selectable
 	on:back
 	on:navigate={handleNavigate}
 	disabled={!active}
+>
+	<div
+		class={classNames($$restProps.class, 'transition-[transform,opacity]', {
+			'opacity-0 pointer-events-none': !active,
+			'-translate-x-10': !active && $openTab >= index,
+			'translate-x-10': !active && $openTab < index
+		})}
 	>
 		<slot />
+	</div>
 </Container>

src/lib/components/Tab/Tab.ts

@@ -1,10 +1,12 @@
 import { writable } from 'svelte/store';
+import type { ComponentProps } from 'svelte';
+import Tab from './Tab.svelte';
 
-export function useTabs(defaultTab: number) {
+export function useTabs(defaultTab: number, props: Pick<ComponentProps<Tab>, 'size'> = {}) {
 	const openTab = writable<number>(defaultTab);
 
 	const next = () => openTab.update((n) => n + 1);
 	const previous = () => openTab.update((n) => n - 1);
 
-	return { subscribe: openTab.subscribe, openTab, set: openTab.set, next, previous };
+	return { subscribe: openTab.subscribe, openTab, set: openTab.set, next, previous, ...props };
 }

src/lib/pages/ManagePage.svelte

@@ -29,7 +29,7 @@
 		About
 	}
 
-	const tab = useTabs(Tabs.Account);
+	const tab = useTabs(Tabs.Interface, { size: 'stretch' });
 
 	let jellyfinBaseUrl = '';
 	let jellyfinApiKey = '';
@@ -133,7 +133,7 @@
 	}}
 />
 
-<DetachedPage class="px-32 py-16">
+<DetachedPage class="px-32 py-16 h-screen flex flex-col">
 	<Container
 		direction="horizontal"
 		class="flex space-x-8 header3 pb-3 border-b-2 border-secondary-700 w-full mb-8"
@@ -185,8 +185,8 @@
 		</Container>
 	</Container>
 
-	<Container class="grid">
+	<Container class="flex-1 grid w-full overflow-y-auto scrollbar-hide relative">
-		<Tab {...tab} tab={Tabs.Interface} class="">
+		<Tab {...tab} tab={Tabs.Interface} class="w-full">
 			<div class="flex items-center justify-between text-lg font-medium text-secondary-100 py-2">
 				<label class="mr-2">Animate scrolling</label>
 				<Toggle

src/lib/pages/OnboardingPage.svelte

@@ -14,6 +14,7 @@
 	import classNames from 'classnames';
 	import { user } from '../stores/user.store';
 	import { sessions } from '../stores/session.store';
+	import Panel from '../components/Panel.svelte';
 
 	enum Tabs {
 		Welcome,
@@ -27,7 +28,7 @@
 		TmdbConnect = Tmdb + 0.1
 	}
 
-	const tab = useTabs(Tabs.Welcome);
+	const tab = useTabs(Tabs.Welcome, { ['class']: 'w-max max-w-lg' });
 
 	let tmdbConnectRequestToken: string | undefined = undefined;
 	let tmdbConnectLink: string | undefined = undefined;
@@ -229,11 +230,10 @@
 		'col-start-1 col-end-1 row-start-1 row-end-1 flex flex-col bg-primary-800 rounded-2xl p-10 shadow-xl max-w-lg';
 </script>
 
-<Container focusOnMount class="h-full w-full grid justify-items-center items-center">
+<Container focusOnMount class="h-full w-full flex items-center justify-center" on:back={handleBack}>
-	<div class="flex flex-col bg-primary-800 rounded-2xl p-10 shadow-xl max-w-lg">
+	<Panel class="grid max-w-lg" size="dynamic">
-		<div class="relative">
+		<Tab {...tab} tab={Tabs.Welcome} on:back={({ detail }) => detail.stopPropagation()}>
-			<Tab {...tab} tab={Tabs.Welcome}>
+			<h1 class="header2 mb-2 w-full">Welcome to Reiverr</h1>
-				<h1 class="header2 mb-2">Welcome to Reiverr</h1>
 			<div class="body mb-8">
 				Looks like this is a new account. This setup will get you started with connecting your
 				services to get most out of Reiverr.
@@ -253,7 +253,7 @@
 			</Container>
 		</Tab>
 
-			<Tab {...tab} tab={Tabs.Tmdb} on:back={handleBack}>
+		<Tab {...tab} tab={Tabs.Tmdb}>
 			<h1 class="header2 mb-2">Connect a TMDB Account</h1>
 			<div class="body mb-8">
 				Connect to TMDB for personalized recommendations based on your movie reviews and
@@ -295,7 +295,14 @@
 			</div>
 		</Tab>
 
-			<Tab {...tab} tab={Tabs.TmdbConnect} on:back={() => tab.set(Tabs.Tmdb)}>
+		<Tab
+			{...tab}
+			tab={Tabs.TmdbConnect}
+			on:back={({ detail }) => {
+				tab.set(Tabs.Tmdb);
+				detail.stopPropagation();
+			}}
+		>
 			<h1 class="header2 mb-2">Connect a TMDB Account</h1>
 			<div class="body mb-8">
 				To connect your TMDB account, log in via the link below and then click "Complete
@@ -359,8 +366,16 @@
 				{/if}
 			</Container>
 		</Tab>
-			<Tab {...tab} tab={Tabs.SelectUser} on:back={() => tab.set(Tabs.Jellyfin)}>
+		<Tab
-				<h1 class="header1 mb-2">Select User</h1>
+			{...tab}
+			tab={Tabs.SelectUser}
+			on:back={({ detail }) => {
+				tab.set(Tabs.Jellyfin);
+				detail.stopPropagation();
+			}}
+		>
+			<h1 class="header1 mb-2 w-96">Select User</h1>
+			<div class="flex flex-col space-y-4" />
 			{#await jellyfinUsers then users}
 				{#each users as user}
 					<SelectItem
@@ -440,6 +455,5 @@
 				</div>
 			</Container>
 		</Tab>
-		</div>
+	</Panel>
-	</div>
 </Container>