Move config form to modal

It's pretty annoying to have to scroll past all the old recordings to
be able to set the config. Since logs we already have figured out how to
create modals, so let's reuse that code.

daemon/web/src/lib/components/ConfigForm.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { get_config, set_config, test_notification, type Config } from '../utils.svelte';
+    import Modal from './Modal.svelte';
 
+    let { shown = $bindable() }: { shown: boolean } = $props();
     let config = $state<Config | null>(null);
 
     let loading = $state(false);
@@ -10,7 +12,6 @@
     let messageType = $state<'success' | 'error' | null>(null);
     let testMessage = $state('');
     let testMessageType = $state<'success' | 'error' | null>(null);
-    let showConfig = $state(false);
 
     async function load_config() {
         try {
@@ -60,30 +61,14 @@
     }
 
     $effect(() => {
-        if (showConfig && !config) {
+        if (shown && !config) {
             load_config();
         }
     });
 </script>
 
-<div class="bg-white rounded-lg shadow-md p-6 m-4">
-    <button
-        class="w-full flex justify-between items-center text-xl font-bold mb-4 text-rayhunter-dark-blue hover:text-rayhunter-blue"
-        onclick={() => (showConfig = !showConfig)}
-    >
-        <span>Configuration</span>
-        <svg
-            class="w-6 h-6 transition-transform {showConfig ? 'rotate-180' : ''}"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-        >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
-            ></path>
-        </svg>
-    </button>
-
-    {#if showConfig}
+<Modal bind:shown title="Configuration">
+    <div class="p-2">
         {#if loading}
             <div class="text-center py-4">Loading config...</div>
         {:else if config}
@@ -438,5 +423,5 @@
                 Failed to load configuration. Please try reloading the page.
             </div>
         {/if}
-    {/if}
-</div>
+    </div>
+</Modal>