refactor(web): ConfirmDialog and dialogController (#9716)

* wrapper

* no more callback

* refactor: wip

* refactor: wip

* refactor: wip

* pr feedback

* fix

* pr feedback

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -20,9 +20,9 @@
     mdiVideo,
   } from '@mdi/js';
   import type { ComponentType } from 'svelte';
-  import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
   import JobTile from './job-tile.svelte';
   import StorageMigrationDescription from './storage-migration-description.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
 
   export let jobs: AllJobStatusResponseDto;
 
@@ -38,25 +38,24 @@
     handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
   }
 
-  let confirmJob: JobName | null = null;
-
   const handleConfirmCommand = async (jobId: JobName, dto: JobCommandDto) => {
     if (dto.force) {
-      confirmJob = jobId;
+      const isConfirmed = await dialogController.show({
+        id: 'confirm-reprocess-all-faces',
+        prompt: 'Are you sure you want to reprocess all faces? This will also clear named people.',
+      });
+
+      if (isConfirmed) {
+        await handleCommand(jobId, { command: JobCommand.Start, force: true });
+        return;
+      }
+
       return;
     }
 
     await handleCommand(jobId, dto);
   };
 
-  const onConfirm = async () => {
-    if (!confirmJob) {
-      return;
-    }
-    await handleCommand(confirmJob, { command: JobCommand.Start, force: true });
-    confirmJob = null;
-  };
-
   $: jobDetails = <Partial<Record<JobName, JobDetails>>>{
     [JobName.ThumbnailGeneration]: {
       icon: mdiFileJpgBox,
@@ -152,15 +151,6 @@
   }
 </script>
 
-{#if confirmJob}
-  <ConfirmDialogue
-    id="reprocess-faces-modal"
-    prompt="Are you sure you want to reprocess all faces? This will also clear named people."
-    {onConfirm}
-    onClose={() => (confirmJob = null)}
-  />
-{/if}
-
 <div class="flex flex-col gap-7">
   {#each jobList as [jobName, { title, subtitle, disabled, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
     {@const { jobCounts, queueStatus } = jobs[jobName]}