feat: mark all series episodes as watched

src/lib/components/Carousel/Carousel.svelte

@@ -12,6 +12,7 @@
 	let carousel: HTMLDivElement | undefined;
 	let scrollX = 0;
 	export let scrollClass = '';
+	export let header = '';
 
 	function handleOnBack({ detail }: BackEvent) {
 		const focusIndex = get(detail.selectable.focusIndex);
@@ -26,9 +27,13 @@
 
 <div class={classNames('flex flex-col group/carousel', $$restProps.class)}>
 	<div class={'flex justify-between items-center mb-2 ' + scrollClass}>
-		<div class="h3">
-			<slot name="header" />
-		</div>
+		{#if header}
+			<div class="h3">{header}</div>
+		{:else}
+			<div class="h3">
+				<slot name="header" />
+			</div>
+		{/if}
 		<div
 			class={classNames(
 				'flex gap-2 ml-4',

src/lib/components/DetachedPage/DetachedPage.svelte

@@ -47,11 +47,12 @@
 	focusOnMount
 	direction="horizontal"
 	on:mount
+	let:hasFocus
 >
 	{#if sidebar}
 		<Sidebar />
 	{/if}
 	<Container {...$$restProps} on:back={handleGoToTop} focusOnMount>
-		<slot {handleGoBack} registrar={topSelectable.registrar} />
+		<slot {handleGoBack} registrar={topSelectable.registrar} {hasFocus} />
 	</Container>
 </Container>

src/lib/components/SelectButtonGroup.svelte

@@ -39,18 +39,18 @@
 			{@const first = index === 0}
 			{@const last = index === options.length - 1}
 			{#if !first}
-				<div class="w-0.5 h-full bg-secondary-700" />
+				<div class="h-[1px] w-full bg-secondary-700" />
 			{/if}
 			<Container
 				on:clickOrSelect={() => dispatch('select', option.value ?? option.label)}
 				let:hasFocus
+				class="group"
 			>
 				<div
 					class={classNames('h-12 px-6 py-3 border-2 flex items-center justify-between', {
-						'cursor-pointer hover:border-primary-500': !option.disabled,
+						'cursor-pointer border-transparent group-focus-within:border-primary-500 hover:border-primary-500':
+							!option.disabled,
 						'cursor-not-allowed pointer-events-none opacity-40': option.disabled,
-						'border-primary-500': hasFocus,
-						'border-transparent': !hasFocus,
 						'rounded-t-xl': first,
 						'rounded-b-xl': last
 					})}