add select all to indicator button

src/lib/components/Table/Table.svelte

@@ -8,6 +8,7 @@
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import DownloadData from "$lib/components/DownloadData.svelte";
   import { page } from "$app/stores";
+  import toast from "svelte-french-toast";
 
   export let data;
   export let rawData;
@@ -218,6 +219,23 @@
     saveRules();
   }
 
+  async function handleSelectAll() {
+    if (data?.user?.tier === "Pro") {
+      searchQuery = "";
+      ruleOfList = allRows;
+      ruleOfList = [...ruleOfList];
+      checkedItems = new Set(ruleOfList?.map((item) => item.name));
+      allRows = sortIndicatorCheckMarks(allRows);
+      await updateStockScreenerData();
+
+      saveRules();
+    } else {
+      toast.error("Only for Pro Members", {
+        style: "border-radius: 200px; background: #333; color: #fff;",
+      });
+    }
+  }
+
   function handleInput(event) {
     searchQuery = event.target.value?.toLowerCase() || "";
 
@@ -624,7 +642,7 @@
       </DropdownMenu.Group>
       <!-- Reset Selection button -->
       <div
-        class="sticky -bottom-1 bg-[#09090B] z-50 p-2 border-t border-gray-600 w-full"
+        class="sticky -bottom-1 bg-[#09090B] z-50 p-2 border-t border-gray-600 w-full flex justify-between items-center"
       >
         <label
           on:click={handleResetAll}
@@ -632,6 +650,12 @@
         >
           Reset Selection
         </label>
+        <label
+          on:click={handleSelectAll}
+          class="w-full flex justify-end sm:hover:text-white text-gray-300 bg-[#09090B] text-start text-sm cursor-pointer"
+        >
+          Select All
+        </label>
       </div>
     </DropdownMenu.Content>
   </DropdownMenu.Root>

src/routes/watchlist/stocks/+page.svelte

@@ -404,6 +404,23 @@
     saveRules();
   }
 
+  async function handleSelectAll() {
+    if (data?.user?.tier === "Pro") {
+      searchQuery = "";
+      ruleOfList = allRows;
+      ruleOfList = [...ruleOfList];
+      checkedItems = new Set(ruleOfList?.map((item) => item.name));
+      allRows = sortIndicatorCheckMarks(allRows);
+      await updateStockScreenerData();
+
+      saveRules();
+    } else {
+      toast.error("Only for Pro Members", {
+        style: "border-radius: 200px; background: #333; color: #fff;",
+      });
+    }
+  }
+
   function changeWatchList(newWatchList) {
     displayWatchList = newWatchList;
     switchWatchlist = true;
@@ -979,7 +996,7 @@
                       </DropdownMenu.Group>
                       <!-- Reset Selection button -->
                       <div
-                        class="sticky -bottom-1 bg-[#09090B] z-50 p-2 border-t border-gray-600 w-full"
+                        class="sticky -bottom-1 bg-[#09090B] z-50 p-2 border-t border-gray-600 w-full flex justify-between items-center"
                       >
                         <label
                           on:click={handleResetAll}
@@ -987,6 +1004,12 @@
                         >
                           Reset Selection
                         </label>
+                        <label
+                          on:click={handleSelectAll}
+                          class="w-full flex justify-end sm:hover:text-white text-gray-300 bg-[#09090B] text-start text-sm cursor-pointer"
+                        >
+                          Select All
+                        </label>
                       </div>
                     </DropdownMenu.Content>
                   </DropdownMenu.Root>