FEAT: Version Selection

src/lib/components/Library.svelte

@@ -2,6 +2,13 @@
 	import VersionCard from './VersionCard.svelte';
 	import { send, receive } from '$lib/transition.js';
 	import { flip } from 'svelte/animate';
+	import { selectedVersionStore } from '$lib/library.js';
+
+	let selectedVersion = $state(null);
+
+	selectedVersionStore.subscribe((version) => {
+		selectedVersion = version;
+	});
 
 	let { installedVersions } = $props();
 	import '@webtui/css/base.css';
@@ -22,7 +29,7 @@
 					in:receive={{ key: version.version }}
 					out:send={{ key: version.version }}
 				>
-					<VersionCard {version} />
+					<VersionCard {version} {selectedVersion} />
 				</div>
 			{/each}
 		{:else}
@@ -40,7 +47,7 @@
 				in:receive={{ key: version.version }}
 				out:send={{ key: version.version }}
 			>
-				<VersionCard {version} />
+				<VersionCard {version} {selectedVersion} />
 			</div>
 		{/each}
 	</div>

src/lib/components/VersionCard.svelte

@@ -4,15 +4,18 @@
 		deleteVersion,
 		launchBlenderVersion,
 		toggleFavourite,
-		registerVersion
+		registerVersion,
+		selectVersion
 	} from '$lib/library';
 	import Button from '$lib/components/Button.svelte';
 	import Menu from '$lib/components/Menu.svelte';
 	import { show } from '$lib/components/Dialog.svelte';
 
-	let { version } = $props();
+	let { version, selectedVersion } = $props();
 	let popup = $state();
 
+	let selected = $derived(version.version === selectedVersion?.version);
+
 	async function handleDelete() {
 		const prompt = await show({
 			title: 'Delete',
@@ -41,7 +44,16 @@
 
 <Popup bind:this={popup} content="Version {version.version} is now the default on your system"
 ></Popup>
-<div id="card">
+<div
+	role="button"
+	tabindex="0"
+	onkeydown={() => {}}
+	onclick={async () => {
+		await selectVersion(version);
+	}}
+	id="card"
+	class:selected
+>
 	<div class="row">
 		{version.version}
 		<Button style="iconbutton" onclick={() => toggleFavourite(version)}
@@ -93,11 +105,13 @@
 		width: 100%;
 		min-width: 170px;
 		max-width: 200px;
-		background-color: var(--white);
 		border-radius: 5px;
 		background-color: var(--light);
 		padding: 1rem;
 	}
+	#card.selected {
+		background-color: var(--light-accent);
+	}
 	.row {
 		display: flex;
 		align-items: center;

src/lib/library.js

@@ -19,9 +19,14 @@ import { updateDownloadProgress } from './download';
  * @property {Date} [installDate] - Installation date (if available)
  */
 
-export const currentInstalledVersions = writable([]);
+export const installedVersionsStore = writable([]);
+export const selectedVersionStore = writable(null);
 const favouritesStore = new LazyStore('versions.json');
 
+export async function selectVersion(version) {
+	selectedVersionStore.set(version);
+}
+
 export async function generateVersionBanner(version) {
 	const bannerPath = `${version.path}/banner.png`;
 	if (await exists(bannerPath)) {
@@ -200,7 +205,7 @@ export async function removeVersion(version) {
  * @param {blenderVersion} version The version to toggle.
  */
 export async function toggleFavourite(version) {
-	const versions = get(currentInstalledVersions);
+	const versions = get(installedVersionsStore);
 	console.log();
 	const versionObj = versions.find((v) => v.version === version.version);
 	if (versionObj) {
@@ -208,7 +213,7 @@ export async function toggleFavourite(version) {
 	} else {
 		console.error('version not found', version);
 	}
-	currentInstalledVersions.set(versions);
+	installedVersionsStore.set(versions);
 	await favouritesStore.set(version.version, versionObj.favourite);
 	await favouritesStore.save();
 }
@@ -230,9 +235,9 @@ export async function deleteVersion(version) {
 		await favouritesStore.save();
 
 		// Update the current installed versions list
-		const versions = get(currentInstalledVersions);
+		const versions = get(installedVersionsStore);
 		const filteredVersions = versions.filter((v) => v.version !== version.version);
-		currentInstalledVersions.set(filteredVersions);
+		installedVersionsStore.set(filteredVersions);
 
 		console.log(`Successfully deleted version ${version.version}`);
 	} catch (error) {
@@ -253,13 +258,13 @@ export async function getInstalledVersions() {
 		const settings = get(currentSettings);
 		const libraryDir = settings.libraryDir;
 		if (!libraryDir) {
-			currentInstalledVersions.set([]);
+			installedVersionsStore.set([]);
 			return [];
 		}
 		const blenderLibraryPath = await join(libraryDir, BASE_LIBRARY_DIR, 'blender');
 
 		if (!exists(blenderLibraryPath)) {
-			currentInstalledVersions.set([]);
+			installedVersionsStore.set([]);
 			return [];
 		}
 
@@ -308,13 +313,13 @@ export async function getInstalledVersions() {
 			}
 		}
 
-		currentInstalledVersions.set(versions);
+		installedVersionsStore.set(versions);
 		cleanupOrphanedDesktopFiles(versions);
 
 		return versions;
 	} catch (error) {
 		console.error('Error getting installed versions:', error);
-		currentInstalledVersions.set([]);
+		installedVersionsStore.set([]);
 		return [];
 	}
 }

src/routes/+page.svelte

@@ -5,7 +5,7 @@
 	import { onMount } from 'svelte';
 	import { getSettings, currentSettings } from '$lib/settings.js';
 	import { getBlenderReleases, blenderReleases } from '$lib/blenderfetch';
-	import { getInstalledVersions, currentInstalledVersions } from '$lib/library.js';
+	import { getInstalledVersions, installedVersionsStore } from '$lib/library.js';
 	import { downloadTasksStore } from '$lib/download.js';
 	import Library from '$lib/components/Library.svelte';
 	import Download from '$lib/components/Download.svelte';
@@ -27,7 +27,7 @@
 			settings = value;
 			console.log('Loaded settings:', settings);
 		});
-		currentInstalledVersions.subscribe((value) => {
+		installedVersionsStore.subscribe((value) => {
 			installedVersions = value;
 			console.log('Loaded installed versions:', installedVersions);
 		});