Disable checkbox for channels without streams

src/components/ChannelItem.svelte

@@ -65,6 +65,7 @@
   }
 
   $: isSelected = !!$selected.find(c => c.id === channel.id)
+  $: isDisabled = channel.streams === 0
 </script>
 
 {#if $downloadMode}
@@ -72,7 +73,7 @@
     transition:fade={{ duration: 200 }}
     class="w-14 h-14 shrink-0 flex items-center absolute -left-14"
   >
-    <Checkbox selected={isSelected} on:change={onCheckboxChange} />
+    <Checkbox selected={isSelected} disabled={isDisabled} on:change={onCheckboxChange} />
   </div>
 {/if}
 <div

src/components/Checkbox.svelte

@@ -5,6 +5,7 @@
 
   export let selected = false
   export let indeterminate = false
+  export let disabled = false
 
   function toggle(state) {
     dispatch('change', { state })
@@ -39,6 +40,16 @@
       />
     </svg>
   </button>
+{:else if disabled}
+  <button
+    class="w-12 h-12 rounded-full text-gray-200 dark:text-gray-700 transition-colors duration-200 flex items-center justify-center"
+    aria-label="Disabled"
+    {disabled}
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  </button>
 {:else}
   <button
     class="w-12 h-12 rounded-full text-gray-200 hover:text-gray-400 dark:text-gray-700 dark:hover:text-gray-600 transition-colors duration-200 flex items-center justify-center"

src/components/CountryItem.svelte

@@ -22,7 +22,9 @@
     channels.forEach(channel => {
       selected.update(arr => {
         if (event.detail.state) {
-          arr.push(channel)
+          if (channel.streams > 0) {
+            arr.push(channel)
+          }
         } else {
           arr = arr.filter(c => c.id !== channel.id)
         }

src/components/SelectAllButton.svelte

@@ -2,10 +2,12 @@
   import OutlineButton from '~/components/OutlineButton.svelte'
   import { selected, filteredChannels } from '~/store'
 
-  $: isAllSelected = $selected.length === $filteredChannels.length
+  $: hasStreams = $filteredChannels.filter(c => c.streams > 0)
+
+  $: isAllSelected = $selected.length === hasStreams.length
 
   function selectAll() {
-    selected.set($filteredChannels)
+    selected.set(hasStreams)
   }
 
   function deselectAll() {
@@ -14,7 +16,7 @@
 </script>
 
 {#if isAllSelected}
-  <OutlineButton on:click={deselectAll} aria-label="Deselect All ({$selected.length})">
+  <OutlineButton on:click={deselectAll} aria-label="Deselect All">
     <span class="text-gray-500 dark:text-white">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -29,10 +31,10 @@
         />
       </svg>
     </span>
-    <span class="hidden md:inline">Deselect All ({$selected.length})</span>
+    <span class="hidden md:inline">Deselect All</span>
   </OutlineButton>
 {:else}
-  <OutlineButton on:click={selectAll} aria-label="Select All ({$filteredChannels.length})">
+  <OutlineButton on:click={selectAll} aria-label="Select All">
     <span class="text-gray-500 dark:text-white">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -48,6 +50,6 @@
       </svg>
     </span>
 
-    <span class="hidden md:inline">Select All ({$filteredChannels.length})</span>
+    <span class="hidden md:inline">Select All</span>
   </OutlineButton>
 {/if}