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

web/src/routes/discover/+page.svelte

@@ -6,6 +6,7 @@
   import DiscoverTabs from '$lib/components/DiscoverTabs.svelte';
   import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
   import SuggestionFeed from '$lib/components/SuggestionFeed.svelte';
+  import Modal from '$lib/components/Modal.svelte';
   import type {
     LidarrRequestKind,
     LidarrSearchResult
@@ -194,46 +195,32 @@
   {/if}
 </div>
 
-{#if modalResult}
-  <!-- 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={cancelModal}
-  >
-    <div
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="track-confirm-title"
-      class="w-full max-w-md rounded-xl border border-border bg-surface p-5 shadow-lg"
-      onclick={(e) => e.stopPropagation()}
-      tabindex="-1"
-    >
-      <h3 id="track-confirm-title" class="font-display text-lg font-medium text-text-primary">
-        Add the album?
-      </h3>
-      <p class="mt-2 text-text-secondary">
-        Requesting <em class="font-medium text-text-primary">{modalResult.name}</em>
-        will add <em class="font-medium text-text-primary">{modalResult.secondary_text}</em>.
-        Continue?
-      </p>
-      <div class="mt-5 flex justify-end gap-2">
-        <button
-          type="button"
-          class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
-          onclick={cancelModal}
-        >
-          Cancel
-        </button>
-        <button
-          type="button"
-          class="rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
-          onclick={confirmModal}
-        >
-          Add the album
-        </button>
-      </div>
+<Modal
+  title="Add the album?"
+  open={modalResult !== null}
+  onClose={cancelModal}
+>
+  {#if modalResult}
+    <p class="-mt-2 text-text-secondary">
+      Requesting <em class="font-medium text-text-primary">{modalResult.name}</em>
+      will add <em class="font-medium text-text-primary">{modalResult.secondary_text}</em>.
+      Continue?
+    </p>
+    <div class="mt-5 flex justify-end gap-2">
+      <button
+        type="button"
+        class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
+        onclick={cancelModal}
+      >
+        Cancel
+      </button>
+      <button
+        type="button"
+        class="rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
+        onclick={confirmModal}
+      >
+        Add the album
+      </button>
     </div>
-  </div>
-{/if}
+  {/if}
+</Modal>