highlight current playing stream

src/routes/streams/Sidebar.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { goto } from '$app/navigation';
-	import { favoritedStreams } from '$lib/stores.js';
+	import { currentStream, favoritedStreams } from '$lib/stores.js';
 	import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
 	import TagSelect from './TagSelect.svelte';
 
@@ -59,9 +59,10 @@
 <ul class="stream-list">
 	{#each streams as stream}
 		{@const favorited = $favoritedStreams.has(stream['id'])}
+		{@const current = $currentStream['id'] === stream['id']}
 		<li
 			hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
-			class="stream-item"
+			class="stream-item {current ? 'current-stream' : ''}"
 			id="stream-{stream['id']}"
 		>
 			<button class="stream-item-button" on:click={() => goto('/streams/' + stream['id'])}>
@@ -135,6 +136,18 @@
 		padding: 5px;
 	}
 
+	.current-stream > .stream-item-button {
+		background-color: #add8e6;
+	}
+
+	.current-stream > .stream-item-button:hover {
+		background-color: #87c5d9;
+	}
+
+	.current-stream > .stream-item-button:active {
+		background-color: #7aa8b8;
+	}
+
 	#tag-select {
 		text-align: left;
 		color: black;