upgrade svelte-select to v6

bun.lock

@@ -20,7 +20,7 @@
         "sqids": "0.3.0",
         "svelte": "^5.53.12",
         "svelte-check": "^4.4.5",
-        "svelte-select": "^5.8.3",
+        "svelte-select": "^6",
         "tslib": "^2.8.1",
         "typescript": "^5.9.3",
         "vite": "^8.0.0",
@@ -487,7 +487,7 @@
 
     "svelte-floating-ui": ["svelte-floating-ui@1.5.8", "", { "dependencies": { "@floating-ui/core": "^1.5.0", "@floating-ui/dom": "^1.5.3" } }, "sha512-dVvJhZ2bT+kQDHlE4Lep8t+sgEc0XD96fXLzAi2DDI2bsaegBbClxXVNMma0C2WsG+n9GJSYx292dTvA8CYRtw=="],
 
-    "svelte-select": ["svelte-select@5.8.3", "", { "dependencies": { "svelte-floating-ui": "1.5.8" } }, "sha512-nQsvflWmTCOZjssdrNptzfD1Ok45hHVMTL5IHay5DINk7dfu5Er+8KsVJnZMJdSircqtR0YlT4YkCFlxOUhVPA=="],
+    "svelte-select": ["svelte-select@6.0.0", "", { "dependencies": { "svelte-floating-ui": "1.5.8" }, "peerDependencies": { "svelte": ">=5" } }, "sha512-WJ1UDw0a1Z3I7oVFgaCS7G9D2rCSmYAPpufNEj/DNuk5Oyb2a5dju6F36o0urBVw9bTE3WkM9cZkI0x+Sfo8Bg=="],
 
     "svelte2tsx": ["svelte2tsx@0.7.52", "", { "dependencies": { "dedent-js": "^1.0.1", "scule": "^1.3.0" }, "peerDependencies": { "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0", "typescript": "^4.9.4 || ^5.0.0" } }, "sha512-svdT1FTrCLpvlU62evO5YdJt/kQ7nxgQxII/9BpQUvKr+GJRVdAXNVw8UWOt0fhoe5uWKyU0WsUTMRVAtRbMQg=="],
 

package.json

@@ -30,7 +30,7 @@
         "sqids": "0.3.0",
         "svelte": "^5.53.12",
         "svelte-check": "^4.4.5",
-        "svelte-select": "^5.8.3",
+        "svelte-select": "^6",
         "tslib": "^2.8.1",
         "typescript": "^5.9.3",
         "vite": "^8.0.0"

src/routes/streams/Sidebar.svelte

@@ -12,7 +12,7 @@
     let filteredTags = $state([]);
     let favoritesOnly = $state(false);
     let cachedOnly = $state(false);
-    let listOpen = $state();
+    let listOpen = $state(false);
     let displayedStreams = $derived.by(streamsToDisplay);
     let remainingTags = $derived.by(getRemainingTags);
     let cacheUsage = $derived(streamCache.usage.bytes);

src/routes/streams/TagSelect.svelte

@@ -2,6 +2,9 @@
     import Select from 'svelte-select';
     import { tagList } from '$lib/stores.svelte.ts';
 
+    // type not exported in the lib itself
+    type SelectItem = Record<string, unknown>;
+
     let { checked = $bindable([]), remainingTags = [], listOpen = $bindable() } = $props();
     let items = $state(tagList.map((x) => ({ value: x, label: x })));
     let isChecked = $derived.by(computeIsChecked);
@@ -24,19 +27,28 @@
         });
     }
 
-    function handleChange(e: CustomEvent) {
+    function toggle(tag: string) {
-        if (e.type === 'clear' && Array.isArray(e.detail)) checked = [];
+        checked = checked.includes(tag) ? checked.filter((i) => i != tag) : [...checked, tag];
-        else
-            checked.includes(e.detail.value)
-                ? (checked = checked.filter((i) => i != e.detail.value))
-                : (checked = [...checked, e.detail.value]);
         handleSelectable();
     }
 
-    let itemFilter = function (label: string, filterText: string, option: { value: string }) {
+    function handleSelect(item: SelectItem) {
+        toggle(item.value as string);
+    }
+
+    // clear can either be sent by the clear-all button, which sends the whole array
+    // or by removing a single item, which passes it in isolation
+    function handleClear(removed: unknown) {
+        if (Array.isArray(removed)) {
+            checked = [];
+            handleSelectable();
+        } else toggle((removed as SelectItem).value as string);
+    }
+
+    let itemFilter = function (label: unknown, filterText: string, option: SelectItem) {
         return (
             remainingTags.includes(option['value']) &&
-            label.toLowerCase().includes(filterText.toLowerCase())
+            String(label).toLowerCase().includes(filterText.toLowerCase())
         );
     };
 </script>
@@ -49,19 +61,21 @@
     placeholder="Tag Filter..."
     filterSelectedItems={true}
     closeListOnChange={false}
-    on:select={handleChange}
+    onselect={handleSelect}
-    on:clear={handleChange}
+    onclear={handleClear}
     {itemFilter}
     --max-height="42px"
     listOffset={0}
 >
-    <!-- svelte-select 5.8.3 exposes this as a slot, not a snippet prop -->
+    {#snippet item({ item }: { item: SelectItem })}
-    <div class="item" slot="item" let:item>
+        {@const tag = item.value as string}
-        <label for={item.value}>
+        <div class="item">
-            <input type="checkbox" id={item.value} checked={isChecked[item.value]} />
+            <label for={tag}>
+                <input type="checkbox" id={tag} checked={isChecked[tag]} />
                 {item.label}
             </label>
         </div>
+    {/snippet}
 </Select>
 
 <style>