ok

src/routes/streams/Sidebar.svelte

@@ -1,6 +1,13 @@
 <script>
     import { goto } from '$app/navigation';
+    import TagSelect from './TagSelect.svelte';
+
     export let streams;
+    let filteredTags = [];
+    let listOpen;
+
+    $: displayedStreams = streamsToDisplay(filteredTags);
+    $: remainingTags = getRemainingTags(displayedStreams);
 
     function formatSecondsToHms(s) {
         s = Number(s);
@@ -17,14 +24,48 @@
         const formattedDate = date.toISOString().split('T')[0];
         return formattedDate;
     }
+
+    function streamsToDisplay(filteredTags) {
+        const displayedStreams = 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) {
+        let tagCounts = displayedStreams.reduce((tags, stream) => {
+            stream['tags'].forEach((tag) => (tag in tags ? (tags[tag] += 1) : (tags[tag] = 1)));
+            return tags;
+        }, {});
+        return Object.entries(tagCounts)
+            .filter((el) => el[1] != displayedStreams.length)
+            .map((el) => el[0]);
+    }
+
+    function getDisplayedTagsInList(streamTags, remainingTags) {
+        return streamTags.filter((tag) => remainingTags.includes(tag));
+    }
 </script>
 
 <h1>streams</h1>
 
+<TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
+
 <div>
     <ul class="stream-list">
         {#each streams as stream}
-            <li class="stream-item" id="stream-{stream['id']}">
+            <li
+                hidden={!displayedStreams.includes(stream)}
+                class="stream-item"
+                id="stream-{stream['id']}"
+            >
                 <button
                     class="stream-item-button"
                     on:click={() => goto('/streams/' + stream['id'])}
@@ -34,7 +75,10 @@
                     <span class="stream-item-length"
                         >{formatSecondsToHms(stream['length_seconds'])}</span
                     >
-                    <span class="stream-item-data">{JSON.stringify(stream)}</span>
+                    <span class="stream-item-data">title: {stream['title']}</span>
+                    <span class="stream-item-data"
+                        >{getDisplayedTagsInList(stream['tags'], remainingTags)}</span
+                    >
                 </button>
             </li>
         {/each}
@@ -57,6 +101,7 @@
 
     .stream-item-button {
         border-radius: 0;
+        min-width: 100%;
         border: none;
     }
 </style>