further cleanups

src/routes/streams/Sidebar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { untrack } from 'svelte';
     import { goto } from '$app/navigation';
     import { currentStream, favoritedStreams } from '$lib/stores.js';
     import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
@@ -6,24 +7,25 @@
 
     let { streams } = $props();
     let filteredTags = $state([]);
-    let listOpen = $state();
     let favoritesOnly = $state(false);
+    let listOpen = $state();
+    let displayedStreams = $derived.by(streamsToDisplay);
+    let remainingTags = $derived.by(getRemainingTags);
 
-    function streamsToDisplay(filteredTags) {
-        const displayedStreams = streams.filter(
+    $effect(() => {
+        if (displayedStreams.length == 1) {
+            listOpen = untrack(() => !listOpen);
+        }
+    });
+
+    function streamsToDisplay() {
+        return streams.filter(
             (stream) =>
                 !('tags' in stream) || filteredTags.every((tag) => stream['tags'].includes(tag))
         );
-
-        // close tagselect dropdown if we can't select anything else
-        if (displayedStreams.length == 1) {
-            listOpen = !listOpen;
-        }
-
-        return displayedStreams;
     }
 
-    function getRemainingTags(displayedStreams) {
+    function getRemainingTags() {
         let tagCounts = displayedStreams.reduce((tags, stream) => {
             stream['tags'].forEach((tag) => (tag in tags ? (tags[tag] += 1) : (tags[tag] = 1)));
             return tags;
@@ -43,8 +45,6 @@
             : $favoritedStreams.add(stream['id']);
         $favoritedStreams = $favoritedStreams; // for reactivity
     }
-    let displayedStreams = $derived(streamsToDisplay(filteredTags));
-    let remainingTags = $derived(getRemainingTags(displayedStreams));
 </script>
 
 <div class="tag-select">