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">

src/routes/streams/TagSelect.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
     import Select from 'svelte-select';
-    import { run } from 'svelte/legacy';
     import { tagList } from '$lib/stores.js';
 
-    let items = $state(tagList.map((x) => ({ value: x, label: x })));
-
-    let value = $state([]);
-    let isChecked = $state({});
     let { checked = $bindable([]), remainingTags = [], listOpen = $bindable() } = $props();
+    let items = $state(tagList.map((x) => ({ value: x, label: x })));
+    let isChecked = $derived.by(computeIsChecked);
+    let value = $derived.by(computeValue);
 
     function computeIsChecked() {
-        isChecked = {};
-        checked.forEach((c) => (isChecked[c] = true));
+        return checked.reduce((acc, c) => {
+            acc[c] = true;
+            return acc;
+        }, {});
     }
 
     function computeValue() {
-        value = checked.map((c) => items.find((i) => i.value === c));
+        return checked.map((c) => items.find((i) => i.value === c));
     }
 
     function handleSelectable() {
@@ -39,11 +39,6 @@
             label.toLowerCase().includes(filterText.toLowerCase())
         );
     };
-
-    run(() => {
-        computeValue(checked);
-        computeIsChecked(checked);
-    });
 </script>
 
 <Select

src/routes/streams/[stream_id]/MetadataEditor.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { tagList } from '$lib/stores.js';
-	import { run } from 'svelte/legacy';
 
     let { original = $bindable() } = $props();
 
@@ -14,7 +13,7 @@
         });
     };
 
-    run(() => {
+    $effect.pre(() => {
         reloadTags(original);
     });
 </script>
@@ -24,7 +23,7 @@
         <br />
         <label>
             <p>Title:</p>
-            <input type="text" name="title" bind:value={original.title} />
+            <input type="text" name="title" value={original.title} />
         </label>
         <br />
 
@@ -33,7 +32,7 @@
             <textarea
                 style="min-width:400px;min-height:100px"
                 name="description"
-                bind:value={original.description}
+                value={original.description}
             ></textarea>
         </label>
         <br />

src/routes/streams/[stream_id]/Player.svelte

@@ -293,7 +293,7 @@
 <audio
     bind:this={audio}
     bind:paused
-    bind:duration
+    bind:duration={null, (d) => (duration = d || 0)}
     bind:currentTime
     {muted}
     {volume}