fix store reactivity

Author: LucHeart

package.json

@@ -76,7 +76,7 @@
 	"volta": {
 		"node": "24.7.0"
 	},
-	"packageManager": "pnpm@10.5.0",
+	"packageManager": "pnpm@10.15.1",
 	"pnpm": {
 		"onlyBuiltDependencies": [
 			"@tailwindcss/oxide",

pnpm-lock.yaml

@@ -1,19 +1,31 @@
 <script lang="ts" generics="T">
   import Button from '$lib/components/ui/button/button.svelte';
   import * as Dialog from '$lib/components/ui/dialog';
+  import { LoaderCircle } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
 
   interface Props {
     open: boolean;
     data: T;
-    onConfirm: (value: T) => void;
+    onConfirm: (value: T) => Promise<void> | void;
     title: string;
     desc?: string;
     confirmButtonText: string;
     descSnippet?: Snippet<[T]>;
   }
 
   let { open = $bindable(), data, onConfirm, title, desc, confirmButtonText, descSnippet }: Props = $props();
+  let promiseRunning = $state(false);
+  
+  function click() {
+    promiseRunning = true;
+
+    Promise.resolve(onConfirm(data))
+      .finally(() => {
+        open = false;
+        promiseRunning = false;
+      });
+  }
 
 </script>
 
@@ -28,6 +40,6 @@
         {/if}
       </Dialog.Description>
     </Dialog.Header>
-    <Button variant="destructive" onclick={() => onConfirm(data)}>{confirmButtonText}</Button>
+    <Button disabled={promiseRunning} variant="destructive" onclick={click}>{#if promiseRunning}<LoaderCircle class="animate-spin" />{/if}{confirmButtonText}</Button>
   </Dialog.Content>
 </Dialog.Root>

src/lib/components/confirm-dialog/dialog-confirm.svelte

@@ -8,11 +8,12 @@
   let dialogOpen = $state(false);
 
   onMount(()=> {
-    ConfirmDialogStore.subscribe((value) => {
+    const sub = ConfirmDialogStore.subscribe((value) => {
       dialogData = value;
       dialogCounter += 1;
       dialogOpen = true;
     })
+    return () => sub();
   });
 
 </script>

src/lib/components/confirm-dialog/dialog-manager.svelte

@@ -0,0 +1,26 @@
+import { shockerSharesV2Api } from '$lib/api';
+import type { ShareInviteBaseDetails, V2UserShares } from '$lib/api/internal/v2';
+import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+import { writable } from 'svelte/store';
+
+
+export const UserShares = writable<V2UserShares>({ outgoing: [], incoming: [] });
+export const OutgoingOutstandingInvites = writable<ShareInviteBaseDetails[]>([]);
+
+export async function refreshUserShares() {
+    try {
+        UserShares.set(await shockerSharesV2Api.sharesGetSharesByUsers());
+    } catch (error) {
+        handleApiError(error);
+        throw error;
+    }
+}
+
+export async function refreshOutgoingInvites() {
+    try {
+        OutgoingOutstandingInvites.set(await shockerSharesV2Api.sharesGetOutgoingInvitesList());
+    } catch (error) {
+        handleApiError(error);
+        throw error;
+    }
+}

src/lib/stores/UserSharesStore.ts

@@ -9,6 +9,7 @@
   import { Code, User } from '@lucide/svelte';
   import RestrictionsSelector from './restrictions-selector.svelte';
   import UserSelector from './user-selector.svelte';
+  import { refreshOutgoingInvites } from '$lib/stores/UserSharesStore';
 
   let availableShockers = $derived(
     Array.from($OwnHubsStore)
@@ -63,6 +64,7 @@
     if (!o) {
       shockerIds = [];
       restrictions = getDefaultRestrictions();
+      fetchedUser = null;
     }
     open = o;
   }
@@ -86,6 +88,8 @@
       open = false;
     } catch (error) {
       await handleApiError(error);
+    } finally {
+      refreshOutgoingInvites();
     }
   }
 </script>