feat: focusedChild property for containers

src/lib/components/Button.svelte

@@ -4,7 +4,7 @@
 	import classNames from 'classnames';
 	import AnimatedSelection from './AnimateScale.svelte';
 
-	export let inactive: boolean = false;
+	export let disabled: boolean = false;
 	export let focusOnMount: boolean = false;
 	export let type: 'primary' | 'secondary' = 'primary';
 
@@ -20,8 +20,8 @@
 				'selectable bg-secondary-800 px-6': type === 'primary',
 				'border-2 p-1 hover:border-primary-500': type === 'secondary',
 				'border-primary-500': type === 'secondary' && $hasFocus,
-				'cursor-pointer': !inactive,
-				'cursor-not-allowed pointer-events-none opacity-40': inactive
+				'cursor-pointer': !disabled,
+				'cursor-not-allowed pointer-events-none opacity-40': disabled
 			},
 			$$restProps.class
 		)}

src/lib/components/Card/Card.svelte

@@ -21,7 +21,7 @@
 	export let rating: number | undefined = undefined;
 	export let progress = 0;
 
-	export let focusable = true;
+	export let disabled = false;
 	export let shadow = false;
 	export let size: 'dynamic' | 'md' | 'lg' | 'sm' = 'md';
 	export let orientation: 'portrait' | 'landscape' = 'landscape';
@@ -34,7 +34,7 @@
 
 <AnimatedSelection hasFocus={$hasFocus}>
 	<Container
-		active={focusable}
+		{disabled}
 		on:clickOrSelect={() => {
 			if (tmdbId || tvdbId) {
 				navigate(navigateWithType ? `${type}/${tmdbId || tvdbId}` : `${tmdbId || tvdbId}`);

src/lib/components/Dialog/ConfirmDialog.svelte

@@ -28,23 +28,23 @@
 
 <Modal {modalId}>
 	<div class="h-full flex items-center justify-center bg-secondary-950/75">
-		<div class="bg-secondary-800 rounded-xl max-w-lg p-16">
-			<div class="text-xl font-semibold tracking-wide mb-2">
+		<div class="bg-secondary-800 rounded-2xl max-w-lg p-10">
+			<div class="text-2xl font-semibold tracking-wide mb-2 text-secondary-100">
 				<slot name="header" />
 			</div>
-			<div class="font-medium text-zinc-300 mb-8">
+			<div class="font-medium text-secondary-300 mb-8">
 				<slot />
 			</div>
 			<Container direction="horizontal" class="flex">
 				<Button
 					type="secondary"
-					inactive={fetching}
+					disabled={fetching}
 					on:clickOrSelect={() => handleAction(confirm)}
 					class="mr-4"
 				>
 					Confirm
 				</Button>
-				<Button type="secondary" inactive={fetching} on:clickOrSelect={() => handleAction(cancel)}
+				<Button type="secondary" disabled={fetching} on:clickOrSelect={() => handleAction(cancel)}
 					>Cancel</Button
 				>
 			</Container>

src/lib/components/MediaManager/MediaManagerMenuLayout.svelte

@@ -4,7 +4,7 @@
 	export let focusOnMount = false;
 </script>
 
-<Container class="flex flex-col my-16" canFocusEmpty={false} {focusOnMount}>
+<Container class="flex flex-col my-16" {focusOnMount}>
 	<h1 class="tracking-wide text-2xl font-semibold mb-4">
 		<slot name="header">Header is missing</slot>
 	</h1>

src/lib/components/MediaManager/modals/ReleaseActionsModal.svelte

@@ -33,7 +33,7 @@
 				<Button
 					focusOnMount
 					on:clickOrSelect={() => handleGrabRelease(release.guid || '', release.indexerId || -1)}
-					inactive={!!($data || $isFetching || status)}
+					disabled={!!($data || $isFetching || status)}
 				>
 					{#if $data || status === 'downloading'}
 						Downloading...

src/lib/components/MediaManagerModal/LocalFiles/MMLocalFilesTab.svelte

@@ -104,9 +104,11 @@
 			>
 			<TableHeaderCell />
 		</TableHeaderRow>
-		{#each files as file}
-			<MMLocalFileRow {file} {deleteFile} />
-		{/each}
+		<Container class="contents" focusedChild>
+			{#each files as file}
+				<MMLocalFileRow {file} {deleteFile} />
+			{/each}
+		</Container>
 	</div>
 	{#if files?.length}
 		<Container

src/lib/components/MediaManagerModal/Releases/MMReleaseListRow.svelte

@@ -51,7 +51,7 @@
 	</TableCell>
 	<TableCell>
 		<TableButton
-			active={!didGrab && !fetching}
+			disabled={didGrab || fetching}
 			on:clickOrSelect={handleGrabRelease}
 			on:enter={scrollIntoView({ vertical: 128 })}
 		>

src/lib/components/MediaManagerModal/Releases/MMReleasesTab.svelte

@@ -89,7 +89,8 @@
 			>
 			<TableHeaderCell />
 		</TableHeaderRow>
-		<Container class="contents" focusOnMount>
+
+		<Container class="contents" focusedChild>
 			{#each getRecommendedReleases(releases).sort(getSortFn(sortBy, sortDirection)) as release, index}
 				<MMReleaseListRow {release} {grabRelease} />
 			{/each}

src/lib/components/Table/TableButton.svelte

@@ -2,17 +2,17 @@
 	import Container from '../../../Container.svelte';
 	import classNames from 'classnames';
 
-	export let active = true;
+	export let disabled = false;
 </script>
 
-<Container let:hasFocus on:clickOrSelect {active} class="float-left" on:enter>
+<Container let:hasFocus on:clickOrSelect {disabled} class="float-left" on:enter>
 	<div
 		class={classNames(
 			'border-2 rounded-2xl p-1 cursor-pointer font-medium tracking-wide transition-colors',
 			{
 				'border-zinc-400': !hasFocus,
 				'border-primary-500': hasFocus,
-				'opacity-50': !active
+				'opacity-50': disabled
 			}
 		)}
 	>