first commit

src/lib/components/Library.svelte

@@ -0,0 +1,69 @@
+<script>
+	import VersionCard from './VersionCard.svelte';
+	import { send, receive } from '$lib/transition.js';
+	import { flip } from 'svelte/animate';
+
+	let { installedVersions } = $props();
+	import '@webtui/css/base.css';
+	import '@webtui/css/utils/box.css';
+
+	let favourites = $derived(installedVersions?.filter((v) => v.favourite) || []);
+	let installed = $derived(installedVersions?.filter((v) => !v.favourite) || []);
+</script>
+
+<h2>Favourites</h2>
+
+<div id="container">
+	<div id="library">
+		{#if favourites.length}
+			{#each favourites as version (version.version)}
+				<div
+					animate:flip={{ duration: 200 }}
+					in:receive={{ key: version.version }}
+					out:send={{ key: version.version }}
+				>
+					<VersionCard {version} />
+				</div>
+			{/each}
+		{:else}
+			<p class="minor">No favourites</p>
+		{/if}
+	</div>
+</div>
+
+<h2>Installed</h2>
+<div id="container">
+	<div id="library">
+		{#each installed as version (version.version)}
+			<div
+				animate:flip={{ duration: 200 }}
+				in:receive={{ key: version.version }}
+				out:send={{ key: version.version }}
+			>
+				<VersionCard {version} />
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.minor {
+		color: var(--light-accent);
+	}
+	h2 {
+		font-weight: normal;
+		margin-bottom: 1rem;
+	}
+	#container {
+		max-height: 100%;
+		box-sizing: border-box;
+	}
+	#library {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		width: 100%;
+		min-height: 140px;
+		overflow: visible;
+	}
+</style>