pause toggle colors

Author: LucHeart

src/lib/components/utils/MultiPauseToggle.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
-  import { Asterisk, Pause, Play } from '@lucide/svelte';
+  import { Asterisk, LoaderCircle, Pause, Play } from '@lucide/svelte';
   import { shockersV1Api } from '$lib/api';
   import type { BooleanLegacyDataResponse } from '$lib/api/internal/v1';
   import { Button } from '$lib/components/ui/button';
   import { toast } from 'svelte-sonner';
-  import LoadingCircle from '../svg/LoadingCircle.svelte';
-  import { onMount } from 'svelte';
-
   interface Props {
     shockers: PauseToggleProps[];
     onPausedChange: (paused: boolean) => void;
@@ -32,7 +29,8 @@
   });
 
 
-  function handleClick() {
+  function handleClick(e: MouseEvent) {
+    e.stopPropagation();
     if(requestInProgress) return;
     requestInProgress = true;
 
@@ -78,9 +76,9 @@
 
 </script>
 
-<Button disabled={requestInProgress} onclick={handleClick}>
+<Button disabled={requestInProgress} onclick={handleClick} class="size-9" variant={pausedBooleans() === 'allTrue' ? 'destructive' : 'default'}>
   {#if requestInProgress}
-    <LoadingCircle />
+    <LoaderCircle class="animate-spin" />
   {:else if pausedBooleans() === "allTrue"}
     <Play />
   {:else if pausedBooleans() === "allFalse"}

src/lib/components/utils/PauseToggle.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Pause, Play } from '@lucide/svelte';
+  import { LoaderCircle, Pause, Play } from '@lucide/svelte';
   import { shockersV1Api } from '$lib/api';
   import type { BooleanLegacyDataResponse } from '$lib/api/internal/v1';
   import { Button } from '$lib/components/ui/button';
@@ -44,9 +44,9 @@
   }
 </script>
 
-<Button onclick={handleClick}>
+<Button onclick={handleClick} disabled={requestInProgress} class="size-9" variant={paused ? 'destructive' : 'default'}>
   {#if requestInProgress}
-    <LoadingCircle />
+    <LoaderCircle class="animate-spin" />
   {:else if paused}
     <Play />
   {:else}

src/routes/(authenticated)/shares/user/UserShareItem.svelte

@@ -336,6 +336,19 @@
       </Tooltip.Content>
     </Tooltip.Root>
   </Table.Cell>
+  <Table.Cell>
+      <MultiPauseToggle
+    shockers={shares.map((share) => ({
+      shockerId: share.id,
+      paused: share.paused,
+      userShareUserId: userShare.id,
+    }))}
+    onPausedChange={(paused) => {
+      shares.forEach((share) => (share.paused = paused)); // Update the local copy of the shares
+      userShare.shares.forEach((share) => (share.paused = paused)); // Update the actual lists shares
+    }}
+  />
+  </Table.Cell>
 </Table.Row>
 
 <style>