Major improvements to how connections are managed, also interfaces, interfaces EVERYWHERE

src/routes/settings/connections/+page.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-    import { enhance } from '$app/forms'
     import { fly } from 'svelte/transition'
     import Services from '$lib/services.json'
     import JellyfinAuthBox from './jellyfinAuthBox.svelte'
     import { newestAlert } from '$lib/stores.js'
-    import IconButton from '$lib/components/util/iconButton.svelte'
-    import Toggle from '$lib/components/util/toggle.svelte'
     import type { PageServerData } from './$types.js'
     import type { SubmitFunction } from '@sveltejs/kit'
     import { getDeviceUUID } from '$lib/utils'
-    import DeleteConnectionModal from './deleteConnectionModal.svelte'
+    import { SvelteComponent, type ComponentType } from 'svelte'
+    import ConnectionProfile from './connectionProfile.svelte'
 
     export let data: PageServerData
     let connections = data.userConnections
@@ -24,7 +22,7 @@
                     return cancel()
                 }
                 try {
-                    new URL(serverUrl.toString())
+                    formData.set('serverUrl', new URL(serverUrl.toString()).origin)
                 } catch {
                     $newestAlert = ['caution', 'Server URL is invalid']
                     return cancel()
@@ -48,6 +46,7 @@
                         const newConnection: Connection = result.data.newConnection
                         connections = [newConnection, ...connections]
 
+                        newConnectionModal = null
                         return ($newestAlert = ['success', `Added ${Services[newConnection.service.type].displayName}`])
                     } else if (result.data?.deletedConnectionId) {
                         const id = result.data.deletedConnectionId
@@ -63,74 +62,31 @@
         }
     }
 
-    const openModal = (type: 'jellyfin' | 'delete', connection?: Connection) => {
-        switch (type) {
-            case 'jellyfin':
-                const jellyfinModal = new JellyfinAuthBox({
-                    target: modalForm
-                })
-
-                jellyfinModal.$on('close', () => jellyfinModal.$destroy())
-            case 'delete':
-                if (!connection) throw new Error('Connection required for delete modal')
-                const deleteConnectionModal = new DeleteConnectionModal({
-                    target: modalForm,
-                    props: { connection }
-                })
-        }
-    }
-
-    let modalForm: HTMLFormElement
+    let newConnectionModal: ComponentType<SvelteComponent<{ submitFunction: SubmitFunction }>> | null = null
 </script>
 
 <main>
     <section class="mb-8 rounded-lg px-4" style="background-color: rgba(82, 82, 82, 0.25);">
         <h1 class="py-2 text-xl">Add Connection</h1>
         <div class="flex flex-wrap gap-2 pb-4">
-            <button class="h-14 rounded-md add-connection-button" on:click={() => modalForm}>
+            <button class="add-connection-button h-14 rounded-md" on:click={() => (newConnectionModal = JellyfinAuthBox)}>
                 <img src={Services.jellyfin.icon} alt="{Services.jellyfin.displayName} icon" class="aspect-square h-full p-2" />
             </button>
-            <button class="h-14 rounded-md add-connection-button">
+            <button class="add-connection-button h-14 rounded-md">
                 <img src={Services['youtube-music'].icon} alt="{Services['youtube-music'].displayName} icon" class="aspect-square h-full p-2" />
             </button>
         </div>
     </section>
     <div class="grid gap-8">
         {#each connections as connection}
-            {@const serviceData = Services[connection.service.type]}
-            <section class="overflow-hidden rounded-lg" style="background-color: rgba(82, 82, 82, 0.25);" transition:fly={{ x: 50 }}>
-                <header class="flex h-20 items-center gap-4 p-4">
-                    <img src={serviceData.icon} alt="{serviceData.displayName} icon" class="aspect-square h-full p-1" />
-                    <div>
-                        <div>{connection.service?.username ? connection.service.username : 'Placeholder Account Name'}</div>
-                        <div class="text-sm text-neutral-500">
-                            {serviceData.displayName}
-                            {#if connection.service.type === 'jellyfin' && connection.service?.serverName}
-                                - {connection.service.serverName}
-                            {/if}
-                        </div>
-                    </div>
-                    <div class="ml-auto h-8">
-                        <IconButton>
-                            <i slot="icon" class="fa-solid fa-link-slash" />
-                        </IconButton>
-                    </div>
-                </header>
-                <hr class="mx-2 border-t-2 border-neutral-600" />
-                <div class="p-4 text-sm text-neutral-400">
-                    <div class="grid grid-cols-[3rem_auto] gap-4">
-                        <Toggle on:toggled={(event) => console.log(event.detail.toggled)} />
-                        <span>Enable Connection</span>
-                    </div>
-                </div>
-            </section>
+            <ConnectionProfile {connection} submitFunction={submitCredentials} />
         {/each}
     </div>
-    <form bind:this={modalForm} method="post" use:enhance={submitCredentials} class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"></form>
+    <svelte:component this={newConnectionModal} submitFunction={submitCredentials} on:close={() => (newConnectionModal = null)} />
 </main>
 
 <style>
     .add-connection-button {
         background-image: linear-gradient(to bottom, rgb(30, 30, 30), rgb(10, 10, 10));
     }
-</style>
+</style>