use SvelteSet instead of Set for favoritedStreams

src/lib/stores.svelte.js

@@ -1,18 +1,18 @@
-import { writable, get } from 'svelte/store';
+import { writable } from 'svelte/store';
 import { browser } from '$app/environment';
+import { SvelteSet } from 'svelte/reactivity';
 
 export const currentStream = writable({});
 export const currentSongIndex = writable(null);
 
-export const favoritedStreams = writable(
+export const favoritedStreams = new SvelteSet(
-    new Set(JSON.parse((browser && localStorage.getItem('favoritedStreams')) || '[]'))
+    JSON.parse((browser && localStorage.getItem('favoritedStreams')) || '[]')
 );
-
+$effect.root(() => {
-if (browser) {
+    $effect(() => {
-    favoritedStreams.subscribe((val) => {
+        localStorage.setItem('favoritedStreams', JSON.stringify(Array.from(favoritedStreams)));
-        localStorage.setItem('favoritedStreams', JSON.stringify(Array.from(val)));
+    });
 });
-}
 
 export const tagList = [
     'acoustic',

src/routes/streams/Sidebar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { untrack } from 'svelte';
     import { goto } from '$app/navigation';
-    import { currentStream, favoritedStreams } from '$lib/stores.js';
+    import { currentStream, favoritedStreams } from '$lib/stores.svelte.js';
     import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
     import TagSelect from './TagSelect.svelte';
 
@@ -40,10 +40,9 @@
     }
 
     function updateFavorites(stream) {
-        $favoritedStreams.has(stream['id'])
+        favoritedStreams.has(stream['id'])
-            ? $favoritedStreams.delete(stream['id'])
+            ? favoritedStreams.delete(stream['id'])
-            : $favoritedStreams.add(stream['id']);
+            : favoritedStreams.add(stream['id']);
-        $favoritedStreams = $favoritedStreams; // for reactivity
     }
 </script>
 
@@ -57,7 +56,7 @@
 
 <ul class="stream-list">
     {#each streams as stream}
-        {@const favorited = $favoritedStreams.has(stream['id'])}
+        {@const favorited = favoritedStreams.has(stream['id'])}
         {@const current = $currentStream['id'] === stream['id']}
         <li
             hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}

src/routes/streams/TagSelect.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Select from 'svelte-select';
-    import { tagList } from '$lib/stores.js';
+    import { tagList } from '$lib/stores.svelte.js';
 
     let { checked = $bindable([]), remainingTags = [], listOpen = $bindable() } = $props();
     let items = $state(tagList.map((x) => ({ value: x, label: x })));

src/routes/streams/WelcomePage.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { currentStream } from '$lib/stores.js';
+    import { currentStream } from '$lib/stores.svelte.js';
 
     currentStream.set({});
 </script>

src/routes/streams/[stream_id]/+page.svelte

@@ -5,7 +5,7 @@
     import MetadataEditor from './MetadataEditor.svelte';
     import Player from './Player.svelte';
     import { dev } from '$app/environment';
-    import { currentStream, updateCurrentStream } from '$lib/stores.js';
+    import { currentStream, updateCurrentStream } from '$lib/stores.svelte.js';
 
     let { data } = $props();
 

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { tagList } from '$lib/stores.js';
+    import { tagList } from '$lib/stores.svelte.js';
 
     let { original = $bindable() } = $props();
 

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

@@ -24,7 +24,7 @@
         currentStream,
         getSongAtTime,
         updateCurrentSong
-    } from '$lib/stores.js';
+    } from '$lib/stores.svelte.js';
 
     interface Props {
         src: any;

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

@@ -1,5 +1,5 @@
 <script>
-    import { currentStream, currentSongIndex } from '$lib/stores.js';
+    import { currentStream, currentSongIndex } from '$lib/stores.svelte.js';
     import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
     import { jumpToTrack } from './Player.svelte';
     import { Carta } from 'carta-md';