feat: Request utils

src/lib/components/Button.svelte

@@ -2,16 +2,32 @@
 	import Container from '../../Container.svelte';
 	import type { Readable } from 'svelte/store';
 	import classNames from 'classnames';
+
+	export let inactive: boolean = false;
+
 	let hasFoucus: Readable<boolean>;
 </script>
 
 <Container
 	bind:hasFocus={hasFoucus}
-	class={classNames('selectable px-6 py-2 rounded-xl font-medium tracking-wide', {
+	class={classNames('px-6 py-2 rounded-lg font-medium tracking-wide flex items-center', {
 		'bg-stone-200 text-stone-900': $hasFoucus,
-		'bg-stone-800 text-white': !$hasFoucus
+		'hover:bg-stone-200 hover:text-stone-900': true,
+		'bg-stone-800/50': !$hasFoucus,
+		'cursor-pointer': !inactive,
+		'cursor-not-allowed pointer-events-none opacity-40': inactive
 	})}
 	on:click
 >
+	{#if $$slots.icon}
+		<div class="mr-2">
+			<slot name="icon" />
+		</div>
+	{/if}
 	<slot />
+	{#if $$slots['icon-after']}
+		<div class="ml-2">
+			<slot name="icon-after" />
+		</div>
+	{/if}
 </Container>

src/lib/components/ContextMenu/LibraryItemContextItems.svelte

@@ -4,7 +4,7 @@
 		setJellyfinItemWatched,
 		type JellyfinItem
 	} from '$lib/apis/jellyfin/jellyfinApi';
-	import type { RadarrMovie } from '../../apis/radarr/radarrApi';
+	import type { RadarrMovie } from '../../apis/radarr/radarr-api';
 	import type { SonarrSeries } from '../../apis/sonarr/sonarrApi';
 	import { jellyfinItemsStore } from '../../stores/data.store';
 	import { settings } from '../../stores/settings.store';

src/lib/components/Sidebar/Sidebar.svelte

@@ -40,7 +40,7 @@
 					<Laptop class="w-8 h-8" slot="icon" />
 				</div>
 			</Container>
-			<Container on:click={() => navigate('/movie/695721')}>
+			<Container on:click={() => navigate('/movie/359410')}>
 				<div class={itemContainer(1, $focusIndex)}>
 					<CardStack class="w-8 h-8" slot="icon" />
 				</div>