more ts switches, use setcontext instead of stores

src/routes/streams/+layout.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
     import Sidebar from './Sidebar.svelte';
     import Footer from './Footer.svelte';
-    let { data, children } = $props();
+    import { setStreamContext, StreamContext } from '$lib/stream-context.svelte.ts';
+
+    // streams are grabbed from the server here, then accessed throughout the rest
+    // of the components through the svelte context api
+    const { data, children } = $props();
+    setStreamContext(new StreamContext(data.streams));
 </script>
 
 <div id="mainContainer">
-    <div id="sidebar" class="panel"><Sidebar streams={data.streams} /></div>
+    <div id="sidebar" class="panel"><Sidebar /></div>
     <div id="footer" class="panel-alt"><Footer /></div>
     <div id="content">{@render children?.()}</div>
 </div>