display cache usage and warn if not enough disk space available

src/routes/streams/Sidebar.svelte

@@ -15,6 +15,7 @@
     let listOpen = $state();
     let displayedStreams = $derived.by(streamsToDisplay);
     let remainingTags = $derived.by(getRemainingTags);
+    let cacheUsage = $derived(streamCache.usage.bytes);
 
     $effect(() => {
         if (displayedStreams.length == 1) {
@@ -68,11 +69,12 @@
     {#each ctx.streams as stream}
         {@const favorited = favoritedStreams.has(stream.id)}
         {@const isCached = streamCache.cached.has(stream.id)}
+        {@const isPartial = streamCache.partials.has(stream.id)}
         {@const current = ctx.current?.id === stream.id}
         <li
             hidden={!displayedStreams.includes(stream) ||
                 (favoritesOnly && !favorited) ||
-                (cachedOnly && !isCached)}
+                (cachedOnly && !(isCached || isPartial))}
             class="stream-item {current ? 'current-stream' : ''}"
             id="stream-{stream.id}"
         >
@@ -131,6 +133,18 @@
     {/each}
 </ul>
 
+{#if cachedOnly && (streamCache.cached.size || streamCache.partials.size)}
+    <p class="cache-usage">
+        {#if cacheUsage !== undefined}
+            {cacheUsage > 1_000_000_000
+                ? (cacheUsage / 1_000_000_000).toFixed(1) + ' GB'
+                : Math.round(cacheUsage / 1_000_000) + ' MB'} of cached streams
+        {:else}
+            Calculating…
+        {/if}
+    </p>
+{/if}
+
 <style>
     .stream-list {
         list-style-type: none;
@@ -192,6 +206,13 @@
         margin-bottom: 1px;
     }
 
+    .cache-usage {
+        margin: 0;
+        padding: 4px 5px;
+        font-family: Tahoma;
+        font-size: smaller;
+    }
+
     .material-icons {
         margin-bottom: 0px;
         color: black;