Feature/replace dialog manager

src/hooks.client.ts

@@ -1,5 +1,5 @@
 import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
-import { initializeSignalR } from '$lib/signalr';
+import { initializeSignalR } from '$lib/signalr/index.svelte';
 import { backendMetadata } from '$lib/state/BackendMetadata.svelte';
 import { initializeDarkModeStore } from '$lib/stores/ColorSchemeStore.svelte';
 import { initializeSerialPortsStore } from '$lib/stores/SerialPortsStore';

src/lib/components/ControlModules/ClassicControlModule.svelte

@@ -6,7 +6,7 @@
     ControlIntensityDefault,
     ControlIntensityProps,
   } from '$lib/constants/ControlConstants';
-  import { SignalR_Connection } from '$lib/signalr';
+  import { getConnection } from '$lib/signalr/index.svelte';
   import { ControlType } from '$lib/signalr/models/ControlType';
   import { serializeControlMessages } from '$lib/signalr/serializers/Control';
   import ControlListener from './ControlListener.svelte';
@@ -26,8 +26,9 @@
   let active = $state<ControlType | null>(null);
 
   function ctrl(type: ControlType) {
-    if (!$SignalR_Connection) return;
-    serializeControlMessages($SignalR_Connection, [{ id: shocker.id, type, intensity, duration }]);
+    const conn = getConnection();
+    if (!conn) return;
+    serializeControlMessages(conn, [{ id: shocker.id, type, intensity, duration }]);
   }
 </script>
 

src/lib/components/ControlModules/MapControlModule.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ShockerResponse } from '$lib/api/internal/v1';
   import { ControlDurationDefault, ControlIntensityDefault } from '$lib/constants/ControlConstants';
-  import { SignalR_Connection } from '$lib/signalr';
+  import { getConnection } from '$lib/signalr/index.svelte';
   import type { ControlType } from '$lib/signalr/models/ControlType';
   import { serializeControlMessages } from '$lib/signalr/serializers/Control';
   import { onMount } from 'svelte';
@@ -10,14 +10,15 @@
     shockers: ShockerResponse[];
   }
 
   let { shockers }: Props = $props();
 
   let intensity: number = ControlIntensityDefault;
   let duration: number = ControlDurationDefault;
 
   function ctrl(type: ControlType) {
-    if (!$SignalR_Connection) return;
-    serializeControlMessages($SignalR_Connection, [{ id: '', type, intensity, duration }]);
+    const conn = getConnection();
+    if (!conn) return;
+    serializeControlMessages(conn, [{ id: '', type, intensity, duration }]);
   }
 
   let canvas: HTMLCanvasElement;

src/lib/components/ControlModules/RichControlModule.svelte

@@ -7,7 +7,7 @@
     ControlIntensityDefault,
     ControlIntensityProps,
   } from '$lib/constants/ControlConstants';
-  import { SignalR_Connection } from '$lib/signalr';
+  import { getConnection } from '$lib/signalr/index.svelte';
   import { ControlType } from '$lib/signalr/models/ControlType';
   import { serializeControlMessages } from '$lib/signalr/serializers/Control';
   import ControlListener from './ControlListener.svelte';
@@ -25,8 +25,9 @@
   let active = $state<ControlType | null>(null);
 
   function ctrl(type: ControlType) {
-    if (!$SignalR_Connection) return;
-    serializeControlMessages($SignalR_Connection, [{ id: shocker.id, type, intensity, duration }]);
+    const conn = getConnection();
+    if (!conn) return;
+    serializeControlMessages(conn, [{ id: shocker.id, type, intensity, duration }]);
   }
 </script>
 

src/lib/components/ControlModules/SharedShockerControlModule.svelte

@@ -7,7 +7,7 @@
     ControlIntensityDefault,
     ControlIntensityProps,
   } from '$lib/constants/ControlConstants';
-  import { SignalR_Connection } from '$lib/signalr';
+  import { getConnection } from '$lib/signalr/index.svelte';
   import { ControlType } from '$lib/signalr/models/ControlType';
   import { serializeControlMessages } from '$lib/signalr/serializers/Control';
   import ControlListener from './ControlListener.svelte';
@@ -42,8 +42,9 @@
   const clampedDuration = $derived(Math.min(duration, maxDurationSeconds));
 
   function ctrl(type: ControlType) {
-    if (!$SignalR_Connection) return;
-    serializeControlMessages($SignalR_Connection, [
+    const conn = getConnection();
+    if (!conn) return;
+    serializeControlMessages(conn, [
       {
         id: shocker.id,
         type,

src/lib/components/ControlModules/SimpleControlModule.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ShockerResponse } from '$lib/api/internal/v1';
-  import { SignalR_Connection } from '$lib/signalr';
+  import { getConnection } from '$lib/signalr/index.svelte';
   import { ControlType } from '$lib/signalr/models/ControlType';
   import { serializeControlMessages } from '$lib/signalr/serializers/Control';
   import ControlListener from './ControlListener.svelte';
@@ -37,8 +37,9 @@
         return;
     }
 
-    if (!$SignalR_Connection) return;
-    serializeControlMessages($SignalR_Connection, [{ id: shocker.id, type, intensity, duration }]);
+    const conn = getConnection();
+    if (!conn) return;
+    serializeControlMessages(conn, [{ id: shocker.id, type, intensity, duration }]);
   }
 </script>
 

src/lib/components/dialog-manager/dialog-alert-content.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import type { AlertProps } from './types';
+
+  let { title, desc, buttonText = 'OK', resolve }: AlertProps = $props();
+
+  function handleAcknowledge() {
+    resolve();
+  }
+</script>
+
+<Dialog.Header>
+  <Dialog.Title>{title}</Dialog.Title>
+  {#if desc}
+    <Dialog.Description>{desc}</Dialog.Description>
+  {/if}
+</Dialog.Header>
+<Dialog.Footer>
+  <Button onclick={handleAcknowledge}>{buttonText}</Button>
+</Dialog.Footer>

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

@@ -0,0 +1,45 @@
+<script lang="ts" generics="T">
+  import { LoaderCircle } from '@lucide/svelte';
+  import { Button } from '$lib/components/ui/button';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import type { ConfirmProps } from './types.ts';
+
+  let {
+    title,
+    desc,
+    data,
+    confirmButtonText = 'Confirm',
+    cancelButtonText = 'Cancel',
+    descSnippet,
+    resolve,
+    close,
+  }: ConfirmProps<T> = $props();
+
+  let loading = $state(false);
+
+  function handleConfirm() {
+    loading = true;
+    resolve({ confirmed: true, data: data as T });
+  }
+
+  function handleCancel() {
+    close();
+  }
+</script>
+
+<Dialog.Header>
+  <Dialog.Title>{title}</Dialog.Title>
+  <Dialog.Description>
+    {desc}
+    {#if descSnippet}
+      {@render descSnippet(data as T)}
+    {/if}
+  </Dialog.Description>
+</Dialog.Header>
+<Dialog.Footer>
+  <Button variant="outline" onclick={handleCancel}>{cancelButtonText}</Button>
+  <Button disabled={loading} variant="destructive" onclick={handleConfirm}>
+    {#if loading}<LoaderCircle class="animate-spin" />{/if}
+    {confirmButtonText}
+  </Button>
+</Dialog.Footer>

src/lib/components/dialog-manager/dialog-custom-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" generics="T, R">
+  import type { CustomProps, DialogRenderProps } from './types.ts';
+
+  let { data: initialData, contentSnippet, resolve, close }: CustomProps<T, R> = $props();
+
+  // svelte-ignore state_referenced_locally -- intentionally captures initial value as own reactive copy
+  let data: T = $state(initialData as T);
+
+  const renderProps: DialogRenderProps<T, R> = $derived({
+    data,
+    resolve,
+    close,
+  });
+</script>
+
+{@render contentSnippet(renderProps)}

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import * as Dialog from '$lib/components/ui/dialog';
+  import { getOldestDialog } from './dialog-store.svelte.ts';
+
+  let entry = $derived(getOldestDialog());
+  let dialogId = $derived(entry?.[0]);
+  let ctx = $derived(entry?.[1]);
+
+  let open = $state(true);
+
+  // Reset open when dialog changes
+  $effect(() => {
+    if (dialogId) {
+      open = true;
+    }
+  });
+
+  function handleOpenChange(isOpen: boolean) {
+    if (!isOpen && ctx) {
+      // Dialog was closed (escape, overlay click, etc.) - call close handler
+      (ctx.props as { close?: () => void }).close?.();
+    }
+    open = isOpen;
+  }
+</script>
+
+{#if dialogId && ctx}
+  {#key dialogId}
+    <Dialog.Root bind:open={() => open, handleOpenChange}>
+      <Dialog.Content>
+        <ctx.content {...ctx.props} />
+      </Dialog.Content>
+    </Dialog.Root>
+  {/key}
+{/if}