refactor(web): Modal component; admin + discover modals migrated (W2)

web/src/routes/admin/integrations/+page.svelte

@@ -20,6 +20,7 @@
   } from '$lib/api/admin';
   import { qk } from '$lib/api/queries';
   import { errCode } from '$lib/api/errors';
+  import Modal from '$lib/components/Modal.svelte';
   import type { LidarrConfig, LidarrTestResult } from '$lib/api/types';
 
   // Lidarr connection panel. The "saved api key" is masked as "***" on GET —
@@ -617,60 +618,41 @@
   </section>
 </div>
 
-{#if modalOpen}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class="fixed inset-0 z-50 flex items-center justify-center"
-    style="background: rgba(0,0,0,0.5);"
-    onclick={cancelDisconnect}
-  >
-    <div
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="disconnect-title"
-      class="w-full max-w-md rounded-xl border border-border bg-surface p-5 shadow-lg"
-      onclick={(e) => e.stopPropagation()}
-      tabindex="-1"
+<Modal
+  title="Disconnect Lidarr?"
+  open={modalOpen}
+  onClose={cancelDisconnect}
+>
+  <p class="-mt-2 text-text-secondary">
+    This clears the saved configuration. Type
+    <span class="font-mono text-text-primary">DISCONNECT</span> to remove the
+    Lidarr connection.
+  </p>
+  <input
+    type="text"
+    bind:value={disconnectInput}
+    placeholder="DISCONNECT"
+    aria-label="Type DISCONNECT to confirm"
+    class="mt-3 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+  />
+  {#if disconnectError}
+    <p class="mt-2 text-sm text-error">Disconnect failed — {disconnectError}</p>
+  {/if}
+  <div class="mt-5 flex justify-end gap-2">
+    <button
+      type="button"
+      onclick={cancelDisconnect}
+      class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
     >
-      <h3
-        id="disconnect-title"
-        class="font-display text-lg font-medium text-text-primary"
-      >
-        Disconnect Lidarr?
-      </h3>
-      <p class="mt-2 text-text-secondary">
-        This clears the saved configuration. Type
-        <span class="font-mono text-text-primary">DISCONNECT</span> to remove the
-        Lidarr connection.
-      </p>
-      <input
-        type="text"
-        bind:value={disconnectInput}
-        placeholder="DISCONNECT"
-        aria-label="Type DISCONNECT to confirm"
-        class="mt-3 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
-      />
-      {#if disconnectError}
-        <p class="mt-2 text-sm text-error">Disconnect failed — {disconnectError}</p>
-      {/if}
-      <div class="mt-5 flex justify-end gap-2">
-        <button
-          type="button"
-          onclick={cancelDisconnect}
-          class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
-        >
-          Cancel
-        </button>
-        <button
-          type="button"
-          onclick={onConfirmDisconnect}
-          disabled={!canDisconnect}
-          class="rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg disabled:opacity-50"
-        >
-          Disconnect
-        </button>
-      </div>
-    </div>
+      Cancel
+    </button>
+    <button
+      type="button"
+      onclick={onConfirmDisconnect}
+      disabled={!canDisconnect}
+      class="rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg disabled:opacity-50"
+    >
+      Disconnect
+    </button>
   </div>
-{/if}
+</Modal>