feat: Deleting episodes and seasons, work in mm redesign

src/lib/components/Table/Table.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import Container from '../../../Container.svelte';
+
+	export let rows: number;
+</script>
+
+<table class="w-full grid">
+	<thead>
+		<slot name="header" />
+	</thead>
+	<Container tag="tbody" {...$$restProps}>
+		<slot />
+	</Container>
+</table>

src/lib/components/Table/TableButton.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import Container from '../../../Container.svelte';
+	import classNames from 'classnames';
+
+	export let active = true;
+</script>
+
+<Container let:hasFocus on:clickOrSelect {active} 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
+			}
+		)}
+	>
+		<div
+			class={classNames('h-10 w-10 rounded-xl flex items-center justify-center transition-colors', {
+				'bg-primary-500 text-secondary-800': hasFocus,
+				'bg-transparent': !hasFocus
+			})}
+		>
+			<slot />
+		</div>
+	</div>
+</Container>

src/lib/components/Table/TableCell.svelte

@@ -0,0 +1,29 @@
+<script>
+	import classNames from 'classnames';
+</script>
+
+<div class={classNames('_table-cell', $$restProps.class)}>
+	<slot />
+</div>
+
+<style global>
+	:global(.row-wrapper > ._table-cell) {
+		@apply h-20 flex items-center px-4;
+	}
+
+	:global(.row-wrapper-selected > ._table-cell) {
+		@apply bg-secondary-800;
+	}
+
+	:global(.row-wrapper > ._table-cell:first-child) {
+		@apply rounded-l-xl pl-12;
+	}
+
+	:global(.row-wrapper > ._table-cell:last-child) {
+		@apply rounded-r-xl pr-12;
+	}
+
+	/*:global(.row-wrapper > ._table-cell:not(:first-child)) {*/
+	/*	@apply rounded-l-xl pl-4;*/
+	/*}*/
+</style>

src/lib/components/Table/TableHeaderCell.svelte

@@ -0,0 +1,17 @@
+<div class="_header-cell self-stretch">
+	<slot />
+</div>
+
+<style global>
+	:global(.row-wrapper > ._header-cell) {
+		@apply h-12 flex items-center px-4;
+	}
+
+	:global(.row-wrapper > ._header-cell:first-child) {
+		@apply pl-12;
+	}
+
+	:global(.row-wrapper > ._header-cell:last-child) {
+		@apply pr-12;
+	}
+</style>

src/lib/components/Table/TableHeaderRow.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import Container from '../../../Container.svelte';
+</script>
+
+<Container
+	direction="horizontal"
+	on:enter
+	class="*:sticky *:top-0 *:bg-secondary-900 row-wrapper contents"
+>
+	<!--	<div class="absolute -inset-y-2 -inset-x-8 -z-10 bg-secondary-900" />-->
+	<slot />
+</Container>

src/lib/components/Table/TableHeaderSortBy.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Container from '../../../Container.svelte';
+	import classNames from 'classnames';
+	import { ChevronDown, ChevronUp } from 'radix-icons-svelte';
+	import type { Readable } from 'svelte/store';
+	import TableHeaderCell from './TableHeaderCell.svelte';
+
+	export let icon: undefined | 'asc' | 'desc' = undefined;
+	let hasFocus: Readable<boolean>;
+</script>
+
+<TableHeaderCell>
+	<Container
+		bind:hasFocus
+		on:clickOrSelect
+		focusOnClick
+		class={classNames(
+			'flex items-center rounded-full py-1 px-3 -mx-3 cursor-pointer select-none font-semibold float-left',
+			{
+				'bg-primary-500 text-secondary-800': $hasFocus
+			}
+		)}
+	>
+		<slot />
+		{#if icon}
+			<svelte:component this={icon === 'desc' ? ChevronDown : ChevronUp} size={19} class="ml-2" />
+		{/if}
+	</Container>
+</TableHeaderCell>

src/lib/components/Table/TableRow.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import Container from '../../../Container.svelte';
+	import classNames from 'classnames';
+	import type { Readable } from 'svelte/store';
+
+	let hasFocusWithin: Readable<boolean>;
+</script>
+
+<Container
+	class={classNames(
+		'contents row-wrapper',
+		{
+			'row-wrapper-selected': $hasFocusWithin
+			// 'bg-secondary-800 shadow-xl shadow-secondary-900': $hasFocusWithin
+			// 'scale-[102%] bg-primary-500/10': $hasFocusWithin
+		},
+		$$restProps.class
+	)}
+	bind:hasFocusWithin
+	on:enter
+>
+	<!-- Background, has to be inside a td to not create another column -->
+	<!--	<div-->
+	<!--		class={classNames('absolute inset-y-0 -inset-x-8 -z-10 rounded-xl transition-colors', {-->
+	<!--			'bg-secondary-800 shadow-xl shadow-secondary-900': $hasFocusWithin,-->
+	<!--			'bg-transparent': !$hasFocusWithin-->
+	<!--		})}-->
+	<!--	/>-->
+	<slot />
+</Container>