src/lib/components/Library.svelte

@@ -2,13 +2,6 @@
 	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';
@@ -29,7 +22,7 @@
 					in:receive={{ key: version.version }}
 					out:send={{ key: version.version }}
 				>
-					<VersionCard {version} {selectedVersion} />
+					<VersionCard {version} />
 				</div>
 			{/each}
 		{:else}
@@ -47,7 +40,7 @@
 				in:receive={{ key: version.version }}
 				out:send={{ key: version.version }}
 			>
-				<VersionCard {version} {selectedVersion} />
+				<VersionCard {version} />
 			</div>
 		{/each}
 	</div>

src/lib/components/VersionCard.svelte

@@ -4,18 +4,15 @@
 		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, selectedVersion } = $props();
+	let { version } = $props();
 	let popup = $state();
 
-	let selected = $derived(version.version === selectedVersion?.version);
-
 	async function handleDelete() {
 		const prompt = await show({
 			title: 'Delete',
@@ -44,16 +41,7 @@
 
 <Popup bind:this={popup} content="Version {version.version} is now the default on your system"
 ></Popup>
-<div
+<div id="card">
-	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)}
@@ -105,13 +93,11 @@
 		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,14 +19,9 @@ import { updateDownloadProgress } from './download';
  * @property {Date} [installDate] - Installation date (if available)
  */
 
-export const installedVersionsStore = writable([]);
+export const currentInstalledVersions = 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)) {
@@ -205,7 +200,7 @@ export async function removeVersion(version) {
  * @param {blenderVersion} version The version to toggle.
  */
 export async function toggleFavourite(version) {
-	const versions = get(installedVersionsStore);
+	const versions = get(currentInstalledVersions);
 	console.log();
 	const versionObj = versions.find((v) => v.version === version.version);
 	if (versionObj) {
@@ -213,7 +208,7 @@ export async function toggleFavourite(version) {
 	} else {
 		console.error('version not found', version);
 	}
-	installedVersionsStore.set(versions);
+	currentInstalledVersions.set(versions);
 	await favouritesStore.set(version.version, versionObj.favourite);
 	await favouritesStore.save();
 }
@@ -235,9 +230,9 @@ export async function deleteVersion(version) {
 		await favouritesStore.save();
 
 		// Update the current installed versions list
-		const versions = get(installedVersionsStore);
+		const versions = get(currentInstalledVersions);
 		const filteredVersions = versions.filter((v) => v.version !== version.version);
-		installedVersionsStore.set(filteredVersions);
+		currentInstalledVersions.set(filteredVersions);
 
 		console.log(`Successfully deleted version ${version.version}`);
 	} catch (error) {
@@ -258,13 +253,13 @@ export async function getInstalledVersions() {
 		const settings = get(currentSettings);
 		const libraryDir = settings.libraryDir;
 		if (!libraryDir) {
-			installedVersionsStore.set([]);
+			currentInstalledVersions.set([]);
 			return [];
 		}
 		const blenderLibraryPath = await join(libraryDir, BASE_LIBRARY_DIR, 'blender');
 
 		if (!exists(blenderLibraryPath)) {
-			installedVersionsStore.set([]);
+			currentInstalledVersions.set([]);
 			return [];
 		}
 
@@ -313,13 +308,13 @@ export async function getInstalledVersions() {
 			}
 		}
 
-		installedVersionsStore.set(versions);
+		currentInstalledVersions.set(versions);
 		cleanupOrphanedDesktopFiles(versions);
 
 		return versions;
 	} catch (error) {
 		console.error('Error getting installed versions:', error);
-		installedVersionsStore.set([]);
+		currentInstalledVersions.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, installedVersionsStore } from '$lib/library.js';
+	import { getInstalledVersions, currentInstalledVersions } 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);
 		});
-		installedVersionsStore.subscribe((value) => {
+		currentInstalledVersions.subscribe((value) => {
 			installedVersions = value;
 			console.log('Loaded installed versions:', installedVersions);
 		});