Update CountryItem.svelte

src/components/CountryItem.svelte

@@ -1,19 +1,52 @@
 <script>
   import ChannelGrid from './ChannelGrid.svelte'
+  import Checkbox from './Checkbox.svelte'
+  import { downloadMode, selected } from '~/store'
+  import _ from 'lodash'
+  import { fade } from 'svelte/transition'
 
   export let country
   export let channels = []
   export let hasQuery
 
+  $: intersect = _.intersectionBy($selected, channels, 'id')
   $: expanded = country.expanded || (channels && channels.length > 0 && hasQuery)
+  $: isSelected = intersect.length === channels.length
+  $: isIndeterminate = intersect.length !== 0 && intersect.length < channels.length
 
   function onExpand() {
     country.expanded = !country.expanded
   }
+
+  function onCheckboxChange(event) {
+    channels.forEach(channel => {
+      selected.update(arr => {
+        if (event.detail.state) {
+          arr.push(channel)
+        } else {
+          arr = arr.filter(c => c.id !== channel.id)
+        }
+
+        return arr
+      })
+    })
+  }
 </script>
 
-<div class="mb-3">
-	<h2 id="accordion-heading-{country.code}">
+<div class="mb-2 md:mb-3" class:pl-14="{$downloadMode}" style="transition: padding-left 100ms">
+  <h2 id="accordion-heading-{country.code}" class="flex relative">
+    {#if $downloadMode}
+    <div
+      transition:fade="{{duration:200}}"
+      class="w-14 h-14 shrink-0 flex items-center absolute -left-14"
+    >
+      <Checkbox
+        selected="{isSelected}"
+        indeterminate="{isIndeterminate}"
+        on:change="{onCheckboxChange}"
+      />
+    </div>
+    {/if}
     <button
       on:click="{onExpand}"
       type="button"
@@ -41,7 +74,11 @@
     </button>
   </h2>
   {#if expanded}
-	<div id="accordion-body-{country.code}" aria-labelledby="accordion-heading-{country.code}">
+  <div
+    class="relative"
+    id="accordion-body-{country.code}"
+    aria-labelledby="accordion-heading-{country.code}"
+  >
     <div
       class="border border-gray-200 dark:border-gray-700 dark:bg-gray-900 rounded-b-md overflow-hidden"
     >