From 5d68def570e570da22787fcd83dd9d06c7650ede Mon Sep 17 00:00:00 2001
From: Arhey <github@oiya.xyz>
Date: Tue, 7 Mar 2023 03:06:31 +0300
Subject: [PATCH] Create SelectAllButton.svelte

---
 src/components/SelectAllButton.svelte | 65 +++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/components/SelectAllButton.svelte

diff --git a/src/components/SelectAllButton.svelte b/src/components/SelectAllButton.svelte
new file mode 100644
index 000000000..c2305fa33
--- /dev/null
+++ b/src/components/SelectAllButton.svelte
@@ -0,0 +1,65 @@
+<script>
+  import DefaultButton from '~/components/DefaultButton.svelte'
+  import { selected, filteredChannels } from '~/store'
+
+  $: isAllSelected = $selected.length === $filteredChannels.length
+
+  function selectAll() {
+    selected.set($filteredChannels)
+  }
+
+  function deselectAll() {
+    selected.set([])
+  }
+</script>
+
+<div class="w-14 sm:w-44">
+  {#if isAllSelected}
+  <DefaultButton on:click="{deselectAll}" area-label="Deselect All ({$selected.length})">
+    <span class="sm:hidden inline">
+      <svg
+        fill="currentColor"
+        class="w-5 h-5"
+        viewBox="0 0 538 412"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_3_43)">
+          <path
+            d="M18.6667 74.6747H416.947C427.254 74.6747 435.613 66.3153 435.613 56.008V18.6747C435.613 8.36213 427.254 0.00799561 416.947 0.00799561H18.6667C8.35933 0.00799561 0 8.36213 0 18.6747V56.008C0.0937507 66.2788 8.39587 74.5813 18.6667 74.6747ZM18.6667 211.448H166.48C174.688 211.495 182.568 208.255 188.371 202.453L233.34 158.161C237.043 154.656 238.22 149.245 236.309 144.521C234.397 139.798 229.783 136.724 224.689 136.782H18.6757C13.6705 136.776 8.86841 138.792 5.35801 142.365C1.84761 145.943 -0.0794594 150.776 0.00907389 155.786V193.12C0.00907389 203.427 8.36841 211.786 18.6757 211.786L18.6667 211.448ZM252 274.573H18.6667C8.35933 274.573 0 282.933 0 293.24V330.573C0 340.881 8.35933 349.24 18.6667 349.24H194.133C202.409 349.214 210.336 345.917 216.196 340.079L260.316 295.787C263.884 292.219 264.899 286.828 262.863 282.208C260.951 277.609 256.472 274.604 251.493 274.572L252 274.573ZM18.6667 74.6667H416.947C427.254 74.6667 435.613 66.3073 435.613 56V18.6667C435.613 8.35413 427.254 0 416.947 0H18.6667C8.35933 0 0 8.35413 0 18.6667V56C0.0937507 66.2708 8.39587 74.5733 18.6667 74.6667ZM532.68 352.8C536.05 356.003 537.961 360.451 537.961 365.102C537.961 369.758 536.05 374.206 532.68 377.409L504.508 406.087C501.305 409.462 496.857 411.368 492.206 411.368C487.555 411.368 483.107 409.462 479.904 406.087L408.633 334.816L337.362 406.087H337.357C334.154 409.462 329.706 411.368 325.055 411.368C320.404 411.368 315.956 409.462 312.753 406.087L284.581 377.915C281.211 374.712 279.3 370.264 279.3 365.613C279.3 360.962 281.211 356.514 284.581 353.311L355.852 281.696L284.581 210.425C281.211 207.222 279.3 202.774 279.3 198.123C279.3 193.472 281.211 189.024 284.581 185.821L312.753 157.144V157.138C315.956 153.769 320.404 151.857 325.055 151.857C329.706 151.857 334.154 153.769 337.357 157.138L408.461 228.409L479.904 157.138C483.107 153.769 487.555 151.857 492.206 151.857C496.857 151.857 501.305 153.769 504.508 157.138L532.68 185.31C536.05 188.513 537.961 192.961 537.961 197.613C537.961 202.264 536.05 206.711 532.68 209.915L461.41 281.696L532.68 352.8Z"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_3_43">
+            <rect width="537.961" height="411.368" />
+          </clipPath>
+        </defs>
+      </svg>
+    </span>
+    <span class="hidden sm:inline">Deselect All ({$selected.length})</span>
+  </DefaultButton>
+  {:else}
+  <DefaultButton on:click="{selectAll}" area-label="Select All ({$filteredChannels.length})">
+    <span class="sm:hidden inline">
+      <svg
+        fill="currentColor"
+        class="w-5 h-5"
+        viewBox="0 0 543 411"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_1_4)">
+          <path
+            d="M160.199 329.208C151.017 316.344 146.141 300.896 146.281 285.088C146.349 281.833 145.058 278.697 142.719 276.432C140.469 274.052 137.339 272.697 134.063 272.703H18.6667C13.6927 272.744 8.93227 274.76 5.43227 278.302C1.96867 281.838 0.0208 286.588 0 291.536V328.869C0 339.182 8.35933 347.536 18.6667 347.536H149.672C162.063 347.536 166.813 337.692 160.199 329.208ZM18.6788 74.6615L416.959 74.6667C427.266 74.6667 435.626 66.3073 435.626 56V18.6667C435.626 8.35413 427.266 0 416.959 0H18.6788C8.37148 0 0.012146 8.35413 0.012146 18.6667V56C0.553813 65.9375 8.73095 73.74 18.6788 73.8173V74.6615ZM18.6788 211.435H177.852L177.847 211.44C183.988 212.075 190.118 210.174 194.816 206.18C207.04 193.341 223.254 185.029 240.806 182.592C264.046 179.55 287.39 187.373 304.103 203.8C308.176 208.044 309.535 211.268 322.598 211.268H334.988C343.228 211.326 351.139 208.018 356.879 202.107L401.682 156.967C405.223 153.394 406.291 148.05 404.395 143.388C402.416 138.669 397.801 135.597 392.687 135.581H19.3536C14.3744 135.628 9.61399 137.638 6.11399 141.185C2.60879 144.763 0.66093 149.581 0.68693 154.592V191.925C0.681722 201.972 8.62961 210.222 18.6709 210.592L18.6788 211.435ZM537.439 209.404L370.119 376.55L342.291 405.228C339.093 408.545 334.681 410.42 330.072 410.42C325.463 410.42 321.051 408.545 317.853 405.228L210.437 297.812C207.119 294.614 205.245 290.202 205.245 285.593C205.245 280.983 207.119 276.572 210.437 273.374L238.776 245.035C241.969 241.77 246.344 239.926 250.911 239.926C255.474 239.926 259.849 241.77 263.042 245.035L329.391 311.895L485.004 156.282C488.202 152.964 492.614 151.089 497.223 151.089C501.833 151.089 506.244 152.964 509.442 156.282L537.442 184.626C540.812 187.923 542.656 192.47 542.536 197.183C542.562 201.777 540.723 206.183 537.442 209.402L537.439 209.404Z"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_1_4">
+            <rect width="542.541" height="410.42" />
+          </clipPath>
+        </defs>
+      </svg>
+    </span>
+
+    <span class="hidden sm:inline">Select All ({$filteredChannels.length})</span>
+  </DefaultButton>
+  {/if}
+</div>