fix: selected script now has a different color

Author: Torwent

src/routes/scripts/+layout.svelte

@@ -2,17 +2,26 @@
 	import Navigation from "../Navigation.svelte"
 	import Footer from "../Footer.svelte"
 	import Sidebar from "../Sidebar.svelte"
+	import { page } from "$app/state"
 
 	let { data, children } = $props()
 	const scripts = $derived(data.scripts!)
 	let search = $state("")
 
 	$inspect(data.script)
+
+	function getStyle(id: string, access: boolean, type: string) {
+		if (page.url.pathname == "/scripts/" + id) return "text-primary-950-50"
+		if (type == "premium") {
+			if (access) return "text-primary-500 dark:text-primary-500"
+			return "text-warning-500"
+		}
+	}
 </script>
 
 <Navigation />
 <main class="flex max-h-full justify-between overflow-y-hidden">
-	<aside class="flex h-full max-w-96 min-w-64 flex-col border-r-1 border-surface-500 p-2">
+	<aside class="flex h-full max-w-96 min-w-64 flex-col border-r border-surface-500 p-2">
 		<input
 			type="text"
 			placeholder="🔍 Search script..."
@@ -24,12 +33,10 @@
 				<li class="flex preset-outlined-success-200-800 hover:preset-tonal">
 					<a
 						href={script.id}
-						class="h-full w-full px-2 {script.metadata.type == 'premium'
-							? script.access
-								? 'text-primary-500'
-								: 'text-warning-500'
-							: ''}">{script.title}</a
+						class="h-full w-full px-2 {getStyle(script.id, script.access, script.metadata.type)}"
 					>
+						{script.title}
+					</a>
 				</li>
 			{/each}
 		</ul>