add types

src/routes/streams/Sidebar.svelte

@@ -2,10 +2,11 @@
     import { untrack } from 'svelte';
     import { goto } from '$app/navigation';
     import { currentStream, favoritedStreams } from '$lib/stores.svelte.js';
+    import type { StreamSummary } from '$lib/types';
     import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
     import TagSelect from './TagSelect.svelte';
 
-    let { streams } = $props();
+    let { streams }: { streams: StreamSummary[] } = $props();
     let filteredTags = $state([]);
     let favoritesOnly = $state(false);
     let listOpen = $state();
@@ -21,13 +22,13 @@
     function streamsToDisplay() {
         return streams.filter(
             (stream) =>
-                !('tags' in stream) || filteredTags.every((tag) => stream['tags'].includes(tag))
+                !('tags' in stream) || filteredTags.every((tag) => stream.tags.includes(tag))
         );
     }
 
     function getRemainingTags() {
-        let tagCounts = displayedStreams.reduce((tags, stream) => {
-            stream['tags'].forEach((tag) => (tag in tags ? (tags[tag] += 1) : (tags[tag] = 1)));
+        let tagCounts = displayedStreams.reduce((tags: Record<string, number>, stream) => {
+            stream.tags.forEach((tag) => (tags[tag] ? (tags[tag] += 1) : (tags[tag] = 1)));
             return tags;
         }, {});
         return Object.entries(tagCounts)
@@ -35,14 +36,14 @@
             .map((el) => el[0]);
     }
 
-    function getDisplayedTagsInList(streamTags, remainingTags) {
+    function getDisplayedTagsInList(streamTags: string[], remainingTags: string[]) {
         return streamTags.filter((tag) => remainingTags.includes(tag));
     }
 
-    function updateFavorites(stream) {
-        favoritedStreams.has(stream['id'])
-            ? favoritedStreams.delete(stream['id'])
-            : favoritedStreams.add(stream['id']);
+    function updateFavorites(stream: StreamSummary) {
+        favoritedStreams.has(stream.id)
+            ? favoritedStreams.delete(stream.id)
+            : favoritedStreams.add(stream.id);
     }
 </script>
 
@@ -56,28 +57,26 @@
 
 <ul class="stream-list">
     {#each streams as stream}
-        {@const favorited = favoritedStreams.has(stream['id'])}
-        {@const current = $currentStream['id'] === stream['id']}
+        {@const favorited = favoritedStreams.has(stream.id)}
+        {@const current = $currentStream?.id === stream.id}
         <li
             hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
             class="stream-item {current ? 'current-stream' : ''}"
-            id="stream-{stream['id']}"
+            id="stream-{stream.id}"
         >
-            <button class="stream-item-button" onclick={() => goto('/streams/' + stream['id'])}>
+            <button class="stream-item-button" onclick={() => goto('/streams/' + stream.id)}>
                 <span class="stream-item-id">
                     ID:
-                    {shorthandCode(stream['id'])}</span
+                    {shorthandCode(stream.id)}</span
                 >
 
-                <span class="stream-item-date">{formatDate(stream['stream_date'])}</span>
+                <span class="stream-item-date">{formatDate(stream.stream_date)}</span>
 
-                <span class="stream-item-length"
-                    >{formatSecondsToHms(stream['length_seconds'])}</span
-                >
+                <span class="stream-item-length">{formatSecondsToHms(stream.length_seconds)}</span>
 
                 <p class="stream-item-tags" hidden={!remainingTags.length}>
                     Tags: <span hidden={!filteredTags.length}>[...] </span>{getDisplayedTagsInList(
-                        stream['tags'],
+                        stream.tags,
                         remainingTags
                     ).join(', ')}
                 </p>